/**
 * HOMEPAGE SLIDER — design layer.
 *
 * THIS FILE BREAKS THE PLUGIN'S OWN RULE ON PURPOSE, TEMPORARILY.
 *
 * "A plugin may consume design tokens. It may never declare design values."
 * This file declares them. It is here so that one plugin upload gets the
 * slider working, instead of an upload plus a 12KB paste into Additional CSS.
 *
 * To put it back where it belongs: paste this file's contents at the end of
 * Appearance > Editor > Styles > Additional CSS, after the AI DESIGN TOKENS
 * block, then add this one line to a snippet or the theme's functions:
 *
 *     add_filter( 'aph_slider_design_css', '__return_false' );
 *
 * The plugin then stops emitting it and the design layer lives in one place
 * again. Nothing else changes.
 *
 * It loads with aph-hub as a dependency, so it always comes after the theme's
 * global styles and after the structural stylesheet, and only on pages that
 * actually contain a slider.
 */

/* --------------------------------------------------------------- tokens */

/* Declared here rather than inline anywhere, so the slider is tuned in one
   place like every other surface. Move these into the AI DESIGN TOKENS block
   once the Design System page records them. */

.aph-row--slider {
	/* NEW. The lead title sits above the 48px H1 because it is read at
	   arm's length across a full-bleed frame, not in a column. */
	--ai-slide-title: clamp( 2rem, 4.2vw, 3.5rem );
	--ai-slide-title-weight: 700;
	--ai-slide-title-leading: 1.08;

	--ai-slide-dek: clamp( 0.9375rem, 1.05vw, 1.0625rem );
	--ai-slide-dek-leading: 1.55;

	/* NEW. White, not Category Red. Red on a dark scrim measures about
	   3.2:1 against WCAG's 4.5:1 for text this size. Red stays the kicker
	   colour everywhere it sits on white. */
	--ai-slide-kicker: #ffffff;

	--ai-slide-panel-ink: #ffffff;
	--ai-slide-panel-pad: clamp( 1.5rem, 3.5vw, 3.5rem );
	--ai-slide-panel-gap: 0.75rem;

	/* NEW. The system says no overlays on photographs. A text panel over a
	   photograph is unreadable without one, so this is the exception.

	   Only the COLOUR lives here. How strong the scrim is, how far it
	   reaches and which edge it comes from are set per row in the block,
	   because those are decisions you make against a particular photograph
	   rather than once for the site. */
	--ai-slide-scrim: #000000;

	/* The field the photograph is set into when the frame is wider than the
	   picture. Black, so a cinemascope frame can hold an uncropped 3:2 without
	   the page having to carry a grey box. */
	--ai-slide-matte: #000000;

	--ai-slide-controls-pad: clamp( 1rem, 2vw, 2rem );

	color: var( --ai-slide-panel-ink );
}

/* A light photograph needs dark text, and then the whole scheme inverts:
   the scrim becomes white and the kicker goes back to Category Red, which is
   what it should be everywhere it sits on a light ground. */
.aph-row--slider[ data-tone='dark' ] {
	--ai-slide-kicker: #dd0000;
	--ai-slide-panel-ink: var( --ai-ink );
	--ai-slide-scrim: #ffffff;
	--ai-slide-matte: #ffffff;
}

/* ----------------------------------------------------------------- frame */

.aph-row--slider .aph-slider__viewport {
	background-color: var( --ai-slide-matte );
}

/* Flush to the header. The lead slide is the first block in the content, and
   the theme's block gap gives every block a top margin — on a full-bleed lead
   image that reads as a white band under the nav. The block also carries an
   inline margin-top:0; this is the belt to that brace, and it also catches the
   case where the gap is coming from the content wrapper rather than the
   block. */
.aph-row--slider:first-child {
	margin-block-start: 0;
}

.wp-site-blocks > .aph-row--slider:first-child,
.entry-content > .aph-row--slider:first-child,
.wp-block-post-content > .aph-row--slider:first-child {
	margin-block-start: 0;
}

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

.aph-row--slider .aph-slide__panel {
	padding: var( --ai-slide-panel-pad );
}

/* Controls sitting over the photograph occupy the foot of the frame, so the
   text has to stop short of them. Without this the metadata line lands under
   the arrows the moment a summary runs long, and always does on a phone. */
.aph-row--slider[ data-controls='overlay' ] .aph-slide__panel {
	padding-block-end: calc( var( --ai-slide-panel-pad ) + 44px );
}

/* The scrim is built from three numbers the block supplies: how opaque it is
   at its darkest edge (--aph-scrim-strength, 0-100), how far across the frame
   it reaches before it is gone (--aph-scrim-spread), and which edge it comes
   from (data-scrim-style + data-panel). The middle stop sits at roughly half
   the strength so the fall-off is not a straight ramp — a linear scrim reads
   as a grey panel, a weighted one reads as light. */

