/*
 * Mūsų vynuogynai — Figma frame 2390:7957. 1140px content container (.container), two
 * full-bleed photo bands + a full-bleed 7×2 gallery. Region headings 40px/500 red (Aktiv
 * Grotesk in the design → Inter substitute). Full-bleed via 100vw break-out on band/gallery.
 */

/* No bottom padding: the comp runs the gallery's last row FLUSH into the footer band (the
   full-frame export shows zero light rows between them). The 64px that was here is exactly the
   stray strip the client flagged. */
.pv-vineyards {
    padding-bottom: 0;
}

/* Page heading — Figma 2390:8005: 32px/700 italic, red, letter-spacing 1.6px. */
.pv-vineyards__heading {
    margin-top: var(--space-4);
    color: var(--ryski-raudona);
    font-size: 32px;
    line-height: 41px;
    letter-spacing: 1.6px;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
}

/* Hero video — poster 1137×477 + centered play button (no caption in the design).
   Client note #9 wanted a bigger presentation: the hero breaks out of the 1140px copy column to
   1440px (still capped by the viewport), everything below keeps the container width. */
.pv-vineyards__hero {
    position: relative;
    margin-top: var(--space-4);
    width: min(100vw, 1440px);
    margin-left: 50%;
    transform: translateX(-50%);
    /* Figma hero is a square-cornered rectangle (no rounding). */
    overflow: hidden;
}

.pv-vineyards__hero-poster,
.pv-vineyards__hero-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1137 / 477;
    object-fit: cover;
}

/* YouTube variant (admin setting vineyards.video): the band keeps the poster's 1137:477 shape and
   cover-crops the 16:9 player — at that ratio a full-width iframe always overflows vertically, so
   the crop is symmetric top/bottom. Poster shows via background until the player paints. */
.pv-vineyards__hero-embed {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1137 / 477;
    background-size: cover;
    background-position: center;
}

.pv-vineyards__hero-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    aspect-ratio: 16 / 9;
    transform: translate(-50%, -50%);
    border: 0;
}

/* The autoplaying film is decoration, so it stays chrome-less until the visitor reaches for it.
   YouTube paints its own overlay — the title chip, and a prev/pause/next trio, because `loop` is
   implemented as a one-video playlist and a playlist gets skip buttons — whenever the player sees
   the pointer. We cannot style inside a cross-origin iframe, but we can decide whether it hears
   the mouse at all: deaf until the band is hovered, so the controls appear when the visitor goes
   for them and YouTube fades them out by itself once the pointer leaves. Hovering still works
   because the pointer then lands on the wrapper, which is the element carrying :hover.

   The reduced-motion variant below is a genuine click-to-play player and must stay interactive. */
.pv-vineyards__hero-embed:not(.pv-vineyards__hero-embed--static) .pv-vineyards__hero-iframe {
    pointer-events: none;
}

.pv-vineyards__hero-embed:not(.pv-vineyards__hero-embed--static):hover .pv-vineyards__hero-iframe {
    pointer-events: auto;
}

/* Reduced motion: click-to-play with YouTube's own controls — un-cropped 16:9 so they're visible. */
.pv-vineyards__hero-embed--static {
    aspect-ratio: 16 / 9;
}

.pv-vineyards__hero-embed--static .pv-vineyards__hero-iframe {
    position: static;
    width: 100%;
    height: 100%;
    transform: none;
}

.pv-vineyards__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.pv-vineyards__play img {
    display: block;
    width: 64px;
    height: 64px;
}

/* Full-bleed photo bands (Figma 1729×748) — break out of the container to viewport width. */
.pv-vineyards__band {
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    /* Figma: 120px between every full-bleed section (hero/band/split/gallery). */
    margin-block: 120px;
}

.pv-vineyards__band img:first-child {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1729 / 748;
    object-fit: cover;
}

/* White brand-mark deco floated over the band (Figma 496×433). */
.pv-vineyards__band-deco {
    position: absolute;
    /* Figma: monogram sits low in the band — ~40px above the band bottom (not vertically centred). */
    bottom: 5.3%;
    width: clamp(240px, 29vw, 496px);
    height: auto;
}

.pv-vineyards__band-deco--right {
    /* Figma band 1: deco left edge at 54% of a 1728 frame → ~17% from the right. */
    right: 17%;
}

