/* ==========================================================================
   HOME CSS - front-page.php only.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------
   Background photo is set via the Customizer (Homepage Hero Image), applied
   as an inline style in template-parts/homepage/hero.php with a gradient
   layered over it so the site's own background colour still shows through
   on the left where the headline sits, and so nothing looks broken before
   an image is set. Hidden below 900px - see the media query at the bottom -
   a full photo behind stacked mobile content would fight with text legibility
   and there isn't room for text-beside-photo composition on a narrow screen.
   ============================================================================ */

/* --- Category grid ---------------------------------------------------------- */
.category-grid {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.category-card {
	display:flex;
	gap: 5px 10px;
	padding: 15px;
	text-align: left;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.category-card:hover {
	border-color: var(--color-primary);
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}
.category-card__icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.category-card__title {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--color-navy-900);
}
.category-card__count {
	margin:0px;
	font-size: 13px;
	color: var(--color-text-muted);
}

@media (min-width: 640px) {
	.category-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media (min-width: 1100px) {
	.category-grid {
		grid-template-columns: repeat(7, 1fr);
	}
}

/* --- Homepage panels (Latest / Featured / Deadlines) -------------------------
   Three panels fit the default container, so this is a plain grid. The
   horizontal scroller this replaced only existed because a fourth panel made
   the columns too narrow and ellipsised the titles almost immediately.
   ---------------------------------------------------------------------------- */
.panels-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 1000px) {
	.panels-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}



.panel {
	padding: 18px;
}
.panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}
.panel__head h3 {
	font-size: 15px;
	margin: 0;
}
.panel__head h3.is-danger {
	color: var(--color-danger);
}
.panel__list {
	display: grid;
}
.panel__list > * + * {
	border-top: 1px solid var(--color-border);
}


/* --- The Future of Mindship Global -----------------------------------------
   Replaces the Phase 2 teaser. A light section so it does not collide with
   the dark pre-footer directly beneath it, closing on a teal panel that gives
   the page somewhere to land before the footer.

   Cards carry an explicit status badge. Most of this is not built yet, and a
   homepage grid that reads as a feature list would be promising things the
   site cannot do - so "Planned" is stated on the card rather than implied by
   a section title nobody reads twice.
   ---------------------------------------------------------------------------- */
.future {
	background: var(--color-bg-alt);
	--tone-teal: #02737A;
	--tone-navy: #01224F;
	--tone-amber: #A65A08;
	--tone-green: #127D5A;
	--tone-indigo: #3A4A9F;
}
.future__head {
	max-width: 760px;
	margin: 0 auto 40px;
	text-align: center;
}
/* --- Roadmap section marker ---------------------------------------------------
   Icon and label as ONE horizontal lockup, centred as a unit.

   Before this, a 62px rounded square sat above a separate pill badge: two
   different shapes, two different visual weights, stacked in a centred column
   with nothing aligning them to each other. Putting them on one line and
   removing the pill leaves a single object - which is what a section marker
   should be.

   The circle is the only shape here, so the label can just be type. A pill
   around the text as well would give the eye two competing containers again,
   which was the original problem.
   ---------------------------------------------------------------------------- */
.future__lockup {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 20px;
	text-align: left;
}
.future__medallion {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	color: #fff;
	background: var(--color-navy-900);
	/* A soft teal halo instead of a shadow: it seats the circle on the page
	   without implying it floats above it. */
	box-shadow: 0 0 0 6px rgba(2, 139, 147, 0.10);
}
.future__eyebrow {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--color-navy-900);
}

.future__title {
	margin: 0 0 12px;
	font-size: clamp(25px, 3.6vw, 36px);
	line-height: 1.14;
	letter-spacing: -0.024em;
	color: var(--color-navy-900);
}
.future__kicker {
	margin: 0 0 16px;
	font-size: clamp(16px, 2.2vw, 19px);
	font-weight: 700;
	color: var(--color-accent);
}
.future__lead {
	text-align: justify;
	text-justify: inter-word;
	/* Justified text without hyphenation stretches word gaps into visible
	   "rivers", especially on narrow columns. This lets the browser break
	   long words instead. */
	hyphens: auto;
	margin: 0 auto 12px;
	max-width: 73ch;
	font-size: 15.5px;
	line-height: 1.8;
	color: var(--color-text-muted);
}
.future__lead:last-child {
	margin-bottom: 0;
}

