/*
 * Steps accordion. Figma: 06 Pași (acordeon) (node 60:245), desktop frame 1512.
 * Left column 424px, 48px gap, then a 540px-tall accordion: the open step takes the free width
 * (640px in Figma), closed steps are 88px wide strips with a rotated title. Hovering a step opens it.
 * Mobile: the steps become a swipe slider (about 1.1 cards in view) that bleeds to the screen edge.
 */
.sm-steps {
	--sm-step-closed: 88px;
	box-sizing: border-box;
	padding-block: calc(var(--wp--preset--spacing--96) + var(--wp--preset--spacing--16));
	background-color: var(--wp--preset--color--neutral-white);
	color: var(--wp--preset--color--brand-navy);
}

.sm-steps--pale {
	background-color: var(--wp--preset--color--neutral-pale);
}

.sm-steps *,
.sm-steps *::before,
.sm-steps *::after {
	box-sizing: border-box;
}

.sm-steps__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--48);
	width: 100%;
	max-width: calc(1320px + 2 * var(--sm-page-padding));
	margin-inline: auto;
	padding-inline: var(--sm-page-padding);
}

/* Left column */
.sm-steps__left {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	width: 424px;
	max-width: 100%;
}

.sm-steps__left > * {
	margin: 0;
}

.sm-steps__title {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--brand-navy);
}

.sm-steps__text {
	font-size: var(--wp--preset--font-size--body-l);
	line-height: 1.667;
	color: var(--wp--preset--color--neutral-muted);
}

.sm-steps__ctas {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--12);
	padding-top: var(--wp--preset--spacing--8);
}

.sm-steps__hint {
	font-size: var(--wp--preset--font-size--small);
	line-height: 22px;
	color: var(--wp--preset--color--neutral-muted);
}

/* Accordion */
.sm-steps__list {
	display: grid;
	flex: 1 1 0;
	grid-template-columns: var(--sm-steps-cols);
	gap: var(--wp--preset--spacing--16);
	container-type: inline-size;
	min-width: 0;
	height: 540px;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: grid-template-columns 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sm-step {
	position: relative;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--md);
	background-color: var(--wp--preset--color--brand-navy-dark);
	color: var(--wp--preset--color--neutral-white);
	cursor: pointer;
	outline-offset: 3px;
	transition: box-shadow 0.5s ease;
}

.sm-step.is-open {
	box-shadow: 0 12px 32px 0 color-mix(in srgb, var(--wp--preset--color--brand-navy-dark) 8%, transparent);
}

.sm-step__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Two shades cross-fade: dark strip (closed) and soft bottom gradient (open) */
.sm-step__shade {
	position: absolute;
	inset: 0;
	transition: opacity 0.4s ease;
}

.sm-step__shade--closed {
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--wp--preset--color--brand-navy) 35%, transparent),
		color-mix(in srgb, var(--wp--preset--color--brand-navy) 95%, transparent)
	);
	opacity: 1;
}

.sm-step__shade--open {
	background: linear-gradient(
		190deg,
		transparent 58%,
		color-mix(in srgb, var(--wp--preset--color--brand-navy) 50%, transparent) 91%
	);
	opacity: 0;
}

.sm-step.is-open .sm-step__shade--closed {
	opacity: 0;
}

.sm-step.is-open .sm-step__shade--open {
	opacity: 1;
}

/* Number: white chip with red digit when closed, red chip with white digit when open */
.sm-step__num {
	position: absolute;
	top: 24px;
	left: 22px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--preset--border-radius--pill);
	background-color: var(--wp--preset--color--neutral-white);
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--brand-red);
	transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease, color 0.4s ease;
}

.sm-step.is-open .sm-step__num {
	left: 24px;
	background-color: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--neutral-white);
}

/* Closed: title written bottom-to-top */
.sm-step__vtitle {
	position: absolute;
	bottom: 24px;
	left: 50%;
	max-height: calc(100% - 112px);
	overflow: hidden;
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 600;
	line-height: 26px;
	text-overflow: ellipsis;
	white-space: nowrap;
	writing-mode: vertical-rl;
	transform: translateX(-50%) rotate(180deg);
	transition: opacity 0.25s ease 0.15s;
}

.sm-step.is-open .sm-step__vtitle {
	opacity: 0;
	transition-delay: 0s;
}

