/*
 * SEO Spy Cameras — section styles.
 *
 * Scoped to `ssc-` classes so nothing here can leak into the parent design
 * system. Contains NO literal palette colors: every value resolves through a
 * theme.json preset var, which is what lets the palette be re-tuned in one
 * file. The only raw rgba() values are the scanline and vignette overlays,
 * which are opacity effects over whatever ground is behind them rather than
 * palette colors.
 *
 * Loaded on the front end AND in the editor (see functions.php).
 */

/* ---------------------------------------------------------------- shell */

.ssc-shell {
	padding-inline: 24px;
}

/* -------------------------------------------------------------- masthead */

.ssc-masthead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 22px 0 20px;
	border-bottom: 1px solid var(--wp--preset--color--surface);
}

.ssc-masthead__mark,
.ssc-masthead__place {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0;
}

.ssc-masthead__mark {
	font-size: 14px;
	color: var(--wp--preset--color--secondary-light);
}

.ssc-masthead__place {
	font-size: 12px;
	color: var(--wp--preset--color--sand);
}

/* ------------------------------------------------------------------ hero */

.ssc-hero {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 56px;
	align-items: start;
	padding: 72px 0 80px;
}

/* The surveillance treatment. A CSS filter on the img rather than a baked-in
   edit, so the source photograph can be swapped without re-processing and
   the effect is one line to tune or remove. */
.ssc-hero__frame {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.ssc-hero__frame img {
	display: block;
	width: 100%;
	height: auto;
	filter: grayscale(1) contrast(1.35) brightness(0.82);
	opacity: 0.92;
}

/* Scanlines and vignette are decoration over the photograph, announced to
   nobody — aria-hidden in the markup, pointer-events off here so they never
   eat a click. */
.ssc-hero__scanlines,
.ssc-hero__vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ssc-hero__scanlines {
	background-image: repeating-linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.38) 0px,
		rgba(0, 0, 0, 0.38) 1px,
		rgba(0, 0, 0, 0) 1px,
		rgba(0, 0, 0, 0) 4px
	);
	animation: ssc-scan-drift 2.4s linear infinite;
}

.ssc-hero__vignette {
	background: linear-gradient(
		200deg,
		rgba(0, 0, 0, 0) 45%,
		rgba(16, 12, 10, 0.75) 100%
	);
}

@keyframes ssc-scan-drift {
	from { background-position: 0 0; }
	to   { background-position: 0 8px; }
}

/* A drifting stripe pattern is exactly the kind of motion that triggers
   vestibular symptoms. Honour the OS setting: keep the scanlines, stop them
   moving. */
@media (prefers-reduced-motion: reduce) {
	.ssc-hero__scanlines {
		animation: none;
	}
}

.ssc-hero__caption {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand);
}

.ssc-hero__rec {
	color: var(--wp--preset--color--secondary-light);
}

.ssc-hero__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary-light);
	margin: 0 0 20px;
}

.ssc-hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	/* Design calls 76px. Clamped so it survives a 320px viewport, where a
	   fixed 76px overflows the line box and clips. */
	font-size: clamp(2.75rem, 7.4vw, 76px);
	line-height: 0.96;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	margin: 0 0 32px;
	color: var(--wp--preset--color--white);
	text-wrap: balance;
}

.ssc-hero__lede {
	font-size: clamp(1.0625rem, 1.6vw, 21px);
	line-height: 1.55;
	max-width: 44ch;
	margin: 0 0 28px;
	color: var(--wp--preset--color--sky);
	text-wrap: pretty;
}

.ssc-hero__note {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	letter-spacing: 0.06em;
	margin: 0;
	color: var(--wp--preset--color--sand);
}

/* --------------------------------------------------------------- sources */

.ssc-sources {
	position: relative;
	border-top: 1px solid var(--wp--preset--color--surface);
	padding: 48px 0 0;
}

.ssc-sources__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: 30px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
	/* Room for the absolutely-positioned toggle, so a long title never runs
	   underneath it. */
	padding-right: 130px;
	color: var(--wp--preset--color--sky);
}

.ssc-sources__meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand);
	margin: 8px 0 40px;
}