.aph-row--slider[ data-scrim='true' ] .aph-slide__panel::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	--aph-scrim-far: color-mix(
		in srgb,
		var( --ai-slide-scrim ) calc( var( --aph-scrim-strength ) * 1% ),
		transparent
	);
	--aph-scrim-mid: color-mix(
		in srgb,
		var( --ai-slide-scrim ) calc( var( --aph-scrim-strength ) * 0.55% ),
		transparent
	);
	--aph-scrim-none: color-mix( in srgb, var( --ai-slide-scrim ) 0%, transparent );
	background: linear-gradient(
		to left,
		var( --aph-scrim-far ) 0%,
		var( --aph-scrim-mid ) calc( var( --aph-scrim-spread ) * 0.42 ),
		var( --aph-scrim-none ) var( --aph-scrim-spread )
	);
}

.aph-row--slider[ data-scrim='true' ][ data-panel='left' ] .aph-slide__panel::before {
	background: linear-gradient(
		to right,
		var( --aph-scrim-far ) 0%,
		var( --aph-scrim-mid ) calc( var( --aph-scrim-spread ) * 0.42 ),
		var( --aph-scrim-none ) var( --aph-scrim-spread )
	);
}

/* Rising from the foot of the frame instead of from a side. Reads as evening
   light rather than as a panel, and it is what a full-width or centred text
   block needs. */
.aph-row--slider[ data-scrim='true' ][ data-scrim-style='bottom' ] .aph-slide__panel::before,
.aph-row--slider[ data-scrim='true' ][ data-scrim-style='bottom' ][ data-panel='left' ] .aph-slide__panel::before {
	background: linear-gradient(
		to top,
		var( --aph-scrim-far ) 0%,
		var( --aph-scrim-mid ) calc( var( --aph-scrim-spread ) * 0.42 ),
		var( --aph-scrim-none ) var( --aph-scrim-spread )
	);
}

/* An even wash over the whole frame. Heavy-handed on a good photograph, but
   the only thing that works over a busy one. */
.aph-row--slider[ data-scrim='true' ][ data-scrim-style='full' ] .aph-slide__panel::before,
.aph-row--slider[ data-scrim='true' ][ data-scrim-style='full' ][ data-panel='left' ] .aph-slide__panel::before {
	background: var( --aph-scrim-far );
}

.aph-row--slider .aph-slide__body > * + * {
	margin-block-start: var( --ai-slide-panel-gap );
}

/* ----------------------------------------------------------------- type */

.aph-row--slider .aph-slide__kicker {
	font-family: var( --wp--preset--font-family--manrope );
	font-size: var( --aph-kicker-size );
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var( --ai-slide-kicker );
}

.aph-row--slider .aph-slide__kicker a {
	color: inherit;
}

.aph-row--slider .aph-slide__title {
	font-family: var( --wp--preset--font-family--platypi );
	font-size: calc( var( --ai-slide-title ) * var( --aph-title-scale ) );
	font-weight: var( --ai-slide-title-weight );
	line-height: var( --ai-slide-title-leading );
	letter-spacing: -0.01em;
	color: inherit;
	text-wrap: balance;
}

.aph-row--slider .aph-slide__dek {
	font-family: var( --wp--preset--font-family--manrope );
	font-size: var( --aph-dek-size );
	line-height: var( --ai-slide-dek-leading );
	max-width: var( --aph-dek-measure );
	color: inherit;
}

.aph-row--slider .aph-slide__meta {
	font-family: var( --wp--preset--font-family--manrope );
	font-size: var( --aph-meta-size );
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	opacity: 0.72;
	color: inherit;
}

/* ------------------------------------------------------- ghost controls */

/* Section 4.2 of the Design System: every button on the site is the same
   white ghost button. These are that button, on a photograph. */

.aph-row--slider .aph-slide__cta a,
.aph-row--slider .aph-slider__nav {
	font-family: var( --wp--preset--font-family--manrope );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var( --wp--preset--color--contrast );
	background-color: var( --wp--preset--color--base );
	border: 0;
	padding: var( --wp--preset--spacing--20 ) var( --wp--preset--spacing--40 );
	text-decoration: none;
}

.aph-row--slider .aph-slide__cta a:hover,
.aph-row--slider .aph-slider__nav:hover {
	text-decoration: none;
	opacity: 0.86;
}

.aph-row--slider .aph-slider__nav {
	padding: var( --wp--preset--spacing--20 );
	min-width: 44px;
	min-height: 44px;
	letter-spacing: 0;
}

.aph-row--slider .aph-slider__nav:focus-visible,
.aph-row--slider .aph-slider__dot:focus-visible,
.aph-row--slider a:focus-visible {
	outline: 2px solid var( --wp--preset--color--base );
	outline-offset: 3px;
}

/* ------------------------------------------------------------- controls */

.aph-row--slider .aph-slider__controls {
	gap: var( --wp--preset--spacing--30 );
	padding: var( --ai-slide-controls-pad );
	color: var( --ai-slide-panel-ink );
}

.aph-row--slider .aph-slider__nav-group {
	gap: var( --wp--preset--spacing--20 );
}

.aph-row--slider .aph-slider__counter {
	font-family: var( --wp--preset--font-family--manrope );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
}

