/* Small Group Journeys: USP carousel (v2, Figma 402:2417, mobile 405:3072;
 * components Carousel/USP 402:2399 and Carousel/USP Mobile 405:3033).
 *
 * Replaces the v1 Why section (the id why-small-group stays). Sand section;
 * the heading and arrows sit on the 1400px container, the cards start on the
 * container edge and run off the right of the screen, with a progress bar
 * under them. Swiper, the slider the live theme already loads, runs it
 * (assets/js/sgj/usp-carousel.js). Port this file to astra-child with the
 * section markup and the icons (assets/images/icons/usp-01.svg to 09). */

.ot-section.g--sgj-usp {
	/* The container's gutter: 20px, or centred in 1400px. */
	--sgj-usp-gutter: max(20px, calc((100% - 1400px) / 2));
	display: grid;
	grid-template-columns: var(--sgj-usp-gutter) minmax(0, 1fr) auto var(--sgj-usp-gutter);
	grid-template-areas:
		". head arrows ."
		"track track track track"
		". progress progress .";
	align-items: end;
	row-gap: 0;
	padding: 110px 0 120px;
	/* Cream, the live sections' rgb(241, 237, 230). */
	background-color: #f1ede6;
}

/* Header: eyebrow (gold) and the h2, first line 400, second 300. */
.g--sgj-usp__head {
	grid-area: head;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.g--sgj-usp__head > * {
	margin: 0;
}

.ot-section.g--sgj-usp .g--sgj-usp__head p.ot-section__eyebrow {
	font-family: var(--heading-font-family);
	font-size: var(--h4-font-size);
	font-weight: 400;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--ast-global-color-0);
}

.g--sgj-usp__head h2 {
	color: var(--ast-global-color-1);
	line-height: 1.3;
}

.g--sgj-usp__arrows {
	grid-area: arrows;
	display: flex;
	gap: 12px;
}

/* Track: cards 400 x 363, 24 apart, starting on the container edge (the
 * Swiper offsets). The 56px above and 88px below give the shadow room. */
.g--sgj-usp__swiper {
	grid-area: track;
	width: 100%;
	margin-top: 48px;
	padding: 8px 0 40px;
}

.g--sgj-usp__swiper:focus-visible {
	outline: 2px solid var(--ast-global-color-0);
	outline-offset: -2px;
}

.g--sgj-usp__swiper .swiper-wrapper {
	/* Swiper's own row layout, repeated so the cards are a row before
	 * swiper-bundle.min.css (loaded without blocking) arrives. */
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.g--sgj-usp__swiper .swiper-slide {
	flex-shrink: 0;
	width: 400px;
	height: auto;
}

/* Without JavaScript, or before Swiper starts, the cards are a row that
 * scrolls sideways from the container edge. */
.g--sgj-usp__swiper:not(.swiper-initialized) {
	overflow-x: auto;
}

.g--sgj-usp__swiper:not(.swiper-initialized) .swiper-wrapper {
	gap: 24px;
	padding: 0 var(--sgj-usp-gutter);
}

/* Card: white, radius 20, soft navy shadow, centred; equal heights. Swiper's
 * wrapper is content-box, so the card sets border-box itself. */
.sgj-usp-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	height: 100%;
	min-height: 363px;
	padding: 48px 40px;
	border-radius: var(--card-border-radius);
	background-color: var(--ast-global-color-4);
	box-shadow: 0 16px 40px rgba(0, 52, 90, 0.06);
	text-align: center;
}

/* Icon: a 64px gold badge in a 96px cream circle, white 30px icon. */
.sgj-usp-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	margin-bottom: 10px;
	border-radius: 50%;
	background-color: #f1ede6;
}

.sgj-usp-card__icon img {
	box-sizing: content-box;
	width: 30px;
	height: 30px;
	padding: 17px;
	border-radius: 50%;
	background-color: var(--ast-global-color-0);
}

