/*
 * About page — Figma "Apie mus v2" (2437:4685). 1728-frame; content container 1140 centred.
 * Hero red band → light breadcrumb strip → full-bleed vineyard band with giant wordmark →
 * four alternating photo/copy rows with a brand-mark deco riding each photo corner.
 */

/* The About hero red band now comes from the shared templates/components/_page_hero.html.twig
   (one .pv-page-hero — same band as the catalog + gift pages, styled in catalog.css), so it can't
   drift from them. Only the About-specific chrome below (breadcrumb strip, photo band, rows) lives
   here. */

/* Breadcrumb strip on the page background between the two bands. Apie mus v2 (2623:7038) pitches
   this tighter than the category pages: band bottom 560 → crumb block 576–592.5 → photo top 608,
   i.e. 16px above and 16px below a 16px-tall crumb row. Page-scoped — the shared band/breadcrumb
   components keep their own rhythm elsewhere. */
.pv-about-crumbs {
    padding-block: 0;
}

.pv-about-crumbs .pv-breadcrumbs ol {
    padding-block: 16px;
}

/* The root crumb's inline-flex anchor otherwise sits on the line-box baseline and adds ~3.4px of
   strut descent under the 16px grape glyph; Figma has the glyph flush with the row top. */
.pv-about-crumbs .pv-breadcrumbs li:first-child a {
    vertical-align: top;
}

/* Full-bleed vineyard band (Figma 2437:4694, 1729×935) with giant brand wordmark overlay. */
.pv-about-band {
    position: relative;
    aspect-ratio: 1729 / 935;
    overflow: hidden;
}

