/* ==========================================================================
   Gallery event pages — gallery/*.html
   Loaded AFTER css/style.css (?v=20260709). The .page-hero band and the
   uniform .thumbnail crop live in style.css; this file only adds the
   page-level rhythm and lightbox affordances for the photo grids.
   ========================================================================== */

/* content band between the hero and the footer */
.gallery-page {
    margin-top: 40px;
    margin-bottom: 56px;
}

/* photo tiles — uniform 200px crop comes from .thumbnail in style.css;
   add the "this opens a lightbox" affordance on top */
.gallery-page .thumbnail {
    cursor: zoom-in;
    background: var(--surface);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gallery-page .thumbnail:hover,
.gallery-page .thumbnail:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--iith-vermillion);
}

/* event highlight videos (e.g. ICEAMS 2025) get the same framed treatment */
.gallery-page video {
    display: block;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    background: var(--iith-indigo);
}

/* lightbox modal — soften the frame; controls and behaviour untouched */
#galleryModal .modal-content {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface);
}
#galleryModal .carousel-item img {
    border-radius: calc(var(--radius) - 6px);
    background: var(--bg-alt);
}

/* tablets (768-991px): style.css already relaxes .thumbnail to a 4/3
   aspect so 4-up columns don't crop landscape shots into slivers */

/* phones: two-up grid instead of one tall full-width column */
@media (max-width: 767.98px) {
    .gallery-page .row > .col-md-3 { width: 50%; }
    .gallery-page .thumbnail { height: 150px; }
}
@media (max-width: 429.98px) {
    .gallery-page .thumbnail { height: 128px; }
}