/* FDA Slider — front end. Colors and sizes are CSS variables set per slider and per slide. */

.fda-slider {
	--fda-height: 100;
	--fda-max: 1240px;
	--fda-gutter: clamp(20px, 5vw, 64px);
	--fda-gap: clamp(32px, 5vw, 80px);
	--fda-font-heading: inherit;
	--fda-font-body: inherit;

	--fda-eyebrow-color: #5b6577;
	--fda-eyebrow-size: 15px;
	--fda-title-color: #14233f;
	--fda-title-size: 52px;
	--fda-title-weight: 600;
	--fda-desc-color: #3f4a5c;
	--fda-desc-size: 18px;
	--fda-fact-num-color: #14233f;
	--fda-fact-num-size: 28px;
	--fda-fact-label-color: #5b6577;

	--fda-btn-size: 15px;
	--fda-btn-weight: 500;
	--fda-btn-radius: 3px;
	--fda-btn-pad-y: 14px;
	--fda-btn-pad-x: 26px;

	--fda-btn1-bg: #14233f;
	--fda-btn1-color: #ffffff;
	--fda-btn1-border: #14233f;
	--fda-btn1-hover-bg: #24395f;
	--fda-btn1-hover-color: #ffffff;
	--fda-btn1-hover-border: #24395f;

	--fda-btn2-bg: transparent;
	--fda-btn2-color: #14233f;
	--fda-btn2-border: #14233f;
	--fda-btn2-hover-bg: #14233f;
	--fda-btn2-hover-color: #ffffff;
	--fda-btn2-hover-border: #14233f;

	--fda-nav-bg: #ffffff;
	--fda-nav-color: #5b6577;
	--fda-nav-accent: #14233f;

	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: calc(var(--fda-height) * 1vh);
	min-height: calc(var(--fda-height) * 1svh);
	overflow: hidden;
	font-family: var(--fda-font-body);
	line-height: 1.5;
	box-sizing: border-box;
}

.fda-slider *,
.fda-slider *::before,
.fda-slider *::after {
	box-sizing: inherit;
}

/* Every slide shares one grid cell, so the slider is as tall as its tallest slide. */
.fda-slider__track {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 1fr;
	touch-action: pan-y;
}

.fda-slider__slide {
	grid-area: 1 / 1;
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-width: 0;
	visibility: hidden;
	z-index: 0;
}

.fda-slider__slide.is-leaving {
	visibility: visible;
	z-index: 1;
}

.fda-slider__slide.is-active {
	visibility: visible;
	z-index: 2;
}

/* Background */
.fda-slider__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.fda-slider .fda-slider__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}

.fda-slider__overlay {
	position: absolute;
	inset: 0;
}

/* Layout: without an image, facts sit beside the text */
.fda-slider__inner {
	width: 100%;
	max-width: var(--fda-max);
	margin-inline: auto;
	padding: clamp(48px, 9vh, 96px) var(--fda-gutter);
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr);
	grid-template-areas: "text facts";
	column-gap: var(--fda-gap);
	align-items: center;
}

.fda-slider__text { grid-area: text; min-width: 0; }
.fda-slider__facts { grid-area: facts; min-width: 0; }
.fda-slider__media { grid-area: media; min-width: 0; }

/* Contained image: sits in a column of the content grid */
.media-contain .fda-slider__inner {
	grid-template-columns: minmax(0, 1fr) var(--fda-media-w);
	grid-template-areas:
		"text media"
		"facts media";
	align-content: center;
}

.media-contain.media-left .fda-slider__inner {
	grid-template-columns: var(--fda-media-w) minmax(0, 1fr);
	grid-template-areas:
		"media text"
		"media facts";
}

.fda-slider .media-contain .fda-slider__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 68vh;
	object-fit: contain;
}

/* Cover image: bleeds to the edge of the slide */
.media-cover .fda-slider__inner {
	max-width: none;
	margin: 0;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"text"
		"facts";
	padding-left: max(var(--fda-gutter), calc((100% - var(--fda-max)) / 2 + var(--fda-gutter)));
	padding-right: calc(var(--fda-media-w) + var(--fda-gap));
}

.media-cover.media-left .fda-slider__inner {
	padding-left: calc(var(--fda-media-w) + var(--fda-gap));
	padding-right: max(var(--fda-gutter), calc((100% - var(--fda-max)) / 2 + var(--fda-gutter)));
}

.media-cover .fda-slider__media {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: var(--fda-media-w);
}

.media-cover.media-left .fda-slider__media {
	right: auto;
	left: 0;
}

