/**
 * css/components/cardbox.css — Website 2.0 shared component library (#122)
 *
 * Bordered-box law (docs/Common Good website 2.0/guidelines/layout-rhythm.md):
 * 1px border, equal 44px inset all sides; the first row drops its
 * border-top and the first column drops its border-left so the box edge
 * never doubles; re-derived at each reflow (3-up/4-up -> 1-2 col).
 *
 * Two placements:
 *   .cg-cardbox                    — frame-aligned (default). Reference:
 *                                     media.html `.cardbox`/`.cardrow`/`.ccard`
 *                                     ("Why Our Media Works" 3-up, "The
 *                                     Acquisition Model" 4-up).
 *   .cg-cardbox--full-bleed        — full-bleed variant: border + dividers
 *                                     run to the screen edge while content
 *                                     stays frame-aligned, per the
 *                                     bordered-box law's full-bleed clause
 *                                     (`margin-inline:calc(-1*var(--pad-x))`
 *                                     + re-pad `calc(var(--pad-x) + 44px)`).
 *                                     Reference: media.html `.pgrid`/`.pcard`
 *                                     ("The Category Problem" dark 2x2).
 *
 * Rule-mark (41x1px line above a card title) is a separate opt-in element
 * (`.cg-rule`) — present on Category-Problem / Why-Our-Media cards,
 * ABSENT on Acquisition-Model cards (see hover-cards.css).
 *
 * Colour variants: --onrust (cream ink on rust bg), --oncream (ink on
 * cream bg), --onink (cream ink on dark bg, full-bleed use).
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-rule {
	display: block;
	width: 41px;
	height: var( --hairline );
	margin: 0 0 22px;
	background: var( --accent );
	border: 0;
}

/* --- frame-aligned card box --------------------------------------- */

.cg-cardbox {
	margin-top: 84px;
	border: var( --hairline ) solid;
}

.cg-cardrow {
	display: grid;
}

.cg-cardrow--two {
	grid-template-columns: repeat( 2, 1fr );
}

.cg-cardrow--three {
	grid-template-columns: repeat( 3, 1fr );
}

.cg-cardrow--four {
	grid-template-columns: repeat( 4, 1fr );
}

.cg-card {
	padding: var( --box-pad );
	border-left: var( --hairline ) solid;
	transition: background-color var( --fade-out ) var( --fade-ease );
}

.cg-card:first-child {
	border-left: 0;
}

.cg-card__label {
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.cg-card__text {
	margin: 22px 0 0;
	font-family: var( --font-body );
	font-size: 14px;
	line-height: 1.62;
}

/* Optional per-card "Explore →" link (Home How We Help journey cards,
   #65) — omitted by every other current caller. */
.cg-card__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --accent );
	text-decoration: none;
}

/* onrust — 3-up, cream ink (Why Our Media Works). */
.cg-cardbox--onrust {
	border-color: var( --cg-cream );
}

.cg-cardbox--onrust .cg-card {
	border-color: var( --cg-cream );
}

.cg-cardbox--onrust .cg-card__label,
.cg-cardbox--onrust .cg-h3,
.cg-cardbox--onrust .cg-card__text {
	color: var( --cg-cream );
}

.cg-cardbox--onrust .cg-rule {
	background: var( --cg-cream );
}

.cg-cardbox--onrust .cg-card:hover {
	background-color: var( --box-hover-rust );
}

/* oncream — 4-up (The Acquisition Model), ink on cream. */
.cg-cardbox--oncream {
	border-color: var( --cg-ink );
}

.cg-cardbox--oncream .cg-card {
	/* #204 (designer 2026-07-22): inner column dividers must match the outer
	   box border. The reference used the lighter --rule here; the designer
	   wants them the same weight/colour as the --cg-ink outer border. */
	border-color: var( --cg-ink );
}

.cg-cardbox--oncream .cg-card__label {
	color: var( --accent );
}

.cg-cardbox--oncream .cg-h3 {
	color: var( --cg-ink );
}

