/**
 * 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 twice the screen width to drag sideways. */
.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; }
@media (max-width: 700px) {
  .map-zoom__dialog img { width: 200vw; max-width: none; max-height: none; }
  .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 .stats__aside { min-height: 280px; }
}
/* The tiles keep two columns until the phone breakpoint, as the Playbook's do. */
@media (max-width: 640px) { .cp-stat-tiles .stat-tiles { grid-template-columns: 1fr; } }

/* 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: var(--cp-section-py, 80px); padding-bottom: var(--cp-section-py, 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); }
}