/**
 * Stats Band — inc/widgets/class-dyn-stats-band.php
 *
 * Ported from the hand-written block that was pasted into Elementor HTML
 * widgets on four pages. Visual result is unchanged. Two things did change:
 *
 * 1. Google Fonts <link> tags are gone. DYN_Assets declares an @font-face
 *    against the Montserrat file already in the media library.
 * 2. Sizes and gaps are custom properties so the widget's Style controls can
 *    set them, but their per-breakpoint values still live in the media
 *    queries here rather than as control defaults. That is deliberate: an
 *    Elementor default emits a desktop rule with higher specificity and no
 *    media query, which would override the mobile values below and flatten
 *    the responsive design. With the controls left empty this file renders
 *    the mockup exactly, and touching a control is a genuine override.
 */

.dyn-stats,
.dyn-stats *,
.dyn-stats *::before,
.dyn-stats *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.dyn-stats {
  --dyn-charcoal: #121212;
  --dyn-orange:   #ED8000;
  --dyn-white:    #FFFFFF;
  --dyn-rule:     rgba(255, 255, 255, 0.45);
  --dyn-btn-bg:   #121212;
  --dyn-btn-text: #FFFFFF;
  --dyn-hang:     44px;
  --dyn-max:      1180px;
  --dyn-num-size: 46px;
  --dyn-label-size: 15px;
  --dyn-col-gap:  40px;
  --dyn-row-gap:  56px;

  /* The theme's typography would otherwise win here, which is why the
     original block pinned this too. */
  font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif !important;
  background: var(--dyn-charcoal);
  padding: 40px 0 35px;
  position: relative;
  /* No overflow:hidden on purpose. The CTA tile hangs below the band. */
}

.dyn-stats .dyn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--dyn-col-gap);
  row-gap: var(--dyn-row-gap);
  max-width: var(--dyn-max);
  margin: 0 auto;
}

/* ── Stat cell ───────────────────────────────────────────────────────── */
.dyn-stats .dyn-stat { color: var(--dyn-white); }

.dyn-stats .dyn-num,
.dyn-stats .dyn-label,
.dyn-stats .dyn-btn {
  font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif !important;
}

.dyn-stats .dyn-num {
  font-size: var(--dyn-num-size);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--dyn-white);
  margin: 0 0 14px;
}

.dyn-stats .dyn-num .dyn-unit {
  font-size: 0.52em;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-left: 6px;
  text-transform: uppercase;
}

.dyn-stats .dyn-label {
  font-size: var(--dyn-label-size);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.55;
  color: var(--dyn-white);
  margin: 0;
}

/* Thin rule under each stat */
.dyn-stats .dyn-stat::after {
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  max-width: 250px;
  margin-top: 18px;
  background: var(--dyn-rule);
}

/* ── Orange CTA tile ─────────────────────────────────────────────────── */
.dyn-stats .dyn-cta {
  background: var(--dyn-orange);
  color: var(--dyn-white);
  padding: 30px 28px 34px;
  position: relative;
  z-index: 2;
  /* Starts slightly above its row and hangs below the band's bottom edge. */
  margin-top: -14px;
  margin-bottom: calc(-1 * var(--dyn-hang));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.dyn-stats .dyn-cta::after { display: none; }

.dyn-stats .dyn-cta .dyn-num { margin-bottom: 12px; }
.dyn-stats .dyn-cta .dyn-label { font-weight: 500; }
.dyn-stats .dyn-cta .dyn-label strong {
  display: block;
  font-weight: 800;
}

/* Shown on mobile only, per the mockup */
.dyn-stats .dyn-cta .dyn-cta-line {
  display: none;
  height: 2px;
  width: 100%;
  margin-top: 16px;
  background: rgba(18, 18, 18, 0.85);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.dyn-stats .dyn-btn {
  display: inline-block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  line-height: 1;
  padding: 15px 26px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.dyn-stats .dyn-btn:hover { transform: translateY(-1px); }

/* Kit armor: the theme styles bare links, so colour and decoration are pinned
   on both states or the buttons inherit link styling. */
.dyn-stats a.dyn-btn,
.dyn-stats a.dyn-btn:hover,
.dyn-stats a.dyn-btn:focus,
.dyn-stats a.dyn-btn:visited {
  text-decoration: none;
  color: var(--dyn-btn-text);
}

.dyn-stats .dyn-btn:focus-visible {
  outline: 2px solid var(--dyn-white);
  outline-offset: 3px;
}

/* Desktop: inside the tile */
.dyn-stats .dyn-btn--tile {
  background: var(--dyn-btn-bg);
  margin-top: 22px;
}
.dyn-stats .dyn-btn--tile:hover { background: #000000; }

/* Mobile: below the grid, hidden on desktop */
.dyn-stats .dyn-btn--band {
  display: none;
  background: var(--dyn-orange);
  margin: 44px auto 0;
}
.dyn-stats .dyn-btn--band:hover { background: #ff9a1f; }

/* ══ Tablet and mobile: 2 columns, tile stops hanging, button moves ═════ */
@media (max-width: 768px) {
  .dyn-stats {
    padding: 48px 24px 56px;
    --dyn-num-size: 38px;
    --dyn-col-gap: 32px;
    --dyn-row-gap: 48px;
    --dyn-max: 560px;
  }

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

  .dyn-stats .dyn-cta {
    margin: 0;
    padding: 26px 22px 30px;
  }

  .dyn-stats .dyn-cta .dyn-cta-line { display: block; }
  .dyn-stats .dyn-btn--tile { display: none; }
  .dyn-stats .dyn-btn--band { display: table; }
}

@media (max-width: 400px) {
  .dyn-stats {
    padding: 40px 18px 48px;
    --dyn-num-size: 32px;
    --dyn-label-size: 13px;
    --dyn-col-gap: 22px;
    --dyn-row-gap: 40px;
  }
  .dyn-stats .dyn-btn { font-size: 14px; padding: 14px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .dyn-stats .dyn-btn { transition: none; }
  .dyn-stats .dyn-btn:hover { transform: none; }
}