/**
 * Foxlight Carousel — shared styles (front end + editor preview).
 *
 * Layout rules that matter:
 *
 * 1. The card is a flex column in normal flow. Nothing inside it is absolutely
 *    positioned except the image, so the meta label and the text can never
 *    overlap no matter how small the card gets or how long the copy is.
 * 2. Typography scales off the CARD's width via container queries, not the
 *    viewport. A narrow card gets small type; the same block at full width gets
 *    large type, with no breakpoint guessing.
 * 3. Slide width is a single subtraction, and cards-per-view is a class rather
 *    than arithmetic on a custom property, so an unexpected value can never
 *    produce an invalid calc() and collapse the layout.
 */

.fxac {
	/* Palette */
	--fxac-background-color: transparent;
	--fxac-heading-color: #ffffff;
	--fxac-body-color: rgba(255, 255, 255, 0.9);
	--fxac-meta-color: #ffffff;
	--fxac-meta-bg: rgba(0, 0, 0, 0.55);
	--fxac-button-bg: #ffffff;
	--fxac-button-color: #16181d;
	--fxac-dot-color: #c9c9c4;
	--fxac-dot-active-color: #6b6b66;

	/* Typography — the site's fonts, not the app's. */
	--fxac-heading-font: "Montserrat", system-ui, -apple-system, "Segoe UI",
		sans-serif;
	--fxac-body-font: "Geologica", system-ui, -apple-system, "Segoe UI",
		sans-serif;

	/* Metrics */
	--fxac-radius: 14px;
	--fxac-gap: 12px;
	--fxac-peek: 14%;
	--fxac-edge: 16px;
	--fxac-pad: 16px;
	--fxac-ratio: 3 / 2;
	--fxac-max-height: 420px;

	position: relative;
	background-color: var(--fxac-background-color);
}

.fxac--has-background {
	padding-block: 20px;
}

.fxac--title-left .fxac__title {
	text-align: start;
}

.fxac--title-center .fxac__title {
	text-align: center;
}

.fxac--title-right .fxac__title {
	text-align: end;
}

.fxac__title {
	margin: 0 0 12px;
	padding-inline: var(--fxac-edge);
	font-family: var(--fxac-heading-font);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Viewport and track
   -------------------------------------------------------------------------- */

.fxac__viewport {
	position: relative;
}

.fxac__track {
	display: flex;
	align-items: flex-start;
	gap: var(--fxac-gap);
	margin: 0;
	padding: 0 var(--fxac-edge);
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: var(--fxac-edge);
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.fxac__track::-webkit-scrollbar {
	display: none;
}

.fxac__slide {
	flex: 0 0 auto;
	inline-size: calc(100% - var(--fxac-peek));
	min-inline-size: min(180px, 100%);
	margin: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.fxac__slide:last-child {
	scroll-snap-align: end;
}

.fxac--is-dragging .fxac__track {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.fxac__card {
	container-type: inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	box-sizing: border-box;
	inline-size: 100%;
	aspect-ratio: var(--fxac-ratio);
	max-block-size: var(--fxac-max-height);
	padding: var(--fxac-pad);
	border-radius: var(--fxac-radius);
	overflow: hidden;
	background-color: #24262b;
	color: inherit;
	text-align: start;
	text-decoration: none;
	isolation: isolate;
}

/* Themes commonly style content links with an underline and a hover colour.
   These selectors are specific enough to win without resorting to !important. */
.fxac a.fxac__card,
.fxac a.fxac__card:hover,
.fxac a.fxac__card:focus,
.fxac a.fxac__card:active,
.fxac a.fxac__card:visited {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

.fxac .fxac__card *,
.fxac .fxac__card *:hover {
	text-decoration: none;
}

.fxac__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
}

.fxac__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

a.fxac__card:hover .fxac__image,
a.fxac__card:focus-visible .fxac__image {
	transform: scale(1.045);
}

.fxac__image--empty {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	background: linear-gradient(135deg, #3a3d45, #24262b);
}

/* Legibility scrim: light at the top, heavier under the text. */
.fxac__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to bottom, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 30%),
		linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 55%);
	pointer-events: none;
}

/* Meta and content sit in flow above the image — they cannot collide. */
.fxac__meta {
	position: relative;
	z-index: 2;
	align-self: flex-start;
	max-inline-size: 100%;
	padding: 5px 11px;
	border-radius: 8px;
	background-color: var(--fxac-meta-bg);
	color: var(--fxac-meta-color);
	font-family: var(--fxac-body-font);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.fxac__content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-block-start: auto;
}

.fxac__text {
	display: block;
	min-inline-size: 0;
}

.fxac__heading {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	color: var(--fxac-heading-color);
	font-family: var(--fxac-heading-font);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: break-word;
}

.fxac__body {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 5px 0 0;
	color: var(--fxac-body-color);
	font-family: var(--fxac-body-font);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.4;
	overflow-wrap: break-word;
}

.fxac__button {
	display: inline-block;
	flex: 0 1 auto;
	padding: 8px 15px;
	border-radius: 999px;
	background-color: var(--fxac-button-bg);
	color: var(--fxac-button-color);
	font-family: var(--fxac-body-font);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	transition: transform 150ms ease, filter 150ms ease;
}

a.fxac__card:hover .fxac__button,
a.fxac__card:focus-visible .fxac__button {
	filter: brightness(0.92);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

/* Deepen the scrim slightly on hover so the text stays legible as the image
   moves underneath it. */
a.fxac__card:hover::after,
a.fxac__card:focus-visible::after {
	background:
		linear-gradient(to bottom, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0) 30%),
		linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0) 58%);
}

