/* Get Help ×3 (design/Get Help*.dc.html) — layout + geometry shared by the
   English, Dari, and Pashto pages. Written in logical properties throughout so
   the RTL pages mirror for free; the RTL type layer lives in gethelp-rtl.css
   (loaded only by the Dari/Pashto pages, after this sheet).
   Deviations from the locked prototypes per docs/DECISIONS.md (56px rail
   tokens, interaction system, site.css form primitives). */

/* Page wrapper — these pages skip layouts/site.njk, so they carry their own
   equivalent of .site */
.gh { background: var(--white); overflow-x: hidden; }

/* ---------- Minimal header: logo + three-chip language switcher ---------- */

.ghdr { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 20px var(--gutter); border-block-end: 1px solid rgba(41, 42, 60, .12); background: #fff; }
.ghdr__logo { display: block; }
.ghdr__logo img { height: 40px; width: auto; display: block; }
.ghdr__lang { display: flex; align-items: center; gap: 16px; }
.ghdr__lang-label { font: 600 10.5px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(41, 42, 60, .7); }
.ghdr__chips { display: flex; align-items: stretch; border: 1px solid rgba(41, 42, 60, .22); }
/* chip geometry normalized to the RTL prototypes' uniform 9px 18px + flex
   centering (the English file's inactive chips were 8px/no-centering) */
.ghdr__chip { display: flex; align-items: center; padding: 9px 18px; font: 500 17px var(--font-sans); color: var(--ink); transition: color var(--t-fast) var(--ease); }
.ghdr__chip + .ghdr__chip { border-inline-start: 1px solid rgba(41, 42, 60, .22); }
a.ghdr__chip:hover { color: var(--deep-teal); }
/* current language: the solid deep-teal chip (README) */
.ghdr__chip.is-active { font: 600 14px var(--font-sans); background: var(--deep-teal); color: #fff; }

/* ---------- Notice hero: plain-notice copy + WhatsApp card ---------- */

.gnotice { padding: 64px var(--gutter) 46px; background: #fff; }
.gnotice__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 72px; align-items: start; }
.gnotice h1 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 56px; line-height: 1.04; letter-spacing: -.022em; color: var(--ink); text-wrap: pretty; }
.gnotice__lede { margin: 24px 0 0; max-width: 620px; font: 400 19px/1.6 var(--font-serif); color: var(--ink); }
.gnotice__lede--follow { margin-top: 10px; }
.gnotice__ctas { display: flex; align-items: center; gap: 26px; margin-top: 30px; }

/* WhatsApp card (About .facts species: 3px top rule on paper wash) */
.wacard { border-block-start: 3px solid var(--deep-teal); background: var(--paper-alpha); padding: 30px 26px; }
.wacard__kicker { font: 600 11px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--deep-teal); margin-bottom: 10px; }
.wacard__num { display: block; font-family: var(--font-condensed); font-weight: 700; font-size: 42px; line-height: 1; color: var(--ink); transition: color var(--t-fast) var(--ease); }
a.wacard__num:hover { color: var(--deep-teal); }
.wacard__body { margin: 12px 0 18px; font: 400 17px/1.5 var(--font-serif); color: var(--ink); }
.wacard__row { padding: 12px 0; border-block-start: 1px solid rgba(41, 42, 60, .16); }
.wacard__row:last-child { border-block-end: 1px solid rgba(41, 42, 60, .16); }
.wacard__row-label { font: 600 11px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(41, 42, 60, .7); margin-bottom: 4px; }
.wacard__row-val { display: block; font: 500 20px var(--font-sans); color: var(--deep-teal); transition: color var(--t-fast) var(--ease); }
a.wacard__row-val:hover { color: var(--ink); }

/* ---------- Photo quote band (rail-contained, About .aquote recipe) ---------- */

.gphoto { padding: 0 var(--gutter) 52px; background: #fff; }
.gphoto__frame { height: 400px; }
.gphoto__img { background-image: url('/assets/img/kiac-133-ms9bzyy8-5qo2-1440w.jpeg'); background-image: image-set(url('/assets/img/kiac-133-ms9bzyy8-5qo2-1440w.webp') type('image/webp'), url('/assets/img/kiac-133-ms9bzyy8-5qo2-1440w.jpeg') type('image/jpeg')); background-position: 50% 40%; }
.gphoto__bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 54px 28px 28px; background: linear-gradient(0deg, #14151E, rgba(20, 21, 30, 0)); }
.gphoto__quote { font: 400 italic 19px/1.5 var(--font-serif); color: #fff; max-width: 760px; }
.gphoto__attr { margin-top: 9px; font: 600 10.5px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: var(--light-teal); }

/* ---------- What we can help with: 2×3 needs list + assurance strip ---------- */

.gneeds { padding: 56px var(--gutter) 58px; background: var(--paper-alpha); border-block-start: 1px solid rgba(41, 42, 60, .12); }
.gneeds__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin-bottom: 35px; }
.gneeds__head h2 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 46px; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); }
/* ragged edge inward like .section-header summaries (docs/DECISIONS.md
   2026-08-03); logical end so the RTL pages mirror */