/*
 * --cg-ink-70, NOT --cg-muted (#451). This is the third component to make
 * the same move: #402 (shipped in #420) darkened the accordion detail copy
 * in accordion.css and tabs-accordion.css for exactly this reason, and left
 * this file alone because the band it was reported against used an
 * accordion. The Media page's "One connected plan from impression to shelf."
 * band is a cardbox, so its card copy stayed at --cg-muted (#6B6860) while
 * the `.cg-body--ink70` paragraph beside it in the same split header sat at
 * #3A3A36 — a visible mismatch between two runs of body copy in one band.
 *
 * Deliberately changed on the VARIANT, not scoped to /media/: every other
 * --oncream consumer (blocks/cg/hover-cards.php, blocks/cg/cardbox.php,
 * blocks/awards_content/awards.php, blocks/download_content/
 * evolution_blocks.php, blocks/industry_content/achievements.php) has the
 * same cream band and the same neighbouring --ink70 body copy, so a
 * page-scoped hook would have re-created the inconsistency it is here to
 * remove.
 */
.cg-cardbox--oncream .cg-card__text {
	color: var( --cg-ink-70 );
}

.cg-cardbox--oncream .cg-card:hover {
	background-color: var( --box-hover-cream );
}

/* onink_framed — frame-aligned dark box (Approach Method, #136). Same
   box model as onrust/oncream (border on the content frame, no full-
   bleed offset); cream h3/rust label/grey body on the ink band.
   Reference: approach.html `.cardbox.ondark` (NOT `.pgrid`/`.pcard`). */
.cg-cardbox--onink-framed {
	border-color: var( --rule-on-dark );
}

.cg-cardbox--onink-framed .cg-card {
	border-color: var( --rule-on-dark );
}

.cg-cardbox--onink-framed .cg-card__label {
	color: var( --accent );
}

.cg-cardbox--onink-framed .cg-h3 {
	color: var( --cg-cream );
}

.cg-cardbox--onink-framed .cg-card__text {
	color: var( --cg-grey );
}

.cg-cardbox--onink-framed .cg-card:hover {
	background-color: var( --box-hover-ink );
}

@media ( max-width: 1024px ) {
	.cg-cardrow--four {
		grid-template-columns: repeat( 2, 1fr );
	}

	.cg-cardrow--three {
		grid-template-columns: 1fr;
	}

	.cg-cardrow--three .cg-card {
		border-left: 0;
		border-top: var( --hairline ) solid;
	}

	.cg-cardrow--three .cg-card:first-child {
		border-top: 0;
	}

	.cg-cardrow--four .cg-card {
		border-left: var( --hairline ) solid;
		border-top: var( --hairline ) solid;
	}

	.cg-cardrow--four .cg-card:nth-child( odd ) {
		border-left: 0;
	}

	.cg-cardrow--four .cg-card:nth-child( -n + 2 ) {
		border-top: 0;
	}
}

@media ( max-width: 680px ) {
	.cg-cardrow--four {
		grid-template-columns: 1fr;
	}

	.cg-cardrow--four .cg-card {
		border-left: 0;
		border-top: var( --hairline ) solid;
	}

	.cg-cardrow--four .cg-card:first-child {
		border-top: 0;
	}
}

/* --- optional intro split BELOW the card grid (Approach Method's "How
   we do it", #136) — same band, no divider; reference: approach.html
   `.intro{margin-top:96px}`. ------------------------------------------ */

.cg-cardbox__intro {
	margin-top: 96px;
}

/* When Method has no top header, the partial prints the intro FIRST in
   the DOM (so its heading precedes the cards' one-level-deeper card
   titles, per the semantic-HTML no-skipped-levels contract) and flips
   the visual order back to cards-then-intro with flex `order` — CSS
   order changes paint order only, not DOM/reading order, so this is
   accessible: AT still encounters the intro's heading first. */
.cg-cardbox--intro-first {
	display: flex;
	flex-direction: column;
}

.cg-cardbox--intro-first .cg-cardbox__intro {
	order: 2;
}

/* No header precedes the box when intro-first (Method has none) — the
   card grid is the band's first visible element, so it doesn't need the
   84px gap `.cg-cardbox` normally reserves below a header. */