/* The toggle is core details/summary, not a scripted button: open state,
   keyboard operation and screen-reader announcement all come free, and the
   list stays in the DOM either way — so it is still in the page source, and
   still indexable, while collapsed. Lifted onto the heading row to match the
   design without giving up the real h2. */
.ssc-sources__details {
	margin: 0;
}

.ssc-sources__details > summary {
	position: absolute;
	top: 48px;
	right: 0;
	list-style: none;
	cursor: pointer;
	padding: 9px 16px;
	border: 1px solid var(--wp--preset--color--pale);
	background: transparent;
	/* Hides the summary text visually while leaving it in the accessibility
	   tree as this control's name — the visible label below is generated
	   content, which is not a reliable accessible name. */
	font-size: 0;
}

.ssc-sources__details > summary::-webkit-details-marker {
	display: none;
}

.ssc-sources__details > summary::marker {
	content: "";
}

.ssc-sources__details > summary::after {
	content: "Expand";
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary-light);
}

.ssc-sources__details[open] > summary::after {
	content: "Collapse";
}

.ssc-sources__details > summary:hover {
	border-color: var(--wp--preset--color--secondary-light);
}

.ssc-sources__details > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary-light);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ vote items */

.ssc-vote {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 40px;
	padding: 34px 0;
	border-top: 1px solid var(--wp--preset--color--ink);
}

.ssc-vote:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--ink);
}

.ssc-vote__date {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--secondary-light);
	margin: 0;
}

.ssc-vote__summary {
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 18px;
	max-width: 68ch;
	color: var(--wp--preset--color--sky);
	text-wrap: pretty;
}

.ssc-vote__cites {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--card-text);
}

.ssc-vote__cites li {
	padding-left: 18px;
	border-left: 1px solid var(--wp--preset--color--pale);
}

/* -------------------------------------------------------------- colophon */

.ssc-colophon {
	/* padding-BLOCK, not the shorthand: this class now shares an element
	   with .ssc-shell, and `padding` would reset its padding-inline. */
	padding-block: 56px 64px;
}

.ssc-colophon .dsg-disclaimer,
.ssc-colophon p {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand);
	margin: 0;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
	.ssc-hero {
		grid-template-columns: 1fr;
		gap: 36px;
		padding: 48px 0 56px;
	}

	.ssc-hero__media {
		max-width: 300px;
	}

	.ssc-vote {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	/* Below the heading rather than beside it — at this width there is no
	   room on the title row, and an absolute box there would overlap. */
	.ssc-sources__details > summary {
		position: static;
		display: inline-block;
		margin: 0 0 28px;
	}

	.ssc-sources__title {
		padding-right: 0;
	}

	.ssc-sources__meta {
		margin-bottom: 20px;
	}
}

/* ----------------------------------------------- core block-layout resets
 *
 * WordPress adds `margin-block-start` between siblings inside a group via
 * its layout rules. Inside a CSS grid that fights `gap` and pushes the
 * columns out of alignment, so the grid containers zero it and own their
 * own spacing. Everything here is un-doing core defaults, not styling.
 */

.ssc-hero > *,
.ssc-vote > *,
.ssc-masthead > *,
.ssc-hero__caption > * {
	margin-block: 0;
}

/* The image block wraps its img in a <figure> that carries a default
   margin — which would show as a gap inside the frame, below the vignette. */
.ssc-hero__frame .wp-block-image,
.ssc-hero__frame figure {
	margin: 0;
	line-height: 0;
}

.ssc-hero__caption p {
	margin: 0;
}

/* The details block is a plain container here; its own vertical rhythm
   comes from each .ssc-vote's padding and borders. */
.ssc-sources__details > *:not(summary) {
	margin-block: 0;
}

/* ------------------------------------------------- core block CSS we dropped
 *
 * functions.php drops core/image's stylesheet: 8.9 KB of which exactly one
 * selector matched this page. That selector is restored here so an image
 * added later still behaves. See the note in functions.php for the audit.
 */

.wp-block-image img {
	box-sizing: border-box;
	height: auto;
	max-width: 100%;
	vertical-align: bottom;
}

.wp-block-image figure {
	margin: 0;
}