/* Ki — Crisis widget. Source: Ki Sustainability.html lines 174–190, 592–700.
   Redesigned as a single-column vertical flow of wide frosted-glass panels
   (one crisis point below the next) over an optional photographic background
   (ice / mineral salt). All selectors scoped under .ki-scope .ki-crisis. */

.ki-scope .ki-crisis { background: #ECFEFF; position: relative; overflow: hidden; }

/* Optional full-bleed background image + readability wash. */
.ki-scope .ki-crisis .ki-crisis-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-repeat: no-repeat;
}
.ki-scope .ki-crisis .ki-crisis-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: #ECFEFF; opacity: 0.3; pointer-events: none;
}
.ki-scope .ki-crisis .wrap { position: relative; z-index: 2; }

/* eyebrow-rule — centered variant: a rule on both sides of the label */
.ki-scope .ki-crisis .eyebrow-rule {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--ki-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ki-blue-deep); margin-bottom: 28px;
}
.ki-scope .ki-crisis .eyebrow-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--ki-rule);
}
.ki-scope .ki-crisis .eyebrow-rule.eyebrow-center { justify-content: center; }
.ki-scope .ki-crisis .eyebrow-rule.eyebrow-center::before {
  content: ""; flex: 1; height: 1px; background: var(--ki-rule);
}

.ki-scope .ki-crisis .crisis-head { margin-bottom: 56px; }

/* ───── shock stat tiles (opt-in opening row) ───── */
.ki-scope .ki-crisis .crisis-shocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.ki-scope .ki-crisis .shock-tile {
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  box-shadow: 0 18px 48px -28px rgba(27, 116, 138, 0.35);
  padding: 32px 30px;
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.ki-scope .ki-crisis .shock-tile:hover {
  transform: translateY(-3px);
  border-color: var(--ki-blue);
  box-shadow: 0 26px 60px -28px rgba(27, 116, 138, 0.5);
}
.ki-scope .ki-crisis .shock-tile .shock-v {
  font-family: var(--ki-serif); font-weight: 400;
  font-size: clamp(38px, 4vw, 56px); line-height: 1;
  color: var(--ki-blue); letter-spacing: -0.01em;
}
.ki-scope .ki-crisis .shock-tile .shock-cap {
  font-family: var(--ki-sans); font-size: 14px; line-height: 1.55;
  color: var(--ki-ink-mute); margin: 16px 0 0;
}
.ki-scope .ki-crisis .shock-tile .shock-src {
  font-family: var(--ki-sans); font-size: 11px; line-height: 1.4;
  color: var(--ki-ink-mute); opacity: 0.8; margin-top: 12px;
  letter-spacing: 0.02em;
}
@media (max-width: 1000px) {
  .ki-scope .ki-crisis .crisis-shocks { grid-template-columns: 1fr; gap: 20px; }
}
/* Vertically centre the intro paragraph against the tall left headline. */
.ki-scope .ki-crisis .crisis-head .section-head { margin-bottom: 0; align-items: center; }

.ki-scope .ki-crisis .lead-statement {
  font-family: var(--ki-serif); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.18;
  letter-spacing: -0.005em; max-width: 20ch; color: var(--ki-ink);
}
.ki-scope .ki-crisis .section-head .right {
  font-family: var(--ki-sans); font-size: 17px; line-height: 1.7;
  color: var(--ki-ink-mute);
}
.ki-scope .ki-crisis .section-head .right p { margin: 0; }

/* ── Centered section head — lead statement stacked above the intro, both
   centered, for a more dramatic opener. (Overrides the global 1fr/2fr grid.) */
.ki-scope .ki-crisis .crisis-head.head-center .section-head {
  display: block; text-align: center; margin-bottom: 0;
}
.ki-scope .ki-crisis .crisis-head.head-center .lead-statement {
  max-width: 24ch; margin: 0 auto;
  font-size: clamp(34px, 4.4vw, 58px); line-height: 1.1;
}
.ki-scope .ki-crisis .crisis-head.head-center .section-head .right {
  max-width: 64ch; margin: 30px auto 0; text-align: center;
}

/* ───── single-column wide flow ─────
   The four crisis points now stack vertically as full-width panels, one below
   the other, instead of a cramped 2×2 grid. Each panel has room to breathe:
   a header band (index + icon + title on the left, the stat on the right) over
   a side-by-side CATEGORY DEFAULT | KI'S ANSWER comparison that finally uses
   the full width of the page.                                                 */
.ki-scope .ki-crisis .crisis-flow {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* full width — matches the shock-stat tile row above (both span .wrap). */
}

/* Each card: a wide frosted-glass panel. Layout flows in two clean bands:
     ┌ header ──────────────────────────────────────────────┐
     │  01  (icon)  Title …                      STAT  cap   │
     ├ compare ──────────────────────────────────────────────┤
     │  CATEGORY DEFAULT  …      │      KI'S ANSWER  …         │
     └───────────────────────────────────────────────────────┘                */
.ki-scope .ki-crisis .crisis-card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 24px;
  box-shadow: 0 22px 60px -34px rgba(27, 116, 138, 0.38);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.ki-scope .ki-crisis .crisis-card:hover {
  transform: translateY(-3px);
  border-color: var(--ki-blue);
  box-shadow: 0 34px 80px -34px rgba(27, 116, 138, 0.5);
}

/* content pane — holds the text. Padded; full-width on text-only cards. */
.ki-scope .ki-crisis .crisis-card .cc-content {
  padding: 44px 56px;
  display: flex; flex-direction: column;
  min-width: 0;   /* let text wrap inside a grid track */
}

/* ── image + content split (cards with a relevant photo) ──
   The panel becomes a two-pane grid: a full-bleed image on one side and the
   text on the other, alternating sides down the column for an editorial flow.
   The image is flush to the card edge; the text keeps its padding.            */
.ki-scope .ki-crisis .crisis-card.has-img {
  display: grid;
  grid-template-columns: 42% 1fr;
  align-items: stretch;
}
.ki-scope .ki-crisis .crisis-card.has-img.img-right { grid-template-columns: 1fr 42%; }
.ki-scope .ki-crisis .crisis-card.has-img.img-right .cc-media { order: 2; }

.ki-scope .ki-crisis .crisis-card .cc-media {
  position: relative; min-height: 320px; overflow: hidden;
}
.ki-scope .ki-crisis .crisis-card .cc-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 600ms ease;
}
.ki-scope .ki-crisis .crisis-card.has-img:hover .cc-media img { transform: scale(1.04); }