/* Explicit column counts rather than auto-fit. auto-fit landed on four
   columns at full width, and six cards then left two dead slots on the second
   row. Each group's size divides evenly into every column count it takes -
   two into 2 and 1, four into 4, 2 and 1 - so neither can leave a gap at any
   width. */
/* --- Roadmap group headings ---------------------------------------------------
   "Available now" and "On the roadmap" have to be told apart at a glance, so
   they differ in more than wording: available is a solid teal pill (it is a
   fact), planned is a dashed outline (it is an intention). Same size, opposite
   weight - which is the distinction the section is actually making.
   ---------------------------------------------------------------------------- */
.future-group__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
}
.future-group__badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 18px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.future-group__head--live .future-group__badge {
	color: #fff;
	background: var(--color-primary-ink);
	box-shadow: 0 6px 16px rgba(2, 115, 122, 0.28);
}
.future-group__head--live .future-group__badge svg { color: #7FE3E8; }

.future-group__head--planned .future-group__badge {
	color: var(--color-navy-900);
	background: transparent;
	border: 1.5px dashed var(--color-primary-ink);
}
.future-group__head--planned .future-group__badge svg { color: var(--color-accent-dark); }

/* A hairline that fades out, so the heading reads as opening a band of
   content rather than floating above unrelated cards. */
.future-group__rule {
	flex: 1 1 auto;
	height: 1px;
	background: var(--color-border);
}
.future-group__count {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	color: var(--color-text-muted);
	white-space: nowrap;
}
.future-group__head + .future-grid {
	margin-bottom: 34px;
}

.future-grid {
	margin-bottom: 34px;
}
.future-group__label svg {
	color: var(--color-accent);
}
.future-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
/* Two live items get the wider cards - they are the ones that exist. */
@media (min-width: 720px) {
	.future-grid--live {
		grid-template-columns: repeat(2, 1fr);
	}
	.future-grid--planned {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1080px) {
	.future-grid--planned {
		grid-template-columns: repeat(4, 1fr);
	}
}
.future-card {
	position: relative;
	overflow: hidden;
	padding: 26px 24px;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.06);
	border-radius: var(--radius-lg);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 26px rgba(16, 24, 40, 0.05);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* The tone runs down the left edge rather than across the top, so this grid
   does not read the same way as the SDG cards on the About page. */
.future-card::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--tone);
}
.future-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(16, 24, 40, 0.12);
}
.future-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 15px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--tone) 12%, #fff);
	color: var(--tone);
}
.future-card__title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0 0 10px;
	font-size: 17px;
	line-height: 1.3;
	color: var(--color-navy-900);
}
/* Planned items are held back visually as well as labelled: a hollow icon
   tile and a neutral badge, so the distinction survives a quick scan and
   does not rest on the badge text alone. */
.future-card.is-planned .future-card.is-planned .future-card__icon {
	background: transparent;
	border: 1px dashed color-mix(in srgb, var(--tone) 45%, transparent);
	color: color-mix(in srgb, var(--tone) 75%, #fff);
}
.future-card__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--color-text-muted);
}
/* Four across is a narrower card than two across, so the roadmap items take a
   slightly smaller measure to keep the line length comfortable. */
.future-grid--planned .future-card__text {
	font-size: 13.5px;
}
.future-grid--planned .future-card {
	padding: 24px 20px;
}

/* --- Long-term vision --------------------------------------------------------
   Teal rather than navy: the pre-footer directly below is navy, and two navy
   bands touching would merge into one.
   ---------------------------------------------------------------------------- */
