/**
 * 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; }
.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; }
}

/* Spoke page Power Outage Profile (is-variant-glance): four word tiles in a
   2 x 2 dark/light checkerboard, from the Playbook's .stat-tiles--glance. Each
   tile's own dark/light class sets its colour on desktop; in one column the
   middle pair swaps, so the tiles alternate down the page instead. */
.cp-stat-tiles.is-variant-glance { padding-top: 0; }
.cp-stat-tiles .stat-tiles--glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-stat-tiles .stat-tiles--glance .stat-tile--dark { background: var(--firefly, #0D1B2A); color: var(--st-white); }
.cp-stat-tiles .stat-tiles--glance .stat-tile--dark .stat-tile__num { color: var(--st-white); }
.cp-stat-tiles .stat-tiles--glance .stat-tile--dark .stat-tile__label,
.cp-stat-tiles .stat-tiles--glance .stat-tile--dark .stat-tile__body { color: var(--mystic, #E1E8ED); }
.cp-stat-tiles .stat-tiles--glance .stat-tile__num--text { font-size: 28px; line-height: 1.1; }
@media (max-width: 640px) {
  .cp-stat-tiles .stat-tiles--glance { grid-template-columns: 1fr; }
  .cp-stat-tiles .stat-tiles--glance .stat-tile--light:nth-child(3) { background: var(--firefly, #0D1B2A); color: var(--st-white); }
  .cp-stat-tiles .stat-tiles--glance .stat-tile--light:nth-child(3) .stat-tile__num { color: var(--st-white); }
  .cp-stat-tiles .stat-tiles--glance .stat-tile--light:nth-child(3) .stat-tile__label,
  .cp-stat-tiles .stat-tiles--glance .stat-tile--light:nth-child(3) .stat-tile__body { color: var(--mystic, #E1E8ED); }
  .cp-stat-tiles .stat-tiles--glance .stat-tile--dark:nth-child(4) { background: var(--st-white); color: var(--st-fg); }
  .cp-stat-tiles .stat-tiles--glance .stat-tile--dark:nth-child(4) .stat-tile__num,
  .cp-stat-tiles .stat-tiles--glance .stat-tile--dark:nth-child(4) .stat-tile__label,
  .cp-stat-tiles .stat-tiles--glance .stat-tile--dark:nth-child(4) .stat-tile__body { color: var(--st-fg); }
}