/**
 * Learning DNA CTA Card — front-end + editor styles.
 *
 * Follows the kb-card-block convention: a single root class exposes --dna--*
 * custom properties that :hover and :focus-visible re-point, so the whole
 * roll-over is described once and shared by pointer + keyboard.
 *
 * Colour + type come from theme.json presets. Note: this theme's spacing scale
 * (--wp--preset--spacing--50/60) is a *section-level* fluid scale (~100px+), so
 * card-internal padding uses the small end of the scale / component values.
 */

.kb-dna-card {

	/* design tokens, sourced from theme.json presets. */
	--dna--purple: var( --wp--preset--color--brand-primary );
	--dna--aqua: var( --wp--preset--color--brand-secondary-lighter );
	--dna--white: var( --wp--preset--color--brand-white );

	/* component-local gold (no theme.json token exists for gold) — used by the
	 * "Gold heading" block style (.is-style-gold-heading). */
	--dna--gold-heading: #e6c56b;

	/* roll-over state, driven from :hover / :focus-visible below. */
	--dna--image--zoom: 1;
	--dna--overlay--opacity: 0.72;
	--dna--helix--opacity: 0.22;
	--dna--helix--x: 0; /* horizontal shift, nudged left on roll-over. */
	--dna--rung--width: 2.25em;

	/* component padding — NOT the theme's section spacing. */
	--dna--pad: clamp( 1.1rem, 0.8rem + 1.2vw, 1.65rem );
	--dna--arrow-size: 2.5rem;

	position: relative;
	display: block;
	overflow: hidden;
	isolation: isolate;
	color: var( --dna--white );
	background: var( --dna--purple );
	text-decoration: none;
}

/* the roll-over: hover AND keyboard focus land on the same state. */
.kb-dna-card:hover,
.kb-dna-card:focus-visible {
	--dna--overlay--opacity: 0.85;
	--dna--helix--opacity: 0.5;
	--dna--rung--width: 4em;
}

.kb-dna-card:focus-visible {
	outline: 3px solid var( --dna--aqua );
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Media (photo + overlay)
 * ---------------------------------------------------------------------- */

.kb-dna-card__media {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: var( --dna--purple );
}

.kb-dna-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale( var( --dna--image--zoom ) );
	transition: transform 0.6s ease;
}

.kb-dna-card__overlay {
	position: absolute;
	inset: 0;
	opacity: var( --dna--overlay--opacity );
	transition: opacity 0.4s ease;
	/* solid purple tint (matches the mockups); depth is driven by --dna--overlay--opacity on roll-over. */
	background: var( --dna--purple );
}

/* -------------------------------------------------------------------------
 * Body — an absolutely-inset flex column, space-between so the kicker holds
 * the top and the strand/attribute hold the bottom regardless of image size.
 * (The exact thing core/Cover cannot do.)
 * ---------------------------------------------------------------------- */

.kb-dna-card__body {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.75rem;
	padding: var( --dna--pad );
	overflow: hidden;
}

.kb-dna-card__kicker,
.kb-dna-card__lower,
.kb-dna-card__arrow {
	position: relative;
	z-index: 1; /* sit above the helix, which is z-index 0 within the body. */
}

.kb-dna-card__kicker {
	max-width: 18em; /* keep "Kimbolton Learning DNA" on a single line. */
	font-family: var( --wp--preset--font-family--sans-serif );
	font-size: var( --wp--preset--font-size--type-minus-3 );
	font-weight: 500;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var( --dna--aqua );
}

.kb-dna-card__lower {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 11em;
	/* keep the bottom text clear of the arrow affordance. */
	padding-right: calc( var( --dna--arrow-size ) + 0.5rem );
}

.kb-dna-card__strand {
	font-family: var( --wp--preset--font-family--sans-serif );
	font-size: var( --wp--preset--font-size--type-minus-1 );
	font-weight: 400;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var( --dna--white );
}

/* the "rung" divider — a short helix rung that grows on roll-over. */
.kb-dna-card__rung {
	display: block;
	width: var( --dna--rung--width );
	height: 2px;
	margin: 0.7rem 0;
	background: var( --dna--aqua );
	transition: width 0.4s ease;
}

.kb-dna-card__attribute {
	font-family: var( --wp--preset--font-family--serif );
	font-size: var( --wp--preset--font-size--type-3 );
	font-weight: 300;
	line-height: 1.02;
	color: var( --dna--white );
}