.cg-cardbox--intro-first > .cg-cardbox {
	order: 1;
	margin-top: 0;
}

@media ( max-width: 1024px ) {
	.cg-cardbox__intro {
		margin-top: 64px;
	}
}

@media ( max-width: 680px ) {
	.cg-cardbox__intro {
		margin-top: 48px;
	}
}

/* --- full-bleed card box (onink) ------------------------------------ */

.cg-cardbox--full-bleed {
	margin-top: 96px; /* media.html `.pgrid` sits 96px below its header (base is 84px) */
	margin-inline: calc( -1 * var( --pad-x ) );
	border-color: var( --rule-on-dark );
}

.cg-cardbox--full-bleed .cg-card {
	padding: var( --box-pad );
	border-top: var( --hairline ) solid var( --rule-on-dark );
	border-left: var( --hairline ) solid var( --rule-on-dark );
}

.cg-cardbox--full-bleed .cg-h3 {
	color: var( --cg-cream );
}

.cg-cardbox--full-bleed .cg-card__label,
.cg-cardbox--full-bleed .cg-card__text {
	color: var( --cg-grey );
}

.cg-cardbox--full-bleed .cg-card:hover {
	background-color: var( --box-hover-ink );
}

/* first row drops border-top; first column drops border-left and holds
   the frame with pad-x + 44px (odd cells), last column pads out
   symmetrically (even cells).

   SCOPED TO `min-width: 681px` (#481). These three rules describe a TWO-
   COLUMN grid — `odd` = left column, `even` = right column, `-n + 2` = the
   first ROW. Below 681px the grid is `grid-template-columns: 1fr` and none
   of those three ideas exist any more, but the rules kept applying: a media
   query adds no specificity, so at (0,4,0) they out-specificity-ed the
   single-column overrides below at (0,3,0). Measured on Dev at 390px:
   cards 1 and 3 held `padding-left: calc( --pad-x + --box-pad )` = 68px
   against cards 2 and 4's 44px, and `nth-child( -n + 2 ){ border-top: 0 }`
   swallowed the divider between cards 1 and 2 as well as card 1's.

   Fenced off at the same 681px boundary where the grid reflows, so the
   single-column block below no longer has to out-specificity anything and
   a fourth property added here can never leak into the phone stack. */
@media ( min-width: 681px ) {
	.cg-cardbox--full-bleed .cg-cardrow--two > .cg-card:nth-child( -n + 2 ) {
		border-top: 0;
	}

	.cg-cardbox--full-bleed .cg-cardrow--two > .cg-card:nth-child( odd ) {
		border-left: 0;
		padding-left: calc( var( --pad-x ) + var( --box-pad ) );
	}

	.cg-cardbox--full-bleed .cg-cardrow--two > .cg-card:nth-child( even ) {
		padding-right: calc( var( --pad-x ) + var( --box-pad ) );
	}
}

@media ( max-width: 1024px ) {
	.cg-cardbox--full-bleed {
		margin-top: 64px; /* media.html `.pgrid` steps down 96→64 at ≤1024 */
	}

	.cg-cardbox--full-bleed .cg-cardrow--two {
		gap: 0 48px;
	}
}

@media ( max-width: 680px ) {
	.cg-cardbox--full-bleed {
		margin-top: 48px; /* media.html `.pgrid` steps down to 48 at ≤680 */
	}

	.cg-cardbox--full-bleed .cg-cardrow--two {
		grid-template-columns: 1fr;
	}

	/* Single column: every card gets the full frame and its own divider.
	   No specificity hack needed — the two-column rules above are fenced
	   behind `min-width: 681px` and simply do not exist here (#481). */
	.cg-cardbox--full-bleed .cg-cardrow--two > .cg-card {
		border-left: 0;
		border-top: var( --hairline ) solid var( --rule-on-dark );
		padding-left: var( --box-pad );
		padding-right: var( --box-pad );
	}

	.cg-cardbox--full-bleed .cg-cardrow--two > .cg-card:first-child {
		border-top: 0;
	}
}

