/*
 * 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;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.pv-hero__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
}

.pv-hero__dot {
    transition: width .3s ease, background-color .3s ease;
}

/* Figma 2134:2267: active indicator is a small round white dot inside a soft translucent
   halo — not an elongated pill. */
.pv-hero__dot.is-active {
    background: var(--balta);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .3);
}

/* 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;
    margin-left: var(--space-2);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.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 {
    width: 100%;
    aspect-ratio: 1728 / 720;
    overflow: hidden;
}

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

.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) {
    .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;
    }

    /* 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;
    }

    /* 24px hit boxes without touching the painted 8px dot — the dot moves to ::before so the
       button can grow, and the active halo rides the ::before instead of the border box. */
    .pv-hero__pagination {
        gap: 0;
    }

    .pv-hero__dot {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 0;
        background: none;
    }

    .pv-hero__dot::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .4);
    }

    .pv-hero__dot.is-active {
        background: none;
        box-shadow: none;
    }

    .pv-hero__dot.is-active::before {
        background: var(--balta);
        box-shadow: 0 0 0 4px rgba(255, 255, 255, .3);
    }

    .pv-hero__next {
        min-width: 44px;
        min-height: 44px;
        margin-left: 0;
    }

    /* 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;
    }
}