/* -------------------------------------------------------------------------
 * Arrow affordance (bottom-right) — fills on roll-over.
 * ---------------------------------------------------------------------- */

.kb-dna-card__arrow {
	position: absolute;
	right: var( --dna--pad );
	bottom: var( --dna--pad );
	display: grid;
	place-items: center;
	width: var( --dna--arrow-size );
	height: var( --dna--arrow-size );
	border: 2px solid var( --dna--aqua );
	border-radius: 999px;
	color: var( --dna--aqua );
	background: transparent;
	transition: background-color 0.35s ease, color 0.35s ease;
}

.kb-dna-card__arrow svg {
	width: 1.1em;
	height: 1.1em;
}

.kb-dna-card:hover .kb-dna-card__arrow,
.kb-dna-card:focus-visible .kb-dna-card__arrow {
	background: var( --dna--aqua );
	color: var( --dna--purple );
}

/* -------------------------------------------------------------------------
 * Helix — static SVG, bleeds off the right edge and is clipped by the body.
 * ---------------------------------------------------------------------- */

/* wrapper: positions + clips; its aspect ratio matches the viewBox so the
 * inner SVG stays undistorted. */
.kb-dna-card__helix {
	position: absolute;
	top: 50%;
	right: -2.5em;
	z-index: 0;
	height: 128%;
	aspect-ratio: 140 / 720;
	transform: translate( var( --dna--helix--x ), -50% );
	opacity: var( --dna--helix--opacity );
	transition: opacity 0.4s ease, transform 0.5s ease;
	pointer-events: none;
}

.kb-dna-card__helix-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.kb-dna-card__helix-strand,
.kb-dna-card__helix-rungs line {
	stroke: var( --dna--white );
	stroke-width: 1.4;
	vector-effect: non-scaling-stroke; /* keeps the line ~1.4px at any scale. */
}

/* =========================================================================
 * Layout: COVER — portrait photo card, text top + bottom.
 * ====================================================================== */

.kb-dna-card--cover {
	aspect-ratio: 4 / 5;
}

.kb-dna-card--cover .kb-dna-card__strand {
	font-size: var( --wp--preset--font-size--type-minus-2 );
}

.kb-dna-card--cover .kb-dna-card__attribute {
	font-size: var( --wp--preset--font-size--type-2 );
}

/* =========================================================================
 * Layout: BANNER — full-width, shallow, adjustable height (min-height inline).
 * Content is centred, matching the wide-banner treatment.
 * ====================================================================== */

.kb-dna-card--banner {
	min-height: 320px; /* fallback; render.php sets the chosen value inline. */
	--dna--pad: clamp( 1.5rem, 1rem + 2vw, 2.75rem );
}

.kb-dna-card--banner .kb-dna-card__body {
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	text-align: center;
}

.kb-dna-card--banner .kb-dna-card__kicker {
	max-width: none;
	margin-bottom: 0.6rem;
}

.kb-dna-card--banner .kb-dna-card__lower {
	align-items: center;
	max-width: 22em;
	padding-right: 0; /* arrow is centred below, not in the corner. */
	text-align: center;
}

.kb-dna-card--banner .kb-dna-card__rung {
	margin-inline: auto;
}

.kb-dna-card--banner .kb-dna-card__attribute {
	font-size: var( --wp--preset--font-size--type-4 );
}

/* arrow drops out of the corner and sits centred beneath the text. */
.kb-dna-card--banner .kb-dna-card__arrow {
	position: static;
	margin: 0.9rem auto 0;
}

.kb-dna-card--banner .kb-dna-card__helix {
	height: 150%;
	right: -1.5em;
}

/* =========================================================================
 * Layout: OFFSET — clean portrait photo with a purple content box offset
 * over the lower area; helix sits tone-on-tone inside the box.
 * ====================================================================== */

.kb-dna-card--offset {
	background: transparent;
	/* box is inset within the card, so hidden overflow contains it + clips helix. */
	overflow: hidden;
}

/* media is in-flow here (block, not absolute) so its portrait ratio sets the
 * card height; the box is then positioned over its lower area. */
.kb-dna-card--offset .kb-dna-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
}

/* no photo overlay in the offset treatment — the photo shows clean. */
.kb-dna-card--offset .kb-dna-card__overlay {
	display: none;
}