.gneeds__intro { margin: 0; max-width: 400px; font: 400 17px/1.6 var(--font-serif); color: var(--ink); text-align: end; }

.gneeds__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; }
.gneeds__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: baseline; padding: 16px 0; border-block-start: 1px solid rgba(41, 42, 60, .18); }
.gneeds__row--last { border-block-end: 1px solid rgba(41, 42, 60, .18); }
.gneeds__term { font: 600 17px var(--font-sans); color: var(--ink); }
.gneeds__def { font: 400 16.5px/1.5 var(--font-serif); color: rgba(41, 42, 60, .86); }

.gassure { display: grid; grid-template-columns: repeat(4, 1fr); margin-block-start: 45px; padding-block-start: 27px; border-block-start: 2px solid var(--ink); }
.gassure__cell { display: flex; gap: 11px; align-items: flex-start; padding: 12px 26px; }
.gassure__cell:first-child { padding-inline: 0 26px; }
.gassure__cell:last-child { padding-inline: 26px 0; }
.gassure__cell + .gassure__cell { border-inline-start: 1px solid rgba(41, 42, 60, .18); }
.gassure__check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(47, 157, 143, .14); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.gassure__text { font: 400 16px/1.45 var(--font-serif); color: var(--ink); }
.gassure__text strong { font-family: var(--font-sans); font-weight: 700; font-size: 15px; }

/* ---------- Ask for help: form + "what happens next" column ---------- */

.gask { padding: 60px var(--gutter) 66px; background: #fff; border-block-start: 1px solid rgba(41, 42, 60, .12); }
.gask__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 72px; align-items: start; }

.gask__form { border-inline-start: 2px solid var(--teal); padding-inline-start: 34px; }
.gask__form h2 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 44px; line-height: 1.06; letter-spacing: -.02em; color: var(--ink); }
.gask__intro { margin: 14px 0 28px; font: 400 18px/1.55 var(--font-serif); color: rgba(41, 42, 60, .82); }
.gask__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px; }
.gask__needs { margin-top: 26px; }
/* prototype Send geometry on the .btn interaction recipe; inert until the
   sitewide form handler is wired */
.gask__send { margin-top: 26px; display: inline-block; padding: 16px 44px; border: 0; border-radius: 0; background: var(--deep-teal); color: #fff; font-family: var(--font-condensed); font-weight: 700; font-size: 18px; line-height: normal; text-transform: uppercase; cursor: pointer; transition: background-color var(--t-fast) var(--ease); }
.gask__send:hover { background-color: color-mix(in srgb, var(--deep-teal) 86%, black); }
.gask__send:active { background-color: color-mix(in srgb, var(--deep-teal) 78%, black); transition-duration: 40ms; }

.gask__kicker { font: 600 11px var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(41, 42, 60, .7); margin-bottom: 18px; }
.gask__step { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 16px 0; border-block-start: 1px solid rgba(41, 42, 60, .18); }
.gask__step--last { border-block-end: 1px solid rgba(41, 42, 60, .18); }
.gask__num { font-family: var(--font-serif); font-weight: 500; font-size: 28px; line-height: .9; color: var(--deep-teal); }
/* prototype sets these via longhands in a line-height:normal body — pin it
   so the site's 1.6 body doesn't tax the rows */
.gask__step-title { font-family: var(--font-condensed); font-weight: 600; font-size: 18px; line-height: normal; color: var(--ink); }
.gask__step-sub { margin-top: 4px; font: 400 16.5px/1.5 var(--font-serif); color: rgba(41, 42, 60, .86); }

/* avatar card per Colin's mockup 2026-08-07 (supersedes the prototypes' ink
   card); square + hairline border and full-color avatar per his refinement */
.gask__quote { margin-top: 28px; display: flex; align-items: center; gap: 26px; background: var(--paper); padding: 26px 28px; border: 1px solid var(--hairline); }
.gask__quote-avatar { flex: none; width: 90px; height: 90px; border-radius: 50%; object-fit: cover; }
.gask__quote-text { font: 400 italic 19px/1.45 var(--font-serif); color: var(--ink); }
.gask__quote-attr { margin-top: 10px; font: 600 10.5px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--deep-teal); } /* --teal 2.98:1 on paper → deep-teal 5.44 (AA; story__meta precedent). Covers all three languages — the RTL sheet only overrides the font (Wave A5) */

