/*
 * gallery-lahoda-2 — photo mosaic with a lightbox.
 *
 * The grid is made of SQUARE unit cells (`grid-auto-rows` is computed from the
 * container width) and every tile spans a whole number of them. Which span a
 * tile gets is decided server-side per breakpoint (component.php,
 * GalleryLahoda2Mosaic) and printed as data-size-lg / -md / -sm; this file only
 * maps those values to grid spans:
 *
 *   data-size-lg  container ≥ 1080px  4 columns
 *   data-size-md  container ≥  768px  3 columns
 *   data-size-sm  container ≥  340px  2 columns
 *   (narrower)    1 column, uniform tiles with an aspect ratio instead of units
 *
 * Every size rule sets BOTH grid-column and grid-row, because at a wide
 * container all three blocks match and the later one must fully override the
 * earlier one.
 */

.gallery-lahoda-2 {
    width: 100%;
}

/*
 * `container-type: inline-size` lives on `__inner`, not the root — the root
 * also holds `__lightbox` (`position: fixed`), and layout containment (which
 * container-type implies) would re-anchor that fixed overlay to the component
 * box instead of the viewport. Same reasoning as gallery-lahoda-1.
 */
.gallery-lahoda-2__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--space-7) var(--container-gutter);
    container-type: inline-size;
}

@container (min-width: 1080px) {
    .gallery-lahoda-2__inner {
        padding: var(--space-8) var(--container-gutter);
    }
}

/* ---------- header ---------- */

.gallery-lahoda-2__header {
    max-width: 680px;
    margin: 0 0 var(--space-6);
}

.gallery-lahoda-2__eyebrow {
    font-family: var(--font-display);
    color: var(--brand-gold);
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 var(--space-2);
}

.gallery-lahoda-2__title {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
    margin: 0;
}

.gallery-lahoda-2__intro {
    font-family: var(--font-body);
    color: var(--ink-muted);
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: var(--space-3) 0 0;
}

.gallery-lahoda-2__intro p {
    margin: 0 0 var(--space-3);
}

.gallery-lahoda-2__intro p:last-child {
    margin-bottom: 0;
}

.gallery-lahoda-2__intro ul,
.gallery-lahoda-2__intro ol {
    margin: var(--space-2) 0;
    padding-left: 1.25em;
}

/* ---------- mosaic grid ---------- */

.gallery-lahoda-2__mosaic {
    --gl2-gap: var(--space-3);
    --gl2-columns: 1;
    display: grid;
    gap: var(--gl2-gap);
    grid-auto-flow: dense;
    grid-template-columns: repeat(var(--gl2-columns), minmax(0, 1fr));
    grid-auto-rows: auto;
}

.gallery-lahoda-2__tile {
    grid-column: auto;
    grid-row: auto;
}

/* The 1-column (< 340px) rules — aspect-ratio tiles instead of unit cells —
   sit AFTER the main tile block below, so they can override its height. */

@container (min-width: 340px) {
    .gallery-lahoda-2__mosaic {
        --gl2-columns: 2;
        /* Square unit cells: (content width − gaps) / columns. `cqw` resolves
           against `__inner`'s content box, which is exactly the grid's width. */
        grid-auto-rows: calc(
            (100cqw - (var(--gl2-columns) - 1) * var(--gl2-gap)) /
            var(--gl2-columns)
        );
    }

    .gallery-lahoda-2__tile[data-size-sm="square"] {
        grid-column: span 1;
        grid-row: span 1;
    }

    .gallery-lahoda-2__tile[data-size-sm="wide"],
    .gallery-lahoda-2__tile[data-size-sm="panorama"] {
        grid-column: span 2;
        grid-row: span 1;
    }

    .gallery-lahoda-2__tile[data-size-sm="tall"] {
        grid-column: span 1;
        grid-row: span 2;
    }

    .gallery-lahoda-2__tile[data-size-sm="large"] {
        grid-column: span 2;
        grid-row: span 2;
    }
}

