/* =========================================================
   VWS — GALLERY PAGE
   Simple, warm NGO visual language matching the landing-page feel
   ========================================================= */

.galleryus-page {
    --gallery-primary: #C97824;
    --gallery-primary-dark: #A94F24;
    --gallery-primary-soft: #EEE6DA;
    --gallery-secondary: #2F2B27;
    --gallery-secondary-light: #4A3B31;
    --gallery-accent: #8A6842;
    --gallery-accent-soft: #F2EDE4;
    --gallery-terracotta-soft: #F2EDE4;
    --gallery-primary-light: #E0A052;
    --gallery-off-white: #FBF8F2;
    --gallery-white: #FFFFFF;
    --gallery-text: #34302B;
    --gallery-muted: #756E66;
    --gallery-border: #E5DED4;
    --gallery-section: #F2EDE4;
    color: var(--gallery-text);
    overflow: hidden;
    background: var(--gallery-white);
}

.galleryus-page * { box-sizing: border-box; }
.galleryus-page a { -webkit-tap-highlight-color: transparent; }

/* =========================================================
   HERO — documentary, local and human
   The photograph is the visual argument; the interface stays quiet.
   ========================================================= */
.galleryus-hero {
    position: relative;
    overflow: hidden;
    background: var(--gallery-off-white);
    border-bottom: 1px solid var(--gallery-border);
}

.galleryus-hero::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42%;
    height: 8px;
    background: var(--gallery-primary);
}

.galleryus-hero .container {
    position: relative;
    z-index: 2;
}

.galleryus-hero-layout {
    min-height: 515px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .78fr);
    gap: clamp(45px, 7vw, 105px);
    align-items: center;
    padding: 72px 0 78px;
}

.galleryus-hero-content {
    max-width: 650px;
}

.galleryus-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
    color: var(--gallery-primary-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.galleryus-eyebrow-line {
    width: 32px;
    height: 2px;
    background: var(--gallery-primary);
}

.galleryus-hero h1 {
    margin: 0;
    max-width: 680px;
    color: var(--gallery-secondary) !important;
    font-size: clamp(43px, 5.6vw, 70px);
    line-height: 1.02;
    letter-spacing: -2.4px;
    font-weight: 750;
}

.galleryus-hero h1 span {
    display: block;
    color: var(--gallery-primary-dark) !important;
    font-weight: 650;
}

.galleryus-hero-content > p {
    max-width: 555px;
    margin: 25px 0 27px;
    color: var(--gallery-muted) !important;
    font-size: 16px;
    line-height: 1.8;
}

.galleryus-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--gallery-primary);
    color: var(--gallery-secondary) !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: color .2s ease, gap .2s ease, border-color .2s ease;
}

.galleryus-hero-link i {
    color: var(--gallery-primary);
}

.galleryus-hero-link:hover {
    gap: 14px;
    color: var(--gallery-primary-dark) !important;
}

/* Real gallery photography replaces the old decorative dashboard/card visual. */
.galleryus-hero-photo {
    position: relative;
    width: min(100%, 470px);
    margin: 0 auto;
    transform: rotate(1.2deg);
}

.galleryus-photo-paper {
    position: relative;
    padding: 10px 10px 13px;
    background: var(--gallery-white);
    box-shadow: 0 18px 38px rgba(52,48,43,.12);
}

.galleryus-photo-paper::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(255,255,255,.55);
    pointer-events: none;
}

.galleryus-photo-paper img {
    width: 100%;
    height: clamp(300px, 34vw, 390px);
    display: block;
    object-fit: cover;
}

.galleryus-hero-photo figcaption {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 13px;
    padding-left: 5px;
    color: var(--gallery-muted);
    font-size: 11px;
    line-height: 1.5;
}

