/* ============================================================
   css/public-view.css   (SIKAT_UPDATE67_V1)
   Public website (Home, About Us, Program, Gallery, Sponsorship,
   Transparency, Privacy Policy, Terms of Use):
     - the SIKAT Aurora logo is a link to the Home page
     - lighter shadows, less empty space between sections
     - smaller photos (gallery photos show the whole picture)
     - clickable Upcoming Events with a details window
     - small-screen fixes
   Loaded last on those pages; "html body" makes these rules win over
   the page's own older rules without changing those files.
   ============================================================ */

/* ---------- 1. Logo = link to the Home page ---------- */
html body a.uh-logo,
html body a.uh-footer-logo { text-decoration: none; color: inherit; cursor: pointer; }
html body a.uh-logo:focus-visible,
html body a.uh-footer-logo:focus-visible { outline: 2px solid #F47A20; outline-offset: 4px; border-radius: 8px; }

/* ---------- 4. Shadows: the same look (orange glow, soft fades), only lighter ---------- */
/* SIKAT_UPDATE69_V1: reduced, not removed */
html body .uh-navbar { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); }
html body .uh-footer { box-shadow: 0 -10px 12px rgba(0, 0, 0, 0.14); }
html body .uh-program-card,
html body .uh-story-card,
html body .uh-event-card,
html body .uh-photo { box-shadow: 0 2px 8px rgba(244, 122, 32, 0.28); }
html body .uh-story-card:hover,
html body .uh-event-card:hover { box-shadow: 0 6px 14px rgba(244, 122, 32, 0.36); }
html body .gl-photo { box-shadow: 0 2px 8px rgba(244, 122, 32, 0.16); }
html body .gl-photo--clickable:hover { box-shadow: 0 6px 16px rgba(244, 122, 32, 0.30); transform: scale(1.015); }   /* SIKAT_UPDATE70_V1: smaller zoom on hover (was 1.04) */
html body .uh-wwa-photo { box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.14); }
html body .ab-hero-photo,
html body .ab-history-photo { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10); }
html body .uh-program-icon,
html body .uh-mvv-icon,
html body .uh-stat-icon { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16); }
html body .ab-value-icon { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
html body .ab-prog-card { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
html body .form-panel { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); }

/* ---------- 5. Less empty space between sections ---------- */
html body .uh-who-we-are { margin-top: 56px; margin-bottom: 56px; }
html body .uh-programs,
html body .uh-stories { margin-top: 56px; margin-bottom: 56px; }
html body .uh-stats { margin-top: 40px; margin-bottom: 40px; padding-top: 28px; padding-bottom: 28px; }
html body .uh-photos { margin-top: 40px; margin-bottom: 40px; }
html body .uh-events { margin-top: 40px; margin-bottom: 56px; }
html body .ab-mv { padding-bottom: 56px; }
html body .ab-values { padding-top: 64px; padding-bottom: 64px; }
html body .ab-history { padding-top: 32px; padding-bottom: 64px; }
html body .ab-programs { padding-top: 56px; padding-bottom: 56px; }
html body .pg-programs { padding-top: 56px; padding-bottom: 48px; gap: 56px; }
html body .pg-photo-strip { padding-bottom: 40px; }
html body .gl-filter-row { padding-top: 36px; padding-bottom: 20px; }
html body .gl-gallery-grid { padding-bottom: 56px; }
html body .pg-sponsor-section { padding-top: 40px !important; padding-bottom: 40px; }
html body .pg-transparency-banner { margin-bottom: 32px; }

/* ---------- 6. Smaller photos ---------- */
html body .uh-wwa-photo { flex: 0 0 260px; width: 260px; height: 208px; }
html body .uh-photo { width: 260px; height: 170px; }
html body .pg-program-photo { flex: 0 0 38%; max-width: 440px; }
html body .pg-strip-photo { height: 170px; }
html body .pg-strip-photo--square { width: 170px; }
html body .pg-strip-photo--wide { width: 248px; }
html body .ab-hero-photo { height: 300px; }
html body .ab-history-photo { max-width: 460px; }
html body .ab-prog-photo { height: 170px; }
html body .pg-sponsor-card-img { height: 160px; }

/* Photos picked from the Gallery list show the whole picture: no cropping,
   no stretching; any space around it is a soft background. */
html body .uh-photo,
html body .pg-strip-photo {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: #F5F1EC !important;
}

/* Gallery: the original mosaic (big and small photos mixed), just smaller.
   SIKAT_UPDATE69_V1 */
html body .gl-gallery-grid { grid-auto-rows: 240px; gap: 16px; }
html body .gl-gallery-grid .gl-photo {
    background-size: cover !important;
    background-color: #FDE9D7 !important;
}
@media (max-width: 900px) {
    html body .gl-gallery-grid { grid-auto-rows: 180px; gap: 14px; }
}
@media (max-width: 600px) {
    /* phones: two columns, the big photos still span both */
    html body .gl-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; }
    html body .gl-gallery-grid .gl-photo--wide { grid-column: span 2; aspect-ratio: auto; height: auto; }
    html body .gl-gallery-grid .gl-photo--square,
    html body .gl-gallery-grid .gl-photo--tall { grid-column: span 1; aspect-ratio: auto; height: auto; }
    html body .gl-gallery-grid .gl-photo { border-radius: 10px; }
    /* the first photo is big too, so the small ones always come in pairs (no gaps) */
    html body .gl-gallery-grid .gl-photo:first-child { grid-column: span 2; }
}

