/*
 * LZS-256 object-page gallery (1+4 grid + fullscreen lightbox).
 * Self-contained, scoped styles loaded via <f:asset.css> — mirrors the
 * chatbot-booking Content Block convention (hero.css). Brand tokens reused
 * from the theme: primary #0097d9, hover #00628d, Lato, 8px gaps, 1170px
 * content width. No external dependencies.
 */

.c-object-gallery {
    --lzs-gallery-gap: 8px;
    --lzs-gallery-brand: #0097d9;
    --lzs-gallery-brand-hover: #00628d;
    /* LZS light grey token (Tailwind grey.100 / SCSS $global-color-grey,
       src/packages/base_template/Resources/Private/Build/Sass/settings/
       _settings.global.scss:99 — #F7F5F3). LZS-311: backdrop behind the tiles
       so gaps/edges read as intentional design, not a missing photo. */
    --lzs-gallery-bg: #f7f5f3;
}

/* -------- 1+4 grid (desktop, >=768px is set in the media query below) -------- */
.c-object-gallery__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lzs-gallery-gap);
    /* Mobile default: only the large photo (see media query for the 1+4 grid). */
    aspect-ratio: 390 / 336;
    /* Containing block for the absolutely positioned "view all" button. */
    position: relative;
    background-color: var(--lzs-gallery-bg);
}

/* -------- LZS-311: < 5 synced photos — two large tiles, no empty cells -------- */
.c-object-gallery__grid--two-up {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    /* LZS-329: mobile shows a single tile, same as every other layout — the
       side-by-side pair is desktop-only (see the min-width:768px block). */
    aspect-ratio: 390 / 336;
}

/* LZS-329: both two-up tiles carry the --large modifier (see SyncGallery.html),
   so the --small hide rule below never reaches the second one. Hide it by tag
   order instead — it's always the 2nd <button> before the "view all" button. */
.c-object-gallery__grid--two-up .c-object-gallery__tile:nth-of-type(2) {
    display: none;
}

.c-object-gallery__tile {
    /* Buttons are the interactive tiles — reset the native chrome. */
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.c-object-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.c-object-gallery__tile:hover .c-object-gallery__img,
.c-object-gallery__tile:focus-visible .c-object-gallery__img {
    transform: scale(1.03);
}

.c-object-gallery__tile:focus-visible {
    outline: 3px solid var(--lzs-gallery-brand);
    outline-offset: -3px;
}

/* Mobile: only the large tile is shown, the 2x2 grid tiles are hidden. */
.c-object-gallery__tile--small {
    display: none;
}

/* "View all photos" button — anchored flush to the grid's outer bottom-right
   corner (Figma 933:33180: right/bottom offset 0 against the 1170x500 grid,
   overlapping the last small tile). Absolute against the grid container, so it
   sits on the outer corner for every image count and breakpoint; with 2-4
   images the bottom-right cell is empty and the button sits on white space —
   that matches the Figma anchor, which is the grid edge, not a tile. */
.c-object-gallery__view-all {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 50px;
    padding: 0 20px;
    border: 0;
    cursor: pointer;
    font-family: latoregular, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    background-color: var(--lzs-gallery-brand);
    transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    white-space: nowrap;
}

.c-object-gallery__view-all:hover,
.c-object-gallery__view-all:focus-visible {
    background-color: var(--lzs-gallery-brand-hover);
    box-shadow: 0 7px 10px rgba(0, 98, 141, 0.3);
    outline: none;
}

@media (min-width: 768px) {
    .c-object-gallery__grid {
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        aspect-ratio: 117 / 50; /* 1170 x 500 from Figma 933:33174 */
    }

    /* Large portrait photo spans both rows in the first column. */
    .c-object-gallery__tile--large {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    /* The four small tiles auto-place into columns 2-3, rows 1-2. */
    .c-object-gallery__tile--small {
        display: block;
    }

    /* Single-image case: the large tile spans the full width, no grid. */
    .c-object-gallery__grid--single {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        aspect-ratio: 117 / 50;
    }

    .c-object-gallery__grid--single .c-object-gallery__tile--large {
        grid-column: 1;
        grid-row: 1;
    }

    /* LZS-311: 2-4 synced photos — two large tiles side by side, same overall
       footprint as the 1+4 grid. Higher specificity than the bare
       .c-object-gallery__tile--large rule above, so both tiles (which share
       that class in two-up mode) get placed instead of stacking into the
       classic tall-left-column slot. */
    .c-object-gallery__grid--two-up {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        aspect-ratio: 117 / 50;
    }

    .c-object-gallery__grid--two-up .c-object-gallery__tile--large {
        grid-column: auto;
        grid-row: 1;
    }

    /* LZS-329: desktop shows both two-up tiles side by side again. */
    .c-object-gallery__grid--two-up .c-object-gallery__tile:nth-of-type(2) {
        display: block;
    }
}

/* ----------------------------- Lightbox ----------------------------- */
.c-object-gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    /* Toggled by JS (hidden attribute); this is the visible state. */
}

.c-object-gallery-lightbox[hidden] {
    display: none;
}

.c-object-gallery-lightbox__stage {
    margin: 0;
    max-width: 92vw;
    max-height: 86vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-object-gallery-lightbox__image {
    max-width: 92vw;
    max-height: 86vh;
    object-fit: contain;
    display: block;
}

.c-object-gallery-lightbox__btn {
    position: absolute;
    border: 0;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    width: 52px;
    height: 52px;
    font-size: 28px;
    line-height: 52px;
    text-align: center;
    transition: background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.c-object-gallery-lightbox__btn:hover,
.c-object-gallery-lightbox__btn:focus-visible {
    background: var(--lzs-gallery-brand, #0097d9);
    outline: none;
}

.c-object-gallery-lightbox__btn--prev {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.c-object-gallery-lightbox__btn--next {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.c-object-gallery-lightbox__btn--close {
    top: 16px;
    right: 16px;
}

.c-object-gallery-lightbox__counter {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #fff;
    font-family: latoregular, sans-serif;
    font-size: 14px;
    line-height: 20px;
    background: rgba(0, 0, 0, 0.45);
    padding: 6px 12px;
}

/* Small screens: pull the nav buttons to the bottom for thumb reach. */
@media (max-width: 767px) {
    .c-object-gallery-lightbox__btn--prev {
        left: 12px;
        top: auto;
        bottom: 16px;
        transform: none;
    }

    .c-object-gallery-lightbox__btn--next {
        right: 12px;
        top: auto;
        bottom: 16px;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .c-object-gallery__img,
    .c-object-gallery__view-all,
    .c-object-gallery-lightbox__btn {
        transition: none;
    }
}