.galleryus-hero-photo figcaption span {
    color: var(--gallery-primary-dark);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.galleryus-hero-photo-empty .galleryus-photo-paper {
    min-height: 360px;
    display: grid;
    place-items: center;
    color: var(--gallery-primary);
    background: var(--gallery-section);
}

.galleryus-hero-photo-empty i { font-size: 42px; }

/* Keep legacy hero elements harmless if an older cached PHP fragment is served. */
.galleryus-hero-pattern,
.galleryus-hero-glow,
.galleryus-hero-scroll,
.galleryus-hero-visual {
    display: none !important;
}

/* =========================================================
   SHARED TYPOGRAPHY
   ========================================================= */
.galleryus-section-label {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--gallery-primary-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.galleryus-section-heading h2,
.galleryus-heading-row h2,
.galleryus-centered-heading h2 {
    color: var(--gallery-secondary);
}

.galleryus-section-heading h2 {
    margin: 0;
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.12;
    letter-spacing: -1.2px;
}

.galleryus-section-heading h2 span,
.galleryus-centered-heading h2 span,
.galleryus-heading-row h2 span { color: var(--gallery-primary-dark); }

/* =========================================================
   INTRO
   ========================================================= */
.galleryus-intro {
    padding: 88px 0;
    background: var(--gallery-white);
}

.galleryus-intro-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 70px;
    align-items: start;
}

.galleryus-intro-content p {
    margin: 0 0 18px;
    color: var(--gallery-muted);
    font-size: 15px;
    line-height: 1.8;
}

.galleryus-intro-content .galleryus-lead {
    color: var(--gallery-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.7;
}

/* =========================================================
   MAIN GALLERY
   ========================================================= */
.galleryus-main {
    padding: 88px 0;
    background: var(--gallery-section);
}

.galleryus-heading-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 35px;
    margin-bottom: 28px;
}

.galleryus-heading-row h2 {
    margin: 0;
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.12;
    letter-spacing: -1.2px;
}

.galleryus-heading-row > p {
    max-width: 280px;
    margin: 0;
    color: var(--gallery-muted);
    font-size: 13px;
    line-height: 1.7;
    text-align: right;
}

.galleryus-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.galleryus-filter {
    min-height: 39px;
    padding: 0 15px;
    border: 1px solid #E5DED4;
    border-radius: 20px;
    background: var(--gallery-white);
    color: var(--gallery-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: .2s ease;
}

.galleryus-filter:hover {
    border-color: var(--gallery-primary);
    color: var(--gallery-secondary);
}

.galleryus-filter.active {
    border-color: var(--gallery-primary);
    background: var(--gallery-primary);
    color: #fff;
}

.galleryus-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.galleryus-item {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--gallery-border);
    border-radius: 12px;
    background: var(--gallery-white);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.galleryus-item:hover {
    transform: translateY(-4px);
    border-color: #E5DED4;
    box-shadow: 0 15px 35px rgba(52,48,43,.10);
}

.galleryus-image {
    position: relative;
    min-height: 250px;
    overflow: hidden;
    background: #EEE6DA;
}

.galleryus-image img {
    width: 100%;
    height: 250px;
    display: block;
    object-fit: cover;
    transition: transform .4s ease;
}

.galleryus-item:hover .galleryus-image img { transform: scale(1.035); }

.galleryus-placeholder-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--gallery-primary);
}

.galleryus-placeholder-content i {
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.86);
    font-size: 25px;
}

.galleryus-placeholder-content span { font-size: 14px; font-weight: 800; }
.galleryus-placeholder-content small { margin-top: 5px; color: var(--gallery-muted); font-size: 11px; }

.galleryus-caption { padding: 17px 19px 20px; }
.galleryus-caption > span {
    display: block;
    margin-bottom: 5px;
    color: var(--gallery-primary-dark);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
.galleryus-caption h3 { margin: 0; color: var(--gallery-secondary); font-size: 16px; line-height: 1.4; }
.galleryus-caption p { margin: 8px 0 0; color: var(--gallery-muted); font-size: 12px; line-height: 1.65; }

.galleryus-empty { padding: 65px 20px; text-align: center; color: var(--gallery-muted); }
.galleryus-empty i { margin-bottom: 14px; color: #756E66; font-size: 38px; }
.galleryus-empty h3 { margin: 0 0 7px; color: var(--gallery-secondary); font-size: 19px; }
.galleryus-empty p { margin: 0; font-size: 13px; }
.galleryus-item.galleryus-hidden { display: none; }

/* =========================================================
   PHOTO NOTE
   ========================================================= */
.galleryus-note { padding: 0 0 88px; background: var(--gallery-section); }
.galleryus-note-box {
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 18px;
    border: 1px solid #E5DED4;
    border-left: 4px solid var(--gallery-primary-dark);
    border-radius: 10px;
    background: var(--gallery-white);
}
.galleryus-note-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gallery-terracotta-soft);
    color: var(--gallery-primary-dark);
    font-size: 20px;
}
.galleryus-note-box h3 { margin: 0 0 5px; color: var(--gallery-secondary); font-size: 16px; }
.galleryus-note-box p { margin: 0; color: var(--gallery-muted); font-size: 12px; line-height: 1.7; }

