/* =========================================================================
   Barek Ogrodowy — sekcja "O produkcie" ([barek_about])
   --------------------------------------------------------------------
   Layout desktop: 2 kolumny — content (lewa) + media (prawa).
   Media: portretowe zdjęcie 4:5 z sage'owym blokiem offsetowym za nim
   ("framed photo" effect). Mobile: stack — najpierw zdjęcie, potem treść.
   ========================================================================= */

.barek-about {
    padding: var(--barek-section-py) 0;
    background: var(--barek-white);
    color: var(--barek-text);
    font-family: var(--barek-font-body);
}

/* .barek-about__inner — max-width / margin / padding-x w main.css */

.barek-about__layout {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--barek-space-7);
    align-items: center;
}

@media (max-width: 1024px) {
    .barek-about {
        padding: var(--barek-section-py-tablet) 0;
    }
    .barek-about__layout {
        gap: var(--barek-space-6);
    }
}

@media (max-width: 768px) {
    .barek-about {
        padding: var(--barek-section-py-mobile) 0;
    }
    .barek-about__layout {
        grid-template-columns: 1fr;
        gap: var(--barek-space-6);
    }
    /* Na mobile: zdjęcie nad treścią (czytelniejsza hierarchia) */
    .barek-about__media   { order: 1; }
    .barek-about__content { order: 2; }
}

/* ============================================================
   LEWA KOLUMNA — content
   ============================================================ */

.barek-about__eyebrow {
    margin: 0 0 var(--barek-space-2);
    font-size: var(--barek-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    color: var(--barek-orange);
}

.barek-about__heading {
    margin: 0 0 var(--barek-space-4);
    font-family: var(--barek-font-body);
    font-size: var(--barek-text-3xl);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--barek-dark);
}

.barek-about__heading-accent {
    /* font-size: inherit — patrz komentarz w hero.css */
    font-size: inherit;
    color: var(--barek-orange);
}

.barek-about__lead {
    margin: 0 0 var(--barek-space-6);
    font-size: var(--barek-text-base);
    line-height: 1.65;
    color: var(--barek-muted);
}

/* --- Numerowane kroki (Wkop / Schładza / Personalizuj) --- */

.barek-about__steps {
    margin: 0 0 var(--barek-space-6);
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--barek-space-5);
    counter-reset: barek-step;
}

.barek-about__step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--barek-space-4);
    align-items: start;
}

.barek-about__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Faza 2 redesign — przeskalowane proporcjonalnie do mniejszej typografii */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--barek-green-soft);
    color: var(--barek-green);
    font-family: var(--barek-font-body);
    font-size: var(--barek-text-base);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.barek-about__step-body {
    padding-top: 6px; /* visual baseline match z numerkiem */
}

.barek-about__step-title {
    margin: 0 0 var(--barek-space-1);
    font-family: var(--barek-font-body);
    font-size: var(--barek-text-lg);
    font-weight: 700;
    color: var(--barek-dark);
}

.barek-about__step-text {
    margin: 0;
    font-size: var(--barek-text-base);
    line-height: 1.55;
    color: var(--barek-muted);
}

/* --- CTA row --- */

.barek-about__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--barek-space-3);
    align-items: center;
    /* Więcej oddechu między ostatnim numerowanym krokiem a przyciskami CTA */
    margin-top: var(--barek-space-6);
}

.barek-about__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Faza 2 redesign — primary lg = 44 px */
    height: 44px;
    padding: 0 var(--barek-space-5);
    background: var(--barek-orange);
    color: var(--barek-white);
    border-radius: var(--barek-radius-pill);
    font-family: var(--barek-font-body);
    font-size: var(--barek-text-sm);
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--barek-duration) var(--barek-ease),
                transform var(--barek-duration-fast) var(--barek-ease);
}

.barek-about__cta:hover,
.barek-about__cta:focus-visible {
    background: var(--barek-orange-hover);
    transform: translateY(-1px);
    color: var(--barek-white);
}

.barek-about__cta-secondary {
    display: inline-flex;
    align-items: center;
    /* Faza 2 redesign — secondary outline = 40 px */
    height: 40px;
    padding: 0 var(--barek-space-3);
    color: var(--barek-dark);
    text-decoration: none;
    font-size: var(--barek-text-sm);
    font-weight: 600;
    letter-spacing: 0.5px;
    border-bottom: 2px solid transparent;
    transition: border-color var(--barek-duration) var(--barek-ease),
                color var(--barek-duration) var(--barek-ease);
}

.barek-about__cta-secondary:hover,
.barek-about__cta-secondary:focus-visible {
    color: var(--barek-orange);
    border-bottom-color: var(--barek-orange);
}

/* ============================================================
   PRAWA KOLUMNA — media (zdjęcie z sage'ową ramą offsetową)
   ============================================================ */

.barek-about__media {
    display: flex;
    justify-content: center;
}

.barek-about__image-wrap {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 4 / 5;
}

.barek-about__image-frame {
    position: absolute;
    inset: var(--barek-space-5) calc(-1 * var(--barek-space-5)) calc(-1 * var(--barek-space-5)) var(--barek-space-5);
    background: var(--barek-green-soft);
    border-radius: var(--barek-radius-lg);
    z-index: 0;
}

.barek-about__image-placeholder,
.barek-about__image-real {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: var(--barek-radius-lg);
    object-fit: cover;
    display: block;
}

.barek-about__image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--barek-space-2);
    background: var(--barek-cream);
    border: 2px dashed var(--barek-line);
    color: var(--barek-muted);
    text-align: center;
    padding: var(--barek-space-5);
    box-sizing: border-box;
}

.barek-about__image-placeholder-text {
    font-size: var(--barek-text-base);
    font-weight: 600;
    color: var(--barek-dark);
}

.barek-about__image-placeholder-hint {
    font-size: var(--barek-text-xs);
    color: var(--barek-muted);
    letter-spacing: 0.3px;
}

/* Wąskie ekrany — mniej offsetu na ramie żeby się mieściła */
@media (max-width: 540px) {
    .barek-about__image-wrap {
        max-width: 360px;
    }
    .barek-about__image-frame {
        inset: var(--barek-space-3) calc(-1 * var(--barek-space-3)) calc(-1 * var(--barek-space-3)) var(--barek-space-3);
    }
    .barek-about__step-number {
        width: 40px;
        height: 40px;
    }
}