.fda-slider .media-cover .fda-slider__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.fda-slider .fda-slider__media {
	margin: 0;
	padding: 0;
}

.fda-slider .fda-slider__media img {
	border-radius: 0;
	box-shadow: none;
}

/* Text */
.fda-slider .fda-slider__eyebrow {
	margin: 0 0 18px;
	padding: 0;
	color: var(--fda-eyebrow-color);
	font-size: var(--fda-eyebrow-size);
	font-family: var(--fda-font-body);
	line-height: 1.5;
}

.fda-slider .fda-slider__title {
	margin: 0 0 22px;
	padding: 0;
	max-width: 20ch;
	color: var(--fda-title-color);
	font-family: var(--fda-font-heading);
	font-size: min(var(--fda-title-size), calc(1.35rem + 3.2vw));
	font-weight: var(--fda-title-weight);
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-transform: none;
	text-wrap: balance;
}

.fda-slider .fda-slider__desc {
	margin: 0 0 32px;
	padding: 0;
	max-width: 58ch;
	color: var(--fda-desc-color);
	font-size: min(var(--fda-desc-size), calc(0.9rem + 0.5vw));
	font-family: var(--fda-font-body);
	line-height: 1.65;
}

.fda-slider .fda-slider__desc a {
	color: inherit;
	text-decoration: underline;
}

/* Buttons */
.fda-slider__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.fda-slider a.fda-slider__btn {
	display: inline-block;
	padding: var(--fda-btn-pad-y) var(--fda-btn-pad-x);
	border: 1px solid;
	border-radius: var(--fda-btn-radius);
	font-family: var(--fda-font-body);
	font-size: var(--fda-btn-size);
	font-weight: var(--fda-btn-weight);
	line-height: 1.3;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 0.15s linear, color 0.15s linear, border-color 0.15s linear;
}

.fda-slider a.fda-slider__btn--primary,
.fda-slider a.fda-slider__btn--primary:visited {
	background: var(--fda-btn1-bg);
	color: var(--fda-btn1-color);
	border-color: var(--fda-btn1-border);
}

.fda-slider a.fda-slider__btn--primary:hover,
.fda-slider a.fda-slider__btn--primary:focus {
	background: var(--fda-btn1-hover-bg);
	color: var(--fda-btn1-hover-color);
	border-color: var(--fda-btn1-hover-border);
}

.fda-slider a.fda-slider__btn--secondary,
.fda-slider a.fda-slider__btn--secondary:visited {
	background: var(--fda-btn2-bg);
	color: var(--fda-btn2-color);
	border-color: var(--fda-btn2-border);
}

.fda-slider a.fda-slider__btn--secondary:hover,
.fda-slider a.fda-slider__btn--secondary:focus {
	background: var(--fda-btn2-hover-bg);
	color: var(--fda-btn2-hover-color);
	border-color: var(--fda-btn2-hover-border);
}

/* Facts: a ruled list beside the text */
.fda-slider__fact {
	padding: 16px 0;
	border-top: 1px solid color-mix(in srgb, var(--fda-fact-label-color) 35%, transparent);
}

.fda-slider__fact-num,
.fda-slider__fact-label {
	display: block;
}

.fda-slider__fact-num {
	color: var(--fda-fact-num-color);
	font-family: var(--fda-font-heading);
	font-size: var(--fda-fact-num-size);
	font-weight: 600;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.fda-slider__fact-label {
	margin-top: 4px;
	color: var(--fda-fact-label-color);
	font-size: 14px;
	line-height: 1.4;
}

/* Facts in a row when an image takes the side column */
.has-media .fda-slider__facts,
.is-center .fda-slider__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 16px clamp(24px, 3vw, 40px);
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid color-mix(in srgb, var(--fda-fact-label-color) 35%, transparent);
}

.has-media .fda-slider__fact,
.is-center .fda-slider__fact {
	flex: 0 1 auto;
	max-width: 200px;
	padding: 0;
	border: 0;
}

.has-media {
	--fda-fact-num-size-row: calc(var(--fda-fact-num-size) * 0.8);
}

.has-media .fda-slider__fact-num {
	font-size: var(--fda-fact-num-size-row);
}

/* Centered text */
.is-center.no-media .fda-slider__inner {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"text"
		"facts";
}

.is-center .fda-slider__text { text-align: center; }
.is-center .fda-slider__title,
.is-center .fda-slider__desc { margin-inline: auto; }
.is-center .fda-slider__actions,
.is-center .fda-slider__facts { justify-content: center; text-align: center; }