.aph-row--slider .aph-slider__dots {
	gap: 10px;
}

.aph-row--slider .aph-slider__dot {
	padding: 8px 2px;
}

.aph-row--slider .aph-slider__dot > span {
	width: 7px;
	height: 7px;
	opacity: 0.45;
	transition: opacity 200ms ease;
}

.aph-row--slider .aph-slider__dot.is-active > span,
.aph-row--slider .aph-slider__dot:hover > span {
	opacity: 1;
}

.aph-row--slider .aph-slider__progress {
	height: 2px;
	background-color: rgb( 255 255 255 / 22% );
}

.aph-row--slider .aph-slider__progress-bar {
	background-color: var( --wp--preset--color--base );
}

/* Controls set to sit below the frame are on white, not on a photograph, so
   they take the page's own ink. */
.aph-row--slider[ data-controls='below' ] .aph-slider__controls {
	color: var( --ai-ink );
}

.aph-row--slider[ data-controls='below' ] .aph-slider__nav {
	color: var( --ai-ink );
	background-color: transparent;
	border: 1px solid rgb( 19 19 19 / 18% );
}

.aph-row--slider[ data-controls='below' ] .aph-slider__progress {
	background-color: rgb( 19 19 19 / 12% );
}

.aph-row--slider[ data-controls='below' ] .aph-slider__progress-bar {
	background-color: var( --ai-ink );
}

/* A panel set below the frame is on white too. */
.aph-row--slider[ data-panel='below' ] .aph-slide__panel {
	color: var( --ai-ink );
	padding-inline: 0;
}

.aph-row--slider[ data-panel='below' ] .aph-slide__kicker {
	color: #dd0000;
}

/* ------------------------------------------------- row link, all rows */

/* The chevron the old shortcode printed into its own link text. Now drawn
   here, so every row's link gets it and no row has to carry it in content. */
.aph-row__seeall::after {
	content: '\00a0\203A';
}

/* --------------------------------------------------------------- phones */

@media ( max-width: 640px ) {
	.aph-row--slider {
		--ai-slide-title: clamp( 1.6rem, 7vw, 2.2rem );
	}

	/* One dial for all the slide text on a phone, on top of the per-role
	   sizes. A frame that is 390px wide rarely wants the desktop measure. */
	.aph-row--slider .aph-slide__dek {
		font-size: calc( var( --aph-dek-size ) * var( --aph-text-scale-mobile ) );
	}

	.aph-row--slider .aph-slide__kicker {
		font-size: calc( var( --aph-kicker-size ) * var( --aph-text-scale-mobile ) );
	}

	.aph-row--slider .aph-slide__meta {
		font-size: calc( var( --aph-meta-size ) * var( --aph-text-scale-mobile ) );
	}

	.aph-row--slider .aph-slide__title {
		font-size: calc(
			var( --ai-slide-title ) * var( --aph-title-scale ) * var( --aph-text-scale-mobile )
		);
	}

	.aph-row--slider .aph-slide__dek {
		max-width: none;
	}

	/* Controls over a phone-sized frame crowd the text. */
	.aph-row--slider[ data-controls='overlay' ] .aph-slider__controls {
		padding: var( --wp--preset--spacing--20 );
	}

	/* Arrows, a counter and five dots do not fit one phone-width line. The
	   group wraps, so the text has to clear two rows of it. */
	.aph-row--slider[ data-controls='overlay' ] .aph-slide__panel {
		padding-block-end: calc( var( --ai-slide-panel-pad ) + 60px );
	}

	/* A side scrim on a phone darkens the whole picture, so every style
	   becomes a rise from the foot whatever the row asked for. */
	.aph-row--slider[ data-scrim='true' ]:not( [ data-scrim-style='full' ] ) .aph-slide__panel::before,
	.aph-row--slider[ data-scrim='true' ]:not( [ data-scrim-style='full' ] )[ data-panel='left' ] .aph-slide__panel::before {
		background: linear-gradient(
			to top,
			var( --aph-scrim-far ) 0%,
			var( --aph-scrim-mid ) 45%,
			var( --aph-scrim-none ) 100%
		);
	}

	/* With the matte stacked, the text is already on the field — it needs no
	   scrim of its own, and one here would only put a second dark wash over
	   black. The photograph's own fade is doing the work. */
	.aph-row--slider[ data-matte='true' ] .aph-slide__panel::before {
		background: none;
	}

	/* The text sits just under the fade, ranged left, with the field's own
	   breathing room rather than the overlay's. */
	.aph-row--slider[ data-matte='true' ] .aph-slide__panel {
		padding-block-start: 0;
	}

	.aph-row--slider[ data-matte='true' ] .aph-slide__title {
		font-size: calc(
			clamp( 1.7rem, 8vw, 2.4rem ) * var( --aph-title-scale ) *
				var( --aph-text-scale-mobile )
		);
	}

	.aph-row--slider .aph-slider__nav-group {
		gap: 8px;
		row-gap: 6px;
	}
}