/* ═══════════════════════════════════════════════════════════════════════════
   Homepage "Since 2020 our achievements include" stat boxes
   ───────────────────────────────────────────────────────────────────────────
   The stat row is a SiteOrigin page-builder row living in the database, not in
   a theme template. SiteOrigin emits inline CSS that hardcodes a per-cell
   width (width:calc(33.3333% - ...)) against the three CURRENT cell IDs. Two
   consequences this file exists to fix:

     1. Cards size to their own caption, so a 5-line caption hangs below a
        3-line one and the row has no shared baseline (the "misaligned" bug).
     2. Adding a 4th stat gives that new cell NO width rule at all, because the
        inline CSS names only the three original IDs. The row would break.

   So we re-declare the stat row as a flex container and let the cards flex,
   overriding the inline per-ID widths by structure rather than by ID. This
   keeps working when boxes are added or removed in wp-admin, which is the
   whole point: editors change content, not CSS.

   Scoped to #content .home-map so nothing leaks to other SiteOrigin rows.
   ═══════════════════════════════════════════════════════════════════════════ */

#content .home-map {
  --stat-gap:        30px;
  --stat-radius:     10px;
  --stat-pad:        28px 22px;
  --stat-face:       rgba(255, 255, 255, 0.10);
  --stat-face-hover: rgba(255, 255, 255, 0.16);
  --stat-hair:       rgba(255, 255, 255, 0.18);
  --stat-num:        #ffca00;
  --stat-ease:       cubic-bezier(.2, .8, .2, 1);
}

/* ── The stat row ─────────────────────────────────────────────────────────
   Target the row that CONTAINS headline widgets, so this applies to the stat
   row only and survives the row being rebuilt with a different generated ID.
   :has() is supported in every browser this site targets; the fallback below
   covers the rest.                                                          */
#content .home-map .panel-grid:has(.widget_sow-headline) > .panel-row-style,
#content .home-map .panel-grid:has(.widget_sow-headline).panel-no-style {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     stretch;   /* equal heights: the actual alignment fix */
  justify-content: center;
  gap:             var(--stat-gap);
}

/* Cells: equal width, equal height, no leftover inline margins.
   flex-basis 0 + grow 1 makes every card share the row evenly no matter how
   many there are, which is what lets a 4th box drop in cleanly.

   SiteOrigin sets width via an ID selector (#pgc-...-1-0), which outranks any
   class selector, so the width override needs !important to land. The flex
   shorthand also resets flex-basis, so we must not let `width` win over it.  */
#content .home-map .panel-grid:has(.widget_sow-headline) > * > .panel-grid-cell,
#content .home-map .panel-grid:has(.widget_sow-headline) > .panel-grid-cell {
  width:        auto !important;  /* beats SiteOrigin's inline per-ID width */
  flex:         1 1 0 !important; /* ...and so must the basis that replaces it */
  min-width:    0;                /* allow shrink below content width */
  margin-right: 0 !important;
  display:      flex;
}

/* The widget fills its cell so sibling cards match height exactly.
   Every wrapper between the cell and the card must stretch, or the card only
   grows to its own caption and the row goes ragged again. SiteOrigin also puts
   margin-bottom:30px on .so-panel, which would show up as a gap under the
   shortest card, so that is zeroed here.                                     */
#content .home-map .panel-grid:has(.widget_sow-headline) .so-panel,
#content .home-map .panel-grid:has(.widget_sow-headline) .widget_sow-headline,
#content .home-map .panel-grid:has(.widget_sow-headline) .so-widget-sow-headline,
#content .home-map .panel-grid:has(.widget_sow-headline) .panel-widget-style {
  display:        flex;
  flex-direction: column;
  flex:           1 1 auto;
  width:          100%;
  margin-bottom:  0 !important;
}

/* ── The card ─────────────────────────────────────────────────────────────
   Number sits on a fixed-height row so every number baseline lines up across
   cards regardless of caption length. Caption starts at the same y in all
   cards, and the card face stretches to the tallest.                        */
#content .home-map .sow-headline-container {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  flex:             1;
  padding:          var(--stat-pad);
  background:       var(--stat-face);
  border:           1px solid var(--stat-hair);
  border-radius:    var(--stat-radius);
  text-align:       center;
  transition:       background .25s var(--stat-ease),
                    transform  .25s var(--stat-ease);
}

#content .home-map .sow-headline-container:hover {
  background: var(--stat-face-hover);
  transform:  translateY(-2px);
}

