/* Home page (index.html) only: hero, the platform explainer, and the live
   activity map.

   Most of this page's layout used to live in inline style attributes — 141 of
   them, including three two-column grids, the map's stats bar and the rescue
   modal. Inline styles cannot be reached by a media query, so none of it could
   respond to anything. The layout-bearing declarations are classes here; purely
   cosmetic ones (colour, font-weight on a one-off) are still inline. */

/* ── HERO ── */
.hero {
  padding: var(--gap-sec) var(--pad);
  max-width: calc(var(--max) + var(--pad)*2);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-col);
  align-items: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--red-accent);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--red-accent);
  margin-bottom: 32px;
  cursor: pointer;
  transition: background .15s;
}
.hero-badge-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red-accent);
  animation: dot-pulse 2s infinite;   /* keyframes live in base.css */
}

.hero-title {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: var(--step-5);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--black);
  margin-bottom: 24px;
}
.hero-sub {
  font-family: var(--font-soft);
  font-size: var(--step-1);
  color: var(--gray);
  line-height: 1.6;
  margin-bottom: 40px;
}
.hero-ctas { display: flex; gap: var(--gap-grid); flex-wrap: wrap; justify-content: flex-start; }

.hero-right {
  position: relative;
  aspect-ratio: 4/3;
  /* Capped against the viewport as well as the column, so the video cannot take
     over the first screen once the hero stacks. */
  max-height: var(--media-h-hero);
  width: 100%;
  margin-inline: auto;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  container-type: inline-size;
}
.hero-video {
  width: 130%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 2%;
  left: -20%;
}
/* Sized in cqw so the caption tracks the video box, not the viewport — but
   floored, because the box is half a phone screen wide once the hero stacks and
   2.8cqw of that is about four pixels. */
.hero-caption {
  position: absolute;
  top: 10%;
  right: 4cqw;
  background: transparent;
  border-radius: 1.5cqw;
  padding: 2.5cqw 3.5cqw;
  font-size: clamp(11px, 2.8cqw, 20px);
  font-weight: 500;
  max-width: min(40cqw, 22ch);
  line-height: 1.4;
  text-align: center;
}

/* ── PLATFORM EXPLAINER ──
   Three alternating rows, image on one side and content on the other. */
.intro-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--gap-col);
  align-items: center;
}
.intro-row--rev { grid-template-columns: 1.6fr 1fr; }
.intro-row--sep {
  margin-bottom: var(--gap-sec);
  padding-bottom: var(--gap-sec);
  border-bottom: 1px solid var(--light-gray);
}
.intro-figure {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--light-gray);
}
.intro-figure img { width: 100%; height: 100%; object-fit: contain; padding: clamp(12px, 1.9vw + 4.9px, 24px); }
.intro-title { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 12px; }
.intro-body { font-family: var(--font-soft); font-size: var(--step-0); color: var(--gray); line-height: 1.7; margin-bottom: 28px; }

/* Numbered vertical steps in row 1. Already a column, so it only needs its
   sizes on the scale. */
.flow-step { display: flex; align-items: flex-start; gap: 14px; }
.flow-rail { display: flex; flex-direction: column; align-items: center; }
.flow-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--black); color: var(--white);
  font-size: var(--step--1); font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.flow-num--accent { background: var(--red-accent); }
.flow-line { width: 1.5px; height: 28px; background: var(--light-gray); margin-top: 4px; }
.flow-text { padding-top: 6px; }
.flow-title { font-size: var(--step--1); font-weight: 600; margin-bottom: 2px; }
.flow-note { font-size: var(--step--1); color: var(--gray); font-family: var(--font-soft); }

/* The "example match" pair in row 2: two records either side of a match glyph. */
.match-box { background: var(--bg-soft); border-radius: 16px; padding: var(--card-pad); }
.match-pair { display: flex; align-items: center; gap: 12px; }
.match-card {
  flex: 1;
  min-width: 0;
  background: var(--white);
  border: 1.5px solid var(--light-gray);
  border-radius: 10px;
  padding: 12px 14px;
}
.match-arrow { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }

/* The three-pill flow in row 3, joined by connector lines carrying a label. */
.mini-flow { display: flex; align-items: center; gap: 0; margin-bottom: 32px; }
.mini-flow-step { text-align: center; padding: 14px 18px; background: var(--bg-soft); border-radius: 10px; }
.mini-flow-link { flex: 1; height: 1.5px; background: var(--light-gray); position: relative; }
.mini-flow-label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--white); padding: 0 4px;
  font-size: var(--step--2); color: var(--gray);
  white-space: nowrap;
}