/* ---------- Legal strip ---------- */

.glegal { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px var(--gutter); background: var(--paper-alpha); border-block-start: 1px solid rgba(41, 42, 60, .16); font: 500 12px var(--font-sans); color: rgba(41, 42, 60, .7); }
.glegal__links { display: flex; gap: 22px; }
.glegal a { color: rgba(41, 42, 60, .7); }
.glegal a:hover { color: var(--ink); }

/* ==================== Responsive (≤1032 structural, ≤743 densify;
   clamps live inside the tablet query and reach their max below 1032 so the
   ≥1100 locked reference renders from base rules — docs/DECISIONS.md
   2026-08-04) ==================== */

@media (max-width: 1032px) {
  /* hero → single column; source order puts the WhatsApp card directly under
     the h1/CTAs — the most important element for this audience (README) */
  .gnotice__grid { grid-template-columns: 1fr; gap: 44px; }
  .gnotice h1 { font-size: clamp(36px, 6vw, 56px); }

  .gphoto__frame { height: 340px; }

  .gneeds__head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 28px; }
  .gneeds__head h2 { font-size: clamp(32px, 4.6vw, 46px); }
  .gneeds__intro { max-width: none; text-align: start; }
  /* needs list → one column; rows keep the term/def split (README intent via
     the Hub Events precedent) */
  .gneeds__list { grid-template-columns: 1fr; }
  .gneeds__row--last { border-block-end: 0; }
  .gneeds__row:last-child { border-block-end: 1px solid rgba(41, 42, 60, .18); }

  /* 4-up → 2×2; side dividers become top hairlines on the wrapped row */
  .gassure { grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .gassure__cell, .gassure__cell:first-child, .gassure__cell:last-child { padding: 12px 0; }
  .gassure__cell + .gassure__cell { border-inline-start: 0; }
  .gassure__cell:nth-child(n+3) { border-block-start: 1px solid rgba(41, 42, 60, .18); }

  .gask__grid { grid-template-columns: 1fr; gap: 44px; }
  .gask__form h2 { font-size: clamp(31px, 4.4vw, 44px); }
}

@media (max-width: 743px) {
  /* switcher becomes a full-width segmented row (mobile-menu language row
     pattern); the label is dropped — the chips explain themselves */
  .ghdr { flex-wrap: wrap; gap: 14px; }
  .ghdr__lang-label { display: none; }
  .ghdr__lang { width: 100%; }
  .ghdr__chips { width: 100%; }
  .ghdr__chip { flex: 1; justify-content: center; min-height: 44px; padding: 8px 6px; }

  .gnotice { padding-block: 52px 40px; }
  .gnotice__grid { gap: 36px; }
  .gnotice__lede { font-size: 17px; }
  .gnotice__ctas { flex-wrap: wrap; gap: 18px 26px; }

  .gphoto { padding-block-end: 40px; }
  .gphoto__frame { height: 300px; }
  .gphoto__bar { padding: 44px 20px 18px; }

  .gneeds { padding-block: 44px 48px; }
  /* term/def rows stack (README's needs-list intent at the mobile step) */
  .gneeds__row { grid-template-columns: 1fr; gap: 4px; align-items: start; }

  .gassure { grid-template-columns: 1fr; margin-block-start: 36px; }
  .gassure__cell:nth-child(n+2) { border-block-start: 1px solid rgba(41, 42, 60, .18); }

  .gask { padding-block: 48px 52px; }
  .gask__form { padding-inline-start: 20px; }
  .gask__fields { grid-template-columns: 1fr; }
  .gask__send { width: 100%; }

  .gask__quote { gap: 18px; padding: 20px; }
  .gask__quote-avatar { width: 72px; height: 72px; }

  .glegal { flex-direction: column; align-items: flex-start; gap: 10px; padding-block: 18px; line-height: 1.6; }
  .glegal__links { flex-wrap: wrap; gap: 14px 22px; }
}

/* Image pipeline (docs/DECISIONS.md 2026-08-11): phones take the 1080w tier;
   position/size stay inherited from the base rules above. */
@media (max-width: 743px) {
  .gphoto__img { background-image: url('/assets/img/kiac-133-ms9bzyy8-5qo2-1080w.jpeg'); background-image: image-set(url('/assets/img/kiac-133-ms9bzyy8-5qo2-1080w.webp') type('image/webp'), url('/assets/img/kiac-133-ms9bzyy8-5qo2-1080w.jpeg') type('image/jpeg')); }
}