/*
 * tnt-gallery.css
 * TNT | TechNoviceTools | Image Gallery (tnt_image_gallery.html) styles
 * Requires: tnt-base-styles.css (loaded first)
 *
 * Covers: hero, gallery intro, thumbnail grid, hover effects,
 *         modal overrides, responsive tweaks.
 */


/* ═══════════════════════════════════════════════════════════════════
   HERO — Image Gallery
   Background: images/artGallery.jpg
   Clean gallery interior — intentionally lighter overlay so the
   warm wood and white walls show through.
═══════════════════════════════════════════════════════════════════ */
#hero {
    min-height: 46vh;
    background:
        linear-gradient(135deg, rgba(10,14,26,0.62) 0%, rgba(30,20,5,0.45) 100%),
        url('../images/artGallery.jpg') center / cover no-repeat;
    position: relative;
    padding: 3.5rem 1rem 4rem;
}

.hero-title {
    font-size: clamp(2.6rem, 6.5vw, 4.2rem);
    margin-bottom: 1.25rem;
}

.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    margin-bottom: 2.5rem;
}


/* ═══════════════════════════════════════════════════════════════════
   GALLERY INTRO  (#galleryIntro)
   Same light warm background as other intro sections.
═══════════════════════════════════════════════════════════════════ */
#galleryIntro {
    background: #f4f5f7;
    padding: 4rem 0;
}

#galleryIntro .section-title { color: var(--tnt-dark); }

#galleryIntro p {
    font-size: 0.96rem;
    color: #444;
    line-height: 1.72;
}

/* Count badge inside the intro */
.gallery-count {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--tnt-dark);
    color: #fff;
    border: 2px solid var(--tnt-amber);
    border-radius: 50px;
    padding: 0.45rem 1.2rem;
    font-family: var(--boogaloo);
    font-size: 1.1rem;
    margin-top: 1rem;
}

.gallery-count i { color: var(--tnt-amber); }


/* ═══════════════════════════════════════════════════════════════════
   GALLERY GRID  (#galleryGrid)
   White background — art galleries are white.
═══════════════════════════════════════════════════════════════════ */
#galleryGrid {
    background: #fff;
    padding: 3.5rem 0 4rem;
}

#galleryGrid .section-title { color: var(--tnt-dark); }

.gallery-commentary-toggle {
    margin-top: 0.55rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

#gallerySearchBar {
    margin-top: -0.2rem;
}

.gallery-search-input {
    width: min(420px, 88vw);
    border: 2px solid #d8dce2;
    border-radius: 50px;
    padding: 0.58rem 1rem;
    font-size: 0.92rem;
    color: var(--tnt-dark);
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.gallery-search-input:focus {
    outline: none;
    border-color: var(--tnt-red);
    box-shadow: 0 0 0 3px rgba(219, 76, 45, 0.16);
}

.gallery-filter-select {
    border: 2px solid #d8dce2;
    border-radius: 50px;
    padding: 0.56rem 2.2rem 0.56rem 0.85rem;
    font-size: 0.9rem;
    color: var(--tnt-dark);
    background-color: #fff;
}

.gallery-filter-select:focus {
    outline: none;
    border-color: var(--tnt-red);
    box-shadow: 0 0 0 3px rgba(219, 76, 45, 0.16);
}

.gallery-search-count {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--tnt-dark);
    color: #fff;
    border: 2px solid var(--tnt-amber);
    font-family: var(--boogaloo);
    font-size: 1.02rem;
    line-height: 1;
    padding: 0.46rem 0.95rem;
}

.gallery-filter-legend {
    color: #5f6570;
    font-size: 0.84rem;
    line-height: 1.5;
}


/* ── Individual gallery item (rendered as <button>) ── */
.gallery-item {
    display: block;
    width: 100%;
    padding: 0;
    border: 1.5px solid #e2e4e8;
    border-radius: 10px;
    overflow: hidden;
    background: #f7f7f8;
    cursor: pointer;
    transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
    margin-bottom: 0;
    text-align: center;
    /* Reset button defaults */
    -webkit-appearance: none;
    appearance: none;
}

.gallery-item:hover,
.gallery-item:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.14);
    border-color: var(--tnt-amber);
    outline: none;
}

/* Thumbnail image container — fixed height keeps grid uniform */
.gallery-thumb-wrap {
    display: block;
    width: 100%;
    height: 165px;
    overflow: hidden;
}

.gallery-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.22s, transform 0.28s;
}

.gallery-item:hover .gallery-thumb,
.gallery-item:focus-visible .gallery-thumb {
    opacity: 0.88;
    transform: scale(1.05);
}

/* Title label below the thumbnail */
.gallery-item-caption {
    display: block;
    padding: 0.45rem 0.6rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tnt-dark);
    line-height: 1.3;
}


/* ═══════════════════════════════════════════════════════════════════
   GALLERY MODAL
   Single reusable modal — populated via JS from data-* attributes.
═══════════════════════════════════════════════════════════════════ */
#galleryModal .modal-content {
    border: none;
    border-radius: 14px;
    overflow: hidden;
}

#galleryModal .modal-header {
    background: var(--tnt-dark);
    border-bottom: 3px solid var(--tnt-amber);
    padding: 1rem 1.5rem;
}

#galleryModal .modal-title {
    font-family: var(--boogaloo);
    font-size: 1.55rem;
    color: #fff;
    margin: 0;
}

#galleryModal .btn-close {
    filter: invert(1) opacity(0.75);
    transition: opacity 0.2s;
}

#galleryModal .btn-close:hover { filter: invert(1) opacity(1); }

/* Full-width image constrained to viewport height */
.gallery-modal-img {
    width: 100%;
    max-height: 58vh;
    object-fit: contain;
    background: #f0f1f3;
    border-radius: 8px;
    display: block;
    margin-bottom: 1rem;
}

.gallery-modal-desc {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.75;
    margin: 0;
}

.gallery-modal-desc-hidden {
    font-size: 0.92rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
    padding: 0.55rem 0.75rem;
    border: 1px dashed #b8bcc4;
    border-radius: 8px;
    background: #f7f8fa;
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE TWEAKS
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
    .gallery-thumb-wrap { height: 140px; }
}