/**
 * ADVERTISE — Phase 7C
 *
 * The approved `design-reference/Advertise.dc.html` layout. Loaded only on the
 * Advertise page template, replacing article.css — see bsn_advertise_stylesheet().
 *
 * -----------------------------------------------------------------------------
 * EVERY VALUE BELOW WAS EXTRACTED FROM THE RENDERED REFERENCE, NOT APPROXIMATED
 *
 * Phase 7A's lesson: reaching for the nearest token in the shared 24/36/48/64
 * scale lost 2–8px in twenty places and produced a visibly compressed page. The
 * reference's own numbers are used here, and the ones the global scale does not
 * contain live in scoped custom properties on `.advertise`.
 *
 *   Hero        #14120E · 840px · 64/32/56 · eyebrow 11px +18
 *               · h1 54px/1.05/-.015em +18 · standfirst 18px/1.55 on 620px +26
 *               · CTA 14/32 · 11px/.16em
 *   Why         1280px · 52/32 · label 14px/.24em under a 3px rule, +14 / +30
 *               · 4 columns · gap 36 · 1px left rule · padding-left 22
 *               · ordinal 26px serif italic +10 · label 12px/.14em +8
 *               · text 14.5px/1.55
 *   Options     #F4F0E6 · 1080px · 52/32 · label +26 · rows 260px + 1fr · gap 40
 *               · padding 22/0 · 1px #DDD5C2 between · term 24px serif
 *               · text 15.5px/1.6
 *   Principles  900px · 56/32 · eyebrow 11px +16 · statement 26px/1.35/500 italic
 *               on 680px +22 · chips 10px/.16em · 7/14 · gap 14 · note 13px +22
 *   CTA         1080px · 0/32/64 · 1.4fr + 1fr · gap 32 · panel 40
 *               · h2 32px/1.1 +12 · copy 15px/1.6 +22 · action 13/28
 *               · kit label 10.5px/.2em +12 · h3 24px/1.15 +12 · link 11px/.12em
 * -----------------------------------------------------------------------------
 *
 * COLOUR DEVIATIONS, ALL FOR CONTRAST, ALL MEASURED
 *
 *   Brass on the DARK hero stays #A9873E — measured 5.60:1, which passes.
 *   Brass on the CREAM ground becomes --bsn-brass-text (#83652B): the design's
 *   #A9873E measures 3.16:1 there and fails at body sizes. The 26px ordinal keeps
 *   the design brass, because 26px qualifies as large text at a 3:1 threshold.
 *   The SPONSORED chip's #8A6D2F measures 4.10:1 on #F5EFDF and fails at 10px;
 *   --bsn-brass-text measures 4.74:1 on the same ground.
 *
 * The chip grounds reuse --bsn-sponsored-bg / --bsn-sponsored-rule, the same
 * tokens a sponsored article card uses — the label on this page and the treatment
 * a reader meets in a listing are deliberately the same thing.
 *
 * NO @layer. WordPress prints theme.json's `global-styles` unlayered and it would
 * win. This sheet is enqueued at priority 20, after it.
 *
 * SCOPED: every selector begins with an `advertise-` class.
 */

.advertise {
	--ad-space-section: 3.25rem;  /* 52px — why and options section padding   */
	--ad-space-hero: 4rem;        /* 64px — hero top, CTA section bottom      */
	--ad-space-hero-end: 3.5rem;  /* 56px — hero bottom, principles padding   */
	--ad-space-grid: 2.25rem;     /* 36px — why column gap                    */
	--ad-space-rule: 1.375rem;    /* 22px — why column padding, option rows   */
	--ad-space-label: 1.875rem;   /* 30px — below the why section label       */
	--ad-space-row: 2.5rem;       /* 40px — option row gap, panel padding     */
	--ad-space-cols: 2rem;        /* 32px — CTA column gap                    */
	--ad-space-chip: 0.875rem;    /* 14px — chip gap                          */
}

/* =========================================================================
   SHARED — SECTION LABEL
   ====================================================================== */

/*
 * The 3px rule above a tracked-out label, twice on this page. The rule belongs to
 * the wrapper rather than the heading so that the heading's own box stays the size
 * of its text and the 14px gap is honest padding, not a margin that collapses.
 */
.advertise-section-label {
	border-block-start: 3px solid var(--bsn-ink);
	padding-block-start: 0.875rem; /* 14px */
	margin-block-end: var(--ad-space-label);
}