/* --- oncream_bleed variant (Tech & AI, #124 — "The CPG advantage") --
   full-bleed cream box, `--cg-grey` top rule ONLY (no left/right/bottom
   border on the outer box, per the reference's own `.cardbox{border-
   top:1px solid var(--cg-grey)}` — no other side declared), `--cg-
   border` dividers between cards, first/last card re-padded to exactly
   `--pad-x` (not `--pad-x + --box-pad`, per the reference's own
   `.ccard:first-child{padding-left:calc(var(--pad-x) + 0px)}`). Layered
   on top of `.cg-cardbox--oncream` so the generic per-page structural
   audit's "framed card" element-pair check still matches it (see the
   docblock in blocks/cg/cardbox.php). */

/* The reference creates the 84px header->box gap with an explicit spacer
   div (`<div style="height:84px">`), NOT a margin on `.cardbox` itself
   (unlike every other cardbox.php caller, which relies on the base
   `.cg-cardbox{margin-top:84px}` rule) — replicated exactly via
   `.cg-cardbox__bleed-spacer` (blocks/cg/cardbox.php) + zeroing this
   variant's own margin-top, so the box's own computed margin-top matches
   the reference's (0, mechanism-for-mechanism) while the visual gap
   stays identical. */
.cg-cardbox__bleed-spacer {
	height: 84px;
}

.cg-cardbox--oncream.cg-cardbox--bleed-cream {
	margin-top: 0;
	margin-inline: calc( -1 * var( --pad-x ) );
	border-right: 0;
	border-bottom: 0;
	border-left: 0;
	border-top-color: var( --cg-grey );
}

.cg-cardbox--oncream.cg-cardbox--bleed-cream .cg-card {
	border-color: var( --rule );
}

.cg-cardbox--oncream.cg-cardbox--bleed-cream .cg-cardrow--three > .cg-card:first-child {
	padding-left: var( --pad-x );
}

.cg-cardbox--oncream.cg-cardbox--bleed-cream .cg-cardrow--three > .cg-card:last-child {
	padding-right: var( --pad-x );
}

/* Mobile (<=1024px, the same breakpoint the rest of this box's responsive
   rules use). Scoped entirely to `--bleed-cream` (Tech & AI-only, #124) —
   Media/Approach/Services' framed cards (onrust/oncream/onink-framed, no
   `--bleed-cream` class) are untouched.

   THIS WAS `padding: 0`, AND THAT WAS THE BUG (#484). The reference does
   zero it (tech-ai.html `.ccard{padding-left:0 !important;padding-right:0
   !important}` in its own max-width:1024px block) and the reasoning
   recorded here was "the band's own --pad-x gutter is enough inset on its
   own". It isn't, and cannot be: THIS BOX IS FULL-BLEED. `margin-inline:
   calc( -1 * var( --pad-x ) )` above cancels exactly the gutter that
   argument depends on, so zero padding put the card text at x=0 —
   measured on Dev at 390px, card left edge 0px against every other band
   on the page at 24px. The CD rejected it on sight (2026-09-03, #480:
   "the left alignment on this is way too close to the edge of the
   screen").

   `--pad-x` restores the frame the rest of the page uses, and matches
   what the desktop `:first-child`/`:last-child` re-pad above already does
   at the box's outer edges. The full-bleed `margin-inline` stays: the top
   rule and the card dividers are meant to run edge-to-edge, which is the
   whole point of the variant. Still no `!important` (locked rule) — the
   doubled `.cg-cardbox--oncream.cg-cardbox--bleed-cream` selector
   out-specificities both the base `.cg-card{padding:var(--box-pad)}` and
   this variant's own desktop first/last-child rules. */
@media ( max-width: 1024px ) {
	.cg-cardbox--oncream.cg-cardbox--bleed-cream .cg-cardrow--three > .cg-card {
		padding-left: var( --pad-x );
		padding-right: var( --pad-x );
	}

	.cg-cardbox--oncream.cg-cardbox--bleed-cream .cg-cardrow--three > .cg-card:first-child,
	.cg-cardbox--oncream.cg-cardbox--bleed-cream .cg-cardrow--three > .cg-card:last-child {
		padding-left: var( --pad-x );
		padding-right: var( --pad-x );
	}
}