/* =========================================================
   GET INVOLVED
   ========================================================= */
.galleryus-involve { padding: 88px 0; background: var(--gallery-white); }
.galleryus-centered-heading { max-width: 700px; margin: 0 auto 45px; text-align: center; }
.galleryus-centered-heading h2 { margin: 0; font-size: clamp(34px, 4vw, 50px); line-height: 1.12; letter-spacing: -1.2px; }
.galleryus-centered-heading p { max-width: 590px; margin: 15px auto 0; color: var(--gallery-muted); line-height: 1.75; font-size: 14px; }
.galleryus-involve-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.galleryus-involve-card {
    position: relative;
    min-height: 200px;
    padding: 27px;
    border: 1px solid var(--gallery-border);
    border-radius: 12px;
    background: var(--gallery-off-white);
    color: inherit;
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.galleryus-involve-card:hover { transform: translateY(-4px); border-color: #E5DED4; box-shadow: 0 15px 35px rgba(52,48,43,.09); }
.galleryus-involve-icon { width: 54px; height: 54px; margin-bottom: 20px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: var(--gallery-primary-soft); color: var(--gallery-primary); font-size:21px; }
.galleryus-involve-card h3 { margin: 0 0 7px; color: var(--gallery-secondary); font-size: 19px; }
.galleryus-involve-card p { margin: 0; color: var(--gallery-muted); font-size: 13px; line-height: 1.7; }
.galleryus-arrow { position:absolute; right:20px; bottom:20px; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--gallery-white); color: var(--gallery-primary); transition: transform .22s ease; }
.galleryus-involve-card:hover .galleryus-arrow { transform: translateX(4px); }

/* =========================================================
   FINAL CTA — green instead of corporate navy
   ========================================================= */
.galleryus-cta {
    position: relative;
    padding: 88px 0;
    overflow: hidden;
    color: #fff;
    text-align: center;
    background: var(--gallery-secondary);
}
.galleryus-cta-glow { position:absolute; width:360px; height:360px; right:-170px; top:-190px; border-radius:50%; background:#E0A052; filter:blur(75px); opacity:.15; }
.galleryus-cta-content { position:relative; z-index:2; max-width:720px; margin:auto; }
.galleryus-cta-content > span { display:inline-block; margin-bottom:14px; color:#EEE6DA; font-size:10px; font-weight:800; letter-spacing:1.7px; }
.galleryus-cta-content h2 { margin:0; color:#fff; font-size:clamp(36px,5vw,55px); line-height:1.08; letter-spacing:-1.3px; }
.galleryus-cta-content h2 span { display:block; color:#E0A052; }
.galleryus-cta-content p { max-width:600px; margin:18px auto 28px; color:#EEE6DA; line-height:1.8; font-size:14px; }
.galleryus-cta-buttons { display:flex; justify-content:center; flex-wrap:wrap; gap:11px; }
.galleryus-cta-primary,.galleryus-cta-secondary { min-height:47px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:7px; text-decoration:none; font-size:13px; font-weight:800; transition:.22s ease; }
.galleryus-cta-primary { background:#fff; color:var(--gallery-secondary); }
.galleryus-cta-secondary { border:1px solid rgba(255,255,255,.42); background:transparent; color:#fff; }
.galleryus-cta-primary:hover,.galleryus-cta-secondary:hover { transform:translateY(-2px); }

/* =========================================================
   LIGHTBOX — simple paper panel
   ========================================================= */
.galleryus-lightbox { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:25px; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .22s ease, visibility .22s ease; }
.galleryus-lightbox.is-open { visibility:visible; opacity:1; pointer-events:auto; }
.galleryus-lightbox-backdrop { position:absolute; inset:0; background:rgba(34,42,35,.88); backdrop-filter:blur(6px); }
.galleryus-lightbox-dialog { position:relative; z-index:2; width:min(1050px,94vw); max-height:94vh; display:flex; flex-direction:column; align-items:center; padding:20px; border:1px solid rgba(255,255,255,.18); border-radius:14px; background:#FBF8F2; box-shadow:0 25px 80px rgba(0,0,0,.35); }
.galleryus-lightbox-image-wrap { width:100%; display:flex; align-items:center; justify-content:center; min-height:0; }
.galleryus-lightbox-image { display:block; max-width:100%; max-height:67vh; width:auto; height:auto; object-fit:contain; border-radius:7px; }
.galleryus-lightbox-close,.galleryus-lightbox-prev,.galleryus-lightbox-next { position:absolute; z-index:4; width:42px; height:42px; border:1px solid #E5DED4; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; background:rgba(255,255,255,.96); color:var(--gallery-secondary); box-shadow:0 5px 15px rgba(0,0,0,.10); }
.galleryus-lightbox-close { top:14px; right:14px; }
.galleryus-lightbox-prev { left:14px; top:50%; transform:translateY(-50%); }
.galleryus-lightbox-next { right:14px; top:50%; transform:translateY(-50%); }
.galleryus-lightbox-info { width:100%; padding:17px 8px 3px; text-align:left; }
.galleryus-lightbox-category { display:block; margin-bottom:4px; color:var(--gallery-primary-dark); font-size:9px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; }
.galleryus-lightbox-title { margin:0; color:var(--gallery-secondary); font-size:20px; }
.galleryus-lightbox-description { margin:6px 0 0; color:var(--gallery-muted); font-size:12px; line-height:1.65; }
body.galleryus-lightbox-open { overflow:hidden; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1000px) {
    .galleryus-intro-grid { grid-template-columns:1fr; gap:28px; }
    .galleryus-grid,.galleryus-involve-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:700px) {
    .galleryus-hero-layout {
        min-height:auto;
        grid-template-columns:1fr;
        gap:34px;
        padding:58px 0 66px;
    }
    .galleryus-hero-content { max-width:none; }
    .galleryus-hero h1 { font-size:clamp(40px,11vw,54px); letter-spacing:-1.5px; }
    .galleryus-hero-content > p { font-size:15px; margin-top:20px; }
    .galleryus-hero-photo { width:min(100%,430px); transform:rotate(.7deg); }
    .galleryus-photo-paper img { height:330px; }
    .galleryus-intro,.galleryus-main,.galleryus-involve { padding:68px 0; }
    .galleryus-heading-row { display:block; }
    .galleryus-heading-row > p { margin-top:12px; text-align:left; }
    .galleryus-filters { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; scrollbar-width:none; }
    .galleryus-filters::-webkit-scrollbar { display:none; }
    .galleryus-filter { flex:0 0 auto; }
    .galleryus-grid,.galleryus-involve-grid { grid-template-columns:1fr; gap:14px; }
    .galleryus-image,.galleryus-image img { min-height:225px; height:225px; }
    .galleryus-note { padding-bottom:68px; }
    .galleryus-note-box { padding:21px; align-items:flex-start; }
    .galleryus-cta { padding:70px 0; }
    .galleryus-cta-buttons { flex-direction:column; align-items:stretch; }
    .galleryus-cta-primary,.galleryus-cta-secondary { width:100%; }
    .galleryus-lightbox { padding:12px; }
    .galleryus-lightbox-dialog { width:100%; padding:13px; border-radius:11px; }
    .galleryus-lightbox-image { max-height:60vh; }
    .galleryus-lightbox-prev,.galleryus-lightbox-next { width:36px; height:36px; }
}

@media (prefers-reduced-motion:reduce) {
    .galleryus-page *, .galleryus-page *::before, .galleryus-page *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}