/*
 * Homepage — homepage.json (PLAN §6.2). Section order: hero, product grid, gift teaser,
 * vineyards/coupons mosaic, newsletter (newsletter.css). Desktop content 1140px (--container-max).
 */
.pv-hero {
    position: relative;
}

.pv-hero__band {
    /* --ryski-raudona-band (not raw --ryski-raudona): AA fix for .pv-hero__body 16px copy,
       see tokens.css comment — --ryski-raudona is 4.0:1 with --neutrali text, fails 4.5:1 AA. */
    background: var(--ryski-raudona-band);
    color: var(--neutrali);
    /* Figma 2134:2267: red band is 712px tall; content vertically centered, big deco right. */
    position: relative;
    display: flex;
    align-items: center;
    min-height: 712px;
    padding-block: var(--space-6);
    overflow: hidden;
}

.pv-hero__band > .container {
    width: 100%;
}

.pv-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-5);
}

.pv-hero__col {
    min-width: 0;
}

/* Text slides share one grid cell (sized to the tallest) and cross-fade */
.pv-hero__text-stack {
    display: grid;
}

.pv-hero__text {
    grid-area: 1 / 1;
    max-width: 462px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .5s ease;
}

.pv-hero__text.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.pv-hero__heading {
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1;
    font-weight: 300;
    letter-spacing: 2.8px;
    text-transform: uppercase;
}

.pv-hero__body {
    margin-top: var(--space-3);
}

.pv-hero__cta {
    margin-top: var(--space-6);
}

/* Figma 2134:2267: the dark-red monogram deco spans 0.567→1.0 of the band width and BLEEDS
   off the right edge. Anchor it to the band's right (not the 1140px container column) at its
   native ~749px so it reaches the band's right viewport edge. */
/* SS monogram: bottom-flush with the band bottom + right-bled to the viewport edge (Figma 2134:2307,
   frame y147→800, x979→1728). Anchored to .pv-hero__band (its positioned parent), above the backdrops. */
.pv-hero__deco {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.pv-hero__deco img {
    display: block;
    width: 749px;
    max-width: none;
    height: auto;
}

/* Full-bleed lifestyle band — Figma 1729×718. The container carries the aspect so the slides
   (absolutely stacked) have a height to fill, and they cross-fade with the paired text slide. */
.pv-hero__photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1729 / 718;
}

.pv-hero__photo-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s ease;
}

/* Parallax budget WITHOUT zoom (2026-07-29). This source is 2000×1333 (aspect 1.5) in a 2.408
   frame, so at `cover` it already renders 1.605× the frame's height and crops the surplus away.
   Growing the LAYER to that full 160% hands the drift a 30%-per-side budget while the photo still
   renders at 1:1 and keeps the comp's full-width framing; the shared `scale` overscan would have
   had to zoom to 1.6 and upscale the smallest source on the site past its natural width, so this
   band opts out of it. `top` re-centres the taller box — top+bottom+height is over-constrained,
   so `bottom` is the declaration that gets dropped, not `top`.
   Scoped to `.pv-fx-on` (added by the controller, and only when motion is allowed): with JS off or
   under reduced motion the layer stays at 100% and the band renders byte-for-byte as before. */
.pv-fx-on .pv-hero__photo-img {
    --pv-parallax-scale: 1;

    top: -30%;
    height: 160%;
}

.pv-hero__photo-img.is-active {
    opacity: 1;
}

/* Bright-red 2-lobe brand-mark accent riding the photo, aligned to the content-left edge */
.pv-hero__accent {
    position: absolute;
    z-index: 2;
    left: max(var(--container-pad), calc((100% - var(--container-max)) / 2));
    top: 13%;
    width: 15.5%;
    max-width: 267px;
    height: auto;
}

.pv-hero__pagination {
    display: flex;
    align-items: center;
    /* Group 4301 (2134:2278): ring ends x312 → dot x316, dot ends x324 → dot x328. */
    gap: 4px;
    margin-top: var(--space-6);
}

