/* Homepage sections. Loaded only on the static front page. */

.rth-home {
	--edge-gutter: clamp(20px, 9.5vw, 191px);
}

.rth-home img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Hero */
.hero {
	position: relative;
	overflow: hidden;
	color: white;
	/* Sized so the statbar band below lands exactly on the fold: the band is
	   111px tall and pulls itself up by 56px, so it overhangs the hero by 55px. */
	min-height: calc(100vh - 75px);
	padding-top: calc(var(--header-clear) + var(--space-lg));
	padding-bottom: var(--space-2xl);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	display: flex;
	flex-direction: column;
	justify-content: center;
	justify-content: safe center;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	transform: scaleX(-1);
}

.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 26%),
		linear-gradient(90deg, rgba(28, 36, 21, 0.4) 0%, rgba(28, 36, 21, 0.12) 45%, rgba(28, 36, 21, 0) 72%);
}

.hero__inner {
	position: relative;
	z-index: 2;
	width: auto;
	max-width: none;
	margin-inline: var(--edge-gutter);
	padding-inline: 0;
}

.hero__heading {
	color: white;
	font-family: var(--font-display); /* Lexend */
	font-weight: 600;
	font-size: calc(clamp(3rem, 7vw, 6rem) * var(--fs-scale)); /* 6rem = 96px on desktop */
	line-height: 1.0417; /* 100 / 96 */
	letter-spacing: 0;
	max-width: 12ch;
	margin: 0 0 var(--space-sm);
}

.hero__subheading {
	color: white;
	font-family: var(--font-alt); /* Inter */
	font-weight: 500;
	font-size: calc(1.625rem * var(--fs-scale)); /* 26px */
	line-height: normal; /* Figma "Auto" */
	letter-spacing: 0;
	margin: 0 0 var(--space-lg);
}

.hero .btn {
	background: white;
	color: black;
	border-radius: var(--radius-lg);
	font-family: var(--font-alt); /* Inter */
	font-weight: 700;
	font-size: calc(clamp(1.5rem, 2.6vw, 2.5rem) * var(--fs-scale)); /* 40px on desktop */
	line-height: normal; /* Figma "Auto" */
	letter-spacing: 0;
	padding: 0.5em 1.4em;
}

.hero .btn:hover,
.hero .btn:focus {
	background: var(--color-white-hover);
	color: black;
}

/* Lives-saved bar */
.statbar {
	background: transparent;
	padding-block: 0 var(--space-lg);
}

.statbar__band {
	position: relative;
	z-index: 2;
	margin-top: -3.5rem; /* overlap up into the hero's rounded bottom */
	margin-inline: var(--edge-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: 1.25rem 2rem;
	background: var(--color-mint);
	border-radius: var(--radius-lg);
}

.statbar__label,
.statbar__asof {
	font-family: var(--font-display); /* Lexend */
	font-weight: 300;
	font-size: calc(clamp(1.25rem, 2.4vw, 2rem) * var(--fs-scale)); /* 32px on desktop */
	line-height: normal;
	letter-spacing: 0;
	color: var(--color-olive);
}

.statbar__label {
	text-transform: uppercase;
}

.statbar__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-gold);
	color: var(--color-green-darker);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: calc(clamp(1.1rem, 2vw, 1.5rem) * var(--fs-scale));
	padding: 1.1em 1.3em;
	/* 10-point starburst seal */
	clip-path: polygon(
		50% 0%, 61.7% 13.9%, 79.4% 9.5%, 80.7% 27.7%, 97.6% 34.5%,
		88% 50%, 97.6% 65.5%, 80.7% 72.3%, 79.4% 90.5%, 61.7% 86.1%,
		50% 100%, 38.3% 86.1%, 20.6% 90.5%, 19.3% 72.3%, 2.4% 65.5%,
		12% 50%, 2.4% 34.5%, 19.3% 27.7%, 20.6% 9.5%, 38.3% 13.9%
	);
}

/* About */
.about__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.about__media img {
	max-width: 92%;
	border-radius: var(--radius);
}

.about__body {
	padding-left: 50px;
}

.about__body p {
	padding-block: 50px; /* extra breathing room above/below the paragraph */
}