/* ── LIVE ACTIVITY MAP ── */
.map-section {
  padding: var(--gap-sec) 0;
  max-width: calc(var(--max) + var(--pad)*2);
  margin: 0 auto;
}
/* The header used to sit in a second container that re-applied max-width and
   var(--pad) inside .map-section, which already had it — a double gutter of
   160px a side on desktop. */
.map-head {
  padding: 0 var(--pad);
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.map-legend { display: flex; gap: 20px; flex-wrap: wrap; padding-bottom: 4px; }
.map-legend-item { display: flex; align-items: center; gap: 6px; font-size: var(--step--1); color: var(--gray); }
.map-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }

/* isolate, because the header now sticks on every page. Leaflet's panes run to
   400 and its control corners to 1000, and .leaflet-container is
   position:relative with z-index auto, so it opens no stacking context of its
   own — those numbers would compete with .nav (100) in the root context and the
   map would scroll straight over the header. The same applies to .map-stats
   (400) just below. Isolating here keeps every one of them local, so the nav's
   z-index does not have to out-bid a third-party stylesheet. */
.map-frame { position: relative; width: 100%; isolation: isolate; }
/* Leaflet's own container rule clips the tile and marker panes, which extend
   well past the frame. Stated here too so the clip does not depend on the
   moment leaflet.css lands from its CDN. */
.map-canvas { width: 100%; height: var(--media-h-map); overflow: hidden; }

