/**
 * CP · Stat Tiles — self-contained styles (token-driven, brand-agnostic).
 * Scoped under .cp-stat-tiles. Ported from the numeric `.stats-band` on the
 * approved free-estimate landing page.
 */
.cp-stat-tiles {
  --st-fg: var(--wp--preset--color--text);
  --st-primary: var(--wp--preset--color--primary);
  --st-white: var(--wp--preset--color--white);
  --st-display: var(--wp--preset--font-family--barlow-condensed);
  --st-body: var(--wp--preset--font-family--roboto);
  --st-cream: #FFF9F0;
  --st-rule: #E5E3DF;
  --st-max: 1100px;
  padding: 0 clamp(24px, 5vw, 80px) 64px;
}
.cp-stat-tiles.is-surface-white { background: var(--st-white); }
.cp-stat-tiles.is-surface-cream { background: var(--st-cream); }
.cp-stat-tiles .stats-band {
  max-width: var(--st-max); margin: 0 auto; display: grid; gap: 24px; text-align: center;
  border-top: 1px solid var(--st-rule); padding-top: 40px;
}
.cp-stat-tiles .stats-band__num {
  font-family: var(--st-display); font-weight: 700; font-size: clamp(32px, 4vw, 44px);
  line-height: 1; color: var(--st-primary);
}
.cp-stat-tiles .stats-band__label {
  font-family: var(--st-body); font-weight: 700; font-size: 12px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--st-fg); margin-top: 8px;
}
@media (max-width: 760px) { .cp-stat-tiles .stats-band { grid-template-columns: 1fr 1fr !important; gap: 28px; } }

/* Tile grid + photo aside (the city hub's stats section). Ported from .stats__grid,
   .stat-tile and .milton — the aside is generic here, not Tampa-specific. */