.about .btn {
	border-radius: var(--radius-lg);
	font-family: var(--font-alt); /* Inter */
	font-weight: 700;
	font-size: calc(1.5rem * var(--fs-scale)); /* 24px */
	line-height: normal;
	letter-spacing: 0;
	margin-top: var(--space-md);
}

/* Journey band */
.journey {
	padding-block: var(--space-lg);
}

.journey__inner {
	position: relative;
	overflow: hidden;
	margin-inline: clamp(20px, 8vw, 165px);
	background: var(--color-olive);
	color: white;
	border-radius: var(--radius);
	padding: var(--space-lg) var(--space-xl);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
}

.journey__inner::before,
.journey__inner::after {
	content: '';
	position: absolute;
	bottom: 16px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
	opacity: 0.6;
	pointer-events: none;
}

.journey__inner::before {
	left: 28px;
	width: 120px;
	height: 96px; /* paws1 is 177×142 */
	background-image: url('../images/paws1.png');
}

.journey__inner::after {
	right: 28px;
	width: 84px;
	height: 125px; /* paws2 is 104×155 */
	background-image: url('../images/paws2.png');
}

.journey__text {
	font-family: var(--font-display); /* Lexend */
	font-weight: 600;
	font-size: calc(clamp(1.5rem, 3vw, 2.25rem) * var(--fs-scale)); /* 36px */
	line-height: 1.528; /* 55 / 36 */
	letter-spacing: 0;
	color: white;
	max-width: 47ch;
	margin: 0;
}

.journey__pill {
	display: inline-flex;
	align-items: center;
	gap: 1.25rem;
	font-family: var(--font-display); /* Lexend */
	font-weight: 600;
	font-size: calc(clamp(1.75rem, 3.2vw, 2.5rem) * var(--fs-scale)); /* 40px */
	line-height: 1.925; /* 77 / 40 */
	letter-spacing: 0;
	text-transform: uppercase;
	color: white;
}

.journey__pill::before,
.journey__pill::after {
	content: '';
	width: 36px;
	height: 2px;
	background: white;
}

/* Calendar (transparent background — cohesive with the sections above) */
.calendar .rth-container {
	width: auto;
	max-width: none;
	margin-inline: clamp(20px, 10vw, 142px);
	padding-inline: 0;
}

.calendar__subheading {
	text-align: center;
	font-family: var(--font-mono); /* JetBrains Mono */
	font-weight: 400;
	font-size: calc(1.375rem * var(--fs-scale)); /* 22px */
	line-height: 1.818; /* 40 / 22 */
	letter-spacing: 0;
	color: black;
	margin: -1.5rem 0 var(--space-lg);
}

.calendar__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
}

.event-card {
	background: white;
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius);
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.event-card__date {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	background: var(--color-mint);
	border-radius: 0.75rem;
	padding: var(--space-xs) var(--space-sm);
	width: max-content;
	line-height: 1.05;
}

.event-card__month {
	font-family: var(--font-display); /* Lexend */
	font-weight: 600;
	font-size: calc(1.25rem * var(--fs-scale)); /* 20px */
	line-height: normal;
	letter-spacing: 0;
	color: var(--color-green-dark);
}

.event-card__day {
	font-family: var(--font-display); /* Lexend */
	font-weight: 600;
	font-size: calc(2.8125rem * var(--fs-scale)); /* 45px */
	line-height: normal;
	letter-spacing: 0;
	color: var(--color-green-dark);
}

.event-card__title {
	font-family: var(--font-display); /* Lexend */
	font-weight: 600;
	font-size: calc(1.8125rem * var(--fs-scale)); /* 29px */
	line-height: normal;
	letter-spacing: 0;
	margin: var(--space-xs) 0 0;
}

.event-card__title a {
	color: black;
	text-decoration: none;
}

.event-card__venue,
.event-card__time {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-alt); /* Inter */
	font-weight: 400;
	font-size: calc(1.5rem * var(--fs-scale)); /* 24px */
	line-height: 1.583; /* 38 / 24 */
	letter-spacing: 0;
	color: var(--color-gray);
	margin: 0;
}

