/* ===========================================================================
   Homepage capability cards — the glyph never sits on top of the copy.
   Enqueued from inc/cm-home-counts.php (front page only).

   THE BUG
   cosmick-2026.css positions .cm-cap-glyph absolutely in the card's top-right
   corner (64px box at top 25 / right 24, plus a 16px connector line on its
   left). Only .cm-cap-head reserved room for it (padding-right: 72px). The
   description starts at about the glyph's lower third, so from 1024px up its
   first line ran underneath the box ("your team can", "visibility",
   "management", "kennel"). The approved Replit reference has the identical
   overlap — this is a fix, not a deviation from it.

   THE FIX
   The glyph comes first in the card's markup, so it is taken out of absolute
   positioning and FLOATED right in the same visual spot (negative margins pull
   it back into the card padding exactly where it was). The heading row is a
   flex container (a new block formatting context), so it narrows beside the
   float instead of running under it.

   The description then reserves the glyph's column in one of two ways:
    - from 1024px, where a card is wide, a right margin equal to the glyph's
      footprint (80px: 64 box − 12 pull + 28 gap incl. the connector), so every
      line has the same measure and nothing wraps around the float;
    - below 1024px, where that margin would leave ~170px of text, it CLEARS
      the float and starts beneath the glyph at full width. (Letting the text
      wrap around the float was tried: it leaves one or two short lines and
      then a long one, a visibly ragged block at 768–1023.)

   LOAD ORDER
   cosmick-2026.css and cm-interior.css are printed by header.php AFTER
   wp_head(), so an enqueued sheet always precedes them. Every selector here is
   therefore written one level more specific than the rule it replaces
   (`.cm-cap-grid > .cm-cap > …` = 0,3,0 against 0,1,0 / 0,2,0) instead of
   relying on source order. No !important.
   =========================================================================== */

.cm-cap-grid > .cm-cap > .cm-cap-glyph {
	position: relative;
	top: auto;
	right: auto;
	float: right;
	/* card padding 36px top (34px on .home) / 36px right; glyph sat at 25 / 24. */
	margin: -9px -12px 4px 28px;
	z-index: 0;
}

/* The flex head now narrows beside the float; the old 72px reservation would
   double-count the glyph's width. */
.cm-cap-grid > .cm-cap > .cm-cap-head { padding-right: 0; }

@media (min-width: 1024px) {
	.cm-cap-grid > .cm-cap > .cm-cap-copy { margin-right: 80px; }
}

@media (max-width: 1023px) {
	.cm-cap-grid > .cm-cap > .cm-cap-copy { clear: right; }
}

/* Keep the links row (a flex BFC) from squeezing in beside the glyph on very
   short descriptions: it always starts below it. */
.cm-cap-grid > .cm-cap > .cm-cap-links { clear: right; }

@media (max-width: 767px) {
	/* Mobile card padding is 28px / 22px; the glyph sat at 22 / 18. */
	.cm-cap-grid > .cm-cap > .cm-cap-glyph { margin: -6px -4px 4px 22px; }
	.cm-cap-grid > .cm-cap > .cm-cap-head { padding-right: 0; }
}

/* ---------------------------------------------------------------------------
   Facts strip — the "Thousands / Clients served" fact (2026-10).
   The strip's second slot used to be a short numeral (the portfolio count).
   "Thousands" is a nine-letter word in an 800-weight display face; in the
   two-up phone grid at 28px it needs ~150px and a 360px phone column has
   ~136px. Scale the values with the viewport below 480px so the word always
   fits its column (25.7px at 390, 23.8px at 360). Same 0,3,0 specificity
   reasoning as above.
   ------------------------------------------------------------------------ */
@media (max-width: 479px) {
	.cm-facts .cm-fact .cm-fact-value { font-size: clamp(22px, 6.6vw, 28px); }
}