.future-vision {
	position: relative;
	overflow: hidden;
	margin-top: 22px;
	padding: clamp(30px, 4.5vw, 52px);
	border-radius: var(--radius-lg);
	background: #023C43;
	color: #fff;
	text-align: center;
}
.future-vision::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(90deg, #000, transparent 34%, transparent 66%, #000);
	mask-image: linear-gradient(90deg, #000, transparent 34%, transparent 66%, #000);
}
.future-vision > * {
	position: relative;
	z-index: 1;
}
.future-vision__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
}
.future-vision__quote {
	margin: 0 auto 20px;
	max-width: 22ch;
	font-size: clamp(21px, 3.4vw, 32px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.022em;
}
.future-vision__text {
	margin: 0 auto 12px;
	max-width: 66ch;
	font-size: 15px;
	line-height: 1.8;
	color: #C2DDE0;
}
.future-vision__cta {
	margin-top: 22px;
}

@media (prefers-reduced-motion: reduce) {
	.future-card {
		transition: none;
	}
	.future-card:hover {
		transform: none;
	}
}

/* --- Stats bar - pulled up directly under the hero, see front-page.php --------- */
.stats-bar {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	text-align: center;
	padding: 28px 20px;
	position: relative;
	z-index: 1;
}
.stat-item {
	position: relative;
}
.stat-item:not(:last-child)::after {
	content: "";
	position: absolute;
	right: -10px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 56%;
	background: var(--color-border);
	display: none;
}
.stat-item__icon {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 10px;
}
.stat-item__icon.is-blue { background: var(--color-primary-soft); color: var(--color-primary-ink); }
.stat-item__icon.is-green { background: var(--color-success-bg); color: var(--color-success); }
.stat-item__icon.is-purple { background: #E4EAF3; color: var(--color-navy-900); }
.stat-item__icon.is-orange { background: var(--color-accent-soft); color: var(--color-warning); }
.stat-item__number {
	font-size: 22px;
	font-weight: 800;
	color: var(--color-navy-900);
	display: block;
}
.stat-item__label {
	font-size: 12.5px;
	color: var(--color-text-muted);
}

@media (min-width: 640px) {
	.stats-bar {
		grid-template-columns: repeat(5, 1fr);
	}
	.stat-item:not(:last-child)::after {
		display: block;
	}
}



/* ==========================================================================
   Discover Opportunities Beyond Borders + Latest Opportunities.

   One two-column, two-row grid rather than flex. Grid rows align across
   columns by definition, which is what makes the two headings share a
   baseline and the card grid and rolling panel start and end together - no
   measuring, no resize listener, nothing to get out of sync on a font swap
   or a slow image.

     row 1   .discover__head          .discover__aside-head
     row 2   .discover-grid           .latest__panel

   Row 2 takes its height from the category cards alone, because the panel is
   deliberately made to contribute none (see .latest__panel). The panel then
   stretches to fill it, which is where the matching top and bottom edges
   come from.
   ========================================================================== */
.discover__grid {
	display: grid;
	/* fr, not 65%/35%: percentages plus a 70px gap overflow the container. */
	grid-template-columns: 65fr 35fr;
	grid-template-rows: auto auto;
	column-gap: 70px;
	row-gap: 22px;
}
/* Nothing to sit beside when there are no opportunities yet. */
.discover__grid--single {
	grid-template-columns: 1fr;
}

/* Both headings hang from the bottom of row one, so their last lines meet the
   same line the cards start on. Aligning them at the top instead would leave
   whichever heading is shorter floating away from its own content. */
.discover__head,
.discover__aside-head {
	align-self: end;
}
.discover__head {
	grid-column: 1;
	grid-row: 1;
}
.discover__aside-head {
	grid-column: 2;
	grid-row: 1;
	text-align: right;
}
.discover-grid {
	grid-column: 1;
	grid-row: 2;
}
.discover__grid > .latest__panel {
	grid-column: 2;
	grid-row: 2;
}

.discover__title {
	margin: 0 0 8px;
	font-size: clamp(23px, 3.2vw, 32px);
	letter-spacing: -0.018em;
	line-height: 1.18;
	color: var(--color-navy-900);
}
.discover__sub {
	margin: 0;
	font-size: 15.5px;
	color: var(--color-text-muted);
}

/* --- Category cards ----------------------------------------------------------
   auto-fit rather than a fixed column count: the list is data-driven, and the
   grid should not need editing when it changes length.
   ---------------------------------------------------------------------------- */
.discover-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
	align-content: start;
}
.discover-card {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 16px;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.07);
	border-radius: var(--radius-md);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.discover-card:hover {
	transform: translateY(-3px);
	border-color: var(--color-primary);
	box-shadow: 0 12px 26px rgba(16, 24, 40, 0.1);
}
.discover-card__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
}
/* Cycles the brand-derived tints so a fourteen-card grid reads as one palette
   rather than fourteen unrelated colours. */
