/*
 * 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-testimonials-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--16) var(--wp--preset--spacing--4);
	background-color: var(--wp--preset--color--base-white);
	/* Contains the slider's card overflow to the section itself, never the page. */
	overflow: hidden;
}

.wp-block-andrei-saguna-testimonials-section__heading-row {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	margin-bottom: var(--wp--preset--spacing--12);
}

h2.wp-block-andrei-saguna-testimonials-section__heading {
	margin: 0;
	/* Aligns the heading above the slider: sidebar width (200px) + row gap (spacing/6). */
	padding-left: calc(200px + var(--wp--preset--spacing--6));
	font-family: var(--wp--preset--font-family--ivypresto-headline);
	font-size: var(--wp--preset--font-size--h-1);
	line-height: 1.1;
	color: #002547;
}

/*
 * Deliberately asymmetric, desktop only: the left edge lines up with the
 * same centered 1360px column every other section uses (so the sidebar
 * sits under the heading exactly like elsewhere), but there's no matching
 * max-width/margin-inline:auto on the right — past 1360px+padding the row
 * keeps extending toward the section's own right edge instead of freezing
 * at a fixed 1360px. A capped row was tried first and reverted: once the
 * viewport is wider than 1360px, a capped row's width (and so the "peek of
 * the next card") stops growing entirely, while the empty margin on both
 * sides of that centered box keeps growing — past a certain screen width
 * that reads as "no more cards on the right" even though a sliver is still
 * technically cut off. Letting the row keep pace with the viewport instead
 * keeps that peek visually obvious at any width. `max()` collapses this to
 * a plain 0 (i.e. a normal left-aligned row) on any screen at or below
 * content-size, where there's no extra width to give it anyway.
 *
 * box-sizing: border-box is load-bearing here, the same way it was on
 * __heading-row earlier: with the default content-box, "width: 100%" plus
 * this padding-left would ADD the padding on top of that 100%, rendering
 * the row wider than the section's own content box can actually hold. The
 * excess (exactly the padding-left amount — bigger on a bigger screen) then
 * got silently clipped by the section's overflow: hidden safety net, so the
 * last card or two were invisible in the actual browser even though
 * DevTools' element outline (which draws an element's full geometry
 * regardless of an ancestor clipping part of it) made the row look like it
 * fit. border-box makes the padding eat into that 100% instead.
 */
.wp-block-andrei-saguna-testimonials-section__row {
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--6);
	width: 100%;
	padding-left: max(0px, calc((100vw - var(--wp--style--global--content-size)) / 2 - var(--wp--preset--spacing--4)));
}

.wp-block-andrei-saguna-testimonials-section__sidebar {
	flex: 0 0 200px;
	max-width: 200px;
}

p.wp-block-andrei-saguna-testimonials-section__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--neue-haas-grotesk);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: 1.4;
	letter-spacing: 0.28px;
	color: var(--wp--preset--color--border-subtle-on-dark);
}

/*
 * Permanent horizontal slider, not a wrapping grid: cards keep a fixed
 * width (testimonial-card/style.css) and simply overflow past the right
 * edge; scrolling reveals more and slides earlier ones off to the left.
 * Scrollbar hidden — still fully scrollable/swipeable, just no visible
 * track (same technique as the Steps section's mobile slider).
 */
.wp-block-andrei-saguna-testimonials-section__slider {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	gap: var(--wp--preset--spacing--6);
	overflow-x: auto;
	scroll-behavior: smooth;
	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-testimonials-section__slider::-webkit-scrollbar {
	display: none;
}

.wp-block-andrei-saguna-testimonials-section__slider.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
}

@media (max-width: 767px) {
	h2.wp-block-andrei-saguna-testimonials-section__heading {
		padding-left: 0;
	}

	.wp-block-andrei-saguna-testimonials-section__heading-row {
		margin-bottom: var(--wp--preset--spacing--8);
		padding-left: var(--wp--preset--spacing--4);
		padding-right: var(--wp--preset--spacing--4);
	}

	.wp-block-andrei-saguna-testimonials-section__row {
		flex-direction: column;
		gap: var(--wp--preset--spacing--8);
		padding-left: 0;
		/*
		 * The base rule's align-items: flex-start (desktop-only: keeps the
		 * sidebar top-aligned instead of stretched to the slider's 565px
		 * height) has a side effect once flex-direction turns column here —
		 * children no longer stretch to the row's own width, so __slider
		 * simply grew to fit all its cards' natural combined width instead
		 * of being constrained to the screen, and whatever didn't fit was
		 * just clipped by the section's overflow: hidden rather than being
		 * scrollable — there was nothing to actually slide. Restoring
		 * stretch here is what makes __slider's own overflow-x meaningful.
		 */
		align-items: stretch;
	}

	/*
	 * Same bleed technique as the Steps section: the section drops its own
	 * horizontal padding so the slider can scroll its cards flush to the
	 * true screen edges, and __sidebar/__slider each take over that inset
	 * as their own padding instead.
	 */
	.wp-block-andrei-saguna-testimonials-section {
		padding-left: 0;
		padding-right: 0;
	}

	.wp-block-andrei-saguna-testimonials-section__sidebar {
		flex: 1 1 100%;
		max-width: 100%;
		padding-left: var(--wp--preset--spacing--4);
		padding-right: var(--wp--preset--spacing--4);
	}

	/*
	 * "1 card + ~20% of the next, always" — same technique as the Steps
	 * section's mobile slider: scroll-snap-type here needs scroll-padding
	 * (not just padding) to actually show the leading gutter at rest,
	 * rather than the snap algorithm scrolling straight past it — see
	 * steps-section/style.css for the full explanation of why plain
	 * padding alone isn't enough once scroll-snap-type is involved.
	 */
	.wp-block-andrei-saguna-testimonials-section__slider {
		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);
	}

	/*
	 * "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" in the desktop-scoped ".is-dragging" rule above, for
	 * a related reason).
	 */
	.wp-block-andrei-saguna-testimonials-section__slider.is-dragging {
		scroll-snap-type: none;
	}
}