/* Stats bar over the bottom of the map. */
.map-stats {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 400;
  padding: 20px var(--pad);
  display: flex;
  align-items: center;
  gap: 40px;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,0.6);
}
.map-stat-num { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.map-stat-label { font-size: var(--step--1); color: var(--gray); margin-top: 3px; font-family: var(--font-soft); }
.map-stat-sep { width: 1px; height: 32px; background: var(--light-gray); }
.map-aside { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.map-aside p { font-size: var(--step--1); color: var(--gray); font-family: var(--font-soft); margin: 0; }
.map-aside a {
  font-size: var(--step--1); font-weight: 600; color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  white-space: nowrap;
}

/* ── CARD GRIDS (Resources, Get Involved) ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grid);
}

.info-card {
  border: 1.5px solid var(--light-gray);
  border-radius: 16px;
  padding: var(--card-pad);
  display: block;
}
.info-card--link { transition: border-color .2s, box-shadow .2s; }
.info-card--button { cursor: pointer; }
.info-card-icon { font-size: var(--step-4); margin-bottom: 16px; }
.info-card-title { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.info-card-body { font-family: var(--font-soft); font-size: var(--step--1); color: var(--gray); line-height: 1.6; }
/* Underlined with text-decoration rather than a border, so vertical padding can
   grow the tap target without dragging the rule away from the text. */
.info-card-link {
  font-size: var(--step--1); font-weight: 600; color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  display: inline-block; margin-top: 24px;
}

/* ── RESCUE ORGANIZATIONS MODAL ──
   Chrome comes from components/modal.css; these are the list items. */
.rescue-filters { padding: 20px var(--card-pad); border-bottom: 1px solid var(--light-gray); display: flex; gap: 12px; }
.rescue-filters select {
  flex: 1; min-width: 0;
  padding: 9px 12px;
  border: 1.5px solid var(--light-gray);
  border-radius: 8px;
  font-size: var(--text-input);
  font-family: var(--font-main);
  outline: none; cursor: pointer;
  background: var(--white);
}
.rescue-list { padding: 20px var(--card-pad) var(--card-pad); display: flex; flex-direction: column; gap: 16px; }
.rescue-org-card {
  border: 1.5px solid var(--light-gray);
  border-radius: 12px;
  padding: 20px 24px;
}
.rescue-org-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.rescue-org-name { font-size: var(--step-0); font-weight: 700; }
.rescue-org-link {
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--black);
  border-bottom: 1px solid var(--black);
  padding-bottom: 1px;
  white-space: nowrap;
}
.rescue-org-type { font-size: var(--step--2); color: var(--gray); font-family: var(--font-soft); }
.rescue-org-phone { font-size: var(--step--1); font-weight: 600; margin-top: 8px; }
.rescue-org-note {
  margin-top: 10px;
  font-size: var(--step--2);
  color: #b45300;
  background: #fff8f0;
  border-radius: 6px;
  padding: 6px 10px;
}
.rescue-org-empty {
  text-align: center;
  padding: 32px;
  color: var(--gray);
  font-family: var(--font-soft);
}

/* ── HOVER ──
   Guarded: on a touch screen these latch on tap and stay painted. The two
   box-shadow transitions are also the most expensive paint on the page. */
@media (hover: hover) and (pointer: fine) {
  .hero-badge:hover { background: rgb(250,240,240); }
  .info-card--link:hover { border-color: var(--black); box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
}

/* ── TABLET LANDSCAPE ── */
@media (max-width: 1279px) {
  .map-stats { gap: 24px; }
  .map-aside { gap: 16px; }
}

/* Text links that act as the card's call to action need a real target on a
   touch screen. Padding is safe now that the underline is text-decoration. */
@media (pointer: coarse), (max-width: 1023px) {
  .info-card-link, .map-aside a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
  }
  .info-card-link { margin-top: 12px; }
}

/* ── TABLET PORTRAIT ──
   The hero and the explainer rows stack. Three-card grids go to two rather
   than straight to one — a 768px iPad showing one full-width card per row was
   the old 900px query's doing. */
@media (max-width: 1023px) {
  .hero { grid-template-columns: 1fr; gap: var(--gap-grid); }
  .hero-badge { margin-bottom: 20px; }
  .hero-sub { margin-bottom: 28px; }

  .intro-row, .intro-row--rev { grid-template-columns: 1fr; }
  /* Source order puts the image first in rows 1 and 3 and second in row 2;
     stacked, the image should lead every time. */
  .intro-row--rev .intro-figure { order: -1; }

  .card-grid { grid-template-columns: repeat(2, 1fr); }

  /* Blurring a 20px radius over live, panning map tiles forces the backdrop to
     re-composite on every tile paint. */
  .map-stats {
    background: rgba(255,255,255,0.94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ── PHONE LANDSCAPE / SMALL TABLET ── */
@media (max-width: 767px) {
  .hero-right { max-width: 520px; }
  .card-grid { grid-template-columns: 1fr; }

  .match-pair { flex-wrap: wrap; }
  .match-card { flex: 1 1 100%; }
  /* Between two stacked cards the glyph reads as a divider rather than a
     left-to-right arrow. */
  .match-arrow { flex: 1 1 100%; flex-direction: row; gap: 8px; order: 0; }

  /* Stacked, the connector turns vertical: the rule becomes two short segments
     drawn either side of the label. Keeping the label absolutely centred over a
     1.5px-wide box would leave it hanging ~190px off both edges. */
  .mini-flow { flex-direction: column; align-items: stretch; gap: 0; }
  .mini-flow-step { padding: 12px 16px; }
  .mini-flow-link {
    flex: none;
    width: 100%;
    height: auto;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
  }
  .mini-flow-link::before,
  .mini-flow-link::after {
    content: '';
    width: 1.5px;
    height: 12px;
    background: var(--light-gray);
  }
  .mini-flow-label { position: static; transform: none; padding: 0; }

  /* Overlaying a stats bar on a map that is now barely taller than the bar
     leaves neither readable. Below the map, in two columns. */
  .map-stats {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px var(--gap-grid);
    padding: 20px var(--pad);
    background: var(--bg-soft);
    border-top: 1px solid var(--light-gray);
  }
  .map-stat-sep { display: none; }
  .map-aside { margin-left: 0; grid-column: 1 / -1; flex-wrap: wrap; gap: 8px 16px; }
}

/* ── PHONE ── */
@media (max-width: 479px) {
  .map-stats { grid-template-columns: 1fr 1fr; }
  .rescue-filters { flex-direction: column; }
}

/* Leaflet's zoom control is a 26px default that this page shrank to 24px with
   four !important flags (leaflet.css is linked after this file, so specificity
   alone loses). On touch it has to go the other way. */
.leaflet-control-zoom a {
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  font-size: var(--step--1) !important;
}
@media (pointer: coarse), (max-width: 1023px) {
  .leaflet-control-zoom a {
    width: var(--tap) !important;
    height: var(--tap) !important;
    line-height: var(--tap) !important;
    font-size: var(--step-1) !important;
  }
}