/**
 * Intro block styles (block-scoped; enqueued only when the block is present).
 * BEM only, prefixed with the block slug. Do not touch the theme's global style.css.
 *
 * The references are StartP's about sections for the text column (eyebrow,
 * heading, the rule with a travelling dot) and its .funfact strip for the
 * figures: a big number over a short caption. The strip sits in the same dashed
 * soft-green frame as the Features cards, so the two read as one family.
 */

/*
 * The theme ships no global box-sizing, so a rail written as max-width plus
 * padding would hang that padding outside the rail. Scope border-box to the
 * block instead, as every other block here does.
 */
.sws-intro,
.sws-intro *,
.sws-intro *::before,
.sws-intro *::after {
	box-sizing: border-box;
}

.sws-intro {
	container: sws-intro / inline-size;
	/*
	 * Full-bleed root on the plain page background. Keep responsive rules off
	 * it: an element cannot be styled by its own container query.
	 */
}

.sws-intro__inner {
	/* Mobile-first base. Same rail formula as the header, so both stay flush. */
	max-width: min(var(--sws-content, 1116px), 100% - 2 * var(--sws-gutter, 0.75rem));
	margin-inline: auto;
	padding-block: 3.125rem;
}

/*
 * One column on a phone, picture first: the markup already puts it there, so
 * the narrow layout needs no reordering.
 */