.discover-card__icon.tone-0 { background: var(--color-primary-soft); color: var(--color-primary-ink); }
.discover-card__icon.tone-1 { background: #E4EAF3; color: var(--color-navy-900); }
.discover-card__icon.tone-2 { background: var(--color-accent-soft); color: var(--color-warning); }
.discover-card__icon.tone-3 { background: var(--color-success-bg); color: var(--color-success); }
.discover-card__icon.tone-4 { background: #E7EEF6; color: #1D4E89; }
.discover-card__body {
	flex: 1 1 auto;
	min-width: 0;
}
.discover-card__title {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--color-navy-900);
	line-height: 1.3;
}
.discover-card__count {
	display: block;
	font-size: 12.5px;
	color: var(--color-text-muted);
	margin-top: 2px;
}
.discover-card__arrow {
	flex: 0 0 auto;
	color: var(--color-text-muted);
	transition: transform 0.16s ease, color 0.16s ease;
}
.discover-card:hover .discover-card__arrow {
	color: var(--color-primary-ink);
	transform: translateX(3px);
}

/* --- Latest Opportunities heading --------------------------------------------
   Right-aligned, so the column reads as a distinct panel rather than a second
   attempt at the left column. The eyebrow is a flex row, so it needs telling
   to sit on the right too - text-align does not reach it.
   ---------------------------------------------------------------------------- */
.latest__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-primary-ink);
}
.latest__pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-primary);
	box-shadow: 0 0 0 0 rgba(2, 139, 147, 0.55);
	animation: mindship-pulse 2.2s ease-out infinite;
}
@keyframes mindship-pulse {
	70%  { box-shadow: 0 0 0 9px rgba(2, 139, 147, 0); }
	100% { box-shadow: 0 0 0 0 rgba(2, 139, 147, 0); }
}
.latest__title {
	margin: 0 0 6px;
	font-size: clamp(20px, 2.4vw, 26px);
	letter-spacing: -0.018em;
	line-height: 1.2;
	color: var(--color-navy-900);
}
.latest__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text-muted);
}


/* --- Stacked ------------------------------------------------------------------
   Below the two-column layout there is no left column to take the height
   from, so the panel needs an explicit one again and the scroller goes back
   into normal flow.
   ---------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.discover__grid {
		grid-template-columns: 1fr;
		row-gap: 18px;
	}
	.discover__head,
	.discover__aside-head,
	.discover-grid,
	.discover__grid > .latest__panel {
		grid-column: 1;
		grid-row: auto;
	}
	.discover-grid{
		grid-row: 2/3;
	}
	.discover__aside-head {
		text-align: left;
		margin-top: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.latest__pulse {
		animation: none;
	}
	.discover-card,
	.discover-card__arrow {
		transition: none;
	}
	.discover-card:hover {
		transform: none;
	}
}

/* --- Centred section heading --------------------------------------------------
   Only Browse by Country uses this now. It was shared with the categories
   section before that heading moved into the two-column grid above and became
   left-aligned, so this lives down here with its one remaining caller.
   ---------------------------------------------------------------------------- */
.section-head-centred {
	text-align: center;
	max-width: 660px;
	margin: 0 auto 34px;
}
.section-head-centred__title {
	margin: 0 0 8px;
	font-size: clamp(23px, 3.2vw, 32px);
	letter-spacing: -0.018em;
	line-height: 1.18;
	color: var(--color-navy-900);
}
.section-head-centred__sub {
	margin: 0;
	font-size: 15.5px;
	color: var(--color-text-muted);
}

/* --- Browse by country -------------------------------------------------------
   Chips rather than cards: country names are short and there are a lot of
   them, so a wrapping row reads faster than a grid of mostly-empty boxes.
   ---------------------------------------------------------------------------- */
.country-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.country-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 15px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-navy-900);
	transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.country-chip svg {
	color: var(--color-primary);
	flex: 0 0 auto;
}
/* A hairline ring, because several flags are white at the edge - Japan,
   Finland, Switzerland - and without it they lose their shape against the
   white chip. Slight rounding so they read as a set rather than as photos. */
.country-flag {
	flex: 0 0 auto;
	display: block;
	width: 20px;
	height: auto;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.14);
	background: var(--color-bg-alt);
}
.country-chip:hover {
	border-color: var(--color-primary);
	box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
}
.country-chip__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--color-bg-alt);
	color: var(--color-text-muted);
	font-size: 12px;
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.latest__pulse {
		animation: none;
	}
	.discover-card,
	.discover-card__arrow,
	.country-chip {
		transition: none;
	}
	.discover-card:hover {
		transform: none;
	}
}

