/* No media queries — all responsive rules in responsive.css.
   regions.css — IDF Kenya — Regions page styles. */

/* ================================================
   IDF Kenya — regions.css  (REFACTORED v4.1)
   Storytelling magazine-spread layout for county sections.

   KEY CHANGES FROM v4.0:
   - --section-gap reduced 120px → 72px for tighter vertical rhythm
   - .story-status & .story-emblem repositioned as direct .story-card
     children (moved in HTML) — percentage-based anchoring at the
     image/content grid boundary eliminates overflow:hidden clipping
     and z-index stacking ambiguity vs. .story-content (z-index: 2)
   - .county-svg-emblem placeholder added: fixed 72×72px container
     above each .story-photo-label for county SVG emblems
   - Redundant / conflicting rules removed (duplicate transition, old
     story-img-panel overflow hacks for emblem/status)
   - Mobile breakpoints updated to match new status/emblem DOM position

   STRUCTURE MAP:
   .county-section
     └── .story-card  (.story-card--flip for even sections)
           ├── .story-img-panel
           │     ├── .story-img            (hero photo — SVG or raster)
           │     ├── .story-img-overlay    (gradient veil)
           │     ├── .county-svg-emblem    (NEW: 72×72px SVG placeholder)
           │     └── .story-photo-label   (county watermark)
           ├── .story-status              (MOVED: now a .story-card child)
           ├── .story-emblem              (MOVED: now a .story-card child)
           └── .story-content             (floating glass card)
                 ├── .story-eyebrow       (county label + chips)
                 ├── .story-headline      (h2)
                 ├── .story-lead          (first para)
                 ├── .story-body          (remaining paras)
                 ├── .story-callout       (info box)
                 ├── .story-stats         (3-stat row)
                 └── .story-actions       (CTA buttons)
   ================================================ */

/* ================================================
   1. BRAND TOKENS
   ================================================ */
:root {
  --idf-navy:          #1B2E4B;
  --idf-navy-dark:     #0f1e33;
  --idf-navy-light:    #2a4470;
  --idf-blue:          #2E6DB4;
  --idf-blue-light:    #5B9BD5;
  --idf-blue-pale:     #EBF3FB;
  --idf-green:         #3A7D44;
  --idf-green-light:   #52a85f;
  --idf-green-pale:    #EAF4EB;
  --idf-cream:         #F8FAFF;
  --idf-text:          #1a1a2e;
  --idf-text-mid:      #3d4560;
  --idf-text-muted:    #6b7280;
  --idf-border:        rgba(27, 46, 75, 0.1);
  --idf-shadow-sm:     0 2px 10px rgba(27, 46, 75, 0.07);
  --idf-shadow-md:     0 8px 30px rgba(27, 46, 75, 0.13);
  --idf-shadow-lg:     0 20px 60px rgba(27, 46, 75, 0.18);
  --idf-shadow-xl:     0 32px 80px rgba(27, 46, 75, 0.26);

  /* CHANGED: tighter vertical rhythm — was 120px / 72px */
  --section-gap:       72px;
  --section-gap-sm:    48px;

  --sidenav-width:     240px;
  --font-display:      'Playfair Display', Georgia, serif;
  --font-body:         'DM Sans', system-ui, sans-serif;
  --r-sm:  4px;
  --r-md:  10px;
  --r-lg:  18px;
  --r-xl:  28px;
  --r-2xl: 40px;

  /* Grid split percentages — single source of truth for status/emblem positioning */
  --story-img-pct: 58%;  /* image panel width in 2-column layout */
  --story-cnt-pct: 42%;  /* content panel width (100% - 58%) */
}

/* ================================================
   2. BASE RESET
   ================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--idf-text-mid);
  background: #fff;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--idf-text);
  line-height: 1.2;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem);    font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3vw, 2.8rem);  font-weight: 600; }
h3 { font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 600; }

p            { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
img          { display: block; max-width: 100%; }
a            { color: inherit; text-decoration: none; transition: color 0.25s; }
ul           { list-style: none; }

/* ================================================
   3. PAGE LAYOUT WRAPPER
   ================================================ */
.regions-layout {
  display: flex;
  align-items: flex-start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  gap: 56px;
}

/* ================================================
   4. PAGE HERO
   ================================================ */
