/**
 * Success Stories sections (template-parts/pages/success-stories/).
 *
 * Loaded only on the Success Stories page template (see inc/enqueue.php). The
 * cards are the shared course card; only the story pop-up (Bootstrap modal +
 * carousel) is styled here.
 */

/* Story pop-up ------------------------------------------------------------ */
.story-modal .modal-content {
	position: relative;
	border: 1px solid var(--aq-border);
	background: var(--aq-bg);
}

.story-modal__close {
	position: absolute;
	top: clamp(16px, 1.6vw, 24px);
	right: clamp(16px, 1.6vw, 24px);
	z-index: 3;
}

.story-modal__header {
	padding: clamp(18px, 1.8vw, 26px);
	padding-right: 64px;
	border-bottom: 1px solid var(--aq-border);
}

.story-modal__header .eyebrow {
	margin-bottom: 8px;
}

.story-modal__body {
	padding: clamp(12px, 1.6vw, 24px);
}

.story-modal__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Previous / next arrows: centred on the pop-up's left and right edges. */
.story-carousel__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--aq-border);
	border-radius: var(--aq-radius);
	background: var(--aq-bg);
	color: var(--aq-primary);
	font-size: 20px;
	line-height: 1;
	transform: translateY(-50%);
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.story-carousel__nav--prev {
	left: -24px;
}

.story-carousel__nav--next {
	right: -24px;
}

.story-carousel__nav:hover,
.story-carousel__nav:focus-visible {
	border-color: var(--aq-primary);
	background: var(--aq-primary);
	color: var(--aq-white);
}

.story-carousel__nav:focus-visible {
	outline: 2px solid var(--aq-primary);
	outline-offset: 2px;
}

/* Narrow screens: keep the arrows inside the pop-up. */
@media (max-width: 620px) {
	.story-carousel__nav {
		width: 40px;
		height: 40px;
	}

	.story-carousel__nav--prev {
		left: 6px;
	}

	.story-carousel__nav--next {
		right: 6px;
	}
}