.advertise-section-label__text {
	margin: 0;
	font-family: var(--bsn-font-sans);
	font-size: 0.875rem; /* 14px */
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.24em;

	/*
	 * 1.215 is 17px on a 14px face, which is what the reference renders. Its own
	 * line-height is `normal` — but `normal` is not a shared value: the reference
	 * pulls Libre Franklin from Google Fonts while this theme self-hosts a subset,
	 * and the two report different default line boxes. Every sans label on this
	 * page therefore states its line-height rather than inheriting the theme's
	 * body leading, which measured 4px too tall on an 11px eyebrow and pushed
	 * everything under it down. Phase 7B learned the same thing on form controls.
	 */
	line-height: 1.215;
	text-transform: uppercase;
	color: var(--bsn-ink);
}

/* =========================================================================
   SHARED — LINKS AND BUTTONS
   ====================================================================== */

.advertise-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;

	/* 44px, WCAG 2.2 target size. The reference's is 42px. */
	min-block-size: 2.75rem;

	padding: 0.875rem 2rem; /* 14 / 32 */
	border: 0;
	background: var(--bsn-brass);
	color: var(--bsn-ink);
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.16em;
	line-height: 1.27; /* 14px on an 11px face — see the section label above. */
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--bsn-duration) var(--bsn-ease);
}

.advertise-button:hover,
.advertise-button:focus-visible {
	background: var(--bsn-brass-light);
	color: var(--bsn-ink);
}

.advertise-button__arrow,
.advertise-link__arrow { transition: transform var(--bsn-duration) var(--bsn-ease); }

.advertise-button:hover .advertise-button__arrow,
.advertise-link:hover .advertise-link__arrow { transform: translateX(2px); }

.advertise-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-block-size: 2.75rem; /* 44px target over 14px of text */
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-bold);
	letter-spacing: 0.12em;
	line-height: 1.27;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bsn-brass-text);
}

.advertise-link:hover,
.advertise-link:focus-visible { color: var(--bsn-ink); }

/* =========================================================================
   HERO
   ====================================================================== */

.advertise-hero {
	background: var(--bsn-dark);
	color: var(--bsn-on-dark);
	text-align: center;
}

.advertise-hero__inner {
	max-inline-size: 840px;
	padding-block: var(--ad-space-hero) var(--ad-space-hero-end); /* 64 / 56 */
	min-inline-size: 0;
}

.advertise-hero__eyebrow {
	margin: 0 0 1.125rem; /* 18px */
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.26em;
	line-height: 1.27;
	text-transform: uppercase;

	/* 5.60:1 on #14120E — the design's brass, unchanged, because it passes here. */
	color: var(--bsn-brass);
}

.advertise-hero__title {
	margin: 0 0 1.125rem; /* 18px */
	font-family: var(--bsn-font-serif);
	/*
	 * 54px is reached by ~900px, which is where the 840px measure itself stops
	 * growing — so the headline is the reference's size at every width the
	 * reference actually designs for. A 3.4vw + 1rem ramp looked reasonable and
	 * measured 4.7px short at 1024, which is a width the reference composes.
	 */
	font-size: clamp(2.125rem, 6vw, 3.375rem); /* 34 → 54px */
	font-weight: var(--bsn-weight-bold);
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: var(--bsn-on-dark);
}

.advertise-hero__standfirst {
	margin: 0 auto 1.625rem; /* 26px */
	max-inline-size: 620px;
	font-family: var(--bsn-font-serif);
	font-size: 1.125rem; /* 18px */
	line-height: 1.55;
	color: var(--bsn-on-dark-muted);
}

/* =========================================================================
   WHY BLACK STAR NEWS
   ====================================================================== */

.advertise-why {
	padding-block: var(--ad-space-section); /* 52px */
}

.advertise-why__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ad-space-grid); /* 36px */
	margin: 0;
	padding: 0;
	list-style: none;
}

.advertise-reason {
	border-inline-start: var(--bsn-hairline);
	padding-inline-start: var(--ad-space-rule); /* 22px */
	min-inline-size: 0;
}

.advertise-reason__ordinal {
	margin: 0 0 0.625rem; /* 10px */
	font-family: var(--bsn-font-serif);
	font-size: 1.625rem; /* 26px */
	font-style: italic;
	font-weight: var(--bsn-weight-bold);
	line-height: 1;

	/* 3.16:1 — passing, because 26px is large text (WCAG 1.4.3). */
	color: var(--bsn-brass);
}