.regions-hero {
  position: relative;
  height: 440px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin-top: 72px; /* accounts for fixed navbar */
}

/* Hero background image — explicit dimensions prevent layout shift */
.regions-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.regions-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    rgba(11, 20, 38, 0.92) 0%,
    rgba(27, 46, 75, 0.72) 40%,
    rgba(27, 46, 75, 0.28) 100%
  );
}

.regions-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 28px 52px;
}

.regions-hero-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--idf-blue-light);
  margin-bottom: 14px;
}

.regions-hero-content h1 { color: #fff; margin-bottom: 14px; }

.regions-hero-content p {
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.08rem;
  max-width: 580px;
  line-height: 1.75;
  margin: 0;
}

.regions-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.regions-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  padding: 5px 13px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
  transition: all 0.25s;
  cursor: pointer;
}

.regions-hero-pill:hover {
  background: var(--idf-blue);
  border-color: var(--idf-blue);
  color: #fff;
}

/* ================================================
   5. MAIN CONTENT COLUMN
   ================================================ */
.regions-main {
  flex: 1;
  min-width: 0;
  padding: var(--section-gap) 0;
}

/* ================================================
   6. COUNTY SECTION WRAPPER
   ================================================ */
.county-section {
  /* Uniform vertical gap between all sections */
  margin-bottom: var(--section-gap);
  padding-bottom: var(--section-gap);
  border-bottom: 1px solid var(--idf-border);
}

.county-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* Anchor offset for fixed navbar — prevents heading hiding under nav */
.county-section::before {
  content: '';
  display: block;
  height: 96px;
  margin-top: -96px;
  pointer-events: none;
}

/* ================================================
   7. STORY CARD — magazine-spread layout
   ================================================ */
.story-card {
  display: grid;
  /* Image panel: 58% | Content card: 42% — values mirror --story-img-pct */
  grid-template-columns: var(--story-img-pct) 1fr;
  grid-template-rows: 1fr;
  align-items: stretch;
  min-height: 520px;
  border-radius: var(--r-2xl);
  overflow: visible; /* allows emblem/status to render above content card */
  position: relative;
}

/* Flipped layout for alternate counties */
.story-card--flip {
  grid-template-columns: 1fr var(--story-img-pct);
}

.story-card--flip .story-img-panel {
  grid-column: 2;
  grid-row: 1;
  border-radius: 0 var(--r-2xl) var(--r-2xl) 0;
}

.story-card--flip .story-content {
  grid-column: 1;
  grid-row: 1;
  margin-right: -60px;
  margin-left: 0;
  border-radius: var(--r-xl) 0 0 var(--r-xl);
}

/* ── IMAGE PANEL ─────────────────────────────── */
.story-img-panel {
  position: relative;
  border-radius: var(--r-2xl) 0 0 var(--r-2xl);
  overflow: hidden; /* clips the photo zoom effect on hover */
  min-height: 520px;
}

/* Hero photograph — SVG or raster; explicit width/height set in HTML */
.story-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Subtle zoom on hover — clipped to .story-img-panel boundary */
.story-card:hover .story-img {
  transform: scale(1.05);
}

/* Gradient overlay — darkens bottom for text readability */
.story-img-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(11, 20, 38, 0) 35%,
      rgba(11, 20, 38, 0.55) 100%
    ),
    linear-gradient(
      90deg,
      rgba(11, 20, 38, 0) 40%,
      rgba(11, 20, 38, 0.4) 100%
    );
  transition: opacity 0.4s ease;
}

.story-card--flip .story-img-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(11, 20, 38, 0) 35%,
      rgba(11, 20, 38, 0.55) 100%
    ),
    linear-gradient(
      270deg,
      rgba(11, 20, 38, 0) 40%,
      rgba(11, 20, 38, 0.4) 100%
    );
}

/* ================================================
   8. COUNTY SVG EMBLEM PLACEHOLDER
   Fixed 72×72px container positioned above the photo
   label. Replace the placeholder <svg> with a real
   county emblem:
     <img src="assets/images/emblems/county.svg"
          width="72" height="72" alt="">
   ================================================ */
.county-svg-emblem {
  position: absolute;
  /* Positions above .story-photo-label (which is at bottom: 24px) */
  bottom: 68px;
  left: 24px;
  /* FIXED uniform dimensions across all county cards — do not change */
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: none;
}