.pv-vineyards__band-deco--left {
    /* Figma band 2: deco left edge at ~17% of a 1728 frame. */
    left: 17%;
}

/* Region split — one photo edge-bleeds, copy sits in the 1140px column on the other side.
 *
 * The photo track is the FLEXIBLE one (1fr) and the gutter is the fixed comp value; the copy holds
 * its 462px flush to the container edge. Sizing the photo first instead (the old
 * `minmax(0, 850px)` + `justify-content: end`) only bled at widths where the tracks happened to
 * overflow: at 1728 the 850+462+48 pack left the Prosecco photo parked at x=74 with a 48px gutter
 * (Figma: photo -1→849, gutter 124, copy 973→1434) and the Raudonojo photo ending at 1656 instead
 * of the frame edge. With 1fr the bleed is structural — the photo is always "everything left over
 * after the copy and the gutter", at 1728, at 1440 and in between. */
.pv-vineyards__split {
    display: grid;
    align-items: center;
    gap: var(--space-6);
    /* Figma: 120px between every full-bleed section. */
    margin-block: 120px;
}

/* Figma 2623:7111 @1728 — photo -1→849 (w850), gutter 124, copy 973→1434 (the copy block is 462
   here, so its left edge lands at 972 and the photo at 0→848; the 1px is the comp's own off-canvas
   bleed). Below 1440 the gutter scales with the viewport instead of eating the photo: 124/1440 =
   8.62vw, so min() holds the comp value at 1440 AND 1728 and only shrinks under it. */
.pv-vineyards__split--photo-left {
    grid-template-columns: minmax(0, 1fr) minmax(0, 462px);
    gap: min(124px, 8.62vw);
    padding-right: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
}

/* Figma 2623:7111 @1728 — copy 293→756, gutter 120, photo 876→1728 (w852). 120/1440 = 8.34vw. */
.pv-vineyards__split--photo-right {
    grid-template-columns: minmax(0, 462px) minmax(0, 1fr);
    gap: min(120px, 8.34vw);
    padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
}

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

.pv-vineyards__split--photo-left .pv-vineyards__split-photo {
    aspect-ratio: 850 / 872;
}

.pv-vineyards__split--photo-right .pv-vineyards__split-photo {
    aspect-ratio: 852 / 913;
}

.pv-vineyards__split-text p {
    margin-top: var(--space-4);
    color: var(--juoda);
    font-size: 16px;
    line-height: 24px;
}

/* Region heading — Figma 2390:7999/8000: 40px red; first line bold-italic, second word
   upright light on its own line. */
.pv-vineyards__region {
    color: var(--ryski-raudona);
    font-size: 40px;
    line-height: 51px;
    letter-spacing: 2px;
    font-weight: 500;
    font-style: italic;
    text-transform: uppercase;
}

.pv-vineyards__region span {
    display: block;
    font-weight: 300;
    font-style: normal;
}

/* Gallery heading reuses .pv-vineyards__region but its copy is a single client-open placeholder
   (no inline emphasis markup yet) — keep it upright until the two-tone string lands. */
.pv-vineyards__gallery-heading {
    margin-block: var(--space-6) var(--space-5);
    font-style: normal;
}