/* ==========================================================================
   TESTIMONIAL SLIDER

   A real horizontally scrolling element with CSS scroll-snap, not a
   transformed track. Touch swipe, trackpad, shift+wheel, keyboard arrows and
   the scrollbar all work natively; assets/js/slider.js only adds the arrow
   buttons for mouse users, and reveals them itself so they are never present
   without working.

   Snap is `proximity`, not `mandatory`. An earlier scroller in this theme
   fought the user because mandatory snap kept re-snapping mid-gesture;
   proximity tidies up the resting position without overriding where somebody
   deliberately scrolled to.
   ========================================================================== */
/* Surface comes from .band--dark; these are the overrides the strip needs to
   sit on navy. The white quote cards are left alone - their contrast against
   the dark ground is the reason this band is the page's anchor. */
.testimonials-strip__eyebrow {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.22);
	color: var(--color-accent);
}
.testimonials-strip__title { color: #fff; }
.testimonials-strip__link { color: #7FE3E8; }
.testimonials-strip .quote-rail__btn {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}
.testimonials-strip .quote-rail__btn:hover:not(:disabled) {
	background: #fff;
	border-color: #fff;
	color: var(--color-navy-900);
}
.testimonials-strip__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 7px 15px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--color-border);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary-ink);
}
.testimonials-strip__title {
	margin: 0;
	font-size: clamp(25px, 3.6vw, 36px);
	line-height: 1.14;
	letter-spacing: -0.024em;
	color: var(--color-navy-900);
}
.testimonials-strip__link {
	display: inline-flex;
	align-items: center;
	align-self: center;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--color-primary-ink);
	text-decoration: none;
}
.testimonials-strip__link:hover {
	text-decoration: underline;
}
.testimonials-strip__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.quote-rail {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-left: 2px;
	/* Room for the cards' lift-on-hover and focus ring, which would otherwise
	   be clipped by the scroll container's own overflow. */
	padding: 4px 2px 18px;
	margin: 0 -2px;
	scrollbar-width: thin;
}
.quote-rail .quote-card {
	flex: 0 0 88%;
	scroll-snap-align: start;
	/* Cards in a rail have no column to be balanced by, so they match the
	   tallest in the row. Pushing the attribution to the bottom keeps the
	   names on one line across the rail instead of floating mid-card. */
	display: flex;
	flex-direction: column;
}
.quote-rail .quote-card__person {
	margin-top: auto;
}

/* --- Clipped quotes ---------------------------------------------------------
   One long testimonial used to set the height of the whole row, because the
   cards stretch to match the tallest. Five lines is roughly two or three
   sentences at these card widths, and it is a line count rather than a
   character count so it stays right as the cards narrow.

   line-clamp needs the -webkit- prefixed box model even in browsers that have
   long since stopped needing the prefix for anything else; the unprefixed
   property is listed alongside it for the ones that have caught up.

   Only the rail clamps. The Testimonials wall is a page somebody opened in
   order to read testimonials, and cutting them off there would be answering a
   question nobody asked. */
.quote-rail .quote-card__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	overflow: hidden;
	margin-bottom: 10px;
}
.quote-rail .quote-card.is-expanded .quote-card__text {
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}

.quote-card__more {
	align-self: flex-start;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--tone, var(--tone-teal));
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
/* The element carries the hidden attribute until the script finds it clipped,
   and a display declaration would quietly override that. */
.quote-card__more[hidden] {
	display: none;
}
.quote-card__more:hover {
	text-decoration-thickness: 2px;
}
.quote-card__more:focus-visible {
	outline: 2px solid var(--color-primary-ink);
	outline-offset: 3px;
	border-radius: 3px;
}

.quote-rail:focus-visible {
	outline: 2px solid var(--color-primary-ink);
	outline-offset: 4px;
}

.quote-rail__controls {
	display: flex;
	gap: 8px;
}
.quote-rail__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	color: var(--color-primary-ink);
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.quote-rail__btn:hover:not(:disabled) {
	color: #fff;
	background: var(--color-primary-ink);
	border-color: var(--color-primary-ink);
}
/* Disabled at the ends rather than wrapping around: a jump back across the
   whole rail is disorienting, and the ends are information people use. */
.quote-rail__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.testimonials-strip__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

@media (min-width: 700px) {
	.quote-rail .quote-card {
		flex-basis: calc((100% - 20px) / 2);
	}
}

@media (min-width: 1080px) {
	.quote-rail .quote-card {
		flex-basis: calc((100% - 40px) / 3);
	}
}