.county-svg-emblem img,
.county-svg-emblem svg {
  /* Enforced dimensions — prevents SVG from stretching out of its container */
  width: 72px;   /* FIXED: uniform county emblem width */
  height: 72px;  /* FIXED: uniform county emblem height */
  display: block;
  object-fit: contain;
}

/* Mirror for flipped cards — right-align the emblem */
.story-card--flip .county-svg-emblem {
  left: auto;
  right: 24px;
}

/* County name watermark on the photo */
.story-photo-label {
  position: absolute;
  bottom: 24px;
  left: 28px;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.story-card--flip .story-photo-label {
  left: auto;
  right: 28px;
  text-align: right;
}

/* ================================================
   9. IMAGE BADGE GROUP — single positioned flex container
   ─────────────────────────────────────────────────
   WHY A WRAPPER:
   Previously the pill and emblem each had their own
   position:absolute declarations, making them hard to
   keep in sync and causing them to collide or drift.

   The .image-badge-group is the ONE positioned element.
   It is a direct child of .story-card (overflow:visible,
   position:relative) so it escapes the overflow:hidden
   on .story-img-panel and sits above .story-content
   (z-index:2) via z-index:5.

   LAYOUT:
   display:flex with align-items:center lines up the pill
   and emblem on a shared baseline. gap:12px gives the
   10-15px spacing requested without any margin hacks.

   PLACEMENT:
   Default card (image on left 0→58%):
     top-left corner of the image → top:16px; left:16px

   Flip card (image on right 42%→100%):
     top-right corner of the image → top:16px; right:16px
     flex-direction:row-reverse so the emblem appears on
     the left of the pill (towards the image interior).
   ================================================ */
.image-badge-group {
  /* Absolute anchor — single positioning declaration for the pair */
  position: absolute;
  top: 16px;
  left: 16px;      /* top-left corner of the image panel */
  right: auto;
  z-index: 5;      /* above .story-content (z-index:2) */

  /* Flexbox alignment of pill + emblem */
  display: inline-flex;
  align-items: center;   /* pill and emblem share a vertical centre-line */
  gap: 12px;             /* clean 12px gap — within the 10-15px spec */

  /* Prevent the group itself from interfering with pointer events
     on image content it sits above */
  pointer-events: none;
}

/* Re-enable pointer events on the interactive children */
.image-badge-group .story-status,
.image-badge-group .story-emblem {
  pointer-events: auto;
}

/* Flip card — mirror group to top-right of the image panel */
.story-card--flip .image-badge-group {
  left: auto;
  right: 16px;
  /* row-reverse: emblem on left, pill on right — keeps pill at the
     visual "outer" edge and emblem closer to the image interior */
  flex-direction: row-reverse;
}

/* ================================================
   STATUS PILL — visual styles only (no positioning)
   ─────────────────────────────────────────────────
   All top/left/right/z-index rules are now on the
   parent .image-badge-group. The pill only needs its
   visual appearance and inline-flex item sizing here.
   ================================================ */
.story-status {
  /* Flex item — size is driven by content */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;

  /* Typography */
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;

  /* Geometry */
  padding: 6px 14px;
  border-radius: 20px;   /* full symmetric pill */

  /* Elevation */
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

/* Active — green with animated pulse dot */
.story-status--active {
  background: var(--idf-green);
  color: #fff;
}

.story-status--active::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  animation: pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

/* Completed — dark frosted glass */
.story-status--completed {
  background: rgba(27, 46, 75, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.88);
}

.story-status--completed i {
  font-size: 0.68rem;
}

/* No flip-specific overrides needed — the group handles mirroring */

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

/* ================================================
   10. COUNTY ICON EMBLEM — visual styles only (no positioning)
   ─────────────────────────────────────────────────
   Position is controlled entirely by the flex layout
   inside .image-badge-group. The emblem only declares
   its circular visual appearance and hover scale.
   ================================================ */
.story-emblem {
  /* Flex item — fixed size circle */
  flex-shrink: 0;
  width: 44px;    /* slightly smaller than before: sits beside the pill cleanly */
  height: 44px;

  /* Circular card */
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
  border: 2.5px solid rgba(255, 255, 255, 0.9);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Scale on card hover — no translate needed (position is now via flexbox) */
.story-card:hover .story-emblem {
  transform: scale(1.12);
  box-shadow: var(--idf-shadow-lg);
}

.story-emblem-inner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  color: #fff;
}

.emblem--blue  { background: linear-gradient(135deg, var(--idf-blue),  var(--idf-navy)); }
.emblem--green { background: linear-gradient(135deg, var(--idf-green), var(--idf-navy)); }
.emblem--navy  { background: linear-gradient(135deg, var(--idf-navy),  var(--idf-blue-light)); }

/* ── CONTENT CARD ────────────────────────────── */
.story-content {
  background: #fff;
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
  box-shadow: var(--idf-shadow-xl);
  padding: 44px 44px 44px 72px; /* left padding: breathing room near emblem */
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: -60px; /* overlaps the image panel by 60px */
  position: relative;
  z-index: 2;
  transition: box-shadow 0.4s ease;
}

.story-card:hover .story-content {
  box-shadow: 0 40px 100px rgba(27, 46, 75, 0.22);
}

/* Thin gradient accent line at top of card — animates in on hover */
.story-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 72px;
  right: 44px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--idf-blue), var(--idf-green));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