/* Every dot paints an 8px disc; the ACTIVE one additionally carries a 26px translucent ring that
   OCCUPIES LAYOUT SPACE. The ring used to be a box-shadow, which paints outside the box and takes
   no space — so it measured 16px across instead of 26 and the 4px gaps were being counted from
   the 8px disc, spreading the row. The disc lives in ::before so the button box is free to BE the
   ring (and so the mobile hit-box override only has to grow that box). */
.pv-hero__dot {
    display: grid;
    place-items: center;
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: width .3s ease, height .3s ease, background-color .3s ease;
}

/* Ellipse 2/3: solid #f0ebe9, not a white wash. */
.pv-hero__dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neutrali-pilka);
}

/* Ellipse 1: 26px white at 20%. Ellipse 4: the disc goes pure white. */
.pv-hero__dot.is-active {
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, .2);
}

.pv-hero__dot.is-active::before {
    background: var(--balta);
}

/* Honour reduced-motion: no cross-fades (the controller also skips autoplay). */
@media (prefers-reduced-motion: reduce) {
    .pv-hero__text,
    .pv-hero__photo-img,
    .pv-hero__dot {
        transition: none;
    }
}

/* Figma 2134:2267: bare white arrow glyph — no enclosing circle. */
.pv-hero__next {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Last dot ends x336, the arrow starts x355 — 19px, of which the row's own gap pays 4. */
    margin-left: 15px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

/* The vector is 24 × 13.41; the width/height attributes can only carry whole pixels. */
.pv-hero__next img {
    width: 24px;
    height: 13.41px;
}

.pv-section {
    padding-block: var(--space-7);
}

.pv-section__heading {
    font-size: clamp(32px, 4.5vw, 56px);
    /* Figma section headings: 56/71.7 and 40/51.2 both = 1.28. The body's 24px line-height
       otherwise crushed the line-box and threw the whole vertical rhythm off. */
    line-height: 1.28;
    letter-spacing: 2.8px;
}

/* Fully-red heading variant — Figma renders some section headings ENTIRELY red (not the
   red-word/dark-rest two-tone used on e.g. the gift-set picker). Whole heading is --ryski-raudona;
   the <em> word still adds bold-italic on top. */
.pv-section__heading--red {
    color: var(--ryski-raudona);
}

.pv-text-red {
    color: var(--ryski-raudona);
}

.pv-text-italic {
    font-style: italic;
}

/* Brand heading motif (Figma 2134:2267): every section heading emphasises one word in
   bold-italic. Authored as <em>/<i> in the copy — style them consistently here. */
.pv-hero__heading em,
.pv-hero__heading i,
.pv-section__heading em,
.pv-section__heading i,
.pv-gift-teaser__heading em,
.pv-gift-teaser__heading i,
.pv-vineyards-coupons__tile h2 em,
.pv-vineyards-coupons__tile h2 i {
    font-style: italic;
    font-weight: 700;
}

.pv-section__cta {
    /* Figma: cards/body bottom → CTA button = 40px (both grid + gift teaser). */
    margin-top: 40px;
    text-align: center;
}

/* Figma 2134:2267: hero photo bottom (1518) → heading box-top (1637) = 119px. The section's
   64px base padding-top isn't enough, so bump this one section. */
.pv-product-grid {
    padding-top: 119px;
    /* 51 (not the 64 base): the gift-teaser heading sits 13px lower than Figma otherwise; the
       mosaic margin-top absorbs the same 13px so the (already-pixel-aligned) mosaic doesn't move. */
    padding-bottom: 51px;
}

.pv-product-grid__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Row gap 40px: the next card's 40px bottle-overhang inset stacks on top → 80px painted gap (Figma). */
    gap: 40px var(--space-4);
    /* heading box-bottom (1708.7) → card-top (1742) = 33px (Figma). */
    margin-top: 33px;
}

/* Homepage teaser cards match Figma exactly: square corners (not the 16px catalog radius). The
   "PLAČIAU APIE VYNĄ" arrow is shown at rest on every variant now (product-card.css). */
.pv-product-grid .pv-product-card__bg {
    border-radius: 0;
}