/* image cards stack the compare vertically (the text column is narrower) */
.ki-scope .ki-crisis .crisis-card.has-img .cc-compare { grid-template-columns: 1fr; }
.ki-scope .ki-crisis .crisis-card.has-img .c-default { padding-right: 0; }
.ki-scope .ki-crisis .crisis-card.has-img .c-answer {
  padding-left: 0; border-left: 0;
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--ki-rule);
}

/* ── per-card background image + readability wash ──
   Two full-bleed layers behind the content; the card content sits above. */
.ki-scope .ki-crisis .crisis-card .cc-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-repeat: no-repeat;
  transition: transform 600ms ease;
}
.ki-scope .ki-crisis .crisis-card .cc-bg-wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: #ffffff;
}
/* a soft bottom-up gradient adds depth and keeps the lower text crisp */
.ki-scope .ki-crisis .crisis-card.has-cbg::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.35) 100%);
}
/* lift the actual content above both wash layers */
.ki-scope .ki-crisis .crisis-card > *:not(.cc-bg):not(.cc-bg-wash) {
  position: relative; z-index: 2;
}
/* photo cards: drop the frosted fill (the image is the surface) + gentle zoom on hover */
.ki-scope .ki-crisis .crisis-card.has-cbg {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-color: rgba(255, 255, 255, 0.85);
}
.ki-scope .ki-crisis .crisis-card.has-cbg:hover .cc-bg { transform: scale(1.05); }

/* ── header band: index + icon on the left, stat on the right ──
   The title now owns its own line just below, so the header stays compact.    */
.ki-scope .ki-crisis .crisis-card .cc-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

/* left lead group: index → icon, vertically centred */
.ki-scope .ki-crisis .crisis-card .cc-lead {
  display: flex; align-items: center; gap: 18px;
  min-width: 0;
}
.ki-scope .ki-crisis .crisis-card .idx {
  font-family: var(--ki-serif); font-size: 56px; line-height: 0.9;
  color: var(--ki-blue); letter-spacing: -0.01em; flex: none;
}
.ki-scope .ki-crisis .crisis-card .cc-ic {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ki-blue);
  color: var(--ki-blue-deep);
  background: rgba(255, 255, 255, 0.55);
}
.ki-scope .ki-crisis .crisis-card .cc-ic svg { display: block; width: 24px; height: 24px; }
.ki-scope .ki-crisis .crisis-card .cc-ic .ki-icon-img { width: 24px; height: 24px; object-fit: contain; }

/* title — its own line under the header band */
.ki-scope .ki-crisis .crisis-card .cc-title {
  font-family: var(--ki-serif); font-weight: 400;
  font-size: clamp(22px, 2vw, 30px); line-height: 1.18;
  margin: 0 0 24px; color: var(--ki-ink); min-width: 0;
  padding-bottom: 22px; border-bottom: 1px solid var(--ki-rule);
}

