/* Legal71 Gallery — admin-managed photo masonry. Shared by the homepage preview
   section (frontend/partials/_gallery.blade.php) and the standalone /gallery page.
   Self-contained (frontend has no Tailwind JIT).

   Layout: a CSS multi-column masonry — images keep their NATURAL aspect ratio (full
   size, no cropping) and stagger across columns like a Pinterest board. Tiles reveal on
   scroll (staggered, via main.js IntersectionObserver) and lift/zoom on hover; the inner
   .gallery-media owns the hover transform so it can't clash with the tile's reveal
   transform. Light, on-brand background to match the rest of the homepage. */

.gallery-section {
    background: linear-gradient(180deg, #ffffff 0%, #f5f4ff 100%);
    padding: 3rem 0;
}
@media (min-width: 768px) { .gallery-section { padding: 4rem 0; } }
@media (min-width: 1024px) { .gallery-section { padding: 5rem 0; } }

.gallery-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    text-align: center;
}
.gallery-badge {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    color: #F05A2B;
    background: rgba(240, 90, 43, 0.1);
    border: 1px solid rgba(240, 90, 43, 0.28);
    padding: 0.35rem 1.1rem;
    border-radius: 9999px;
}
.gallery-title {
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3.5vw, 2.15rem);
    line-height: 1.25;
    color: #202050;
}
.gallery-subtitle {
    max-width: 40rem;
    margin-top: -0.15rem;
    font-family: Inter, sans-serif;
    font-size: 0.98rem;
    line-height: 1.6;
    color: #5b5f77;
}

/* Collage: a justified photo grid. Rows are packed edge-to-edge and each photo's width
   follows its real aspect ratio, so photos of different sizes tile together with no gaps
   while keeping their proportions. main.js measures each image and pins the tile's px
   width+height (adds .is-justified). Flex-wrap holds the rows; the flex-basis fallback
   keeps photos visible if the script doesn't run. */
.gallery-mosaic {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* full rows fill exactly (no effect); a capped short last row centres */
    gap: 12px;
}
@media (min-width: 768px) { .gallery-mosaic { gap: 14px; } }

.gallery-tile {
    flex: 1 1 240px;          /* pre-JS fallback; JS pins width+height for the collage */
    min-width: 0;
    margin: 0;
    /* Reveal transition (staggered via --i). The tile owns ONLY the reveal transform,
       so it never clashes with the inner media's hover transform. */
    opacity: 1;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 70ms);
}

/* Hidden initial state applies ONLY once JS starts observing (added by main.js), so the
   gallery stays fully visible if JS or IntersectionObserver is unavailable. */
.gallery-mosaic.is-observing .gallery-tile {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    will-change: opacity, transform;
}
.gallery-mosaic.is-observing .gallery-tile.is-in {
    opacity: 1;
    transform: none;
}

.gallery-tile { cursor: pointer; }
.gallery-tile:focus { outline: none; }
.gallery-tile:focus-visible .gallery-media {
    outline: 3px solid #F05A2B;
    outline-offset: 3px;
}

.gallery-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    background: #ece9ff;
    box-shadow: 0 6px 18px -12px rgba(32, 32, 80, 0.35);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.gallery-tile:hover .gallery-media {
    transform: translateY(-5px);
    box-shadow: 0 20px 42px -14px rgba(32, 32, 80, 0.4);
    z-index: 2;
}
.gallery-media img {
    display: block;
    width: 100%;
    height: auto;            /* fallback: natural aspect ratio */
    transition: transform 0.5s ease;
}
.gallery-tile:hover .gallery-media img {
    transform: scale(1.06);
}

/* Justified collage mode — JS has sized each tile in px; fill it and crop to the exact
   cell (which already matches the photo's aspect ratio, so effectively no crop). */
.gallery-mosaic.is-justified .gallery-media { height: 100%; }
.gallery-mosaic.is-justified .gallery-media img { height: 100%; object-fit: cover; }

/* Caption overlay — fades up on hover. */
.gallery-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.6rem 0.9rem 0.85rem;
    font-family: Inter, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.35;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.gallery-tile:hover .gallery-cap {
    opacity: 1;
    transform: none;
}

/* "See all" CTA under the homepage preview mosaic. */
.gallery-actions {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
.gallery-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #fff;
    background: #F05A2B;
    padding: 0.7rem 1.6rem;
    border-radius: 9999px;
    box-shadow: 0 10px 24px -12px rgba(240, 90, 43, 0.7);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.gallery-more:hover {
    background: #d64a1f;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px rgba(240, 90, 43, 0.75);
}
.gallery-more svg {
    width: 18px;
    height: 18px;
}

/* Lightbox — click a tile to enlarge. Built + populated by main.js, appended to <body>. */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(12, 12, 22, 0.92);
    animation: glbFade 0.2s ease;
}
.gallery-lightbox[hidden] { display: none; }
@keyframes glbFade { from { opacity: 0; } to { opacity: 1; } }

.glb-figure {
    margin: 0;
    max-width: min(100%, 1100px);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: glbPop 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes glbPop {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: none; }
}
.glb-img {
    max-width: 100%;
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7);
}
.glb-cap {
    margin-top: 0.9rem;
    max-width: 60ch;
    font-family: Inter, sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #e7e7ef;
    text-align: center;
}

/* Overlay controls — translucent white, orange on hover. */
.glb-close,
.glb-nav {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.glb-close:hover,
.glb-nav:hover { background: #F05A2B; border-color: #F05A2B; }
.glb-close:active,
.glb-nav:active { transform: scale(0.94); }
.glb-close { top: clamp(0.75rem, 2vw, 1.4rem); right: clamp(0.75rem, 2vw, 1.4rem); }
.glb-nav { top: 50%; transform: translateY(-50%); }
.glb-nav:active { transform: translateY(-50%) scale(0.94); }
.glb-prev { left: clamp(0.5rem, 2vw, 1.4rem); }
.glb-next { right: clamp(0.5rem, 2vw, 1.4rem); }
.glb-close svg,
.glb-nav svg { width: 22px; height: 22px; }

.glb-counter {
    position: absolute;
    bottom: clamp(0.75rem, 2vw, 1.4rem);
    left: 50%;
    transform: translateX(-50%);
    font-family: Inter, sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: #cfcfe0;
}

@media (prefers-reduced-motion: reduce) {
    .gallery-mosaic.is-observing .gallery-tile,
    .gallery-mosaic.is-observing .gallery-tile.is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .gallery-media,
    .gallery-media img,
    .gallery-cap,
    .gallery-more { transition: none; }
    .gallery-lightbox,
    .glb-figure { animation: none; }
}