/* ============================================================
   IT'S ALL LOVE — inner.css
   Styles for About / Events / Impact / Partners / Volunteer / Contact.
   Reuses ial-tokens + home.css components; adds page-specific pieces.
   Loaded per-page via $page_css.
   ============================================================ */

/* ---- Generic page hero ---- */
.page-hero{padding-top:44px;padding-bottom:8px}
.page-hero .eyebrow{margin-bottom:14px}
.page-hero h1{font-size:clamp(2.4rem,10vw,4rem);font-weight:900;text-transform:uppercase}
.page-hero .lead{margin-top:14px;max-width:60ch}
.page-media{margin-top:26px;aspect-ratio:16/9;border-radius:var(--r-card);box-shadow:var(--shadow);
  background:radial-gradient(120% 90% at 20% 10%,rgba(216,30,52,.16),transparent 60%),linear-gradient(160deg,#151515,#2a2a2a)}

/* ---- Prose ---- */
.prose{max-width:66ch}
.prose p{color:var(--muted);margin-bottom:16px;font-size:1.05rem}

/* ---- Two statement blocks (Vision | Mission) ---- */
.statements{display:grid;gap:16px}
.statement{border:1px solid var(--line);border-radius:var(--r-card);padding:26px}
.statement .eyebrow{margin-bottom:8px}
.statement h3{font-size:1.5rem;font-weight:800;margin-bottom:8px}
.statement p{color:var(--muted)}

/* ---- Value rows (About / Movement) ---- */
.values{display:grid;gap:0;border-top:1px solid var(--line)}
.value-row{display:flex;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.value-row .vn{font-family:var(--font-util);font-weight:700;color:var(--love);font-size:.9rem;min-width:34px}
.value-row .vt{font-family:var(--font-display);font-weight:800;font-size:1.3rem}
.value-row .vd{color:var(--muted);font-size:.95rem}
@media(min-width:768px){.value-row{align-items:center}.value-row .vt{min-width:280px}}

/* ---- Nova Luv ---- */
.nova{display:grid;gap:18px;align-items:center;border:1px solid var(--line);border-radius:var(--r-card);padding:26px;background:var(--paper-2)}
.nova .av{width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--love),var(--purple));flex:none}
.nova h3{font-size:1.6rem;font-weight:800;margin-bottom:6px}
.nova p{color:var(--muted)}
@media(min-width:768px){.nova{grid-template-columns:96px 1fr}}

/* ---- Team grid ---- */
.team{display:grid;grid-template-columns:1fr;gap:16px}
.member .ph{aspect-ratio:1;border-radius:var(--r-card);background:linear-gradient(150deg,#dcdad3,#f1efe9);border:1px solid var(--line)}
.member h4{font-family:var(--font-display);font-weight:800;margin-top:12px}
.member span{color:var(--muted);font-size:.9rem}
@media(min-width:640px){.team{grid-template-columns:repeat(3,1fr)}}

/* ---- Timeline ---- */
.timeline{border-left:2px solid var(--line);margin-left:8px;padding-left:22px;display:grid;gap:22px}
.tl-item{position:relative}
.tl-item::before{content:"";position:absolute;left:-30px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--love)}
.tl-item .yr{font-family:var(--font-util);font-weight:700;color:var(--love);font-size:.85rem}
.tl-item h4{font-family:var(--font-display);font-weight:800;font-size:1.2rem;margin:2px 0 4px}
.tl-item p{color:var(--muted);font-size:.95rem}

/* ---- Search / filter bar (Events) ---- */
.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px}
.filterbar input[type=search]{flex:1;min-width:180px;padding:13px 15px;border:1.5px solid var(--line);border-radius:var(--r-btn);font:inherit;background:#fff}

/* ---- Event cards ---- */
.ev-featured{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-bottom:22px}
.ev-featured .m{aspect-ratio:16/9;background:radial-gradient(90% 120% at 80% 0%,rgba(245,179,1,.3),transparent 55%),linear-gradient(140deg,#2a2a2a,#111)}
.ev-featured .b{padding:26px}
.ev-featured .eyebrow{color:var(--gold)}
.ev-featured h3{font-size:1.8rem;font-weight:800;margin:10px 0 4px}
.ev-featured .meta{color:var(--muted);font-family:var(--font-util);margin-bottom:18px}
@media(min-width:768px){.ev-featured{grid-template-columns:1.1fr 1fr}.ev-featured .m{aspect-ratio:auto}.ev-featured .b{display:flex;flex-direction:column;justify-content:center;padding:40px}}

.ev-list{display:grid;gap:14px}
.ev-card{display:grid;grid-template-columns:88px 1fr;gap:14px;border:1px solid var(--line);border-radius:var(--r-card);padding:14px;transition:var(--dur)}
.ev-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.ev-card .m{width:88px;height:88px;border-radius:12px;background:linear-gradient(150deg,#2a2a2a,#111)}
.ev-card h4{font-family:var(--font-display);font-weight:800;font-size:1.15rem}
.ev-card .meta{color:var(--muted);font-size:.88rem;font-family:var(--font-util);margin:3px 0 8px}
.ev-card .cat{display:inline-block;font-family:var(--font-util);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--love);border:1px solid var(--line);border-radius:999px;padding:3px 8px;margin-bottom:6px}

.past-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.past-grid .g{aspect-ratio:1;border-radius:var(--r-card);background:linear-gradient(150deg,#dcdad3,#f1efe9);border:1px solid var(--line)}
@media(min-width:768px){.past-grid{grid-template-columns:repeat(4,1fr)}}

/* ---- Impact map placeholder + big counters ---- */
.bigstats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.bigstat{background:var(--paper);padding:30px 22px}
.bigstat .n{font-family:var(--font-display);font-weight:900;font-size:3rem;line-height:1;letter-spacing:-.04em}
.bigstat .l{color:var(--muted);margin-top:6px}
@media(min-width:768px){.bigstats{grid-template-columns:repeat(4,1fr)}}
.impact-map{aspect-ratio:16/9;border-radius:var(--r-card);border:1px solid var(--line);background:
  linear-gradient(160deg,var(--paper-2),#eceae4);display:grid;place-content:center;text-align:center;color:var(--muted);position:relative;overflow:hidden}
.impact-map .pin{position:absolute;width:14px;height:14px;border-radius:50% 50% 50% 0;background:var(--love);transform:rotate(-45deg)}
.orgs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:6px}
.org{border:1px solid var(--line);border-radius:var(--r-card);height:80px;display:grid;place-content:center;color:var(--muted);font-family:var(--font-util);font-weight:700;letter-spacing:.06em}
@media(min-width:768px){.orgs{grid-template-columns:repeat(4,1fr)}}

/* ---- Benefit / role cards ---- */
.benefits{display:grid;gap:14px;margin-top:6px}
.benefit{border:1px solid var(--line);border-radius:var(--r-card);padding:22px}
.benefit .ic{font-size:1.6rem;margin-bottom:10px}
.benefit h3{font-size:1.25rem;font-weight:800;margin-bottom:6px}
.benefit p{color:var(--muted);font-size:.95rem}
@media(min-width:768px){.benefits{grid-template-columns:repeat(3,1fr)}}

/* ---- Case study ---- */
.case{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.case .m{aspect-ratio:16/9;background:linear-gradient(150deg,var(--purple),#3b1a7a)}
.case .b{padding:26px}
.case blockquote{font-family:var(--font-display);font-weight:700;font-size:1.35rem;line-height:1.25;letter-spacing:-.02em;margin-bottom:12px}
.case cite{color:var(--muted);font-style:normal;font-size:.9rem}
@media(min-width:768px){.case{grid-template-columns:1fr 1fr}.case .m{aspect-ratio:auto}.case .b{display:flex;flex-direction:column;justify-content:center;padding:40px}}

/* ---- Forms (inner) ---- */
.form{max-width:560px}
.form-grid{display:grid;gap:14px}
.form-grid.two{grid-template-columns:1fr}
@media(min-width:600px){.form-grid.two{grid-template-columns:1fr 1fr}}
.form .fld span{display:block;font-family:var(--font-util);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.form .fld input,.form .fld select,.form .fld textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--r-btn);font:inherit;background:#fff}
.form .fld textarea{min-height:120px;resize:vertical}
.form .full{grid-column:1/-1}
.form .hp{position:absolute;left:-9999px}
.form-note{color:var(--muted);font-size:.85rem;margin-top:10px}
.sent{border:1px solid var(--line);border-left:4px solid var(--love);border-radius:var(--r-card);padding:22px;background:var(--paper-2)}
.sent h3{font-family:var(--font-display);font-weight:800;font-size:1.4rem;margin-bottom:6px}
.sent p{color:var(--muted)}
.form-err{color:var(--love);font-weight:600;margin-bottom:12px}

/* ---- Tabs (Contact) ---- */
.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tab{padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--muted);cursor:pointer;background:#fff}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- Volunteer skills matcher ---- */
.matcher{border:1px solid var(--line);border-radius:var(--r-card);padding:22px;background:var(--paper-2)}
.matcher select{max-width:320px}
.match-out{margin-top:14px;display:grid;gap:8px}
.match-out .m-role{display:none;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-btn);background:#fff;font-weight:600}
.match-out .m-role.show{display:block}

/* ---- Ambassador ---- */
.ambassador{border:1px solid var(--ink);border-radius:var(--r-card);padding:28px;background:var(--ink);color:#fff}
.ambassador .eyebrow{color:var(--gold)}
.ambassador h3{font-size:1.8rem;font-weight:800;margin:10px 0 8px}
.ambassador p{color:#cfcfcf;margin-bottom:18px;max-width:52ch}
.ambassador .btn-ghost{color:#fff;border-color:#fff}
.ambassador .btn-ghost:hover{background:#fff;color:var(--ink)}

/* ---- Social row (Contact) ---- */
.social-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.social-row a{width:48px;height:48px;border:1px solid var(--line);border-radius:12px;display:grid;place-content:center;font-family:var(--font-util);font-weight:700}
.social-row a:hover{border-color:var(--love);color:var(--love)}

/* ---- CTA row ---- */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}