/* stat cell — anchored to the far right of the header band */
.ki-scope .ki-crisis .crisis-card .c-stat {
  text-align: right; flex: none; padding-left: 28px;
  border-left: 1px solid var(--ki-rule);
}
.ki-scope .ki-crisis .crisis-card .stat .big {
  font-family: var(--ki-serif); font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1.05; color: var(--ki-blue); letter-spacing: -0.01em;
  white-space: nowrap;   /* keep "730→12" on one line */
}
.ki-scope .ki-crisis .crisis-card .stat .big.warn { color: #7A5A3A; }
.ki-scope .ki-crisis .crisis-card .stat .cap {
  font-family: var(--ki-sans); font-size: 11px; color: var(--ki-ink-mute);
  margin-top: 8px; line-height: 1.4; letter-spacing: 0.02em; max-width: 22ch;
  margin-left: auto;
}

/* ── compare body — two columns side by side, divided by a vertical hairline.
   The wide panel finally gives the problem/answer pair room to read as a
   genuine before-vs-after, instead of stacked in a narrow column.            */
.ki-scope .ki-crisis .crisis-card .cc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.ki-scope .ki-crisis .crisis-card .c-default { padding-right: 56px; }
.ki-scope .ki-crisis .crisis-card .c-answer  {
  padding-left: 56px; border-left: 1px solid var(--ki-rule);
}
.ki-scope .ki-crisis .crisis-card .k {
  font-family: var(--ki-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px;
}
.ki-scope .ki-crisis .crisis-card .default .k { color: #7A5A3A; }
.ki-scope .ki-crisis .crisis-card .answer .k  { color: var(--ki-blue-deep); }
.ki-scope .ki-crisis .crisis-card p {
  font-family: var(--ki-sans); font-size: 16px; color: var(--ki-ink-mute);
  line-height: 1.75; margin: 0;
}
.ki-scope .ki-crisis .crisis-card p strong { color: #000; font-weight: 600; }

.ki-scope .ki-crisis .crisis-foot {
  font-family: var(--ki-sans); font-size: 12px; color: var(--ki-ink-mute);
  line-height: 1.6; margin: 40px auto 0; max-width: 90ch; text-align: center;
}

/* Tablet: the stat drops below the title; compare columns stack with a
   horizontal hairline instead of the vertical one. */
@media (max-width: 860px) {
  /* image cards: stack the image on top, content below */
  .ki-scope .ki-crisis .crisis-card.has-img,
  .ki-scope .ki-crisis .crisis-card.has-img.img-right { grid-template-columns: 1fr; }
  .ki-scope .ki-crisis .crisis-card.has-img.img-right .cc-media { order: 0; }
  .ki-scope .ki-crisis .crisis-card .cc-media { min-height: 240px; }

  .ki-scope .ki-crisis .crisis-card .cc-content { padding: 34px 32px; }
  .ki-scope .ki-crisis .crisis-card .cc-top {
    flex-direction: column; align-items: flex-start; gap: 22px;
  }
  .ki-scope .ki-crisis .crisis-card .c-stat {
    text-align: left; padding-left: 0; border-left: 0;
    padding-top: 20px; border-top: 1px solid var(--ki-rule); width: 100%;
  }
  .ki-scope .ki-crisis .crisis-card .stat .cap { margin-left: 0; }
  /* text-only cards: stack the compare with a horizontal hairline */
  .ki-scope .ki-crisis .crisis-card .cc-compare { grid-template-columns: 1fr; }
  .ki-scope .ki-crisis .crisis-card .c-default {
    padding-right: 0; padding-bottom: 24px;
    margin-bottom: 24px; border-bottom: 1px solid var(--ki-rule);
  }
  .ki-scope .ki-crisis .crisis-card .c-answer { padding-left: 0; border-left: 0; }
  /* image cards already stack; their answer divider is set above */
  .ki-scope .ki-crisis .crisis-card.has-img .c-default {
    padding-bottom: 0; margin-bottom: 0; border-bottom: 0;
  }
}

/* Mobile: tighten padding + scale the index. The lead group wraps so the title
   can drop below the index/icon pair when space is tight. */
@media (max-width: 560px) {
  .ki-scope .ki-crisis .crisis-card .cc-content { padding: 28px 24px; }
  .ki-scope .ki-crisis .crisis-card .cc-media { min-height: 200px; }
  .ki-scope .ki-crisis .crisis-card .cc-lead { gap: 16px; }
  .ki-scope .ki-crisis .crisis-card .idx { font-size: 46px; line-height: 1; }
  .ki-scope .ki-crisis .crisis-card .cc-ic { width: 46px; height: 46px; }
  .ki-scope .ki-crisis .crisis-card .cc-ic svg,
  .ki-scope .ki-crisis .crisis-card .cc-ic .ki-icon-img { width: 22px; height: 22px; }
}