.sws-intro__main {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

/*--------------------------------------------------------------
# Illustration
--------------------------------------------------------------*/

/*
 * The frame holds the picture's own 4:3, so the row's height is known before
 * the bytes arrive. The scenes are drawn on the section tint, and on this white
 * section that tint shows; the rounded corners make it a tile on purpose
 * instead of a pale rectangle.
 */
.sws-intro__media {
	width: 100%;
	max-width: 33rem;
	margin-inline: auto;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--sws-radius-lg, 5px);
	background: var(--wp--preset--color--surface-alt, #f7fafd);
}

/* Descendant, not child: the image optimizer may wrap the tag in <picture>. */
.sws-intro__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*--------------------------------------------------------------
# Text
--------------------------------------------------------------*/

/*
 * In the single column the text keeps the picture's cap, so the two form one
 * centred column rather than a narrow picture over rail-wide lines.
 */
.sws-intro__body {
	width: 100%;
	max-width: 33rem;
	margin-inline: auto;
}

/*
 * The eyebrow is the reference's pill, recoloured: the heading colour on the
 * soft green keeps the shape and passes contrast where lilac on pink does not.
 */
.sws-intro__eyebrow {
	display: inline-block;
	margin: 0 0 1.125rem;
	padding: 0.3125rem 1.25rem 0.25rem;
	border-radius: 30px;
	background: var(--wp--preset--color--accent-soft, #cdf1d8);
	color: var(--wp--preset--color--heading, #0e314c);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.6;
	text-transform: uppercase;
}

.sws-intro__heading {
	margin: 0;
	color: var(--wp--preset--color--heading, #0e314c);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.3;
}

/*
 * The travelling dot on its rule, left-aligned under a left-aligned heading.
 * Both sizes live here so the block can change them together; --sws-bar-travel
 * is what the shared keyframe in css/base.css reads to know how far to go.
 */
.sws-intro__bar {
	--sws-intro-bar: 5.625rem;
	--sws-intro-dot: 0.625rem;

	position: relative;
	width: var(--sws-intro-bar);
	height: 0.3125rem;
	margin: 1.25rem 0;
	border-radius: 30px;
	background: var(--wp--preset--color--accent-soft, #cdf1d8);
}

.sws-intro__bar::before {
	--sws-bar-travel: calc(var(--sws-intro-bar) - var(--sws-intro-dot));

	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: var(--sws-intro-dot);
	height: var(--sws-intro-dot);
	margin-top: calc(var(--sws-intro-dot) / -2);
	border-radius: 50%;
	background: var(--wp--preset--color--accent, #44ce6f);
	animation: sws-bar-dot 3s linear infinite alternate;
}

.sws-intro__text {
	color: var(--wp--preset--color--text, #4a6f8a);
	font-size: 0.9375rem;
	line-height: 1.9;
}

/* WYSIWYG output — markup the theme does not generate. */
.sws-intro__text p {
	margin: 0;
}

.sws-intro__text p + p {
	margin-top: 1rem;
}

/*--------------------------------------------------------------
# Actions
--------------------------------------------------------------*/

.sws-intro__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 2rem;
	margin-top: 1.875rem;
}

/*
 * One more of the family after the header CTA, the hero button and the panel
 * buttons: two halves of a purple fill grow in from both edges and the button
 * lifts. The halves overlap at 51%, the reference's own figure, so no seam
 * shows where they meet.
 */
.sws-intro__button {
	position: relative;
	z-index: 1;
	display: inline-block;
	overflow: hidden;
	padding: 0.8125rem 2.0625rem;
	border-radius: var(--sws-radius, 4px);
	background-color: var(--wp--preset--color--accent, #44ce6f);
	box-shadow: var(--sws-shadow-button-hover, 0 13px 27px 0 rgb(68 206 111 / 25%));
	color: #ffffff;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		box-shadow var(--sws-transition, 0.3s ease),
		transform var(--sws-transition, 0.3s ease);
}

.sws-intro__button::before,
.sws-intro__button::after {
	content: "";
	position: absolute;
	top: 0;
	z-index: -1;
	width: 0;
	height: 100%;
	background-color: var(--wp--preset--color--secondary, #c679e3);
	transition: width var(--sws-transition, 0.3s ease);
}

.sws-intro__button::after {
	left: 0;
}

.sws-intro__button::before {
	right: 0;
}

.sws-intro__button:hover,
.sws-intro__button:focus-visible {
	box-shadow: var(--sws-shadow-button, 0 13px 27px 0 rgb(198 121 227 / 25%));
	color: #ffffff;
	transform: translateY(-5px);
}

.sws-intro__button:hover::before,
.sws-intro__button:hover::after,
.sws-intro__button:focus-visible::before,
.sws-intro__button:focus-visible::after {
	width: 51%;
}

/*
 * The quiet second way on: the heading colour with a soft-green underline that
 * turns full green on hover, and an arrow that nudges the way it points.
 */
.sws-intro__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 0.125rem;
	border-bottom: 2px solid var(--wp--preset--color--accent-soft, #cdf1d8);
	color: var(--wp--preset--color--heading, #0e314c);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	transition:
		border-color var(--sws-transition, 0.3s ease),
		color var(--sws-transition, 0.3s ease);
}

.sws-intro__link:hover,
.sws-intro__link:focus-visible {
	border-bottom-color: var(--wp--preset--color--accent, #44ce6f);
	color: var(--wp--preset--color--accent, #44ce6f);
}

/*
 * Explicit size, not optional: the icons ship with a viewBox and no width or
 * height, and an unsized SVG in HTML falls back to 300x150. The theme has one
 * arrow, drawn pointing up; a turn sets it to the right, or down for an anchor.
 */
.sws-intro__link-icon {
	--sws-intro-turn: 90deg;
	--sws-intro-nudge: 0.25rem 0;

	display: block;
	flex: none;
	width: 1rem;
	height: 1rem;
	stroke-width: 6;
	transform: rotate(var(--sws-intro-turn));
	transition: translate var(--sws-transition, 0.3s ease);
}

.sws-intro__link--down .sws-intro__link-icon {
	--sws-intro-turn: 180deg;
	--sws-intro-nudge: 0 0.25rem;
}

.sws-intro__link:hover .sws-intro__link-icon,
.sws-intro__link:focus-visible .sws-intro__link-icon {
	translate: var(--sws-intro-nudge);
}

/*--------------------------------------------------------------
# Key figures
--------------------------------------------------------------*/

/*
 * Stacked on a phone, side by side from 600px. Each figure keeps its own
 * dashed divider, so the strip needs no gap and the frame stays one piece.
 */
.sws-intro__facts {
	display: grid;
	margin: 2.5rem 0 0;
	padding: 0;
	border: 1px dashed var(--wp--preset--color--accent-soft, #cdf1d8);
	border-radius: var(--sws-radius-lg, 5px);
	background: var(--wp--preset--color--surface, #ffffff);
	box-shadow: 0 0 10px 0 rgb(72 69 224 / 10%);
	list-style: none;
}

.sws-intro__fact {
	padding: 1.25rem 1rem;
	text-align: center;
}

.sws-intro__fact + .sws-intro__fact {
	border-top: 1px dashed var(--wp--preset--color--accent-soft, #cdf1d8);
}

.sws-intro__value {
	display: block;
	color: var(--wp--preset--color--heading, #0e314c);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
}

.sws-intro__label {
	display: block;
	margin-top: 0.375rem;
	color: var(--wp--preset--color--text, #4a6f8a);
	font-size: 0.875rem;
	line-height: 1.6;
}

@container sws-intro (min-width: 600px) {

	.sws-intro__facts {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}

	.sws-intro__fact + .sws-intro__fact {
		border-top: 0;
		border-left: 1px dashed var(--wp--preset--color--accent-soft, #cdf1d8);
	}
}

/*--------------------------------------------------------------
# Desktop: text beside the picture
--------------------------------------------------------------*/

@container sws-intro (min-width: 782px) {

	.sws-intro__inner {
		padding-block: 5rem;
	}

	.sws-intro__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3.75rem;
	}

	/* Text on the left, where the eye starts; the picture takes the right. */
	.sws-intro__media {
		order: 2;
		max-width: none;
	}

	.sws-intro__body {
		max-width: none;
	}

	.sws-intro__heading {
		font-size: 1.75rem;
	}

	.sws-intro__button {
		padding: 0.9375rem 2.5rem;
		font-size: 0.875rem;
	}

	.sws-intro__facts {
		margin-top: 3.75rem;
	}

	.sws-intro__fact {
		padding: 1.75rem 1.25rem;
	}

	.sws-intro__value {
		font-size: 1.75rem;
	}
}

/*--------------------------------------------------------------
# Reduced motion
--------------------------------------------------------------*/

/*
 * A preference query, not a width one — the block's breakpoints stay container
 * queries. base.css collapses --sws-duration, which reaches transitions only; a
 * keyframe animation has no such handle, so the component that starts one also
 * stops it.
 */
@media (prefers-reduced-motion: reduce) {

	.sws-intro__bar::before {
		animation: none;
	}

	.sws-intro__button:hover,
	.sws-intro__button:focus-visible {
		transform: none;
	}

	.sws-intro__link:hover .sws-intro__link-icon,
	.sws-intro__link:focus-visible .sws-intro__link-icon {
		translate: none;
	}
}