.advertise-reason__label {
	margin: 0 0 0.5rem; /* 8px */
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-xs); /* 12px */
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--bsn-ink);
}

.advertise-reason__text {
	margin: 0;
	font-family: var(--bsn-font-serif);
	font-size: 0.90625rem; /* 14.5px */
	line-height: 1.55;
	color: var(--bsn-ink-soft);
}

/* =========================================================================
   ADVERTISING OPTIONS
   ====================================================================== */

.advertise-options {
	background: var(--bsn-band);
	border-block: var(--bsn-hairline);
}

.advertise-options__inner {
	padding-block: var(--ad-space-section); /* 52px */
}

/* The label sits 26px above the first row here, not the 30px of the why grid. */
.advertise-options .advertise-section-label { margin-block-end: 1.625rem; }

.advertise-options__list {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.advertise-option {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--ad-space-row); /* 40px */
	padding-block: var(--ad-space-rule); /* 22px */
	border-block-end: 1px solid var(--bsn-rule-soft);
}

/* The last row's rule would double with the band's own bottom border. */
.advertise-option:last-child { border-block-end: 0; }

.advertise-option__term {
	margin: 0;
	font-family: var(--bsn-font-serif);
	font-size: 1.5rem; /* 24px */
	font-weight: var(--bsn-weight-bold);

	/*
	 * 24.8px on a 24px face — tight, and deliberately so: it is what the reference
	 * renders, and it is what sets the row heights when an option name wraps to two
	 * or three lines. Relaxed below 768px, where the reference has no design at all
	 * and a wrapped serif at this leading reads cramped.
	 */
	line-height: 1.0333;

	color: var(--bsn-ink);
}

.advertise-option__text {
	margin: 0;
	font-family: var(--bsn-font-serif);
	font-size: 0.96875rem; /* 15.5px */
	line-height: 1.6;
	color: var(--bsn-ink-soft);
}

/* =========================================================================
   EDITOR PROSE — not in the reference, renders only when written
   ====================================================================== */

.advertise-body {
	padding-block: var(--ad-space-section);
	border-block-end: var(--bsn-hairline);
}

.advertise-body__prose {
	max-inline-size: var(--bsn-width-text);
	margin-inline: auto;
	font-family: var(--bsn-font-serif);
	font-size: var(--bsn-text-body);
	line-height: 1.65;
	color: var(--bsn-ink-soft);
}

.advertise-body__prose > * + * { margin-block-start: 1.25rem; }

/* =========================================================================
   EDITORIAL INDEPENDENCE
   ====================================================================== */

.advertise-principles {
	text-align: center;
}

.advertise-principles__inner {
	max-inline-size: 900px;
	padding-block: var(--ad-space-hero-end); /* 56px */
	min-inline-size: 0;
}

.advertise-principles__eyebrow {
	margin: 0 0 1rem; /* 16px */
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.26em;
	line-height: 1.27;
	text-transform: uppercase;

	/* #A9873E is 3.16:1 on the page ground and fails at 11px. */
	color: var(--bsn-brass-text);
}

.advertise-principles__star {
	margin-inline-end: 0.5em;
	color: var(--bsn-brass-text);
}

.advertise-principles__statement {
	margin: 0 auto 1.375rem; /* 22px */
	max-inline-size: 680px;
	font-family: var(--bsn-font-serif);
	font-size: clamp(1.375rem, 1.4vw + 1rem, 1.625rem); /* 22 → 26px */
	font-style: italic;
	font-weight: var(--bsn-weight-medium);
	line-height: 1.35;
	text-wrap: pretty;
	color: var(--bsn-ink);
}

.advertise-principles__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ad-space-chip); /* 14px */
	margin: 0;
	padding: 0;
	list-style: none;
}

.advertise-chip {
	padding: 0.4375rem 0.875rem; /* 7 / 14 */
	border: 1px solid var(--bsn-ink);
	font-family: var(--bsn-font-sans);
	font-size: 0.625rem; /* 10px */
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.16em;
	line-height: 1.21; /* 28px tall with its padding and border, as the reference. */
	text-transform: uppercase;
	color: var(--bsn-ink);
}

.advertise-chip--partner {
	border-color: var(--bsn-rule-strong);
	color: var(--bsn-ink-muted);
}

/*
 * The same ground and rule a sponsored article card uses. The label a reader meets
 * here and the treatment they meet in a listing are the same treatment on purpose.
 */
.advertise-chip--sponsored {
	background: var(--bsn-sponsored-bg);
	border-color: var(--bsn-sponsored-rule);
	color: var(--bsn-brass-text);
}

