/* ==========================================================================
   Gallery page — theme
   Uses the same modern shell as careers.php (headernew.php, Bootstrap 5,
   the same orange/red accent — #db4223/#f24735 — since these two pages
   share the "Life at Stratview Research" identity) instead of the legacy
   Bootstrap 3 + css/style.css + ~900-line inline <style> block this page
   ran on before.

   That inline block styled a lot that no longer exists on this page:
   a full custom checkbox/file-upload form (.container1/.checkmark/
   .custom-file/.input-login/.box_shadow1 etc. — this page has no form at
   all), a second, unused image-viewer lightbox (#image-viewer/.modal-content
   — VenoBox is the only lightbox actually wired up, via .venobox() in the
   page's own script), and an entire year-by-year timeline widget
   (.timeline-div/.year-div-20XX/.blackline-div-20XX/.round-div/.imageHolder)
   that belonged to a ~280-line block of 2016–2021 photos that turned out to
   be sitting inside one giant HTML comment — never actually rendering.
   Confirmed against the live markup that none of that CSS matched anything
   still on the page, so none of it is reproduced here.
   ========================================================================== */

.rep_content {
    padding: 40px 0 60px;
}

/* ---------- Breadcrumb link color ----------
   Same fix as careers.css: without an explicit color, "Home" (an <a>)
   falls back to the browser's default link-blue. */
ol.breadcrumb.page-breadcrumb li a span,
ol.breadcrumb.page-breadcrumb li span {
    color: #566573;
    font-size: 14px;
    font-weight: 500;
    transition: color .2s ease;
}
ol.breadcrumb.page-breadcrumb li a:hover span {
    color: #db4223;
}

/* ---------- Hero banner ---------- */
.gallery-hero .report_heading,
.gallery-hero .mob_report_heading {
    background-color: #17484a;
}

/* ---------- Intro heading ---------- */
.gallery-intro h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    text-align: center;
}

.gallery-intro .accent {
    color: #db4223;
}

/* ---------- Photo grid ---------- */
.gallery-tile {
    height: 350px;
    width: 100%;
    margin-bottom: 8px;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    background-color: #ededed;
    display: block;
}

.gallery-tile img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .3s ease-in-out;
}

.gallery-tile:hover img {
    transform: translate(-50%, -50%) scale(1.06);
}

.gallery-caption {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 30px;
    font-size: 15px;
    font-weight: 600;
    color: #46545c;
}