/*
 * 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.
 */

.pv-vineyards {
    padding-bottom: var(--space-7);
}

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

/* 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);
    gap: 2px;
}

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

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

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