.event-card__venue::before,
.event-card__time::before {
	content: '';
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.event-card__venue::before {
	background-image: url('../images/location.png');
}

.event-card__time::before {
	background-image: url('../images/calendar.png');
}

.calendar__cta {
	text-align: center;
	margin-top: var(--space-lg);
}

.calendar .btn {
	background: var(--color-gold);
	border: none;
	border-radius: var(--radius-lg);
	font-family: var(--font-alt); /* Inter */
	font-weight: 700;
	font-size: calc(1.5rem * var(--fs-scale)); /* 24px */
	line-height: normal;
	letter-spacing: 0;
}

.calendar .btn:hover,
.calendar .btn:focus {
	background: var(--color-gold-hover);
}

/* Join the Team */
.team {
	--team-overlay: rgba(78, 81, 56, 0.75);
	--team-band-gap: 12rem; /* green space between the intro copy and the cards */
	--team-overlap: 5rem; /* how far the cards rise into the green band */
	color: white;
}

.team__band {
	background-image: linear-gradient(var(--team-overlay), var(--team-overlay)), var(--team-bg);
	background-size: cover;
	/* The band is far wider than it is tall, so centering would crop every head. Past ~23%
	   a second person's hair starts clipping, so this is the lowest safe framing. */
	background-position: center 20%;
	padding-block: var(--space-2xl) calc(var(--team-band-gap) + var(--team-overlap));
}

.team__heading {
	color: white;
	font-size: calc(clamp(2.5rem, 5.625vw, 5.0625rem) * var(--fs-scale)); /* caps at 81px from 1440px up */
	line-height: normal; /* "Auto" — Lexend's own metrics */
}

.team__subheading {
	text-align: center;
	max-width: 46ch;
	margin: -1.5rem auto 0;
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: calc(2.125rem * var(--fs-scale));
	line-height: 1.588; /* 54 / 34 */
}

.team__cards {
	position: relative;
	margin-top: calc(var(--team-overlap) * -1);
	padding-bottom: var(--space-2xl);
}

.team__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
}

.team-card {
	position: relative;
	display: block;
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	aspect-ratio: 8 / 9;
}

.team-card .team-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team-card__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--space-lg);
	text-align: center;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: calc(2.75rem * var(--fs-scale));
	line-height: 1.75; /* 77 / 44 */
	text-transform: uppercase;
	letter-spacing: normal;
	color: white;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Video */

.video .rth-container {
	width: auto;
	max-width: none;
	margin-inline: clamp(20px, 14.5vw, 250px);
	padding-inline: 0;
}

.video__embed {
	margin-inline: auto;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.video__embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Gallery */
.gallery {
	background: var(--color-mint);
}

.gallery__inner {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--space-xl);
	align-items: center;
	width: auto;
	max-width: none;
	margin-inline: clamp(20px, 10vw, 142px);
	padding-inline: 0;
}

.gallery__strip {
	overflow: hidden;
}

.gallery__track {
	display: flex;
	gap: var(--space-md);
	transition: transform 0.4s ease;
}

.gallery__img {
	flex: 0 0 calc((100% - var(--space-md)) / 2);
	min-width: 0;
	aspect-ratio: 7 / 5;
	object-fit: cover;
	object-position: 50% 25%;
	border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
	.gallery__track {
		transition: none;
	}
}

.gallery__heading {
	text-align: left;
	margin: 0 0 var(--space-lg);
}

.gallery .btn {
	background: var(--color-gold);
	border-radius: var(--radius-lg);
	font-family: var(--font-alt);
	font-weight: 700;
	font-size: calc(1.5rem * var(--fs-scale));
	line-height: normal;
	letter-spacing: normal;
}

.gallery .btn:hover,
.gallery .btn:focus {
	background: var(--color-gold-hover);
}

.gallery__nav {
	display: flex;
	gap: var(--space-sm);
	margin-top: var(--space-xl);
}

.gallery__arrow {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: white;
	color: var(--color-green-dark);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.gallery__arrow[disabled] {
	opacity: 0.4;
	cursor: default;
}

.gallery__arrow svg {
	width: 2rem;
	height: 2rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gallery__arrow:not([disabled]):hover,
.gallery__arrow:not([disabled]):focus,
.gallery__arrow:not([disabled]):focus-visible {
	background: var(--color-white-hover);
	color: var(--color-green-dark);
}

/* Supporters */
.supporters {
	background: var(--color-olive);
	/* Deep gap below the logo row; overrides .rth-section's 96px block padding. */
	padding-bottom: 280px;
}

.supporters__heading {
	color: white;
}

.supporters__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-lg) var(--space-md);
}