/* Number: fixed row height = shared baseline across all cards. */
#content .home-map .widget_sow-headline .sow-headline {
  display:        flex;
  align-items:    center;
  justify-content: center;
  min-height:     58px;
  margin:         0 0 14px;
  /* Fluid so the longest value ("US$76.78bn") fits its card at every width
     without shrinking the short ones ("112") into insignificance.            */
  font-size:      clamp(30px, 2.6vw, 44px);
  line-height:    1;
  font-weight:    900;
  letter-spacing: 0.02em;   /* tightened: 0.05em made "100,244" straggle */
  color:          var(--stat-num);
  white-space:    nowrap;   /* never break a figure across two lines */
  font-variant-numeric: tabular-nums;  /* digits align optically card to card */
}

/* Hairline under the number, replacing the hidden SiteOrigin decoration. */
#content .home-map .widget_sow-headline .sow-headline::after {
  content: none;
}

#content .home-map .widget_sow-headline .decoration {
  display:       block;
  width:         34px;
  height:        2px;
  margin:        0 0 14px;
  background:    var(--stat-num);
  opacity:       .55;
  flex:          0 0 auto;
}

#content .home-map .widget_sow-headline .decoration .decoration-inside {
  display: none;
}

/* Caption: starts at a common y, wraps naturally, never pushes the card
   wider than its siblings.                                                  */
#content .home-map .widget_sow-headline .sow-sub-headline {
  margin:      0;
  font-size:   17px;
  line-height: 1.35;
  color:       #fff;
  text-wrap:   balance;   /* avoids one-word orphan lines in long captions */
  max-width:   26ch;      /* keeps long captions from running edge to edge */
}

/* ── Footnotes ────────────────────────────────────────────────────────────
   The * / ** notes sit in their own row; centre them under the cards.       */
#content .home-map .panel-grid:last-child .textwidget p {
  margin:      0 0 4px;
  font-size:   14px;
  line-height: 1.4;
  color:       rgba(255, 255, 255, 0.72);
  text-align:  center;
}

/* ── Responsive ───────────────────────────────────────────────────────────
   4-up desktop → 2x2 tablet → 1-up mobile. The 2x2 step is what makes a
   fourth box work; at 3 boxes it simply wraps 2 + 1 centred.                */
@media (max-width: 991px) {
  #content .home-map .panel-grid:has(.widget_sow-headline) > * > .panel-grid-cell,
  #content .home-map .panel-grid:has(.widget_sow-headline) > .panel-grid-cell {
    flex:      1 1 calc(50% - var(--stat-gap)) !important;
    max-width: calc(50% - var(--stat-gap));
  }
}

@media (max-width: 767px) {
  #content .home-map {
    --stat-gap: 18px;
  }

  /* SiteOrigin forces flex-direction:column on the row below 767px via inline
     CSS. Re-assert row+wrap so our 1-up stacking is ours, not theirs, and the
     gap stays even.                                                          */
  #content .home-map .panel-grid:has(.widget_sow-headline) > .panel-row-style,
  #content .home-map .panel-grid:has(.widget_sow-headline).panel-no-style {
    flex-direction: column !important;
    align-items:    stretch;
  }

  /* SiteOrigin's own mobile rule sets width:100% AND keeps margin-right:30px on
     these cells, which overflows the container by 30px. Zero both.           */
  #content .home-map .panel-grid:has(.widget_sow-headline) > * > .panel-grid-cell,
  #content .home-map .panel-grid:has(.widget_sow-headline) > .panel-grid-cell {
    flex:         1 1 auto !important;
    width:        100% !important;
    max-width:    100%;
    min-width:    0;
    margin-right: 0 !important;
  }

  #content .home-map .widget_sow-headline .sow-headline {
    min-height: 0;
    font-size:  38px;
  }

  #content .home-map .sow-headline-container {
    padding: 22px 18px;
  }

  /* Long single-word captions ("infrastructuretransparency") and the wide
     US$76.78bn figure must not push the card past the viewport on narrow
     phones. box-sizing guards against padding widening a 100% card.          */
  #content .home-map .panel-grid:has(.widget_sow-headline) .sow-headline-container,
  #content .home-map .panel-grid:has(.widget_sow-headline) .panel-grid-cell {
    box-sizing: border-box;
    max-width:  100%;
    overflow-wrap: break-word;
  }

  #content .home-map .widget_sow-headline .sow-sub-headline {
    max-width: none;   /* full card width is fine once stacked */
  }
}

/* ── Fallback for engines without :has() ──────────────────────────────────
   Older Safari/Firefox ignore every :has() rule above, which would leave the
   stat row at SiteOrigin's ragged default. This restores equal heights using
   only the always-present .widget_sow-headline hook. Cards still line up;
   only the equal-width flex distribution is lost, which degrades to
   SiteOrigin's own 33.3333% widths rather than to something broken.         */
@supports not selector(:has(*)) {
  #content .home-map .widget_sow-headline,
  #content .home-map .so-widget-sow-headline {
    height: 100%;
  }

  #content .home-map .sow-headline-container {
    height: 100%;
  }
}