.story-card:hover .story-content::before {
  transform: scaleX(1);
}

/* ================================================
   11. STORY CONTENT COMPONENTS
   ================================================ */

/* Eyebrow row: county label + project chips */
.story-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.story-county-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--idf-blue);
  padding: 4px 12px;
  background: var(--idf-blue-pale);
  border-radius: 20px;
}

/* Project chip tags */
.story-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.story-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

.story-chip--blue  { background: var(--idf-blue-pale);  color: var(--idf-blue); }
.story-chip--green { background: var(--idf-green-pale); color: var(--idf-green); }
.story-chip--navy  { background: rgba(27,46,75,0.07);   color: var(--idf-navy); }

/* Headline */
.story-headline {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 700;
  color: var(--idf-navy);
  line-height: 1.25;
  margin-bottom: 16px;
}

/* Lead paragraph — slightly larger */
.story-lead {
  font-size: 0.97rem;
  line-height: 1.82;
  color: var(--idf-text-mid);
  margin-bottom: 12px;
}

/* Body paragraphs */
.story-body {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--idf-text-muted);
  margin-bottom: 12px;
}

/* Callout / info box */
.story-callout {
  background: var(--idf-cream);
  border-left: 3px solid var(--idf-blue);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 14px 18px;
  margin: 18px 0;
}

.story-callout--green { border-left-color: var(--idf-green); }

.story-callout h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--idf-navy);
  margin-bottom: 5px;
}

.story-callout--green h4 { color: var(--idf-green); }

.story-callout p {
  font-size: 0.85rem;
  color: var(--idf-text-mid);
  line-height: 1.65;
  margin: 0;
}

/* Stats strip */
.story-stats {
  display: flex;
  gap: 0;
  margin: 20px 0 24px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--idf-border);
}

.story-stat {
  flex: 1;
  padding: 14px 10px;
  text-align: center;
  background: var(--idf-cream);
  border-right: 1px solid var(--idf-border);
  transition: background 0.25s ease;
}

.story-stat:last-child { border-right: none; }
.story-stat:hover { background: var(--idf-blue-pale); }

.story-stat-number {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 700;
  color: var(--idf-navy);
  line-height: 1;
  margin-bottom: 4px;
}

.story-stat-number .stat-suffix { color: var(--idf-blue); font-size: 0.7em; }

.story-stat-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--idf-text-muted);
  line-height: 1.3;
}

/* CTA buttons */
.story-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-idf-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--idf-blue);
  color: #fff;
  border: 2px solid var(--idf-blue);
  padding: 10px 22px;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.26s ease;
  cursor: pointer;
  white-space: nowrap;
}

.btn-idf-primary:hover {
  background: var(--idf-navy);
  border-color: var(--idf-navy);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(46, 109, 180, 0.38);
}

.btn-idf-outline-navy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--idf-navy);
  border: 2px solid var(--idf-navy);
  padding: 10px 22px;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.26s ease;
  cursor: pointer;
  white-space: nowrap;
}

.btn-idf-outline-navy:hover {
  background: var(--idf-navy);
  color: #fff;
}

/* ================================================
   12. SCROLL REVEAL
   ================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }