/* ==========================================================================
   Crown Office Supplies — Summa Net 30 alternative  (template-summa-alternative.php)

   Loads AFTER cos-home.css, which owns the tokens and the shared primitives
   (.cos-btn, .cos-h1/h2, .cos-eyebrow, .cos-lead, .cos-bleed, .cos-wrap,
   .cos-section, .cos-section-head and the .cos-faq__* accordion). Nothing in
   here re-declares a token — that is how two pages drift apart.

   Brand: #FED700 yellow · #2E094E deep violet.

   COMPONENT NOTE — the site already spends two treatments on ordered lists:
   a connected numbered rail (Net 30 Terms) and circular numerals on navy
   (homepage). Section 3 here is a THIRD tell: question cards with the numeral
   set as a quiet index in the top corner, no rail and no circle. Same visual
   language, different signature.
   ========================================================================== */

/* Electro's #primary.content-area is a Bootstrap 75% column because the default
   page layout expects a sidebar. Without this the page renders ~870px inside a
   1200px container. Same trap as every other template in this theme. */
body.cos-sum-page .content-area {
	flex: 0 0 100%;
	max-width: 100%;
}

/* Contains the .cos-bleed 100vmax overhang so it never makes a scrollbar. */
body.cos-sum-page { overflow-x: hidden; }

@supports (overflow-x: clip) {
	body.cos-sum-page { overflow-x: clip; }
}

body.cos-sum-page .breadcrumb { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   1 — Hero

   The query behind this page is a question, so the first screen answers it.
   Left: the claim. Right: a status panel that states the situation in three
   rows — what has closed, what is open, on what terms.
   -------------------------------------------------------------------------- */
.cos-sum-hero {
	background:
		radial-gradient(70% 130% at 8% 0%, #fbf7ff 0%, rgba(251, 247, 255, 0) 62%),
		var(--cos-surface-2);
}

.cos-sum-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

/* 40ch, not the 34ch the Net 30 Terms hero uses. That page's right-hand column
   is a four-item fact list and stands tall enough to balance a narrow column;
   the status panel here is three rows, so 34ch left a visible hole between the
   copy and the card. */
.cos-sum-hero__copy { max-width: 40ch; }

.cos-page .cos-sum-hero .cos-h1 {
	font-size: clamp(2.4rem, 5.4vw, 4rem);
	line-height: 1.04;
}

/* The full stop gets the brand yellow — the one piece of decoration in the
   hero, and it costs no extra words. Drawn here, never typed in the markup. */
.cos-page .cos-sum-hero .cos-h1::after {
	content: "";
	display: inline-block;
	width: .28em;
	height: .28em;
	margin-left: .06em;
	border-radius: 50%;
	background: var(--cos-yellow);
	vertical-align: baseline;
}

.cos-sum-hero .cos-lead { margin-bottom: 28px; }

.cos-sum-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}


/* --------------------------------------------------------------------------
   Status panel

   Deliberately not a "vs" table. It states one fact about Summa and two about
   Crown; a two-column comparison would invite rows we cannot substantiate.
   -------------------------------------------------------------------------- */
.cos-sum-status {
	background: var(--cos-surface);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-r-lg);
	box-shadow: var(--cos-shadow);
	padding: clamp(20px, 2.4vw, 30px);
}

.cos-sum-status__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 18px;
	padding-block: 14px;
	border-bottom: 1px solid var(--cos-line);
}

.cos-sum-status__row:first-child { padding-top: 0; }

.cos-sum-status__k {
	font-family: var(--cos-font-display);
	font-weight: 600;
	color: var(--cos-ink);
	font-size: 1rem;
}

.cos-sum-status__v {
	color: var(--cos-text);
	font-size: .95rem;
	text-align: right;
	flex: 1 1 12ch;
}

/* The closed row is the one fact the page turns on — mark it, quietly. */
.cos-sum-status__row--off .cos-sum-status__v {
	color: var(--cos-muted);
	text-decoration: line-through;
	text-decoration-color: var(--cos-line-strong);
	text-decoration-thickness: 1px;
}

.cos-sum-status__note {
	margin: 16px 0 0;
	font-size: .8rem;
	line-height: 1.5;
	color: var(--cos-muted);
}


/* --------------------------------------------------------------------------
   2 — What happened
   -------------------------------------------------------------------------- */
.cos-sum-what { background: var(--cos-surface); }

/* Editorial two-column: heading holds the left rail, prose runs down the right.
   A single 68ch text block under a full-width heading left the entire right
   half of the section empty, which read as unfinished rather than airy. */
@media (min-width: 992px) {
	.cos-sum-what .cos-wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: clamp(32px, 5vw, 80px);
		align-items: start;
	}

	.cos-sum-what .cos-section-head { margin-bottom: 0; }
}

.cos-sum-what__body {
	max-width: 62ch;
	color: var(--cos-text);
}

.cos-sum-what__body p { margin: 0 0 1em; }
.cos-sum-what__body p:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   3 — Five questions

   Question cards. The numeral is an index in the corner, not a badge — the
   two badge treatments are already spent elsewhere on the site.
   -------------------------------------------------------------------------- */
.cos-sum-checks { background: var(--cos-surface-2); }

.cos-sum-checks__grid {
	list-style: none;
	margin: clamp(28px, 3.4vw, 44px) 0 0;
	padding: 0;
	display: grid;
	gap: clamp(14px, 1.8vw, 22px);
	/* Explicit column counts, NOT auto-fit. There are exactly five cards, and
	   auto-fit packed four onto the first row at desktop widths and orphaned
	   the fifth on its own. Three columns gives a deliberate 3 + 2. */
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 620px) {
	.cos-sum-checks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
	.cos-sum-checks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cos-sum-check {
	position: relative;
	background: var(--cos-surface);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-r);
	padding: clamp(20px, 2.2vw, 28px);
	transition: border-color .3s var(--cos-ease), box-shadow .3s var(--cos-ease), transform .3s var(--cos-ease);
}

.cos-sum-check:hover {
	border-color: var(--cos-line-strong);
	box-shadow: var(--cos-shadow);
	transform: translateY(-2px);
}

.cos-sum-check__n {
	position: absolute;
	top: clamp(16px, 1.8vw, 22px);
	right: clamp(18px, 2vw, 24px);
	font-family: var(--cos-font-display);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--cos-line-strong);
}

.cos-sum-check__q {
	margin: 0 0 .5em;
	padding-right: 3ch;
	font-family: var(--cos-font-display);
	font-size: 1.06rem;
	font-weight: 650;
	line-height: 1.3;
	color: var(--cos-ink);
}

.cos-sum-check__a {
	margin: 0;
	font-size: .93rem;
	line-height: 1.62;
	color: var(--cos-text);
}


/* --------------------------------------------------------------------------
   4 — How a Crown account works

   Answers the five questions in the same order. Definition rows, so the
   answer to each is scannable without reading the prose.
   -------------------------------------------------------------------------- */
.cos-sum-crown { background: var(--cos-surface); }

.cos-sum-crown__list {
	margin: clamp(24px, 3vw, 38px) 0 0;
	padding: 0;
	max-width: 82ch;
}

.cos-sum-crown__row {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: 6px clamp(24px, 3vw, 48px);
	padding-block: clamp(16px, 1.8vw, 22px);
	border-top: 1px solid var(--cos-line);
}

.cos-sum-crown__row:last-child { border-bottom: 1px solid var(--cos-line); }

.cos-sum-crown__row dt {
	font-family: var(--cos-font-display);
	font-weight: 650;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--cos-ink);
}

.cos-sum-crown__row dd {
	margin: 0;
	font-size: .95rem;
	line-height: 1.65;
	color: var(--cos-text);
}

.cos-sum-crown__more {
	margin: clamp(24px, 2.6vw, 32px) 0 0;
	font-size: .95rem;
	color: var(--cos-muted);
}


/* --------------------------------------------------------------------------
   5 — FAQ  (accordion itself comes from cos-home.css)
   -------------------------------------------------------------------------- */
.cos-sum-faq { background: var(--cos-surface-2); }

/* cos-home.css centres this list because the homepage FAQ has a centred
   heading. Here the section head is left-aligned like every other section on
   the page, so a centred list reads as a misalignment. Same override the Net 30
   Terms page needs, for the same reason. */
.cos-sum-faq .cos-faq__list {
	max-width: 860px;
	margin-inline: 0;
}


/* --------------------------------------------------------------------------
   6 — Close
   -------------------------------------------------------------------------- */
.cos-sum-cta {
	background:
		radial-gradient(80% 160% at 12% 0%, var(--cos-navy-700) 0%, rgba(77, 28, 125, 0) 60%),
		var(--cos-navy);
	color: #fff;
}

.cos-sum-cta__inner {
	max-width: 62ch;
	text-align: center;
}

.cos-page .cos-sum-cta .cos-h2 { color: #fff; }

.cos-sum-cta .cos-lead {
	color: rgba(255, 255, 255, .8);
	margin-bottom: 28px;
}

.cos-sum-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	.cos-sum-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.cos-sum-hero__copy { max-width: none; }
}

@media (max-width: 700px) {
	.cos-sum-crown__row { grid-template-columns: minmax(0, 1fr); }
	.cos-sum-crown__row dt { margin-bottom: 2px; }

	.cos-sum-status__row {
		flex-direction: column;
		align-items: flex-start;
	}

	/* `flex: 1 1 12ch` sets the basis on the MAIN axis — once this row turns
	   into a column that basis becomes a 12ch-tall minimum, which opened a
	   large empty gap under every value. Reset it here; the row only needs
	   the flex sizing while it is horizontal. */
	.cos-sum-status__v {
		flex: 0 0 auto;
		text-align: left;
	}
}

/* Respect the OS setting — cos-home.js adds .cos-reveal transitions. */
@media (prefers-reduced-motion: reduce) {
	.cos-sum-check { transition: none; }
	.cos-sum-check:hover { transform: none; }
}