.fxac__card::after {
	transition: background 400ms ease;
}

/* --------------------------------------------------------------------------
   Type scale, driven by the card's own width
   -------------------------------------------------------------------------- */

/* Below this, a button beside the text leaves nothing for the heading. */
@container (max-width: 300px) {
	.fxac__content {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

@container (min-width: 340px) {
	.fxac__card {
		--fxac-pad: 18px;
	}

	.fxac__meta {
		font-size: 0.8125rem;
	}

	.fxac__heading {
		font-size: 1.25rem;
	}

	.fxac__body {
		font-size: 0.8rem;
	}

	.fxac__button {
		padding: 9px 18px;
		font-size: 0.85rem;
	}
}

@container (min-width: 460px) {
	.fxac__card {
		--fxac-pad: 20px;
	}

	.fxac__heading {
		font-size: 1.5rem;
	}

	.fxac__body {
		font-size: 0.85rem;
	}

	.fxac__button {
		padding: 11px 22px;
		font-size: 0.9rem;
	}
}

/* --------------------------------------------------------------------------
   Arrows and pagination
   -------------------------------------------------------------------------- */

.fxac__arrow {
	position: absolute;
	inset-block-start: 50%;
	z-index: 4;
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.94);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	color: #16181d;
	cursor: pointer;
	transition: opacity 150ms ease;
}

.fxac__arrow svg {
	inline-size: 20px;
	block-size: 20px;
}

.fxac__arrow--prev {
	inset-inline-start: calc(var(--fxac-edge) / 2);
}

.fxac__arrow--next {
	inset-inline-end: calc(var(--fxac-edge) / 2);
}

.fxac__arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

.fxac__pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-block-start: 14px;
	padding-block: 8px;
}

.fxac__dot {
	position: relative;
	inline-size: 8px;
	block-size: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: var(--fxac-dot-color);
	cursor: pointer;
	transition: background-color 150ms ease, transform 150ms ease;
}

.fxac__dot[aria-current="true"] {
	background-color: var(--fxac-dot-active-color);
	transform: scale(1.15);
}

/* Comfortable tap target without changing the visual dot size. */
.fxac__dot::after {
	content: "";
	position: absolute;
	inset: -10px;
}

/* --------------------------------------------------------------------------
   Sizes
   -------------------------------------------------------------------------- */

.fxac--size-small {
	--fxac-ratio: 16 / 9;
	--fxac-max-height: 320px;
}

.fxac--size-medium {
	--fxac-ratio: 3 / 2;
	--fxac-max-height: 420px;
}