.kb-dna-card--offset .kb-dna-card__body {
	inset: auto 0.9rem 0.9rem;
	justify-content: flex-end;
	background: var( --dna--purple );
	transition: transform 0.4s ease;
}

/* the offset box leads on the strand + attribute; kicker is dropped to stay compact. */
.kb-dna-card--offset .kb-dna-card__kicker {
	display: none;
}

/* smaller type to suit the compact box. */
.kb-dna-card--offset .kb-dna-card__strand {
	font-size: var( --wp--preset--font-size--type-minus-3 );
}

.kb-dna-card--offset .kb-dna-card__attribute {
	font-size: var( --wp--preset--font-size--type-0 );
}

/* helix is tone-on-tone (low-opacity white) inside the purple box. */
.kb-dna-card--offset {
	--dna--helix--opacity: 0.12;
}

.kb-dna-card--offset:hover,
.kb-dna-card--offset:focus-visible {
	--dna--helix--opacity: 0.26;
}

/* the offset box is small — with the default right-bleed the helix lands
 * entirely outside it and gets clipped away. Pull it back inside the box so it
 * shows tone-on-tone on the right. */
.kb-dna-card--offset .kb-dna-card__helix {
	right: -0.75em;
	height: 150%;
}

/* =========================================================================
 * Gold heading — the DEFAULT display treatment: gold text with a moving sheen
 * swept across it. Applied to every card EXCEPT the "Plain heading" opt-out
 * (.is-style-plain-heading), because WordPress omits the class for the default
 * block style, so we can't key on .is-style-gold-heading.
 *
 * The heading is a flex item (blockified to a single box), so a clipped
 * gradient covers all lines fine — the earlier breakage was background-
 * attachment: fixed, which is buggy with background-clip: text. Here motion
 * comes from ANIMATING background-position instead (the standard "shiny text"
 * technique), which is well supported. Time-based, not scroll-based.
 * box-decoration-break: clone guards any engine that treats it as inline.
 * ====================================================================== */

.kb-dna-card:not( .is-style-plain-heading ) .kb-dna-card__attribute {
	display: block;
	color: var( --dna--gold-heading ); /* fallback if background-clip: text is unsupported. */
	/* the gradient tiles seamlessly (same gold at 0% and 100%), so with the
	 * default background-repeat the text is ALWAYS fully covered as the position
	 * animates. (no-repeat leaves gaps → glyphs go transparent.) */
	background-image: linear-gradient(
		110deg,
		#c9a24f 0%,
		#c9a24f 40%,
		#fff4d0 50%,
		#c9a24f 60%,
		#c9a24f 100%
	);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	margin-bottom: -0.1em;
	padding-bottom: 0.1em; /* headroom so serif descenders aren't clipped. */
	animation: kb-dna-gold-sheen 3.5s linear infinite;
}

/* move by one full tile (200% of the element) for a seamless loop. */
@keyframes kb-dna-gold-sheen {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 200% 0;
	}
}

/* -------------------------------------------------------------------------
 * Motion — zoom / transforms only when the user allows motion. Reduced-motion
 * lands on a legible static state (helix + overlay changes still apply).
 * ---------------------------------------------------------------------- */

@media ( prefers-reduced-motion: no-preference ) {

	.kb-dna-card:hover,
	.kb-dna-card:focus-visible {
		--dna--image--zoom: 1.06;
		--dna--helix--x: -0.6em; /* push the DNA slightly left on roll-over. */
	}

	.kb-dna-card--offset:hover .kb-dna-card__body,
	.kb-dna-card--offset:focus-visible .kb-dna-card__body {
		transform: translateY( -0.5rem );
	}
}

/* -------------------------------------------------------------------------
 * Editor — approximate the layouts. The wrapper is a div, not an <a>, so give
 * it the same box model the front-end root has.
 * ---------------------------------------------------------------------- */

.wp-block-kimb-dna-card.kb-dna-card {
	cursor: default;
}

/* keep RichText fields visible + editable over the dark card. */
.kb-dna-card [contenteditable="true"]:focus {
	outline: 1px dashed var( --dna--aqua );
	outline-offset: 2px;
}

/* reduced motion: stop the heading sheen sweeping; it lands on a static,
 * legible gold. */
@media ( prefers-reduced-motion: reduce ) {

	.kb-dna-card:not( .is-style-plain-heading ) .kb-dna-card__attribute {
		animation: none;
		background-position: 0 0;
	}
}