/* ============================================================
   ORE Academy — Gallery Page Stylesheet
   Companion to style.css (global). Gallery-specific only.

   NOTE: style.css already contains a MOBILE (max-width: 992px)
   layout for .gallery-hero-v2, .split-gallery-view,
   .hero-image-wrapper, .hero-text-wrapper, .gallery-sidebar, etc.
   Those classes never had a DESKTOP base, so this file supplies it.

   Visual essentials (background colors, text colors, the outline
   stroke effect) apply at ALL sizes below, since mobile needs them
   just as much as desktop does. Only structural LAYOUT (grid/flex,
   fixed heights, desktop-scale padding) is wrapped in
   (min-width: 993px) so it can't fight the mobile grid/flex rules
   already in style.css.
   ============================================================ */

/* =====================
   VISUAL ESSENTIALS — apply at every size
   ===================== */
.hero-text-wrapper {
    background: #40439c;
}

.hero-text-wrapper > p {
    color: rgba(255, 255, 255, 0.75);
}

.outline-title {
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 2px #fff;
    margin-bottom: 24px;
    text-align: left;
}

.outline-title .solid-blue {
    display: block;
    color: #fff;
    -webkit-text-stroke: 0px transparent;
}

.gallery-sidebar {
    background: #40439c;
}

.gallery-sidebar .sticky-box h1 {
    color: #fff;
}

.gallery-sidebar .sticky-box p {
    color: rgba(255, 255, 255, 0.72);
}

.img-caption {
    background: rgba(20, 22, 60, 0.75);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Sensible default padding everywhere — desktop block below
   overrides this with larger numbers */
.hero-text-wrapper {
    padding: 40px 24px;
}

.gallery-sidebar .sticky-box {
    padding: 24px;
}

.img-caption {
    padding: 8px 16px;
}

.outline-title {
    font-size: 2.2rem;
}

/* =====================
   DESKTOP LAYOUT (min-width: 993px)
   Structural rules only — safe to scope here since style.css's
   mobile block sets its own display/flex-direction for these
   classes and we must not out-specificity or otherwise fight it.
   ===================== */
@media (min-width: 993px) {

    .gallery-hero-v2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 70vh;
    }

    .hero-image-wrapper {
        position: relative;
        overflow: hidden;
    }

    .hero-main-img {
        height: 100%;
        min-height: 400px;
        background-size: cover;
        background-position: center;
        position: relative;
    }

    .img-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px 20px;
    }

    .hero-text-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 80px 65px;
        height: 100%;
        width: 100%;
    }

    .outline-title {
        font-size: clamp(2.5rem, 5vw, 4rem);
    }

    .hero-text-wrapper > p {
        font-size: 1rem;
        line-height: 1.75;
        max-width: 420px;
    }

    .split-gallery-view {
        display: grid;
        grid-template-columns: 280px 1fr;
    }

    .gallery-sidebar .sticky-box {
        position: sticky;
        top: 0;
        padding: 60px 40px;
    }

    .gallery-sidebar .sticky-box h1 {
        font-size: 2.2rem;
        font-weight: 900;
        line-height: 1.15;
        margin: 16px 0;
    }

    .gallery-sidebar .sticky-box p {
        font-size: 0.9rem;
        line-height: 1.7;
    }
}

/* =====================
   SMALL PHONE REFINEMENTS
   (style.css already handles the main <=992px layout switch;
   these just tighten things further on small screens)
   ===================== */
/* =====================
   HIDE HERO IMAGE ON MOBILE
   (matches the breakpoint where style.css already switches
   .gallery-hero-v2 to a stacked column layout)
   ===================== */
@media (max-width: 992px) {
    .hero-image-wrapper {
        display: none;
    }

    /* style.css pulls .hero-text-wrapper up by -90px to overlap the
       hero image — with the image gone there's nothing to overlap,
       so that negative margin would instead pull the text box up
       into the header. Neutralize it here. */
    .hero-text-wrapper {
        margin-top: 0;
        margin-bottom: 0;
    }
}

@media (max-width: 600px) {

    .gallery-main-grid {
        padding: 16px 8px; /* style.css sets 20px 10px; trim a touch further */
    }

    .grid-layout {
        gap: 8px; /* style.css sets 12px; tighter for small phones */
    }

    .close-btn {
        top: 16px;
        right: 16px;
        font-size: 32px; /* style.css sets 40px, slightly large relative to a small viewport */
    }

    #lightbox-caption {
        font-size: 0.78rem;
        padding: 0 16px;
        text-align: center;
    }
}