/* Open: title + text at the bottom, fade in once the card has widened */
/* The body always has the width of the OPEN card (list width minus the closed strips), so the
   text never re-wraps while the card widens or collapses. The card clips the overflow. */
.sm-step__body {
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(100cqw - var(--sm-closed-total, 0px));
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	padding: var(--wp--preset--spacing--24);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.sm-step.is-open .sm-step__body {
	opacity: 1;
	transform: none;
	transition: opacity 0.35s ease 0.2s, transform 0.35s ease 0.2s;
	pointer-events: auto;
}

.sm-step__title,
.sm-step__text {
	margin: 0;
	color: inherit;
}

.sm-step__title {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 700;
	line-height: 1.333;
	letter-spacing: -0.01em;
}

.sm-step__text {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.625;
}

@media (prefers-reduced-motion: reduce) {
	.sm-steps__list,
	.sm-step,
	.sm-step *,
	.sm-step__shade {
		transition: none !important;
	}
}

/* Tablet: left column on top, accordion below at full width */
@media (max-width: 1024px) {
	.sm-steps__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--48);
	}

	.sm-steps__left {
		width: 100%;
	}

	.sm-steps__list {
		flex: none;
		width: 100%;
	}
}

/* Mobile: swipe slider, ~1.1 cards in view, bleeding to the screen edge */
@media (max-width: 767px) {
	.sm-steps {
		padding-block: var(--wp--preset--spacing--64);
		overflow: hidden;
	}

	.sm-steps__inner {
		gap: var(--wp--preset--spacing--32);
	}

	.sm-steps__ctas {
		width: 100%;
	}

	.sm-steps__ctas .sm-btn {
		width: 100%;
	}

	/* The list is wider than the container (container + both gutters) so the next card shows at the right edge */
	.sm-steps__list {
		container-type: normal;
		display: flex;
		flex: none;
		gap: var(--wp--preset--spacing--16);
		width: calc(100% + 2 * var(--sm-page-padding));
		max-width: none;
		height: 440px;
		margin-inline: calc(-1 * var(--sm-page-padding));
		padding-inline: var(--sm-page-padding);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding-inline: var(--sm-page-padding);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		transition: none;
	}

	.sm-steps__list::-webkit-scrollbar {
		display: none;
	}

	/* Every card is shown in its "open" look. 100% = container width, so a card is (container + gutter) / 1.1 and the next one peeks in */
	.sm-step {
		flex: 0 0 calc((100% + var(--sm-page-padding)) / 1.1 - var(--wp--preset--spacing--16));
		scroll-snap-align: start;
		box-shadow: none;
	}

	.sm-step__shade--closed,
	.sm-step__vtitle {
		display: none;
	}

	.sm-step__shade--open {
		opacity: 1;
	}

	.sm-step__num {
		left: 24px;
		background-color: var(--wp--preset--color--brand-red);
		color: var(--wp--preset--color--neutral-white);
	}

	.sm-step__body {
		right: 0;
		width: auto;
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

/* Second line under a step title, e.g. "Ecografie" under "Consultație" (client feedback, 23 Oct 2026) */
.sm-step__subtitle {
	margin: 0;
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 600;
	line-height: 26px;
	color: var(--wp--preset--color--neutral-white);
}

/* Phone number in the step text: red pill (see .sm-phone-link in shared.css) */
.sm-step__text .sm-phone-link {
	margin-block: 2px;
	font-size: 1.125rem;
}

/* Stacked layout (tablet and phone): the call buttons sit under the steps slider, so the visitor first
   sees how the visit goes and then the buttons (client feedback, 26 Oct 2026). The left column is
   flattened (display: contents) so its children can be ordered around the list; the gaps below
   reproduce the previous spacing (20px inside the text, 48px / 32px around the list). */
@media (max-width: 1024px) {
	.sm-steps__inner {
		gap: 20px;
	}

	.sm-steps__left {
		display: contents;
	}

	.sm-steps__list {
		order: 1;
		margin-top: 28px;
	}

	.sm-steps__left > .sm-steps__ctas {
		order: 2;
		margin-top: 28px;
		padding-top: 0;
	}
}

@media (max-width: 767px) {
	.sm-steps__inner {
		gap: 20px;
	}

	.sm-steps__list {
		margin-top: 12px;
	}

	.sm-steps__left > .sm-steps__ctas {
		margin-top: 12px;
	}
}