.fxac--size-large {
	--fxac-ratio: 4 / 3;
	--fxac-max-height: 520px;
}

/* --------------------------------------------------------------------------
   Cards per view — discrete classes, never arithmetic on a custom property
   -------------------------------------------------------------------------- */

@media (min-width: 782px) {
	.fxac {
		--fxac-edge: 24px;
		--fxac-gap: 16px;
		--fxac-peek: 18%;
		--fxac-radius: 16px;
	}

	.fxac--per-view-2 {
		--fxac-peek: 8%;
	}

	.fxac--per-view-2 .fxac__slide {
		inline-size: calc((100% - var(--fxac-peek) - var(--fxac-gap)) / 2);
	}

	.fxac--per-view-3 {
		--fxac-peek: 6%;
	}

	.fxac--per-view-3 .fxac__slide {
		inline-size: calc((100% - var(--fxac-peek) - 2 * var(--fxac-gap)) / 3);
	}

	.fxac--per-view-4 {
		--fxac-peek: 5%;
	}

	.fxac--per-view-4 .fxac__slide {
		inline-size: calc((100% - var(--fxac-peek) - 3 * var(--fxac-gap)) / 4);
	}
}

/* --------------------------------------------------------------------------
   Portrait design

   Deliberately NOT a separate layout: it uses the same slide width, peek,
   start alignment, per-view classes and arrow positions as Standard. The only
   differences are a taller ratio and centred card content, so anything that
   works in Standard works here too.
   -------------------------------------------------------------------------- */

.fxac--design-portrait {
	--fxac-ratio: 3 / 4;
	--fxac-max-height: 620px;
}

.fxac--design-portrait .fxac__card {
	justify-content: flex-end;
	text-align: center;
}

.fxac--design-portrait .fxac__meta {
	align-self: center;
}

.fxac--design-portrait .fxac__content {
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.fxac--design-portrait .fxac__heading,
.fxac--design-portrait .fxac__body {
	-webkit-line-clamp: 3;
}

/* Dark arrows read better over portrait imagery. Position is inherited. */
.fxac--design-portrait .fxac__arrow {
	background-color: rgba(0, 0, 0, 0.55);
	color: #ffffff;
	box-shadow: none;
}

.fxac--design-portrait .fxac__arrow:hover {
	background-color: rgba(0, 0, 0, 0.72);
}

/* Size varies the ratio within the portrait design. */
.fxac--design-portrait.fxac--size-small {
	--fxac-ratio: 4 / 5;
	--fxac-max-height: 480px;
}

.fxac--design-portrait.fxac--size-medium {
	--fxac-ratio: 3 / 4;
	--fxac-max-height: 620px;
}

.fxac--design-portrait.fxac--size-large {
	--fxac-ratio: 2 / 3;
	--fxac-max-height: 720px;
}

/* --------------------------------------------------------------------------
   Single card — a full-width featured card, no peek, nothing to scroll
   -------------------------------------------------------------------------- */

.fxac--single .fxac__slide {
	inline-size: 100%;
}

.fxac--single .fxac__track {
	scroll-snap-type: none;
	overflow-x: visible;
}

.fxac--single.fxac--design-portrait .fxac__track {
	justify-content: center;
}

.fxac--single.fxac--design-portrait .fxac__slide {
	inline-size: min(100%, 460px);
}

/* --------------------------------------------------------------------------
   Focus and motion
   -------------------------------------------------------------------------- */

.fxac a:focus-visible,
.fxac button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

a.fxac__card:focus-visible {
	outline: 3px solid var(--fxac-button-bg);
	outline-offset: 3px;
}

.fxac__dot:focus-visible {
	outline: 2px solid var(--fxac-dot-active-color);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.fxac__track {
		scroll-behavior: auto;
	}

	.fxac__button,
	.fxac__dot,
	.fxac__arrow,
	.fxac__image,
	.fxac__card::after {
		transition: none;
	}

	a.fxac__card:hover .fxac__image,
	a.fxac__card:focus-visible .fxac__image {
		transform: none;
	}
}

/* Fallback for themes without core's screen-reader class. */
.fxac .screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}