/* ---------- 3. Upcoming Events: clickable cards + details window ---------- */
html body .uh-event-card.sik-ev-card { cursor: pointer; text-align: left; transition: box-shadow 0.15s ease, transform 0.15s ease; }
html body .uh-event-card.sik-ev-card:hover { transform: translateY(-2px); }
html body .uh-event-card.sik-ev-card:focus-visible { outline: 2px solid #F47A20; outline-offset: 3px; }
.sik-ev-program { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px; background: #FFF1E6; color: #C4560F; font: 700 11px 'Montserrat', sans-serif; letter-spacing: 0.04em; }
.sik-ev-date { margin: 4px 0 0; font: 500 14px/1.5 'Montserrat', sans-serif; color: #5C616E; }
.sik-ev-more { display: inline-block; margin-top: 10px; font: 700 13px 'Montserrat', sans-serif; color: #F47A20; }

.sik-ev-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(16, 24, 40, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.sik-ev-box { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto; background: #FFFFFF; border-radius: 16px; padding: 24px; box-sizing: border-box; box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18); font-family: 'Montserrat', sans-serif; color: #101828; }
.sik-ev-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: none; border-radius: 50%; background: #F2F4F7; color: #344054; font-size: 16px; cursor: pointer; }
.sik-ev-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 40px 10px 0; }
.sik-ev-chip { padding: 3px 10px; border-radius: 999px; background: #FFF1E6; color: #C4560F; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.sik-ev-chip--status { background: #ECFDF3; color: #067647; }
.sik-ev-title { margin: 0 40px 16px 0; font-size: 22px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.sik-ev-rows { margin: 0 0 16px; border-top: 1px solid #F2F4F7; }
.sik-ev-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F2F4F7; font-size: 14px; line-height: 1.5; }
.sik-ev-row span { flex: 0 0 96px; color: #667085; }
.sik-ev-row strong { flex: 1; font-weight: 600; overflow-wrap: anywhere; }
.sik-ev-sub { margin: 16px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #F47A20; text-transform: uppercase; }
.sik-ev-text { margin: 0; font-size: 14px; line-height: 1.6; color: #344054; white-space: pre-line; overflow-wrap: anywhere; }
.sik-ev-actions { display: flex; gap: 10px; margin-top: 20px; }
.sik-ev-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; font: 700 14px 'Montserrat', sans-serif; text-decoration: none; cursor: pointer; border: 1px solid #D0D5DD; background: #FFFFFF; color: #344054; }
.sik-ev-btn--primary { background: #F47A20; border-color: #F47A20; color: #FFFFFF; }
body.sik-ev-open { overflow: hidden; }

/* ---------- 2. Phones and small tablets ---------- */
html, body { max-width: 100%; }
html body { overflow-x: hidden; }
html body img { max-width: 100%; }
html body p, html body h1, html body h2, html body h3, html body li { overflow-wrap: break-word; }

@media (max-width: 600px) {
    html body .uh-cover.sik-cover { min-height: 360px; }
    html body .uh-cover.sik-cover .uh-cover-content { padding: 32px 20px; }

    html body .uh-who-we-are { margin-top: 28px; margin-bottom: 28px; }
    html body .uh-programs,
    html body .uh-stories { margin-top: 36px; margin-bottom: 36px; }
    html body .uh-stats { margin-top: 24px; margin-bottom: 24px; padding-top: 20px; padding-bottom: 20px; }
    html body .uh-photos { margin-top: 28px; margin-bottom: 28px; }
    html body .uh-events { margin-top: 28px; margin-bottom: 40px; }
    html body .ab-mv { padding-bottom: 36px; }
    html body .ab-values { padding-top: 36px; padding-bottom: 36px; }
    html body .ab-history { padding-top: 20px; padding-bottom: 40px; }
    html body .ab-programs { padding-top: 36px; padding-bottom: 36px; }
    html body .pg-programs { padding-top: 32px; padding-bottom: 28px; gap: 36px; }
    html body .pg-photo-strip { padding-bottom: 28px; }
    html body .gl-filter-row { padding-top: 24px; padding-bottom: 14px; }
    html body .gl-gallery-grid { padding-bottom: 36px; }
    html body .pg-sponsor-section { padding-top: 28px !important; padding-bottom: 28px; }

    html body .uh-wwa-photo { width: 100%; max-width: 320px; height: 170px; flex: none; }
    html body .uh-photo { width: 200px; height: 132px; }
    html body .pg-program-photo { max-width: 100%; max-height: 220px; }
    html body .pg-strip-photo { height: 130px; }
    html body .pg-strip-photo--square { width: 130px; }
    html body .pg-strip-photo--wide { width: 190px; }
    html body .ab-history-photo { max-height: 220px; }
    html body .ab-prog-photo { height: 150px; }
    html body .pg-sponsor-card-img { height: 150px; }

    html body .uh-event-card { flex-basis: 100%; max-width: 100%; padding: 18px 20px; }
    html body .uh-event-name { font-size: 18px; line-height: 1.25; }

    html body .gl-tab { padding-top: 6px; }

    .sik-ev-box { padding: 20px 18px; border-radius: 14px; }
    .sik-ev-title { font-size: 19px; }
    .sik-ev-row span { flex-basis: 84px; }
}
@media (max-width: 360px) {
    html body .uh-cover.sik-cover .uh-cover-title { font-size: 24px; }
    html body .uh-cover.sik-cover .uh-cover-btn-row { flex-wrap: wrap; }
    html body .uh-photo { width: 170px; height: 112px; }
    .sik-ev-row { flex-direction: column; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    html body .uh-event-card.sik-ev-card:hover { transform: none; }
}
html body a.uh-footer-logo { width: fit-content; }
@media (max-width: 600px) {
    html body .uh-story-card { height: auto; min-height: 0; }
    html body .uh-story-image { height: 120px; }
}
html body .ab-values-title { margin-bottom: 40px; }
@media (max-width: 900px) {
    html body .ab-hero-photo { height: 200px; }
}
@media (max-width: 600px) {
    html body .ab-hero-photo { height: 110px; }
    html body .ab-values-title { margin-bottom: 24px; }
    html body .ab-values-row { gap: 20px; }
    html body .ab-value-icon { width: 64px; height: 64px; margin-bottom: 12px; }
}

/* ============================================================
   SIKAT_UPDATE87_V1 - Program page: less empty space
   Each program (photo + text) now sits together in a centred column
   instead of being pushed to the far edges of wide screens.
   ============================================================ */
@media (min-width: 901px) {
    html body .pg-programs { gap: 40px; padding-top: 48px; padding-bottom: 40px; }
    html body .pg-program-inner { max-width: 1100px; margin-left: auto; margin-right: auto; gap: 44px; }
    html body .pg-program-photo { flex: 0 0 42%; max-width: 460px; }
    html body .pg-program-content { max-width: 600px; }
    html body .pg-program-desc { max-width: none; }
}

/* ============================================================
   SIKAT_UPDATE88_V1 - Program page photo strip: every photo the same size
   All photos in the moving strip are now one size and fill their frame
   (no more mix of square and wide boxes, no empty bands around a photo).
   ============================================================ */
html body .pg-strip-photo,
html body .pg-strip-photo--square,
html body .pg-strip-photo--wide {
    width: 260px;
    height: 175px;
    background-size: cover !important;
    background-position: center !important;
}
@media (max-width: 900px) {
    html body .pg-strip-photo,
    html body .pg-strip-photo--square,
    html body .pg-strip-photo--wide { width: 200px; height: 135px; }
}