/* Navigation bar */
.fda-slider__bar {
	position: relative;
	z-index: 3;
	background: var(--fda-nav-bg);
	color: var(--fda-nav-color);
}

.fda-slider__bar-inner {
	display: flex;
	align-items: stretch;
	gap: 24px;
	max-width: var(--fda-max);
	margin-inline: auto;
	padding-inline: var(--fda-gutter);
}

.fda-slider__counter {
	align-self: center;
	font-size: 14px;
	white-space: nowrap;
}

.fda-slider__counter b {
	color: var(--fda-nav-accent);
	font-weight: 600;
}

.fda-slider__tabs {
	flex: 1 1 auto;
	display: flex;
	gap: 20px;
	min-width: 0;
}

.fda-slider button.fda-slider__tab,
.fda-slider button.fda-slider__tab:hover,
.fda-slider button.fda-slider__tab:focus {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 18px 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: 14px;
	line-height: 1.35;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.fda-slider__tab::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: color-mix(in srgb, var(--fda-nav-color) 25%, transparent);
	transition: background-color 0.15s linear;
}

.fda-slider button.fda-slider__tab:hover { color: var(--fda-nav-accent); }
.fda-slider button.fda-slider__tab.is-active { color: var(--fda-nav-accent); font-weight: 500; }
.fda-slider__tab.is-active::before { background: var(--fda-nav-accent); }

.fda-slider__controls {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.fda-slider button.fda-slider__control,
.fda-slider button.fda-slider__control:hover,
.fda-slider button.fda-slider__control:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
}

.fda-slider button.fda-slider__control:hover { color: var(--fda-nav-accent); }

.fda-slider__icon-play { display: none; }
.is-paused .fda-slider__icon-play { display: block; }
.is-paused .fda-slider__icon-pause { display: none; }

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

.fda-slider button.fda-slider__tab:focus-visible,
.fda-slider button.fda-slider__control:focus-visible {
	outline-offset: -2px;
}

/* Bars instead of labels: the "lines" option, and always on small screens */
.fda-slider--nav-lines .fda-slider__tabs {
	flex: 0 1 auto;
	align-items: center;
	gap: 8px;
}

.fda-slider--nav-lines button.fda-slider__tab,
.fda-slider--nav-lines button.fda-slider__tab:hover,
.fda-slider--nav-lines button.fda-slider__tab:focus {
	flex: 0 0 32px;
	height: 44px;
	padding: 0;
}

.fda-slider--nav-lines .fda-slider__tab::before {
	top: 21px;
}

.fda-slider--nav-lines .fda-slider__tab-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Small screens: image above text, content sets the height */
@media (max-width: 820px) {
	.fda-slider {
		min-height: 0;
	}

	.fda-slider__slide {
		align-items: flex-start;
	}

	.fda-slider .fda-slider__slide .fda-slider__inner {
		max-width: none;
		margin: 0;
		padding: 48px var(--fda-gutter);
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"text"
			"facts";
	}

	.fda-slider .fda-slider__slide.has-media .fda-slider__inner {
		padding-top: 0;
		grid-template-areas:
			"media"
			"text"
			"facts";
	}

	.media-cover .fda-slider__media,
	.media-cover.media-left .fda-slider__media {
		position: static;
		width: auto;
		margin: 0 calc(var(--fda-gutter) * -1) 32px;
		aspect-ratio: 16 / 10;
	}

	.fda-slider .media-contain .fda-slider__media {
		margin: 32px 0 24px;
	}

	.fda-slider .media-contain .fda-slider__media img {
		max-height: 260px;
	}

	.fda-slider__facts {
		display: flex;
		flex-wrap: wrap;
		gap: 16px 28px;
		margin-top: 32px;
		padding-top: 20px;
		border-top: 1px solid color-mix(in srgb, var(--fda-fact-label-color) 35%, transparent);
	}

	.fda-slider__slide .fda-slider__fact {
		flex: 0 1 auto;
		max-width: 150px;
		padding: 0;
		border: 0;
	}

	.fda-slider__fact-num {
		font-size: calc(var(--fda-fact-num-size) * 0.8);
	}

	.fda-slider__bar-inner {
		gap: 12px;
	}

	.fda-slider__tabs {
		flex: 0 1 auto;
		align-items: center;
		gap: 8px;
	}

	.fda-slider button.fda-slider__tab,
	.fda-slider button.fda-slider__tab:hover,
	.fda-slider button.fda-slider__tab:focus {
		flex: 0 0 28px;
		height: 44px;
		padding: 0;
	}

	.fda-slider__tab::before {
		top: 21px;
	}

	.fda-slider__tab-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}