@container (min-width: 768px) {
    .gallery-lahoda-2__mosaic {
        --gl2-columns: 3;
        --gl2-gap: var(--space-4);
    }

    .gallery-lahoda-2__tile[data-size-md="square"] {
        grid-column: span 1;
        grid-row: span 1;
    }

    .gallery-lahoda-2__tile[data-size-md="wide"] {
        grid-column: span 2;
        grid-row: span 1;
    }

    .gallery-lahoda-2__tile[data-size-md="tall"] {
        grid-column: span 1;
        grid-row: span 2;
    }

    .gallery-lahoda-2__tile[data-size-md="large"] {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-lahoda-2__tile[data-size-md="panorama"] {
        grid-column: span 3;
        grid-row: span 2;
    }
}

@container (min-width: 1080px) {
    .gallery-lahoda-2__mosaic {
        --gl2-columns: 4;
    }

    .gallery-lahoda-2__tile[data-size-lg="square"] {
        grid-column: span 1;
        grid-row: span 1;
    }

    .gallery-lahoda-2__tile[data-size-lg="wide"] {
        grid-column: span 2;
        grid-row: span 1;
    }

    .gallery-lahoda-2__tile[data-size-lg="tall"] {
        grid-column: span 1;
        grid-row: span 2;
    }

    .gallery-lahoda-2__tile[data-size-lg="large"] {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-lahoda-2__tile[data-size-lg="panorama"] {
        grid-column: span 4;
        grid-row: span 2;
    }
}

/* ---------- tile ---------- */

.gallery-lahoda-2__tile {
    /* A <button> (it opens the lightbox), so a full reset plus explicit block
       sizing — a button does not stretch to its grid cell on its own. */
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    background: var(--bg-cream-deep);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: zoom-in;
    box-shadow: var(--shadow-sm);
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow var(--transition-base);
}

/* 1 column (< 340px): no unit cells (`grid-auto-rows: auto` above), every
   tile is a plain block sized by an aspect ratio hinted by its 2-column size.
   Scoped to the narrow container and placed after the main block so neither
   rule leaks into the unit-cell breakpoints. */
@container (max-width: 339.98px) {
    .gallery-lahoda-2__tile {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .gallery-lahoda-2__tile[data-size-sm="wide"],
    .gallery-lahoda-2__tile[data-size-sm="panorama"] {
        aspect-ratio: 16 / 9;
    }

    .gallery-lahoda-2__tile[data-size-sm="tall"] {
        aspect-ratio: 4 / 5;
    }
}

.gallery-lahoda-2__tile:hover,
.gallery-lahoda-2__tile:focus-visible {
    box-shadow: var(--shadow-md);
}

.gallery-lahoda-2__tile:focus-visible {
    outline: 3px solid var(--brand-gold);
    outline-offset: 3px;
}

.gallery-lahoda-2__media {
    position: absolute;
    inset: 0;
    display: block;
}

.gallery-lahoda-2__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
    transition: transform var(--transition-slow);
}

.gallery-lahoda-2__tile:hover .gallery-lahoda-2__img,
.gallery-lahoda-2__tile:focus-visible .gallery-lahoda-2__img {
    transform: scale(1.04);
}

/* Cut-out product photos: the whole image on a translucent cream wash over
   the card surface, carrying its own ink-tinted shadow (DESIGN_MANUAL.md,
   "Cut-out product photos"). */
.gallery-lahoda-2__tile[data-fit="contain"] .gallery-lahoda-2__media {
    padding: 7%;
    background: rgba(251, 246, 236, 0.5);
}

.gallery-lahoda-2__tile[data-fit="contain"] .gallery-lahoda-2__img {
    object-fit: contain;
    filter: drop-shadow(3px 2px 11px rgba(42, 33, 26, 0.26));
}

/* Caption overlay — revealed on hover, always on, or not at all, by the root
   modifier set from the `captionStyle` field. The lightbox shows it always. */
.gallery-lahoda-2__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-6) var(--space-4) var(--space-3);
    background: linear-gradient(to top, rgba(36, 27, 20, 0.78), rgba(36, 27, 20, 0));
    color: var(--bg-cream);
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity var(--transition-base),
        transform var(--transition-base);
    pointer-events: none;
}

.gallery-lahoda-2--captions-hover
    .gallery-lahoda-2__tile:hover
    .gallery-lahoda-2__caption,
.gallery-lahoda-2--captions-hover
    .gallery-lahoda-2__tile:focus-visible
    .gallery-lahoda-2__caption,
.gallery-lahoda-2--captions-always .gallery-lahoda-2__caption {
    opacity: 1;
    transform: none;
}

.gallery-lahoda-2--captions-lightbox .gallery-lahoda-2__caption {
    display: none;
}

/* Zoom badge — a small cream disc in the corner, hover/focus only. */
.gallery-lahoda-2__zoom {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(251, 246, 236, 0.92);
    color: var(--brand-gold-dark);
    font-size: 0.875rem;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: scale(0.85);
    transition:
        opacity var(--transition-base),
        transform var(--transition-base);
    pointer-events: none;
}