/* Full-bleed 7-column × 2-row photo grid (Figma Group 5157, tiles ~247×206, no gaps). */
.pv-vineyards__gallery {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* Flush: the comp butts the tiles edge to edge — a light-seam scan across its gallery band
       finds zero gap columns/rows (the earlier 2px gutter was ours, not the design's). */
    gap: 0;
    /* Contains the hairline overlap the tiles below carry, so the extra fraction of a pixel on
       the last column can never widen the page into a horizontal scrollbar. */
    overflow: hidden;
}

/* Each cell is a button that opens the lightbox — reset the native button chrome. */
.pv-vineyards__gallery-item {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 247 / 206;
    /* 7 columns across 100vw put every tile edge on a fraction of a pixel (205.703, 411.422,
       617.141 …). Two neighbours then round their painted edges independently, and when one of
       them repaints — which is exactly what the hover zoom triggers — the rounding can leave a
       sub-pixel hole between them that the page background shines through as a white hairline.
       Blowing each tile up by 0.4% makes neighbours overlap by ~0.4px instead of merely touching,
       so there is no gap left for the background to appear in. It is a transform, so it changes
       no layout, and at this size it is far below a visible crop of the photo. */
    transform: scale(1.004);
}

.pv-vineyards__gallery img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

/* The grid is 100vw split into 7 columns, so tile edges land on fractional pixels
   (205.703, 411.422, 617.141 …). Scaling a tile only on ITS own hover made the compositor
   promote that image to its own layer on pointer-enter and drop it again on leave, re-rounding
   those fractional edges each time — which flashed a hairline of page background along the tile
   borders as the cursor swept across the grid. Promoting every tile once, as soon as the pointer
   is anywhere in the gallery, means the sweep itself never changes layerisation. It is scoped to
   :hover on purpose: at rest nothing is promoted, so the resting page still rasterises exactly as
   the design was measured against. */
.pv-vineyards__gallery:hover img,
.pv-vineyards__gallery:focus-within img {
    will-change: transform;
    backface-visibility: hidden;
}

.pv-vineyards__gallery-item:hover img,
.pv-vineyards__gallery-item:focus-visible img {
    transform: scale(1.05);
}

.pv-vineyards__gallery-item:focus-visible {
    outline: 2px solid var(--balta);
    outline-offset: -2px;
}

/* Lightbox overlay (appended to <body> by the lightbox controller) — dimmed backdrop with the
   full-size image centred and a close control top-right. */
.pv-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: rgba(30, 30, 30, 0.9);
}

.pv-lightbox[hidden] {
    display: none;
}

.pv-lightbox__stage {
    display: flex;
}

/* The overlay <img> is built once on connect and only gets a src when a thumbnail is opened (and
   loses it again on close), so between opens it is a source-less image that broken-image probes
   flag as a 0x0 asset. Keep it out of rendering until it actually has one. */
.pv-lightbox__img:not([src]) {
    display: none;
}

.pv-lightbox__img {
    max-width: min(1100px, 92vw);
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

.pv-lightbox__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 48px;
    height: 48px;
    border: 0;
    background: none;
    color: var(--balta);
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .pv-vineyards__split,
    .pv-vineyards__split--photo-left,
    .pv-vineyards__split--photo-right {
        grid-template-columns: 1fr;
        /* Stacked, `gap` becomes the ROW gap — the comp gutters above are horizontal only. */
        gap: var(--space-6);
        padding-inline: var(--container-pad);
    }

    .pv-vineyards__split--photo-right .pv-vineyards__split-text {
        order: -1;
    }

    .pv-vineyards__region {
        font-size: 32px;
        line-height: 40px;
    }

    .pv-vineyards__gallery {
        grid-template-columns: repeat(4, 1fr);
    }

    .pv-vineyards__band-deco {
        width: clamp(160px, 34vw, 300px);
    }
}

/* On a phone the 1137:477 band is only ~151px tall, so the cover-crop eats the film and the player
   chrome. Drop the poster ratio for the film's own 16:9 — nothing left to crop. */
@media (max-width: 768px) {
    .pv-vineyards__hero-embed {
        aspect-ratio: 16 / 9;
    }

    .pv-vineyards__hero-iframe {
        position: static;
        width: 100%;
        height: 100%;
        transform: none;
    }
}

@media (max-width: 520px) {
    .pv-vineyards__gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Prev/next — vertically centred against the viewport edges, clear of the image so a wide photo
   never sits under them. Hidden by the controller when the gallery holds a single photo. */
.pv-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--balta);
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease;
}

.pv-lightbox__nav[hidden] {
    display: none;
}

.pv-lightbox__nav:hover,
.pv-lightbox__nav:focus-visible {
    background: rgba(255, 255, 255, .24);
}

.pv-lightbox__nav--prev {
    left: var(--space-4);
}

.pv-lightbox__nav--next {
    right: var(--space-4);
}

@media (max-width: 768px) {
    .pv-lightbox__nav {
        width: 44px;
        height: 44px;
        font-size: 28px;
    }

    .pv-lightbox__nav--prev {
        left: var(--space-2);
    }

    .pv-lightbox__nav--next {
        right: var(--space-2);
    }
}