/* The home teaser card carries NO price row, so its copy sits LOWER on the panel than the catalog
   card's (Figma 2623:5125 Rectangle 36/37: name last-line baseline 114px off the panel bottom, CTA
   cap-top 90px, arrow centre 85px — vs the catalog card's 163/66/61 in Component 21, matched
   separately). Scoped to the home grid so product-card.css's catalog geometry does not move.
   Desktop-only: the ≤768px card is a different anatomy that resets padding-bottom to 0. */
@media (min-width: 769px) {
    .pv-product-grid .pv-product-card__body {
        /* 108 = 114 − the 6px descender+half-leading below the last baseline at 32/35. */
        padding-bottom: 108px;
    }

    .pv-product-grid .pv-product-card__cta {
        /* 73 = 85 − half the 24px CTA line box, which the arrow is centred on. */
        bottom: 73px;
    }
}

/* Featured product-card variant (homepage top-left slot) is styled in product-card.css
   (.pv-product-card--featured) so the catalog featured slot shares the same red/white treatment. */

.pv-gift-teaser {
    text-align: center;
}

.pv-gift-teaser__photo {
    position: relative;
    /* Figma: heading box-bottom (3245.7) → photo (3278) = 32px. */
    margin-top: var(--space-5);
    /* The img reserves its own height, so this never shifts layout — it only means the reserved
       band reads as a deliberate placeholder instead of a white hole while the photo arrives. */
    background: var(--neutrali-pilka);
}

/* Figma "Group 5196" (2623:5189) / catalog "Group 4376": the crate photo has SQUARE corners —
   the 16px radius was ours, not the design's (Design-QA y≈3364 / y≈4217). */
.pv-gift-teaser__photo img:first-child {
    width: 100%;
    height: 540px;
    object-fit: cover;
}

.pv-gift-teaser__deco {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 28%;
    max-width: 324px;
    height: auto;
}

.pv-gift-teaser__heading {
    color: var(--ryski-raudona);
    /* Figma "DOVANŲ RINKINIAI" node base weight is 600 (asortimentas is 300 — genuinely different). */
    font-weight: 600;
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1.28;
    letter-spacing: 2.8px;
    text-transform: uppercase;
}

.pv-gift-teaser__body {
    max-width: 751px;
    /* Figma: photo bottom (3818) → body (3858) = 40px. */
    margin: 40px auto 0;
}

/* Full-bleed moody still-life photo band — Figma Rectangle 41 (1728×720), sits between the
   vineyards/coupons split and the newsletter. Mirrors the .pv-hero__photo full-bleed pattern. */
.pv-photo-band {
    position: relative;
    width: 100%;
    aspect-ratio: 1728 / 720;
    overflow: hidden;
}

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

/* Parallax budget WITHOUT zoom — the same trade the hero band makes (see .pv-hero__photo-img).
   The source is 4096×2295 (aspect 1.785) in a 2.4 frame, so at `cover` it naturally renders
   134.4% of the frame's height and the surplus is exactly what the comp itself crops away
   (2134:2268 FILL: 125px per side). Growing the LAYER to that height hands the drift ~123px of
   travel per side while the photo still renders at 1:1 and keeps the comp's full-width framing.
   The shared 1.6 `scale` did the opposite: it zoomed a 2160px copy to 2765px — visibly soft, and
   cropped 37% off the comp's framing sideways, which is what read as "zoomed very hard". */
.pv-fx-on .pv-photo-band__img {
    --pv-parallax-scale: 1;

    top: -17.2%;
    height: 134.4%;
}

.pv-vineyards-coupons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 567px 567px;
    /* Figma: gift-teaser section bottom → mosaic top. 32 = 19 (real gap) + 13 (absorbs the
       product-grid padding-bottom trim that lifts the gift-teaser block to its Figma Y). */
    margin-top: 32px;
}

/* LEGAL-1: with gift coupons hidden the mosaic is only the top row — drop the empty second track. */
.pv-vineyards-coupons--single-row {
    grid-template-rows: 567px;
}