.gallery-lahoda-2__tile:hover .gallery-lahoda-2__zoom,
.gallery-lahoda-2__tile:focus-visible .gallery-lahoda-2__zoom {
    opacity: 1;
    transform: none;
}

@media (hover: none) {
    .gallery-lahoda-2__zoom,
    .gallery-lahoda-2--captions-hover .gallery-lahoda-2__caption {
        display: none;
    }
}

/* ---------- empty state (edit mode only) ---------- */

.gallery-lahoda-2__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-7) var(--space-5);
    border: 2px dashed var(--brand-gold-light);
    border-radius: var(--radius);
    background: var(--brand-gold-tint);
    color: var(--ink-muted);
    font-family: var(--font-body);
    text-align: center;
}

.gallery-lahoda-2__empty-icon {
    font-size: 2rem;
    color: var(--brand-gold);
}

.gallery-lahoda-2__empty-title {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: 1.25rem;
    margin: 0;
}

.gallery-lahoda-2__empty-text {
    max-width: 480px;
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
}

/* ---------- lightbox ---------- */

/* Set on <body> by component.js while a lightbox is open. The class name and
   the reference counter are shared with gallery-lahoda-1 / image-lahoda-2 so
   several lightbox components on one page do not fight over it. */
body.lightbox-scroll-lock {
    overflow: hidden;
}

.gallery-lahoda-2__lightbox {
    position: fixed;
    inset: 0;
    z-index: 980;
    display: grid;
    place-items: center;
    padding: var(--space-5) var(--space-8);
    background: rgba(10, 8, 6, 0.92);
    animation: gallery-lahoda-2-fade var(--transition-base);
}

.gallery-lahoda-2__lightbox[hidden] {
    display: none;
}

@keyframes gallery-lahoda-2-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.gallery-lahoda-2__lightbox-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    max-width: min(1200px, 100%);
    margin: 0;
}

.gallery-lahoda-2__lightbox-img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

.gallery-lahoda-2__lightbox-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-body);
    color: var(--bg-cream);
    text-align: center;
}

.gallery-lahoda-2__lightbox-caption {
    font-size: 0.9375rem;
    line-height: 1.5;
}

.gallery-lahoda-2__lightbox-caption:empty {
    display: none;
}

.gallery-lahoda-2__lightbox-position {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    opacity: 0.65;
}

.gallery-lahoda-2__close,
.gallery-lahoda-2__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(251, 246, 236, 0.12);
    color: var(--bg-cream);
    font-size: 1.125rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.gallery-lahoda-2__close:hover,
.gallery-lahoda-2__close:focus-visible,
.gallery-lahoda-2__nav:hover,
.gallery-lahoda-2__nav:focus-visible {
    background: rgba(251, 246, 236, 0.26);
}

.gallery-lahoda-2__close:focus-visible,
.gallery-lahoda-2__nav:focus-visible {
    outline: 2px solid var(--bg-cream);
    outline-offset: 2px;
}

.gallery-lahoda-2__close {
    top: var(--space-4);
    right: var(--space-4);
}

.gallery-lahoda-2__nav {
    top: 50%;
    transform: translateY(-50%);
}

.gallery-lahoda-2__nav--prev {
    left: var(--space-4);
}

.gallery-lahoda-2__nav--next {
    right: var(--space-4);
}

/* The lightbox is viewport-fixed, so a media query (not a container query)
   is the right tool here. */
@media (max-width: 767.98px) {
    .gallery-lahoda-2__lightbox {
        padding: var(--space-7) var(--space-3);
    }

    .gallery-lahoda-2__close,
    .gallery-lahoda-2__nav {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .gallery-lahoda-2__nav--prev {
        left: var(--space-2);
    }

    .gallery-lahoda-2__nav--next {
        right: var(--space-2);
    }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .gallery-lahoda-2__tile,
    .gallery-lahoda-2__img,
    .gallery-lahoda-2__caption,
    .gallery-lahoda-2__zoom,
    .gallery-lahoda-2__close,
    .gallery-lahoda-2__nav {
        transition: none;
    }

    .gallery-lahoda-2__lightbox {
        animation: none;
    }

    .gallery-lahoda-2__tile:hover .gallery-lahoda-2__img,
    .gallery-lahoda-2__tile:focus-visible .gallery-lahoda-2__img {
        transform: none;
    }
}