/* =====================================================================
   Zaitoon Educational & Welfare Society
   Shared stylesheet
   Palette: olive-ink, olive, leaf, wheat-gold on warm paper
   Type: Fraunces (display) + Source Sans 3 (body)
   ===================================================================== */

:root{
  --ink:        #20301f;   /* deep olive-ink: dark surfaces, headings */
  --olive:      #4a5d32;   /* primary brand green */
  --leaf:       #6e8b3d;   /* lighter leaf green: accents, hovers */
  --gold:       #d9a441;   /* wheat-gold: CTAs, emphasis */
  --gold-deep:  #b9852b;
  --paper:      #faf7f0;   /* main light background */
  --paper-2:    #f1ece0;   /* subtle alt panel */
  --text:       #2b2a26;   /* body text on light */
  --muted:      #6b6a60;   /* secondary text */
  --line:       #e2dccd;   /* hairlines on light */
  --line-dark:  #38492f;   /* hairlines on dark */

  --maxw: 1140px;
  --gap: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 14px;
  --shadow: 0 18px 40px -24px rgba(32,48,31,.45);

  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--f-body);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--olive); text-underline-offset:3px; }
a:hover{ color:var(--leaf); }

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.35rem, 1.6rem + 3.4vw, 4rem); }
h2{ font-size:clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem); }
h3{ font-size:clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
p{ margin:0 0 1rem; }

/* ---------- layout helpers ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2rem); }
.section{ padding-block:clamp(3.5rem, 6vw, 6rem); }
.section--tight{ padding-block:clamp(2.5rem,4vw,3.75rem); }
.section--paper2{ background:var(--paper-2); }
.section--ink{ background:var(--ink); color:#e7e6dd; }
.section--ink h2,.section--ink h3{ color:#fff; }
.center{ text-align:center; }
.measure{ max-width:62ch; }
.measure.center{ margin-inline:auto; }

.eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--leaf); margin:0 0 1rem; display:inline-flex; gap:.55rem; align-items:center;
}
.section--ink .eyebrow{ color:var(--gold); }
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.6; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-body); font-weight:600; font-size:1rem;
  padding:.72rem 1.4rem; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold:hover{ background:var(--gold-deep); color:var(--ink); }
.btn--olive{ background:var(--olive); color:#fff; }
.btn--olive:hover{ background:var(--leaf); color:#fff; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--olive); color:var(--olive); }
.section--ink .btn--ghost{ color:#fff; border-color:var(--line-dark); }
.section--ink .btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(250,247,240,.9); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:70px; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); font-family:var(--f-display); font-weight:600; font-size:1.4rem; letter-spacing:-.01em; }
.brand:hover{ color:var(--ink); }
.brand .sprig-mini{ width:30px; height:38px; color:var(--olive); flex:none; }
.brand small{ display:block; font-family:var(--f-body); font-weight:600; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

.nav-links{ display:flex; align-items:center; gap:.35rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  text-decoration:none; color:var(--text); font-weight:600; font-size:.97rem;
  padding:.5rem .8rem; border-radius:8px; transition:background .18s ease,color .18s ease;
}
.nav-links a:hover{ background:var(--paper-2); color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--olive); }
.nav-links a[aria-current="page"]::after{ content:""; display:block; height:2px; background:var(--gold); border-radius:2px; margin-top:2px; }
.nav-cta{ margin-left:.4rem; }

.nav-toggle{ display:none; background:none; border:1.5px solid var(--line); border-radius:10px; width:44px; height:42px; cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:""; display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:1024px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:.15rem;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:.75rem clamp(1.15rem,4vw,2rem) 1.15rem;
    box-shadow:var(--shadow);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:.7rem .6rem; }
  .nav-links a[aria-current="page"]::after{ display:none; }
  .nav-cta{ margin:.4rem 0 0; }
  .btn.nav-cta{ justify-content:center; }
}

/* ---------- hero ---------- */
.hero{ position:relative; background:var(--ink); color:#eae9df; overflow:hidden; }
.hero::after{ /* soft glow */
  content:""; position:absolute; inset:0;
  background:radial-gradient(1200px 500px at 80% -10%, rgba(110,139,61,.35), transparent 60%),
             radial-gradient(700px 400px at 0% 110%, rgba(217,164,65,.14), transparent 55%);
  pointer-events:none;
}
.hero .container{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; padding-block:clamp(3.5rem,7vw,6.5rem); }
.hero h1{ color:#fff; }
.hero h1 em{ font-style:italic; color:var(--gold); }
.hero .lede{ font-size:clamp(1.05rem,1rem + .4vw,1.28rem); color:#d7d6cb; max-width:46ch; }
.hero .btn-row{ margin-top:1.6rem; }
.hero-art{ display:flex; justify-content:center; align-items:center; }
.hero-art .sprig{ width:min(300px,80%); height:auto; color:var(--leaf); filter:drop-shadow(0 20px 30px rgba(0,0,0,.35)); }

@media (max-width:820px){
  .hero .container{ grid-template-columns:1fr; text-align:left; }
  .hero-art{ order:-1; justify-content:flex-start; }
  .hero-art .sprig{ width:120px; }
}

/* ---------- olive sprig (signature) ---------- */
.stem{ stroke:currentColor; stroke-width:3; stroke-linecap:round; fill:none; opacity:.9; }
.leaf{ fill:currentColor; }
.leaf--alt{ fill:currentColor; opacity:.7; }
.olive-fruit{ fill:var(--gold); }

/* ---------- section divider ---------- */
.divider{ display:flex; align-items:center; justify-content:center; gap:1rem; color:var(--leaf); padding-block:.5rem; }
.divider::before,.divider::after{ content:""; height:1px; width:min(120px,20vw); background:var(--line); }
.divider .sprig-mini{ width:22px; height:28px; }

/* ---------- generic grid ---------- */
.grid{ display:grid; gap:clamp(1rem,2.4vw,1.6rem); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* two-column feature (text + media) */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.split--reverse .split-media{ order:2; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; } .split--reverse .split-media{ order:0; } }

/* ---------- cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem; transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:#d6cfbc; }
.card h3{ margin-top:.35rem; }
.card p:last-child{ margin-bottom:0; }
.card .leaf-mark{ width:34px; height:40px; color:var(--olive); margin-bottom:.4rem; }

/* project card with media */
.pcard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .2s ease; }
.pcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.pcard .pcard-body{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.pcard .pcard-body p{ color:var(--text); }
.pcard .pcard-foot{ margin-top:auto; padding-top:1rem; }

.tag{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.28rem .6rem; border-radius:999px; }
.tag--active{ background:#e7efd8; color:#3f5320; }
.tag--fund{ background:#fbeccb; color:#8a5f10; }
.tag--planned{ background:#e9e6dd; color:#5f5c50; }

/* ---------- photo placeholder ---------- */
.photo-ph{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  background:
    linear-gradient(135deg, rgba(110,139,61,.10), rgba(217,164,65,.08)),
    var(--paper-2);
  border:1px dashed #c9c0aa; border-radius:var(--radius);
  color:var(--muted); text-align:center; padding:1.5rem; min-height:220px;
  aspect-ratio:4/3; overflow:hidden;
}
.photo-ph[data-ratio="wide"]{ aspect-ratio:16/9; }
.photo-ph[data-ratio="tall"]{ aspect-ratio:3/4; }
.photo-ph[data-ratio="square"]{ aspect-ratio:1/1; }
.photo-ph .ph-icon{ width:40px; height:40px; color:var(--leaf); opacity:.8; }
.photo-ph .ph-label{ font-size:.85rem; font-weight:600; color:#7c7462; max-width:26ch; }
.photo-ph .ph-note{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#a89f88; }
.pcard .photo-ph{ border:none; border-radius:0; border-bottom:1px dashed #d3cbb6; }

/* ---------- stats band ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.stat{ text-align:center; }
.stat .num{ font-family:var(--f-display); font-weight:600; font-size:clamp(2.2rem,1.6rem + 2vw,3.2rem); color:var(--gold); line-height:1; }
.stat .lbl{ font-size:.9rem; color:#cfcec4; margin-top:.4rem; }
@media (max-width:700px){ .stats{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; } }

/* ---------- quote / founder ---------- */
.quote{ border-left:3px solid var(--gold); padding:.25rem 0 .25rem 1.5rem; font-family:var(--f-display); font-size:clamp(1.3rem,1.1rem + .9vw,1.85rem); font-style:italic; line-height:1.35; color:var(--ink); }
.section--ink .quote{ color:#fff; }
.quote-attr{ margin-top:1rem; font-family:var(--f-body); font-style:normal; font-size:.95rem; font-weight:600; color:var(--muted); }
.section--ink .quote-attr{ color:#bfc4b0; }

/* ---------- list with leaf bullets ---------- */
.leaf-list{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.leaf-list li{ position:relative; padding-left:1.9rem; }
.leaf-list li::before{
  content:""; position:absolute; left:0; top:.35em; width:12px; height:16px;
  background:var(--olive);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'><path d='M6 16C2 12 0 8 2 3c2 3 3 3 4 0 1 3 2 3 4 0 2 5 0 9-4 13z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'><path d='M6 16C2 12 0 8 2 3c2 3 3 3 4 0 1 3 2 3 4 0 2 5 0 9-4 13z'/></svg>") center/contain no-repeat;
}
.section--ink .leaf-list li::before{ background:var(--gold); }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--olive); color:#fff; border-radius:var(--radius); padding:clamp(2rem,4vw,3.25rem); text-align:center; position:relative; overflow:hidden; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:#eef1e6; max-width:52ch; margin-inline:auto; }
.cta-band .btn-row{ justify-content:center; margin-top:1.5rem; }

/* ---------- contact form ---------- */
.form-grid{ display:grid; gap:1rem; }
.field label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:.35rem; color:var(--ink); }
.field input,.field textarea{
  width:100%; font-family:var(--f-body); font-size:1rem; color:var(--text);
  padding:.75rem .9rem; border:1.5px solid var(--line); border-radius:10px; background:#fff;
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--olive); box-shadow:0 0 0 3px rgba(110,139,61,.2); }
.field textarea{ min-height:150px; resize:vertical; }

.info-list{ list-style:none; margin:0; padding:0; display:grid; gap:1.2rem; }
.info-list .k{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--leaf); font-weight:700; }
.info-list .v{ font-size:1.05rem; color:var(--ink); }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:#c9cbbd; }
.site-footer a{ color:#c9cbbd; text-decoration:none; }
.site-footer a:hover{ color:var(--gold); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:2rem; padding-block:clamp(2.5rem,5vw,4rem); }
.footer-grid h4{ color:#fff; font-family:var(--f-body); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1rem; }
.footer-brand .brand{ color:#fff; }
.footer-brand .brand .sprig-mini{ color:var(--gold); }
.footer-brand p{ color:#a9ab9d; max-width:34ch; margin-top:1rem; font-size:.95rem; }
.footer-links{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; font-size:.95rem; }
.footer-bottom{ border-top:1px solid var(--line-dark); padding-block:1.25rem; display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between; align-items:center; font-size:.85rem; color:#9a9c8e; }
.footer-bottom .tagline{ font-family:var(--f-display); font-style:italic; color:var(--gold); }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- page hero (interior) ---------- */
.page-hero{ background:var(--ink); color:#e7e6dd; }
.page-hero .container{ padding-block:clamp(2.75rem,5vw,4.5rem); }
.page-hero h1{ color:#fff; margin-bottom:.4rem; }
.page-hero p{ color:#cfceC4; max-width:56ch; }
.breadcrumb{ font-size:.82rem; letter-spacing:.05em; color:#a9ab9d; margin-bottom:1rem; }
.breadcrumb a{ color:#a9ab9d; text-decoration:none; }
.breadcrumb a:hover{ color:var(--gold); }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn:hover,.card:hover,.pcard:hover{ transform:none; }
}

/* focus visibility */
a:focus-visible,.btn:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--gold); outline-offset:2px; border-radius:6px;
}

.skip-link{ position:absolute; left:-999px; top:0; background:var(--gold); color:var(--ink); padding:.6rem 1rem; border-radius:0 0 8px 0; z-index:100; font-weight:700; }
.skip-link:focus{ left:0; }

/* ===================================================================
   v2 UPDATES
   =================================================================== */

/* brand logo image (header) */
.brand-logo{ height:46px; width:auto; display:block; flex:none; }
@media (max-width:520px){ .brand-logo{ height:40px; } }

/* hero ghost button — visible white text on dark hero (fixes "See our projects") */
.hero .btn--ghost{ color:#fff; border-color:var(--line-dark); }
.hero .btn--ghost:hover{ color:var(--gold); border-color:var(--gold); }

/* cta-band ghost button — white text on olive ("Other ways to help") */
.cta-band .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.55); }
.cta-band .btn--ghost:hover{ color:#fff; border-color:#fff; background:rgba(255,255,255,.12); }

/* registration line (home hero) */
.reg-line{ margin-top:1.35rem; font-size:.82rem; letter-spacing:.03em; color:#b9c0ad; }
.reg-line strong{ color:#e7e6dd; font-weight:600; }

/* dark photo placeholder variant */
.photo-ph--dark{ background:linear-gradient(135deg, rgba(217,164,65,.16), rgba(110,139,61,.12)), #2a3a25; border-color:#3d4e33; }
.photo-ph--dark .ph-icon{ color:var(--gold); }
.photo-ph--dark .ph-label{ color:#d7d6cb; }
.photo-ph--dark .ph-note{ color:#9aa08a; }

/* bigger placeholder (team photo) */
.photo-ph--xl{ min-height:440px; }

/* ---------- page hero with picture box (interior pages) ---------- */
.page-hero-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.page-hero-grid .breadcrumb{ margin-bottom:1rem; }
.page-hero-media .photo-ph{ min-height:200px; }
@media (max-width:820px){ .page-hero-grid{ grid-template-columns:1fr; } .page-hero-media{ order:-1; } }

/* ---------- slideshow / roller banner ---------- */
.slideshow{ position:relative; width:100%; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--paper-2); }
.slideshow .slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease; }
.slideshow .slide.active{ opacity:1; }
.slideshow .slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.slideshow .slide .photo-ph{ width:100%; height:100%; min-height:0; aspect-ratio:auto; border:none; border-radius:0; }
.ss-dots{ position:absolute; left:0; right:0; bottom:12px; z-index:4; display:flex; gap:8px; justify-content:center; }
.ss-dot{ width:9px; height:9px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; transition:background .2s ease, transform .2s ease; }
.ss-dot.active{ background:#fff; transform:scale(1.15); }
.ss-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:40px; height:40px; border:none; border-radius:50%; background:rgba(20,28,18,.4); color:#fff; font-size:1.35rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease; }
.ss-arrow:hover{ background:rgba(20,28,18,.7); }
.ss-arrow.prev{ left:10px; } .ss-arrow.next{ right:10px; }
@media (prefers-reduced-motion:reduce){ .slideshow .slide{ transition:none; } }

/* ---------- full-width founder banner ---------- */
.founder-photo{ width:100%; min-height:clamp(280px,40vw,520px); margin-top:2rem;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.5rem;
  background:linear-gradient(135deg, rgba(217,164,65,.16), rgba(110,139,61,.12)), #24331f; color:#cfceC4; text-align:center; padding:1.5rem; }
.founder-photo .ph-icon{ width:44px; height:44px; color:var(--gold); opacity:.85; }
.founder-photo .ph-label{ font-size:.9rem; font-weight:600; color:#d7d6cb; }
.founder-photo .ph-note{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#9aa08a; }

/* ---------- bank detail boxes (get involved) ---------- */
.bank-box{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.75rem; }
.bank-box h3{ margin-bottom:.35rem; }
.bank-box .bank-ref{ color:var(--muted); font-size:.9rem; margin-bottom:1rem; }
.bank-table{ display:grid; grid-template-columns:auto 1fr; gap:.45rem 1.1rem; font-size:.95rem; }
.bank-table dt{ font-weight:600; color:var(--ink); }
.bank-table dd{ margin:0; color:var(--text); }
@media (max-width:520px){ .bank-table{ grid-template-columns:1fr; gap:.1rem; } .bank-table dd{ margin-bottom:.55rem; } }

/* ===================================================================
   REAL IMAGES (replacing placeholders)
   =================================================================== */
.media{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); background:var(--paper-2); }
.media.ratio-wide{ aspect-ratio:16/9; }
.media.ratio-square{ aspect-ratio:1/1; }
.media.ratio-tall{ aspect-ratio:3/4; }
.media.ratio-4x3{ aspect-ratio:4/3; }
.pcard .media{ border-radius:0; aspect-ratio:4/3; }
.founder-photo-img{ display:block; width:100%; height:clamp(280px,40vw,520px); object-fit:cover; margin-top:2rem; }

/* ===================================================================
   v3 UPDATES
   =================================================================== */

/* hero roller banner fills more of the right */
.hero .container{ grid-template-columns:1fr 1fr; }
.hero-art{ align-items:stretch; width:100%; }
.hero-art .slideshow{ max-width:none; }
@media (max-width:820px){ .hero-art .slideshow{ max-width:460px; } }

/* flagship full-bleed image (Zaitoon Girls' School and College) */
.flagship-grid{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.flagship-copy{ padding-block:clamp(3rem,6vw,6rem); padding-right:clamp(1.5rem,4vw,3rem); padding-left:clamp(1.15rem,4vw,2rem); }
.flagship-media img{ width:100%; height:100%; object-fit:cover; min-height:460px; aspect-ratio:auto; border-radius:0; display:block; }
@media (min-width:1141px){ .flagship-copy{ padding-left:calc((100vw - var(--maxw))/2); } }
@media (max-width:820px){
  .flagship-grid{ grid-template-columns:1fr; }
  .flagship-media img{ min-height:300px; }
}

/* ===================================================================
   v4 UPDATES — larger media that fills the space
   =================================================================== */

/* feature split: copy aligned to container on the left, full-bleed media on the right */
.feature-split{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.feature-split .fs-copy{ align-self:center; padding-block:clamp(3rem,6vw,6rem); padding-right:clamp(1.5rem,4vw,3rem); padding-left:clamp(1.15rem,4vw,2rem); }
@media (min-width:1141px){ .feature-split .fs-copy{ padding-left:calc((100vw - var(--maxw))/2); } }
.feature-split .fs-media{ position:relative; min-height:100%; }
.feature-split .fs-media .slideshow{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border-radius:0; box-shadow:none; }
.feature-split .fs-media .slideshow .slide img{ width:100%; height:100%; object-fit:cover; }
.hero .feature-split{ position:relative; z-index:2; }
@media (max-width:820px){
  .feature-split{ grid-template-columns:1fr; }
  .feature-split .fs-media{ min-height:320px; }
  .feature-split .fs-media .slideshow{ position:relative; height:100%; }
  .feature-split .fs-copy{ padding:clamp(2.5rem,7vw,3.5rem) clamp(1.15rem,4vw,2rem) 0; }
}

/* flagship image: fit the WHOLE image in (no cropping) */
.flagship-media img{ object-fit:contain; background:#1b2a18; }

/* ===================================================================
   v5 — Blue Ink School International (blue theme)
   =================================================================== */
.section--blue{ background:#13294a; color:#c7d4e6; }
.section--blue h2, .section--blue h3{ color:#fff; }
.section--blue p{ color:#c7d4e6; }
.section--blue .eyebrow{ color:#8fbde9; }
.section--blue .leaf-list li::before{ background:#8fbde9; }
.section--blue .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
.section--blue .btn--ghost:hover{ color:#fff; border-color:#fff; }
.section--blue .flagship-copy strong{ color:#fff; }
.section--blue .flagship-media img{ object-fit:cover; background:#0f2138; }

.page-hero--blue{ background:#13294a; }
.page-hero--blue h1{ color:#fff; }
.page-hero--blue p{ color:#c7d4e6; }
.page-hero--blue .breadcrumb, .page-hero--blue .breadcrumb a{ color:#9fb4cf; }
.page-hero--blue .breadcrumb a:hover{ color:#8fbde9; }

/* ===================================================================
   v6 — nav dropdown (Blue Ink School › Boarding facility)
   =================================================================== */
.nav-links .has-sub{ position:relative; }
.nav-links .has-sub > a::after{ content:"⌄"; font-size:.7em; margin-left:.35em; opacity:.65; }
.subnav{ list-style:none; margin:0; padding:0; }
@media (min-width:1025px){
  .subnav{ position:absolute; top:calc(100% + 2px); left:0; min-width:210px; background:var(--paper); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:.35rem; display:none; z-index:70; }
  .has-sub:hover > .subnav, .has-sub:focus-within > .subnav{ display:block; }
  .subnav a{ display:block; padding:.5rem .7rem; border-radius:8px; font-weight:600; font-size:.95rem; color:var(--text); text-decoration:none; }
  .subnav a:hover{ background:var(--paper-2); color:var(--ink); }
}
@media (max-width:1024px){
  .nav-links .has-sub > a::after{ content:""; }
  .subnav a{ display:block; padding:.5rem .6rem .5rem 1.5rem; font-size:.92rem; font-weight:600; color:var(--muted); text-decoration:none; }
  .subnav a:hover{ color:var(--ink); }
}

/* larger image panel for the "Building it together" campaign split */
/* show the whole render (fit, not crop) at the column's full width */
.split--media-lg{ grid-template-columns:1fr 1.15fr; }
.split--media-lg .split-media .media{ width:100%; height:auto; aspect-ratio:auto; object-fit:contain; }
@media (max-width:820px){
  .split--media-lg{ grid-template-columns:1fr; }
}

/* Vision: text + full-height GREEN image box, image fitted (not cropped) */
.split--vision{ align-items:stretch; grid-template-columns:1.05fr .95fr; }
.split--vision .split-copy{ align-self:center; }
.split--vision .split-media{ align-self:stretch; }
.media-box{ height:100%; min-height:clamp(340px,40vw,560px); display:flex; align-items:center; justify-content:center; padding:clamp(1rem,2.2vw,1.9rem); border-radius:var(--radius); overflow:hidden; }
.media-box--green{ background:transparent; }
.media-box img{ width:100%; height:100%; object-fit:contain; display:block; }
@media (max-width:820px){
  .split--vision{ grid-template-columns:1fr; }
  .media-box{ min-height:280px; }
}

/* Vision green box: run flush to the right edge of the page */
@media (min-width:821px){
  .section:has(.split--vision){ overflow-x:clip; }
  .split--vision .split-media{ margin-right:calc(min((var(--maxw) - 100vw)/2, 0px) - clamp(1.15rem,4vw,2rem)); }
  .split--vision .media-box{ border-radius:var(--radius) 0 0 var(--radius); }
}