.pv-vineyards-coupons__tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-6);
    /* min-width: 0 — grid item; without this its default min-width:auto lets the placeholder
       <img width="864"> inside --tile--photo force the grid track (and viewport) wider than
       the content area on mobile, causing horizontal page overflow. */
    min-width: 0;
}

/* Top-left tile: flat ryski-raudona with the sodri outline brand monogram (Figma 2431:4468 —
   the monogram SVG is authored at the tile's 864×567 coords, so it fills the tile exactly). */
.pv-vineyards-coupons__tile--photo {
    position: relative;
    overflow: hidden;
    background: var(--ryski-raudona);
}

.pv-vineyards-coupons__motif {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Top-right (vineyards) tile: text column inset 109px from the seam, right padding tracks the
   page's 294px content gutter (Figma 2134:2267 — body x=973 w=461). */
.pv-vineyards-coupons__tile--text {
    background: var(--neutrali-pilka);
    color: var(--juoda);
    padding-left: 109px;
    padding-right: max(var(--container-pad), calc(50vw - var(--container-max) / 2));
}

.pv-vineyards-coupons__tile--text h2,
.pv-vineyards-coupons__tile--text p {
    color: var(--ryski-raudona);
}

.pv-vineyards-coupons__tile--text p {
    color: var(--juoda);
}

/* Bottom-left (coupons) tile: same light panel; text left-aligned to the page's 294px content
   gutter (Figma — body x=294 w=499), so it never hugs the viewport edge. */
.pv-vineyards-coupons__tile--coupons-text {
    background: var(--neutrali-pilka);
    color: var(--juoda);
    padding-left: max(var(--container-pad), calc(50vw - var(--container-max) / 2));
    padding-right: 71px;
}

.pv-vineyards-coupons__tile--coupons-text h2 {
    color: var(--ryski-raudona);
    font-weight: 500; /* Figma "DOVANŲ KUPONAI" node weight 500 (vineyards is 300) */
}

/* Cap the text column so the copy wraps as a tidy ~461px column instead of stretching wide. */
.pv-vineyards-coupons__tile--text h2,
.pv-vineyards-coupons__tile--text p,
.pv-vineyards-coupons__tile--coupons-text h2,
.pv-vineyards-coupons__tile--coupons-text p {
    max-width: 461px;
}

.pv-vineyards-coupons__tile--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sodri-raudona);
}

.pv-vineyards-coupons__tile h2 {
    font-size: 40px;
    font-weight: 300;
    line-height: 1.28; /* Figma 40/51.2 */
    letter-spacing: 2px;
}

.pv-vineyards-coupons__tile p {
    margin-top: var(--space-3);
    font-size: 14px;
    line-height: 24px;
}

.pv-vineyards-coupons__tile .btn {
    margin-top: var(--space-4);
    align-self: flex-start;
}