.sgj-usp-card__title {
	margin: 0;
	color: var(--ast-global-color-1);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
}

.sgj-usp-card p {
	margin: 0;
	color: var(--ast-global-color-2);
	font-size: 16px;
	line-height: 28px;
}

/* Progress: Swiper's progressbar pagination, 3px, navy 12% track, gold fill,
 * on the container under the cards. */
.ot-section.g--sgj-usp .g--sgj-usp__progress {
	grid-area: progress;
	position: relative;
	top: auto;
	left: auto;
	width: auto;
	height: 3px;
	margin-top: 48px;
	overflow: hidden;
	border-radius: 2px;
	background-color: rgba(0, 52, 90, 0.12);
}

.g--sgj-usp__progress .swiper-pagination-progressbar-fill {
	position: absolute;
	inset: 0;
	border-radius: 2px;
	background-color: var(--ast-global-color-0);
	transform-origin: left top;
}

.g--sgj-usp:not(:has(.swiper-initialized)) .g--sgj-usp__arrows,
.g--sgj-usp:not(:has(.swiper-initialized)) .g--sgj-usp__progress {
	visibility: hidden;
}

/* Arrow buttons (Button/Arrow): white with a gold ring, or grey when there is
 * nothing more to scroll to. */
.sgj-arrow,
.sgj-arrow:hover,
.sgj-arrow:focus {
	display: block;
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
	box-shadow: none;
	cursor: pointer;
}

.sgj-arrow--prev,
.sgj-arrow--prev:hover,
.sgj-arrow--prev:focus {
	background-image: url("../icons/arrow-prev.svg");
}

.sgj-arrow--next,
.sgj-arrow--next:hover,
.sgj-arrow--next:focus {
	background-image: url("../icons/arrow-next.svg");
}

.sgj-arrow--prev:disabled {
	background-image: url("../icons/arrow-prev-disabled.svg");
	cursor: default;
}

.sgj-arrow--next:disabled {
	background-image: url("../icons/arrow-next-disabled.svg");
	cursor: default;
}

.sgj-arrow:focus-visible {
	outline: 2px solid var(--ast-global-color-0);
	outline-offset: 2px;
}

/* Below 900: 300px cards 16 apart, padding 36 / 24, icon 80 / 56 / 26, title
 * Hypatia 300 22, text 15/26.25. The arrows move under the cards, beside the
 * progress bar (gap 20). */
@media (max-width: 899px) {
	.ot-section.g--sgj-usp {
		grid-template-areas:
			". head head ."
			"track track track track"
			". progress arrows .";
		align-items: center;
		column-gap: 0;
		padding: 55px 0;
	}

	.g--sgj-usp__head {
		gap: 10px;
	}

	.g--sgj-usp__swiper {
		margin-top: 28px;
		padding: 4px 0 28px;
	}

	.g--sgj-usp__swiper .swiper-slide {
		width: 300px;
	}

	.g--sgj-usp__swiper:not(.swiper-initialized) .swiper-wrapper {
		gap: 16px;
	}

	.sgj-usp-card {
		gap: 12px;
		min-height: 331px;
		padding: 36px 24px;
		box-shadow: 0 10px 24px rgba(0, 52, 90, 0.06);
	}

	.sgj-usp-card__icon {
		width: 80px;
		height: 80px;
		margin-bottom: 6px;
	}

	.sgj-usp-card__icon img {
		width: 26px;
		height: 26px;
		padding: 15px;
	}

	.sgj-usp-card__title {
		font-size: 22px;
		font-weight: 300;
	}

	.sgj-usp-card p {
		font-size: 15px;
		line-height: 26.25px;
	}

	.ot-section.g--sgj-usp .g--sgj-usp__progress {
		margin: 28px 20px 0 0;
	}

	.g--sgj-usp__arrows {
		gap: 10px;
		margin-top: 28px;
	}
}