.pv-about-band__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Figma "Rectangle 3076" (2623:7068): 1729×352 linear gradient over the band's top, 180deg from
   --neutrali (#faf8f7, the page background) to the same colour at alpha 0 — the soft transition the
   designer asked for, so the photo never meets the page on a hard line. Height is the comp ratio
   352/935 of the band so it scales with it. */
.pv-about-band__veil {
    position: absolute;
    inset: 0 0 auto;
    height: 37.647%;
    background: linear-gradient(180deg, var(--neutrali) 0%, rgb(250 248 247 / 0) 100%);
}

/* "ITALIŠKO / VYNO NAMAI" — display type (Figma 2437:4724/4725): two stacked lines, weight 300
   uppercase; line 1 upright, line 2 italic (per-run override), the second indented right.
 *
 * DELIBERATE DEVIATION FROM THE COMP (client instruction 2026-07-29, "make whole text fit,
 * Itališko vyno namai"): Figma 2623:7038 bleeds line 2 off-canvas (x=413, width 1962 in a 1728
 * frame) and pins line 1 to x=0. The client overrides that — the whole phrase must stay READABLE,
 * so the block is centred and the type is sized to fit, drift included, instead of bleeding.
 *
 * The size is SOLVED, not guessed. Measured ink widths (Inter 300, uppercase, letter-spacing
 * -0.01em) are a fixed multiple of the font-size: "ITALIŠKO" = 4.2366em, "VYNO NAMAI" = 6.3070em.
 * The block box is therefore B = (0.5 indent + 6.3070) x F = 6.8070F. Centred, each side inset is
 * S = (V - B) / 2. The two lines drift in OPPOSITE directions and hit their outer extremes at the
 * SAME moment (progress -1, band entering from below: line 1 leftmost, line 2 rightmost), so the
 * binding constraint is S - D >= C. With D = 60px of drift each way and C = 30px of target
 * clearance (the acceptance floor is 16px; the spare also absorbs italic ink overhang and a 15px
 * classic scrollbar, where 100vw > clientWidth):
 *     F = (V - 2C - 2D) / 6.8070 = (V - 180) / 6.8070 = 14.69vw - 26.5px
 * capped at the comp's 300px (reached above ~2178px wide, where there is room for it).
 * If the drift distance below ever changes, this coefficient must be re-solved with it. */
.pv-about-band__wordmark {
    position: absolute;
    top: 50%;
    left: 50%;
    /* max-content, not shrink-to-fit: the block is WIDER than half the band, and a shrink-to-fit
       box would be clamped to the available width — the nowrap text would then overflow its own
       box and the -50% centring would be computed off the wrong width. */
    width: max-content;
    transform: translate(-50%, -50%);
    margin: 0;
    color: var(--neutrali);
    font-size: min(calc(14.69vw - 26.5px), 300px);
    font-weight: 300;
    line-height: 0.83;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.pv-about-band__wordmark-line {
    display: block;
}

/* Staggered indent kept (comp: line 2 sits in from line 1). Em-based, so the stagger scales with
   the type and stays part of the solved box width above — 24vw as in the comp is what pushed the
   line off-screen. */
.pv-about-band__wordmark-line--2 {
    margin-left: 0.5em;
    font-style: italic;
}

/* Brand monogram accent (Figma 2437:4686, 264×228) low-right of the band.
   Width is the comp ratio (264/1728 = 15.3vw) capped at its natural 264px. The old clamp() floor
   of 120px did NOT scale with the band — the band's height is viewport-proportional (aspect-ratio
   1729/935), so at 390 a floored 120px monogram was 31% of the viewport on a 211px-tall band and
   rode up into the wordmark, covering the last letter of "NAMAI" now that the wordmark is sized to
   fit on screen. Measured: +30.0px overlap at 390 and +25.2px at 430 with the floor, -28.5px
   (i.e. clear) without it. */
.pv-about-band__deco {
    position: absolute;
    right: 17vw;
    bottom: 0;
    width: min(15.3vw, 264px);
    height: auto;
}

/* Alternating photo/copy rows (Figma 2437:4710–4721). Photo ~half-bleed, copy in a 462 column. */
.pv-about-row {
    display: grid;
    align-items: center;
    gap: clamp(40px, 5.5vw, 96px);
    padding-block: clamp(32px, 4vw, 64px);
}

/* Photo holds the design's fixed 852px track and bleeds to the outer page edge (Figma: rows
   sit at x=0 / x=1728); the copy cell absorbs the remaining width and pads its 462 block in. */
.pv-about-row--photo-left {
    grid-template-columns: minmax(0, 852px) minmax(0, 1fr);
}

.pv-about-row--photo-right {
    grid-template-columns: minmax(0, 1fr) minmax(0, 852px);
}

.pv-about-row__media {
    position: relative;
}

.pv-about-row--photo-right .pv-about-row__media {
    order: 2;
}

/* No hardcoded aspect-ratio: the four comp rectangles are NOT all the same shape — Figma 2437:4685
   has row 1 at 852x763 (Rectangle 3077), row 2 852x739 (Rectangle 16), row 3 850x739 (Rectangle
   3051, bleeding 1px off the left edge) and row 4 852x739 (Rectangle 3050). Each exported asset is
   exactly its comp rectangle at 2x, so the image's own ratio IS the comp ratio; a single forced
   852/739 cropped 24px off the bottom of row 1's photo. The width/height attributes on every <img>
   still reserve the box before load, so nothing shifts. */
.pv-about-row__media img:first-child {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Brand-mark deco (Figma 2437:4814 etc, 170×147, --da3d40 + --f0ebe9) straddling the photo's
   bottom edge (mark centre on the edge → -12% of the ~739px photo). */
.pv-about-row__mark {
    position: absolute;
    bottom: -12%;
    width: clamp(96px, 9.8vw, 170px);
    height: auto;
}

/* Horizontal: Figma rides the mark near the photo centre, leaning to the page-outer side —
   left photos at left-edge 34.5% of the photo, right photos at 45.5% (not the outer corner). */
.pv-about-row--photo-left .pv-about-row__mark {
    left: 34.5%;
}

.pv-about-row--photo-right .pv-about-row__mark {
    left: 45.5%;
}

.pv-about-row__copy {
    /* Figma: 462px text block flush to the container edge (grid `gap` gives the ~121px to the
       photo). The previous side padding shrank the real text width to ~351px, forcing extra wraps. */
    max-width: 462px;
}

/* Copy column hugs the container edge on the side opposite the (edge-bleeding) photo. Uses MARGIN
   (not padding) so the 462px stays the real text width and the block shifts in off the viewport
   edge to the 294px content gutter. */
.pv-about-row--photo-left .pv-about-row__copy {
    justify-self: end;
    margin-right: max(var(--container-pad), calc(50vw - var(--container-max) / 2));
}

.pv-about-row--photo-right .pv-about-row__copy {
    justify-self: start;
    margin-left: max(var(--container-pad), calc(50vw - var(--container-max) / 2));
}

.pv-about-row__title {
    margin: 0 0 var(--space-5);
    color: var(--ryski-raudona);
    font-size: 40px;
    font-weight: 300;
    line-height: 1.28; /* Figma 40/51.2 */
    letter-spacing: 2px; /* Figma 2437:4685: all four row titles carry letterSpacing 2.0 */
}

/* Emphasis run: bold-italic (Figma per-run override weight 500 + italic). */
.pv-about-row__title em {
    font-weight: 500;
    font-style: italic;
}

.pv-about-row__copy p {
    margin: 0;
    color: var(--juoda);
    font-size: 16px;
    line-height: 1.55;
}

/* Figma copy is multi-paragraph (blank line between runs); space stacked paragraphs. */
.pv-about-row__copy p + p {
    margin-top: 1.55em;
}

/* --- Responsive: stack rows, shrink hero deco. --- */
/* No wordmark font-size override here: the solved formula above is continuous and fits at EVERY
   width (it is what keeps the phrase whole at 390 too). A breakpoint override would re-introduce
   the overflow it was meant to fix — the old clamp(64px, 13vw, 120px) floor alone put "VYNO NAMAI"
   403px wide in a 390px viewport. */
@media (max-width: 900px) {
    .pv-about-row {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .pv-about-row--photo-right .pv-about-row__media,
    .pv-about-row--photo-right .pv-about-row__copy,
    .pv-about-row__media,
    .pv-about-row__copy {
        order: 0;
        justify-self: stretch;
        max-width: none;
    }

    .pv-about-row__copy {
        max-width: 560px;
    }

    /* Stacked, the desktop one-sided margin (which pulled the copy in from the 1140px container
       edge) leaves the opposite side flush with the viewport — restore the site gutter on both. */
    .pv-about-row--photo-left .pv-about-row__copy,
    .pv-about-row--photo-right .pv-about-row__copy {
        margin-inline: var(--container-pad);
    }

    .pv-about-row__mark {
        width: 84px;
    }
}