/*
 * Always full-bleed, regardless of any core alignment class — consistent
 * with the other section blocks. Defaults to white; editable via the
 * block's own "Background color" panel (supports.color.background in
 * block.json) — picking any theme.json palette color there overrides this
 * via WordPress's own inline style, which always wins over this external
 * stylesheet rule.
 *
 * Heading color (#002547) is the design's ink/navy "text-primary" — not yet
 * part of theme.json's palette (see square-card/style.css). Hardcoded here
 * for this first version.
 */
.wp-block-andrei-saguna-steps-section {
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--4);
	background-color: var(--wp--preset--color--base-white);
}

.wp-block-andrei-saguna-steps-section__row {
	display: flex;
	align-items: stretch;
	gap: var(--wp--preset--spacing--6);
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	height: 752px;
	margin-inline: auto;
}

.wp-block-andrei-saguna-steps-section__header {
	flex: 0 0 424px;
	max-width: 424px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6);
}

.wp-block-andrei-saguna-steps-section__header-text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
}

h2.wp-block-andrei-saguna-steps-section__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--h-1);
	line-height: 1.1;
	color: #002547;
}

.wp-block-andrei-saguna-steps-section__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;
	color: var(--wp--preset--color--neutral-700);
}

/*
 * Matches the theme's "Big Primary" button look (see theme.json
 * styles.blocks.core/button.variations.big-primary) but as this block's own
 * markup/CSS rather than an actual core/button instance — the theme's
 * variation CSS only applies to button blocks WordPress itself renders
 * (it emits a per-instance "is-style-big-primary--N" class at render time
 * that a hand-written element never gets), so it can't be reused as-is here.
 */
.wp-block-andrei-saguna-steps-section__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--accent-500);
	color: var(--wp--preset--color--base-white);
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--ui-interactive);
	font-weight: 500;
	letter-spacing: 0.56px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
}

a.wp-block-andrei-saguna-steps-section__button:hover {
	background-color: var(--wp--preset--color--accent-600);
}

.wp-block-andrei-saguna-steps-section__steps {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	gap: var(--wp--preset--spacing--6);
	height: 100%;
}

@media (max-width: 767px) {
	.wp-block-andrei-saguna-steps-section__row {
		flex-direction: column;
		height: auto;
		gap: var(--wp--preset--spacing--8);
	}

	.wp-block-andrei-saguna-steps-section__header {
		flex: 1 1 100%;
		max-width: 100%;
	}

	/*
	 * The section's own horizontal padding would otherwise cap how far the
	 * slider can scroll — its last card (and the trailing peek) could never
	 * reach the true screen edge, stopping short at the padded inset instead.
	 * So the section drops its horizontal padding at this breakpoint
	 * (vertical padding is unaffected) and __header takes over that inset as
	 * its own padding; overflow: hidden is a safety net containing the
	 * slider's scrollable content to the section itself, not just to __row.
	 */
	.wp-block-andrei-saguna-steps-section {
		overflow: hidden;
		padding-left: 0;
		padding-right: 0;
	}

	.wp-block-andrei-saguna-steps-section__header {
		padding-left: var(--wp--preset--spacing--4);
		padding-right: var(--wp--preset--spacing--4);
	}

	/*
	 * __steps gets its own matching padding for the inset instead — BUT
	 * scroll-snap-type needs its "safe" scroll area told about that padding
	 * explicitly via scroll-padding, or the snap algorithm treats resting at
	 * scrollLeft:0 as the first card's own edge being the correct "start"
	 * snap position, and scrolls straight past the padding to get there —
	 * i.e. the inset would be set correctly but never actually visible.
	 * scroll-padding is a distinct property from padding specifically for
	 * this reason (it doesn't add real space, just constrains snapping).
	 */
	.wp-block-andrei-saguna-steps-section__steps {
		height: auto;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-left: var(--wp--preset--spacing--4);
		padding-right: var(--wp--preset--spacing--4);
		scroll-padding-left: var(--wp--preset--spacing--4);
		scroll-padding-right: var(--wp--preset--spacing--4);
		/*
		 * Scrollbar hidden, not removed: still fully scrollable/swipeable,
		 * just without the visible track/thumb a slider like this doesn't
		 * need. scrollbar-width covers Firefox; the pseudo-element below
		 * covers Chromium/Safari (both WebKit- and Blink-based).
		 */
		scrollbar-width: none;
		/* Claims horizontal drag/swipe gestures for the shared slider.js drag
		 * behavior instead of the browser's own native touch scrolling, which
		 * would otherwise fight it; vertical page scrolling is unaffected. */
		touch-action: pan-y;
		cursor: grab;
	}

	.wp-block-andrei-saguna-steps-section__steps::-webkit-scrollbar {
		display: none;
	}

	/*
	 * "scroll-snap-type: none" here is what actually lets the drag move
	 * backward off the last (or first) card. With mandatory snap still
	 * active during the gesture, resting exactly on a snapped card is a
	 * strict boundary Chrome/Safari actively resist leaving via a direct
	 * ".scrollLeft =" write (as opposed to a real native scroll/fling) - the
	 * browser keeps correcting the position back to that same snap point
	 * while the pointer is still down, which reads as "forward keeps
	 * working, backward from the end does nothing" since forward drags
	 * off the boundary don't fight the same correction. Snapping only needs
	 * to apply once the gesture ends and slider.js's own goToIndex() issues
	 * its "scroll-behavior: smooth" scrollTo() - re-enabled the moment
	 * ".is-dragging" comes off on pointerup (same toggle already used for
	 * "scroll-behavior" above, for a related reason).
	 */
	.wp-block-andrei-saguna-steps-section__steps.is-dragging {
		cursor: grabbing;
		scroll-behavior: auto;
		scroll-snap-type: none;
		user-select: none;
	}
}