/* ============================================================
   The Tee Family House — css/impact.css
   The three "impact" surfaces, in one stylesheet:

     1. kafala.html   — the sponsorship pitch + the case grid
                        (.kf-*), rendered by js/kafala.js
     2. story-*.html  — the sponsors strip js/kafala.js injects
                        above the pager (.spon-*)
     3. impact.html   — the Jordan map and its counters (.imp-*)

   NOT here: the emergency banner. js/banner.js runs on pages that
   do not (and should not have to) load this file — index.html and
   every generated story page — so it carries its own <style> and
   stays a single <script> tag with no CSS dependency. That is the
   one deliberate exception to "styles live in CSS files".

   Consumes tokens from css/base.css (owned by the brain): --pink,
   --pink-deep, --night*, --cream*, --ink*, --hairline-*, --radius,
   --ease-out. Redefines none of them and introduces exactly one new
   colour, --emergency-red, which the banner also uses.

   Every animation here is gated on prefers-reduced-motion: reduce
   AND on html.reduce-motion (js/motion.js's ?motion=off override).
   ============================================================ */

:root {
  --emergency-red: #b3261e;
}

/* ============================================================
   1 · kafala.html — «اكفل فردًا من العائلة»
   ============================================================ */

.kf-hero { padding-block: clamp(72px, 12vh, 132px) clamp(28px, 5vh, 56px); text-align: center; }
.kf-hero .eyebrow { justify-content: center; }
.kf-hero h1 { font-size: clamp(2rem, 5.5vw, 3.6rem); margin-block: 16px 18px; }
.kf-hero .lead { margin-inline: auto; }

/* ---- the three steps ---- */
.kf-steps {
  display: grid;
  gap: clamp(16px, 2.4vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: clamp(32px, 5vh, 56px);
  text-align: start;
}
.kf-step {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline-dark);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.kf-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 34px; block-size: 34px; border-radius: 999px;
  background: linear-gradient(135deg, var(--pink-deep), var(--pink));
  color: #fff; font-weight: 600; font-size: 0.95rem;
  margin-bottom: 14px;
}
.kf-step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.kf-step p { color: var(--muted-on-dark); font-size: 0.95rem; }

/* ---- the case grid ---- */
.kf-grid-section { padding-block: clamp(56px, 9vh, 110px); }
.kf-grid {
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  margin-top: clamp(28px, 4vh, 46px);
}

.kf-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline-dark);
  transition: transform 0.35s var(--ease-out), border-color 0.35s;
}
.kf-card:hover { transform: translateY(-4px); border-color: var(--pink); }

/* 4:5, the same portrait crop the archive cards use (css/pages.css) —
   the source photos are portrait phone shots, and a landscape frame
   would cut the cat's face out of half of them. */
.kf-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--night-3); }
.kf-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* No photo yet (a case published before its hero was uploaded): a soft
   paw-pink wash rather than a broken-image icon. */
.kf-card__media--empty { background: radial-gradient(120% 100% at 50% 0%, rgba(244, 143, 177, 0.22), var(--night-3) 70%); }

.kf-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.kf-card__name { font-size: 1.15rem; font-weight: 600; }
.kf-card__status { font-size: 0.9rem; color: var(--muted-on-dark); }

.kf-card__count {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  padding: 6px 14px; border-radius: 999px;
  font-size: 0.85rem;
  background: rgba(244, 143, 177, 0.14);
  border: 1px solid rgba(244, 143, 177, 0.3);
  color: var(--pink);
}
.kf-card__count--none { background: rgba(255, 255, 255, 0.04); border-color: var(--hairline-dark); color: var(--muted-on-dark); }
.kf-card__names { font-size: 0.85rem; color: var(--muted-on-dark); }
.kf-card__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.kf-card__actions .btn { padding: 10px 20px; font-size: 0.92rem; }

.kf-empty { text-align: center; color: var(--muted-on-dark); padding-block: 48px; }

/* ---- the «اكفله» panel ---- */
.kf-panel {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(12, 9, 11, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.kf-panel[hidden] { display: none; }
.kf-panel__box {
  inline-size: min(560px, 100%);
  max-block-size: 88vh; overflow-y: auto;
  background: var(--night-2);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 34px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
  animation: kf-panel-in 0.35s var(--ease-out) both;
}
@keyframes kf-panel-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }

.kf-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 6px; }
.kf-panel__title { font-size: 1.25rem; font-weight: 600; }
.kf-panel__close {
  inline-size: 36px; block-size: 36px; border-radius: 999px; flex: none;
  border: 1px solid var(--hairline-dark); color: var(--muted-on-dark);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 0.2s, border-color 0.2s;
}
.kf-panel__close:hover { color: var(--pink); border-color: var(--pink); }
.kf-panel__lead { color: var(--muted-on-dark); font-size: 0.95rem; margin-bottom: 18px; }

.kf-num {
  border: 1px solid var(--hairline-dark);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.kf-num__label { font-size: 0.85rem; color: var(--muted-on-dark); }
.kf-num__value { font-size: 1.3rem; font-weight: 600; letter-spacing: 0.04em; margin-block: 6px 4px; }
.kf-num__note { font-size: 0.8rem; color: var(--muted-on-dark); }

.kf-copy {
  position: relative;
  margin-top: 12px; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--pink); color: var(--pink); font-size: 0.9rem;
  transition: background 0.25s, color 0.25s;
}
.kf-copy:hover { background: rgba(244, 143, 177, 0.12); }
.kf-copy__done { display: none; }
.kf-copy.is-copied .kf-copy__idle { display: none; }
.kf-copy.is-copied .kf-copy__done { display: inline; }
/* Selectable fallback for browsers where clipboard-write is blocked:
   off-screen but focusable, exactly like the homepage's copy buttons. */