.advertise-principles__note {
	margin: 1.375rem 0 0; /* 22px */
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-sm); /* 13px */
	line-height: 1.6;
	color: var(--bsn-ink-muted);
}

.advertise-principles__link {
	font-weight: var(--bsn-weight-semibold);
	color: var(--bsn-ink-muted);
	text-decoration: none;
	border-block-end: 1px solid var(--bsn-rule-strong);
}

.advertise-principles__link:hover,
.advertise-principles__link:focus-visible {
	color: var(--bsn-ink);
	border-block-end-color: currentColor;
}

/* =========================================================================
   TALK TO US + MEDIA KIT
   ====================================================================== */

/*
 * No top padding: this section butts against the independence section, whose 56px
 * of bottom padding is the gap. Reproduced from the reference rather than split
 * between the two, so removing either section cannot leave a double gap.
 */
.advertise-cta__inner {
	padding-block: 0 var(--ad-space-hero); /* 0 / 64 */
}

.advertise-cta__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--ad-space-cols); /* 32px */
	align-items: stretch;
}

/* One side configured, one column — not a half-width panel beside a gap. */
.advertise-cta__grid--single { grid-template-columns: minmax(0, 1fr); }

.advertise-panel,
.advertise-kit {
	padding: var(--ad-space-row); /* 40px */
	min-inline-size: 0;
}

.advertise-panel {
	background: var(--bsn-dark);
	color: var(--bsn-on-dark);
}

.advertise-panel__heading {
	margin: 0 0 0.75rem; /* 12px */
	font-family: var(--bsn-font-serif);
	font-size: clamp(1.625rem, 1.6vw + 1rem, 2rem); /* 26 → 32px */
	font-weight: var(--bsn-weight-bold);
	line-height: 1.1;
	text-wrap: balance;
	color: var(--bsn-on-dark);
}

.advertise-panel__text {
	margin: 0 0 1.375rem; /* 22px */
	font-family: var(--bsn-font-serif);
	font-size: var(--bsn-text-base); /* 15px */
	line-height: 1.6;
	color: var(--bsn-on-dark-muted);
}

/* The panel's action is 13/28 in the reference, not the hero's 14/32. */
.advertise-panel .advertise-button { padding: 0.8125rem 1.75rem; }

.advertise-kit {
	background: #fff;
	border: var(--bsn-hairline);
}

.advertise-kit__label {
	margin: 0 0 0.75rem; /* 12px */
	font-family: var(--bsn-font-sans);
	font-size: 0.65625rem; /* 10.5px */
	font-weight: var(--bsn-weight-black);
	letter-spacing: 0.2em;
	line-height: 1.27;
	text-transform: uppercase;
	color: var(--bsn-brass-text);
}

.advertise-kit__heading {
	margin: 0 0 0.75rem; /* 12px */
	font-family: var(--bsn-font-serif);
	font-size: 1.5rem; /* 24px */
	font-weight: var(--bsn-weight-bold);
	line-height: 1.15;
	text-wrap: pretty;
	color: var(--bsn-ink);
}

/* =========================================================================
   RESPONSIVE
   ====================================================================== */

/*
 * THE REFERENCE HAS NO MOBILE DESIGN. Its document stays 638px wide from 390px
 * down, so it scrolls sideways on every phone, keeping a 4-column reason grid and
 * a 260px option column at 320px. There is therefore nothing to match below
 * 768px, and the composition here is this build's own — reported as an intentional
 * difference, not reproduced as overflow.
 */

@media (max-width: 64rem) { /* 1024px */
	.advertise-option { grid-template-columns: 220px minmax(0, 1fr); gap: 2rem; }
}

@media (max-width: 48rem) { /* 768px */
	.advertise-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Term above description, the rule still separating the rows. */
	.advertise-option {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.5rem;
	}

	.advertise-option__term { line-height: 1.15; }

	.advertise-cta__grid { grid-template-columns: minmax(0, 1fr); }

	.advertise-panel,
	.advertise-kit { padding: 2rem; }
}

@media (max-width: 30rem) { /* 480px */
	.advertise-why__grid { grid-template-columns: minmax(0, 1fr); }

	.advertise-hero__inner { padding-block: 3rem 2.5rem; }

	/*
	 * A full-width action at this size: the reader's thumb, not the design's
	 * inline-block, decides how wide a button should be on a phone.
	 */
	.advertise-button { inline-size: 100%; }
}