.cp-stat-tiles .stats__grid { max-width: var(--st-max, 1100px); margin: 0 auto; }
.cp-stat-tiles.has-aside .stats__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch;
}
.cp-stat-tiles .stat-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cp-stat-tiles .stat-tile { padding: 22px; border-radius: 4px; display: flex; flex-direction: column; gap: 8px; }
.cp-stat-tiles .stat-tile--dark { background: #0D1B2A; color: var(--wp--preset--color--white); }
.cp-stat-tiles .stat-tile--light { background: var(--wp--preset--color--white); color: var(--wp--preset--color--text); }
.cp-stat-tiles .stat-tile__num {
  font-family: var(--wp--preset--font-family--barlow-condensed); font-weight: 700; font-size: 42px; line-height: 42px;
}
.cp-stat-tiles .stat-tile--dark .stat-tile__num { color: var(--wp--preset--color--primary); }
.cp-stat-tiles .stat-tile--light .stat-tile__num { color: var(--wp--preset--color--text); }
.cp-stat-tiles .stat-tile__label {
  font-family: var(--wp--preset--font-family--roboto); font-weight: 700; font-size: 13px; line-height: 24px;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.cp-stat-tiles .stat-tile__body {
  font-family: var(--wp--preset--font-family--roboto); font-size: 13px; line-height: 20.15px; margin: 0;
}
.cp-stat-tiles .stat-tile--dark .stat-tile__body { color: #E1E8ED; }

.cp-stat-tiles .stats__aside {
  background-color: #1E2C44;
  color: var(--wp--preset--color--white); border-radius: 4px;
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  /* The panel hugs the image and its caption. It used to stretch to the tile
     column height, which left a band of empty navy above the image -- and all
     of it when a spec named no image at all. */
  align-self: start;
}
/* The track graphic sits above the caption at its own aspect ratio. The panel
   is portrait and these maps are landscape, so cropping to fill would cut the
   track and the storm name out of the frame. */
.cp-stat-tiles .stats__aside-img { display: block; width: 100%; flex: 0 0 auto; height: auto; }
/* Enlarge the storm map (Playbook, owner direction 16 Oct 2026). The button
   sits top right on the map's title bar, clear of the brand logo (bottom left),
   the legend (bottom right) and every map's labels at phone width, and stays
   hidden until view.js has run. The dialog shows the map at up to the full
   viewport; on a phone, at the screen's width, to pinch-zoom. */
.cp-stat-tiles .map-zoom__frame { position: relative; display: block; }
.cp-stat-tiles .map-zoom__frame img { cursor: zoom-in; }
.cp-stat-tiles .map-zoom {
  position: absolute; right: 6px; top: 6px;
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px;
  padding: 7px 12px; border: 0; border-radius: 999px;
  background: var(--wp--preset--color--white); color: var(--wp--preset--color--text);
  font-family: var(--wp--preset--font-family--roboto); font-weight: 700; font-size: 14px; line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); cursor: pointer;
}
.cp-stat-tiles .map-zoom[hidden] { display: none; }
.cp-stat-tiles .map-zoom svg { width: 15px; height: 15px; flex: 0 0 auto; }
.cp-stat-tiles .map-zoom:hover { background: var(--st-cream); }
.cp-stat-tiles .map-zoom:focus-visible,
.map-zoom__close:focus-visible { outline: 3px solid var(--wp--preset--color--white); outline-offset: 2px; box-shadow: 0 0 0 6px var(--wp--preset--color--text); }
.map-zoom__dialog { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.map-zoom__dialog::backdrop { background: rgba(10, 14, 20, 0.92); }
.map-zoom__dialog[open] { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.map-zoom__dialog form { margin: 0; }
.map-zoom__close {
  min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px;
  background: var(--wp--preset--color--white); color: var(--wp--preset--color--text);
  font-family: var(--wp--preset--font-family--roboto); font-weight: 700; font-size: 16px; line-height: 1; cursor: pointer;
}
.map-zoom__scroll { max-width: 96vw; max-height: calc(96vh - 54px); overflow: auto; border-radius: 4px; }
.map-zoom__dialog img { display: block; width: auto; height: auto; max-width: 96vw; max-height: calc(96vh - 54px); }
.map-zoom__hint { display: none; align-self: center; margin: 0; color: var(--wp--preset--color--white); font-family: var(--wp--preset--font-family--roboto); font-size: 16px; line-height: 1.4; }
/* On a phone the map fits the screen edge to edge, below the Close button,
   and the browser's pinch zoom does the magnifying. (Playbook, owner finding
   19 Oct 2026: the earlier twice-the-screen-width map ran off the screen.) */
@media (max-width: 700px) {
  .map-zoom__dialog { max-width: 100vw; max-height: 100vh; }
  .map-zoom__scroll { max-width: 100vw; max-height: calc(100vh - 64px); border-radius: 0; }
  .map-zoom__dialog img { width: 100vw; max-width: 100vw; max-height: none; }
  /* The Close button and its focus ring stay clear of the screen edge
     (owner finding on an iPhone 14, 19 Oct 2026). */
  .map-zoom__dialog form { margin: 10px 16px 0 0; }
  .map-zoom__hint { display: block; }
}

.cp-stat-tiles .stats__aside-note {
  background: #FFF9F0; color: #64748B; border-top: 1px solid #E5E3DF;
  padding: 15px 18px 14px; font-family: var(--wp--preset--font-family--roboto); font-size: 12px; line-height: 18px;
}
.cp-stat-tiles .stats__aside-note strong { color: var(--wp--preset--color--primary); font-weight: 700; }

@media (max-width: 980px) {
  .cp-stat-tiles.has-aside .stats__grid { grid-template-columns: 1fr; }
  .cp-stat-tiles .stat-tiles { grid-template-columns: 1fr; }
  .cp-stat-tiles .stats__aside { min-height: 280px; }
}

/* A tile grid that is a section of its own carries its head (the city page's
   "At a Glance"): the same eyebrow, heading and lead as cp-prose-section, so the
   two read as one family, and the top padding a section opens with. */
.cp-stat-tiles.has-head { padding-top: 80px; padding-bottom: 80px; }
.cp-stat-tiles .stats__intro { max-width: var(--st-max); margin: 0 auto; }
.cp-stat-tiles .stats__intro .eyebrow {
  font-family: var(--st-body); font-weight: 600; font-size: 11px; line-height: 24px;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--st-fg); margin: 0;
}
.cp-stat-tiles .stats__intro h2 {
  font-family: var(--st-display); font-weight: 700; font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1; letter-spacing: -0.005em; color: var(--st-fg); margin: 11px 0 0;
}
.cp-stat-tiles .stats__lead {
  font-family: var(--st-body); font-size: 17px; line-height: 27.2px; color: var(--st-fg); margin: 12px 0 0;
}

/* At a Glance: four tiles in a 2 x 2 checkerboard. Each tile's own dark/light
   flag sets its colour; the value is a word, not a figure, so it is set smaller. */
.cp-stat-tiles.is-variant-glance .stat-tiles--glance { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
.cp-stat-tiles .stat-tile__num--text { font-size: 28px; line-height: 1.1; }
.cp-stat-tiles.is-variant-glance .stat-tile--dark .stat-tile__num { color: var(--wp--preset--color--white); }
.cp-stat-tiles.is-variant-glance .stat-tile--dark .stat-tile__label,
.cp-stat-tiles.is-variant-glance .stat-tile--dark .stat-tile__body { color: #E1E8ED; }
@media (max-width: 640px) {
  .cp-stat-tiles.is-variant-glance .stat-tiles--glance { grid-template-columns: 1fr; }
  /* One column: alternate dark and light down the page instead of the checkerboard. */
  .cp-stat-tiles.is-variant-glance .stat-tile--light:nth-child(3) { background: #0D1B2A; color: var(--wp--preset--color--white); }
  .cp-stat-tiles.is-variant-glance .stat-tile--light:nth-child(3) .stat-tile__num { color: var(--wp--preset--color--white); }
  .cp-stat-tiles.is-variant-glance .stat-tile--light:nth-child(3) .stat-tile__label,
  .cp-stat-tiles.is-variant-glance .stat-tile--light:nth-child(3) .stat-tile__body { color: #E1E8ED; }
  .cp-stat-tiles.is-variant-glance .stat-tile--dark:nth-child(4) { background: var(--wp--preset--color--white); color: var(--wp--preset--color--text); }
  .cp-stat-tiles.is-variant-glance .stat-tile--dark:nth-child(4) .stat-tile__num,
  .cp-stat-tiles.is-variant-glance .stat-tile--dark:nth-child(4) .stat-tile__label,
  .cp-stat-tiles.is-variant-glance .stat-tile--dark:nth-child(4) .stat-tile__body { color: var(--wp--preset--color--text); }
}