.kf-copy__fallback { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }

.kf-panel__steps { margin-top: 18px; display: grid; gap: 8px; font-size: 0.92rem; color: var(--muted-on-dark); }
.kf-panel__steps b { color: var(--text-on-dark); font-weight: 600; }
.kf-panel__dm { margin-top: 18px; }

/* ============================================================
   2 · story-*.html — the sponsors strip (injected by js/kafala.js)
   ============================================================ */

.spon-strip {
  margin-block: clamp(28px, 5vh, 48px) 0;
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--radius);
  border: 1px solid rgba(244, 143, 177, 0.28);
  background: radial-gradient(120% 140% at 50% 0%, rgba(244, 143, 177, 0.14), rgba(255, 255, 255, 0.03) 70%);
  text-align: center;
}
.spon-strip__title { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.spon-strip__names { color: var(--muted-on-dark); font-size: 0.95rem; margin-bottom: 16px; }
/* The strip's home is the CTA band (a dark zone), but its fallback
   position is above the pager — which the generator now renders as a
   light zone. Same rule base.css uses for .lead. */
.zone-light .spon-strip__names { color: var(--ink-soft); }
.spon-strip__cta { padding: 10px 24px; font-size: 0.92rem; }

/* ============================================================
   3 · impact.html — «أثرنا على الخريطة»
   ============================================================ */

.imp-hero { padding-block: clamp(72px, 12vh, 132px) clamp(20px, 4vh, 40px); text-align: center; }
.imp-hero .eyebrow { justify-content: center; }
.imp-hero h1 { font-size: clamp(2rem, 5.5vw, 3.6rem); margin-block: 16px 18px; }
.imp-hero .lead { margin-inline: auto; }

.imp-map-section { padding-block: clamp(20px, 4vh, 48px) clamp(56px, 9vh, 110px); }
.imp-map-wrap {
  display: flex; justify-content: center;
  margin-inline: auto; max-inline-size: 560px;
}
.imp-map { inline-size: 100%; block-size: auto; overflow: visible; }

/* The country silhouette: a soft pink wash inside a hand-drawn edge. */
.imp-map__land {
  fill: rgba(244, 143, 177, 0.08);
  stroke: var(--pink);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.imp-map__sea { fill: rgba(244, 143, 177, 0.16); stroke: none; }
.imp-map__dot { fill: var(--pink-deep); stroke: #fff; stroke-width: 2; }
.imp-map__ring { fill: none; stroke: var(--pink); stroke-width: 2; opacity: 0; transform-origin: center; transform-box: fill-box; }
/* SVG text has no logical-property escape hatch: under <html dir=rtl>
   an unanchored <text> grows LEFTWARD from its x, which put every
   Arabic city name straight on top of its own marker dot. Pinning the
   text run to LTR keeps each label growing away from the dot in both
   languages — and a single Arabic word inside an LTR run is still
   shaped and ordered correctly by the bidi algorithm, so nothing is
   lost by it. */
.imp-map__label, .imp-map__value { direction: ltr; text-anchor: start; }
.imp-map__label { fill: var(--text-on-dark); font-family: var(--font-main); font-size: 15px; font-weight: 500; }
.imp-map__value { fill: var(--pink); font-family: var(--font-main); font-size: 19px; font-weight: 700; }
/* The count starts hidden and stays hidden when report.json is missing:
   a fabricated number under a city name would be worse than none. */
.imp-map__value.is-empty { display: none; }

/* Marker pulse — 2s, gentle, never more than one ring visible at a time. */
@keyframes imp-pulse {
  0% { opacity: 0.55; transform: scale(0.6); }
  70% { opacity: 0; transform: scale(2.1); }
  100% { opacity: 0; transform: scale(2.1); }
}
.imp-marker .imp-map__ring { animation: imp-pulse 2s var(--ease-out) infinite; }
.imp-marker:nth-of-type(2) .imp-map__ring { animation-delay: 0.5s; }
.imp-marker:nth-of-type(3) .imp-map__ring { animation-delay: 1s; }

/* ---- the total chips under the map ---- */
.imp-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: clamp(28px, 5vh, 48px);
}
.imp-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 26px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline-dark);
  min-inline-size: 140px;
}
/* display:flex above would otherwise defeat the hidden attribute the
   page ships with — each chip only appears once it has a real number. */
.imp-chip[hidden] { display: none; }
.imp-chip__value { font-size: 1.6rem; font-weight: 700; color: var(--pink); line-height: 1.2; }
.imp-chip__label { font-size: 0.85rem; color: var(--muted-on-dark); }

.imp-note { text-align: center; color: var(--muted-on-dark); font-size: 0.85rem; margin-top: 22px; }

/* ============================================================
   Reduced motion — the OS preference and js/motion.js's
   ?motion=off override (html.reduce-motion) are honoured
   identically: rings hold still and visible-but-static, panels
   and cards appear without a transition.
   ============================================================ */
html.reduce-motion .imp-marker .imp-map__ring { animation: none; opacity: 0.35; transform: scale(1.6); }
html.reduce-motion .kf-panel__box { animation: none; }
html.reduce-motion .kf-card:hover { transform: none; }