.supporters__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20rem;
	max-width: 100%;
	height: 7rem;
	padding: var(--space-sm) var(--space-lg);
	background: white;
	border-radius: 0.75rem;
}

.supporters__tile .supporters__logo {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* FAQ */
/* The media column is a fixed design width, so the question list takes the
   remainder rather than both being fractions of the container. */
.faq__inner {
	/* The questions column and the photo stand the same height by design, so
	   the value lives in one place and cannot drift. */
	--faq-media-h: 706px;

	display: grid;
	grid-template-columns: 1fr 458px;
	gap: var(--space-xl);
	align-items: start;
}

/* Fixed height so the column matches the image regardless of how many
   questions are published; the overflow is what makes it scroll. */
.faq__list {
	height: var(--faq-media-h);
	overflow-y: auto;
	/* Holds the questions and their rules clear of the scrollbar. */
	padding-right: 50px;
}

/* Firefox only. Chrome honours these standard properties too, but doing so
   makes it ignore the ::-webkit rules below, and `thin` renders an 11px
   rounded bar rather than the 8px square one the design asks for. */
@supports not selector(::-webkit-scrollbar) {
	.faq__list {
		scrollbar-color: var(--color-scroll-thumb) var(--color-scroll-track);
		scrollbar-width: thin;
	}
}

/* Square-cornered thumb filling the gutter, per the design — not the inset,
   rounded thumb the platform draws by default. */
.faq__list::-webkit-scrollbar {
	width: 8px;
}

.faq__list::-webkit-scrollbar-track {
	background: var(--color-scroll-track);
}

.faq__list::-webkit-scrollbar-thumb {
	background: var(--color-scroll-thumb);
}

.faq__item {
	border-bottom: 1px solid var(--color-hairline);
	padding: var(--space-md) 0;
}

.faq__question {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: calc(2.25rem * var(--fs-scale));
	line-height: normal;
	letter-spacing: normal;
	text-align: left;
	color: var(--color-green-dark);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
}

.faq__question::after {
	content: '+';
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 46px;
	font-size: calc(2.5rem * var(--fs-scale));
	font-weight: 400;
	line-height: 1;
	color: var(--color-olive);
}

.faq__item[open] .faq__question::after {
	content: '\2212'; /* true minus, matches the plus's width */
	color: var(--color-orange-deep);
}

.faq__answer {
	margin-top: var(--space-sm);
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: calc(1.375rem * var(--fs-scale));
	line-height: 1.818; /* 40 / 22 */
	letter-spacing: normal;
	text-align: left;
	color: black;
}

/* Source art is 768x893 (0.86) but the design box is 0.65, so cover crops the
   sides rather than stretching the image to fit. */
.faq__media img {
	width: 458px;
	height: var(--faq-media-h);
	object-fit: cover;
	border-radius: var(--radius);
}

/* Responsive */
@media (max-width: 1023px) {
	/* One across below this width; the rest stay in the track for the arrows. */
	.gallery__img {
		flex-basis: 100%;
	}

	/* The 522px media column would outgrow the container here and push the
	   page sideways, so stack and let the image size to the column. */
	.faq__inner {
		grid-template-columns: 1fr;
	}

	.faq__media img {
		width: 100%;
		height: auto;
	}
}

@media (max-width: 900px) {
	.calendar__grid,
	.team__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.about__inner,
	.gallery__inner,
	.faq__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.about__media img {
		max-width: 100%;
	}

	.about__body {
		padding-left: 0;
	}

	.calendar__grid,
	.team__grid {
		grid-template-columns: 1fr;
	}

	.gallery__nav {
		justify-content: center;
	}

	.team {
		--team-band-gap: 4rem;
		--team-overlap: 2.5rem;
	}

	.team__subheading {
		font-size: calc(1.25rem * var(--fs-scale));
	}

	.team-card__label {
		font-size: calc(2rem * var(--fs-scale));
	}

	.hero {
		min-height: 85vh;
		/* Same clearance rule, tighter gap — vertical room is scarcer here. */
		padding-top: calc(var(--header-clear) + var(--space-md));
	}
}