/*
 * Fills the height of its parent row (see steps-section__row, which sets an
 * explicit height so this and the header column can stretch to match it).
 *
 * Width is proportional, not a fixed pixel target: every step gets an equal
 * flex-grow share of whatever space steps-section__steps actually has
 * (flex-basis: 0, so shares are purely by ratio), and the expanded one gets
 * a 4 ratio against the others' plain 1. Because all steps' widths are
 * ratios of the same container, they
 * always sum to exactly its width regardless of viewport size or how many
 * steps there are — unlike a fixed-px expanded width (the previous
 * approach), which could demand more room than the row actually had and
 * overflow it.
 *
 * The basis MUST be the unitless "0", not "0%": steps-section__steps is
 * itself sized by flex-grow (an indefinite size, not a fixed CSS length),
 * and a *percentage* flex-basis can't resolve against an indefinite
 * container — per spec it falls back to content-based sizing instead, which
 * silently breaks the whole ratio (each step reverts to its own text's
 * width) and was the real cause of the reported overflow. A bare "0" is a
 * zero length, not a percentage, so it isn't subject to that rule.
 *
 * steps-section/view.js toggles "is-expanded" between steps on hover; this
 * step's own render.php adds it by default when it's the first step (see
 * andrei_saguna_blocks_number_steps in the main plugin file).
 *
 * "Dark" tone uses #002547 — the design's ink/navy brand color, not yet part
 * of theme.json's palette (see square-card/style.css, which hardcodes the
 * same value for the same reason).
 */
.wp-block-andrei-saguna-step {
	position: relative;
	box-sizing: border-box;
	overflow: clip;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	padding: var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--radius--md);
	background-color: lightgray;
	background-position: 50% center;
	background-size: cover;
	background-repeat: no-repeat;
	transition: flex-grow 0.35s ease;
	/* Selecting the heading/text is what was hijacking the drag gesture on
	 * touch devices (the OS's own text-selection UI wins that race unless
	 * the element is marked unselectable before the touch even starts, not
	 * just while slider.js's own drag is in progress) — matters on the
	 * mobile slider specifically; harmless on desktop, where this block
	 * isn't draggable at all. -webkit-touch-callout also stops iOS's
	 * press-and-hold callout menu for the same reason. */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

.wp-block-andrei-saguna-step.is-expanded {
	flex: 4 1 0;
}

.wp-block-andrei-saguna-step__number {
	margin: 0;
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--h-4);
	line-height: 1.2;
	letter-spacing: 0.64px;
}

/* Retracted by default: only the number shows. Expanding reveals this via max-height/opacity (an animatable stand-in for height:auto). */
.wp-block-andrei-saguna-step__content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.35s ease, opacity 0.25s ease;
}

.wp-block-andrei-saguna-step.is-expanded .wp-block-andrei-saguna-step__content {
	max-height: 320px;
	opacity: 1;
}

/*
 * In the editor, every step's content stays visible/editable regardless of
 * width state — only the first step carries "is-expanded" there (see
 * step/editor.js), so without this a collapsed step's heading/text would be
 * clipped to 0 height and impossible to click into for editing.
 * ".editor-styles-wrapper" only exists inside the block editor's iframe, so
 * this never reaches the front end.
 */
.editor-styles-wrapper .wp-block-andrei-saguna-step__content {
	max-height: none;
	opacity: 1;
	overflow: visible;
}

.wp-block-andrei-saguna-step__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.2;
	letter-spacing: 0.8px;
}

.wp-block-andrei-saguna-step__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-base);
	line-height: 1.5;
}

.wp-block-andrei-saguna-step.has-tone-light .wp-block-andrei-saguna-step__number,
.wp-block-andrei-saguna-step.has-tone-light .wp-block-andrei-saguna-step__heading {
	color: var(--wp--preset--color--base-white);
}

.wp-block-andrei-saguna-step.has-tone-light .wp-block-andrei-saguna-step__text {
	color: var(--wp--preset--color--border-default);
}

.wp-block-andrei-saguna-step.has-tone-dark .wp-block-andrei-saguna-step__number,
.wp-block-andrei-saguna-step.has-tone-dark .wp-block-andrei-saguna-step__heading {
	color: #002547;
}

.wp-block-andrei-saguna-step.has-tone-dark .wp-block-andrei-saguna-step__text {
	color: var(--wp--preset--color--neutral-700);
}

/*
 * Under 768px the whole section becomes a horizontal slider (see
 * steps-section/style.css): every step is always "expanded" — content
 * fully visible, no hover-driven retract/expand — sized to show one step
 * plus ~20% of the next.
 */
@media (max-width: 767px) {
	/* Also matches ".is-expanded" explicitly: that rule's two-class selector
	 * otherwise outranks this one on specificity alone, regardless of media
	 * query or source order, and would keep whichever step is expanded at
	 * its desktop 424px width instead of the slider's 80%. */
	.wp-block-andrei-saguna-step,
	.wp-block-andrei-saguna-step.is-expanded {
		flex: 0 0 80%;
		height: 480px;
		scroll-snap-align: start;
	}

	.wp-block-andrei-saguna-step__content {
		max-height: none;
		opacity: 1;
		overflow: visible;
	}
}