@media (max-width: 768px) {
    /* The 360 comp tucks the monogram into the photo's corner, not 40px in: 2431:5503 puts the
       two 38x76 halves at x11 and y11 of the 328x155 band (desktop's 40px is its own band's
       number). Percentages so it tracks the photo the way the 28% width already does — at 328
       they resolve to exactly 11/11. */
    .pv-gift-teaser__deco {
        top: 7.1%;
        left: 3.354%;
    }

    .pv-hero__inner,
    .pv-product-grid__grid,
    .pv-vineyards-coupons {
        grid-template-columns: 1fr;
    }

    /* Desktop band is a fixed 712px; on mobile it hugs its content instead. */
    .pv-hero__band {
        min-height: auto;
    }

    .pv-vineyards-coupons {
        grid-template-rows: auto;
    }

    /* Stacked full-width tiles sit on the page's 16px gutter like every other mobile block
       (frame 2623:10388 — heading/body/button ink all start at x=16). */
    .pv-vineyards-coupons__tile--text,
    .pv-vineyards-coupons__tile--coupons-text {
        padding-inline: var(--space-3);
    }

    /* Frame 2623:10388: the SS monogram IS drawn on the mobile hero — 154×134, bottom-flush and
       flush to the right viewport edge (measured ink bbox 308×269 @2x, band bottom y1278). */
    .pv-hero__deco {
        display: block;
    }

    .pv-hero__deco img {
        width: 154px;
    }

    .pv-product-grid__grid {
        margin-top: var(--space-6);
    }

    .pv-gift-teaser__heading {
        margin-top: var(--space-6);
    }

    /* The clamp floor (32px) undershoots every large heading on the 360px frame: measured cap
       heights @2x are 58 for the section/gift headings and 59 for the hero, i.e. ~39/40px.
       Ceiling, not just fidelity: "ASORTIMENTAS" is one unbreakable token, so anything past ~41px
       spills past the 328px content column and widens the whole document. */
    .pv-hero__heading {
        font-size: 40px;
        line-height: 1.05;
        letter-spacing: 1px;
    }

    .pv-section__heading,
    .pv-gift-teaser__heading {
        font-size: 39px;
        line-height: 1.05;
        letter-spacing: 1px;
    }

    /* Pagrindinis 360px (2431:3756): the VISAS ASORTIMENTAS button bottom (2321) sits 64px above
       the DOVANŲ RINKINIAI cap top (2385). Desktop stacked three separate values here — the grid's
       51px tail, the section's 64px padding and the heading's 48px margin — which came to 189.
       The whole gap now lives in ONE place, the gift section's padding; 38.5 + the heading's own
       25.5px of leading above the cap = 64. */
    .pv-product-grid {
        /* Hero photo bottom (880) → "MŪSŲ VYNO ASORTIMENTAS" cap top (944) = 64; the desktop
           119px belongs to the 1729×718 crop, not the 360×240 one. */
        padding-top: 37.9px;
        padding-bottom: 0;
    }

    .pv-gift-teaser {
        padding-top: 38.5px;
    }

    .pv-gift-teaser__heading {
        margin-top: 0;
    }

    /* Frame 2623:10388: lifestyle band is 360×240, not the desktop 1729/718 crop. */
    .pv-hero__photo {
        aspect-ratio: 3 / 2;
    }

    /* Measured on the same band: accent ink x16→86, y51→190 (70×139 at the asset's 267/533). */
    .pv-hero__accent {
        top: 51px;
        width: 70px;
    }

    /* The mobile frame draws these controls at EXACTLY the desktop geometry (2431:4417-4420: ring
       26 @20%, 8px discs, gaps 4/4, arrow 19 later), so nothing about the painted row is
       overridden here — the 24px hit BOXES that used to live in this block spaced the discs 24px
       apart instead of the comp's 12 and replaced the ring with a 16px box-shadow.
       Touch targets are restored WITHOUT touching layout: a transparent ::after overlay grows the
       tappable area past the paint. It stops 2px short on each side, so neighbouring targets tile
       edge-to-edge across the comp's 12px pitch instead of overlapping (an overlap would hand taps
       to the wrong slide). */
    .pv-hero__dot {
        position: relative;
    }

    .pv-hero__dot::after {
        content: "";
        position: absolute;
        inset: -14px -2px;
    }

    .pv-hero__next {
        position: relative;
    }

    .pv-hero__next::after {
        content: "";
        position: absolute;
        /* 44px tall around the 13.4px glyph, and out to the row gap on the left. */
        inset: -15px -10px;
    }

    /* Frame 2623:10388: the crate photo is a 328×155 band, not the desktop 540px crop. */
    .pv-gift-teaser__photo img:first-child {
        height: 155px;
    }

    /* Measured red band on the mobile frame: 360×238 (left-edge colour scan y6132→6607 @2x).
       `contain` keeps the 864×567 motif at its own 1.52 aspect instead of stretching it. */
    .pv-vineyards-coupons__tile--photo {
        min-height: 238px;
    }

    .pv-vineyards-coupons__motif {
        object-fit: contain;
    }

    .pv-vineyards-coupons__tile h2 {
        font-size: 25px;
        line-height: 1.28;
        letter-spacing: 1.2px;
    }
}