/* Gallery styles (extracted from styles.css) */

/* Gallery Container */
.gallery-container {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 40vh;
    min-height: 300px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    white-space: nowrap;
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
    position: relative; /* allow right-side hint positioning */
}

/* Defer rendering of off-screen content for faster initial paint */
.gallery-container,
.gallery-container .gallery-item {
    content-visibility: auto;
    contain-intrinsic-size: 300px 200px; /* reserve space to avoid layout shift */
}

.gallery-container .gallery-items-wrapper {
    display: flex;        /* remove inline-block spacing */
    flex-direction: row;
    align-items: stretch;
    gap: 0;               /* no gaps between items */
    height: 100%;
    margin: 0;
    padding: 0;
    white-space: nowrap;  /* keep in one line */
    font-size: 0;
    line-height: 0;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.gallery-container::-webkit-scrollbar { display: none; }

.gallery-second { margin-top: 1rem; }
.gallery-third { margin-top: 1rem; }
.gallery-fourth { margin-top: 1rem; }
.gallery-container:first-of-type { margin-top: 0 !important; }
.gallery-third + .gallery-container { margin-top: 1rem; }

.gallery-item {
    display: flex;               /* participate in flex row */
    flex: 0 0 auto;              /* prevent flex shrinking */
    width: auto;
    height: 100%;
    margin: 0;
    margin-right: -1px;          /* overlap by 1px to kill hairline gaps */
    padding: 0;
    line-height: 0;
    font-size: 0;
    vertical-align: top;
    transition: transform 180ms ease, opacity 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.gallery-item:last-child { margin-right: 0; }

.image-frame {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;              /* avoid inline gaps inside frame */
    overflow: hidden;            /* hide any subpixel overflow */
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    position: relative;
    background: #fff;
}

.image-frame:hover { transform: none; box-shadow: none; border-color: transparent; }

.image-frame img {
    height: 100%;
    width: auto;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 0;
    font-size: 0;
    object-fit: cover;
    position: relative;
    backface-visibility: hidden;
    transform: translateZ(0);    /* avoid subpixel seams on some GPUs */
}

/* Enlarged image styles */
.image-frame.enlarged {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
    cursor: pointer;
}

.image-frame.enlarged img {
    max-height: 90vh;
    max-width: 90vw;
    object-fit: contain;
}

.image-frame video {
    border-radius: 0;
    display: block;
    object-fit: cover;
    pointer-events: auto;
}

.image-frame video.landscape { width: auto; height: 30vh; }
.image-frame video.portrait { width: auto; height: 30vh; }

/* =========================
   Video page grid layout
   ========================= */
body[data-gallery="video"] .gallery-container {
    height: auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: visible;
    white-space: normal;
}

body[data-gallery="video"] .gallery-container .gallery-items-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    height: auto;
}

body[data-gallery="video"] .gallery-item { width: 100%; height: auto; }
body[data-gallery="video"] .image-frame { aspect-ratio: 16 / 9; background: #000; }
body[data-gallery="video"] .image-frame video { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
    body[data-gallery="video"] .gallery-container .gallery-items-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    body[data-gallery="video"] .gallery-container .gallery-items-wrapper {
        grid-template-columns: 1fr;
    }
}

/* Mobile Responsiveness specific to gallery */
@media (max-width: 768px) {
    .gallery-container { padding: 1rem; gap: 1rem; }
    .gallery-item { min-width: auto; max-width: none; }
    .image-frame { padding: 10px; }
}

@media (max-width: 480px) {
    .gallery-container { flex-direction: column; align-items: center; }
    .gallery-item { width: auto; }
}

/* =========================
   Immersive Lightbox Styles
   ========================= */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999; /* above footer */
    display: grid;
    grid-template-areas: 'stage';
    align-items: center;
    justify-items: center;
    opacity: 0;
    transition: opacity 180ms ease;
}

.lightbox-overlay.open { opacity: 1; }
.lightbox-overlay.closing { opacity: 0; }

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity 180ms ease;
}

.lightbox-stage {
    grid-area: stage;
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    display: grid;
    place-items: center;
    transform-origin: center center;
}

.lightbox-stage.loading::after {
    content: '';
    position: absolute;
    width: 28px; height: 28px;
    border: 3px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lb-spin 900ms linear infinite;
}

@keyframes lb-spin { to { transform: rotate(360deg); } }

.lightbox-image {
    max-width: 92vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    transform: scale(0.97);
    transition: transform 180ms ease;
}

.lightbox-image.enter { transform: scale(1); }
.lightbox-stage.zoom .lightbox-image { transform: scale(1.5); cursor: zoom-out; }

/* White brand bar overlay at bottom of lightbox */
.lightbox-brandbar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    padding: 0;
    gap: 0;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none; /* let clicks go to the image/lightbox */
}

.lightbox-brandbar img {
    width: 12%;
    max-width: 220px;
    height: auto;
    display: block;
}

@media (max-width: 600px) {
    .lightbox-brandbar { bottom: 10px; }
    .lightbox-brandbar img { width: 18%; max-width: 180px; }
}

.lightbox-nav,
.lightbox-close {
    position: absolute;
    top: 16px;
    background: rgba(255,255,255,0.9);
    color: #000;
    border: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: transform 120ms ease, background 120ms ease;
}

.lightbox-close { right: 16px; }
.lightbox-left { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-right { right: 16px; top: 50%; transform: translateY(-50%); }

.lightbox-nav:hover,
.lightbox-close:hover { transform: scale(1.05); background: #fff; }

@media (max-width: 600px) {
    .lightbox-image { max-width: 94vw; max-height: 86vh; }
    .lightbox-left, .lightbox-right { top: auto; bottom: 16px; transform: none; }
    .lightbox-left { left: 16px; }
    .lightbox-right { right: 16px; }
}