/*!
 * Home page hero slider.
 * ---------------------------------------------------------------------------
 * Two things were wrong, and they had the same visible symptom.
 *
 *   .slide-image { object-fit: contain }   the image was letterboxed inside the
 *                                          slide, leaving the slide's own colour
 *                                          showing as dark bars at the ends
 *   .slide       { background: #024548 }   that colour: dark teal, which reads as
 *                                          black against a photo
 *
 * The image now fills the slide (cover), and the slide itself is transparent, so
 * nothing dark can show through at any aspect ratio.
 *
 * The full-bleed darkening gradient is also gone. The copy sits on the left, so a
 * one-sided scrim keeps it legible without muting the photograph:
 * dark at the left edge, fully transparent beyond the text.
 *
 * Loaded after the built bundle, so it applies without a front-end build. One
 * place to change, rather than fighting resources/css/pages/home-index.css, which
 * needs a build to take effect.
 * ---------------------------------------------------------------------------
 */

/* The letterbox fill: the single biggest cause of the dark ends. */
.pg-home-index .slide-image {
	object-fit: cover !important;
	object-position: center !important;
}

/* No colour of its own, so a gap can never read as a black bar. */
.pg-home-index .slide {
	background: transparent !important;
}

/* A one-sided scrim for the copy, instead of flattening the whole photograph. */
.pg-home-index .slide::before {
	background: linear-gradient(
		90deg,
		rgba(2, 20, 18, .62) 0%,
		rgba(2, 20, 18, .34) 38%,
		rgba(2, 20, 18, 0) 68%
	) !important;
	mix-blend-mode: normal !important;
}

/* Keep the transition smooth, and the container free of any background. */
.pg-home-index .hero-slider,
.pg-home-index .slide-container {
	background: transparent !important;
}

/* On a phone the copy runs wider, so the scrim follows it across. */
@media (max-width: 760px) {
	.pg-home-index .slide::before {
		background: linear-gradient(
			180deg,
			rgba(2, 20, 18, .10) 0%,
			rgba(2, 20, 18, .55) 55%,
			rgba(2, 20, 18, .70) 100%
		) !important;
	}
}

/* ===========================================================================
   "Add your voice" - the public comment form in the testimonials section
   =========================================================================== */

.pg-home-index .testimonial-post {
	background: #fff;
	border: 1px solid #e4ece6;
	border-radius: 20px;
	padding: 24px;
	margin: 26px auto 0;
	max-width: 720px;
	box-shadow: 0 8px 26px rgba(10, 47, 31, .07);
}
.pg-home-index .testimonial-post h3 { margin: 0 0 4px; font-size: 1.05rem; color: #0f2b1e; }
.pg-home-index .testimonial-post-sub { margin: 0 0 16px; font-size: .86rem; color: #6b7f72; }
.pg-home-index .testimonial-post input,
.pg-home-index .testimonial-post textarea,
.pg-home-index .testimonial-post select {
	width: 100%;
	border: 1.5px solid #e4ece6;
	border-radius: 11px;
	padding: 11px 14px;
	font-size: .9rem;
	font-family: inherit;
	color: #0f2b1e;
	background: #fff;
	margin-bottom: 12px;
}
.pg-home-index .testimonial-post textarea { resize: vertical; line-height: 1.55; }
.pg-home-index .testimonial-post input:focus,
.pg-home-index .testimonial-post textarea:focus,
.pg-home-index .testimonial-post select:focus {
	outline: none;
	border-color: #006B3F;
	box-shadow: 0 0 0 4px rgba(0, 107, 63, .12);
}
.pg-home-index .testimonial-row { display: flex; gap: 12px; }
.pg-home-index .testimonial-row > * { flex: 1; }
.pg-home-index .testimonial-row-end { align-items: center; justify-content: space-between; }
.pg-home-index .testimonial-rating { flex: 0 0 auto; font-size: .72rem; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase; color: #6b7f72; display: flex; align-items: center; gap: 8px; }
.pg-home-index .testimonial-rating select { width: auto; margin: 0; padding: 8px 12px; }
.pg-home-index .testimonial-post button {
	flex: 0 0 auto; height: 46px; padding: 0 26px; border: 0; border-radius: 999px;
	background: linear-gradient(135deg, #006B3F 0%, #0b8a52 100%); color: #fff;
	font-weight: 800; font-size: .9rem; cursor: pointer; font-family: inherit;
	box-shadow: 0 6px 18px rgba(10, 47, 31, .2);
	transition: transform .16s ease, box-shadow .16s ease;
}
.pg-home-index .testimonial-post button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10, 47, 31, .26); }
.pg-home-index .testimonial-thanks {
	background: #f2f8f4; border: 1px solid #e4ece6; border-left: 5px solid #006B3F;
	border-radius: 14px; padding: 16px 18px; font-size: .9rem; color: #084C2E; font-weight: 600;
}
.pg-home-index .testimonial-error {
	background: #fdf2f3; border: 1px solid #f3c9cf; border-left: 5px solid #CE1126;
	border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; font-size: .85rem; color: #8a0c1a;
}
.pg-home-index .testimonial-moderation { margin: 12px 0 0; font-size: .76rem; color: #6b7f72; text-align: center; }

@media (max-width: 620px) {
	.pg-home-index .testimonial-row { flex-direction: column; gap: 0; }
	.pg-home-index .testimonial-row-end { align-items: stretch; }
	.pg-home-index .testimonial-post button { width: 100%; }
}

/* ===========================================================================
   Sponsors: one scrolling row per tier
   ---------------------------------------------------------------------------
   Each tier (Platinum, Gold, Silver, Bronze, Partner, Individual) is its own row
   that scrolls sideways, so a long list never buries the next tier and the eye
   still reads the hierarchy. Same technique as the speakers strip: the cards are
   rendered twice and the track slides by exactly half its width, so the loop has
   no visible seam.
   =========================================================================== */

.sponsors-section .sponsor-marquee {
	overflow: hidden;
	position: relative;
	padding: 6px 0 10px;
	/* Fade the edges so cards enter and leave rather than being cut off. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.sponsors-section .sponsor-track {
	display: flex;
	align-items: stretch;
	gap: 18px;
	width: max-content;
	animation: sponsorScroll 38s linear infinite;
}

/* Each tier at its own pace, so the rows do not march in lockstep. */
.sponsors-section .sponsor-marquee:nth-of-type(2) .sponsor-track { animation-duration: 46s; }
.sponsors-section .sponsor-marquee:nth-of-type(3) .sponsor-track { animation-duration: 42s; }

.sponsors-section .sponsor-track:hover { animation-play-state: paused; }

@keyframes sponsorScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Keep the cards a sensible width inside the moving track. */
.sponsors-section .sponsor-track .sponsor-card {
	flex: 0 0 auto;
	width: 240px;
}

/* Anyone who has asked for less motion gets a plain row they can scroll. */
@media (prefers-reduced-motion: reduce) {
	.sponsors-section .sponsor-marquee { overflow-x: auto; }
	.sponsors-section .sponsor-track { animation: none; }
}

/* A tier too thin to loop: no animation, and the cards centred so the double
   rendering is not visible as a gap. The full card design is retained. */
.sponsors-section .sponsor-marquee.is-short .sponsor-track {
	animation: none;
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
}
.sponsors-section .sponsor-marquee.is-short {
	-webkit-mask-image: none;
	mask-image: none;
}

/* ===========================================================================
   "What People Are Saying" - one card at a time, and a comment box on request
   ---------------------------------------------------------------------------
   The grid becomes a scroll-snap track: it is a real slide the reader can swipe,
   drag or arrow through, and it needs no library. The comment area is a <details>,
   so it costs nothing until somebody wants it.
   =========================================================================== */

.home-testimonials-section .home-testimonial-grid {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-inline: 4px;
	-webkit-overflow-scrolling: touch;
	padding: 4px 4px 14px;
	/* Hide the scrollbar: the snap and the auto-advance are the affordances. */
	scrollbar-width: none;
}
.home-testimonials-section .home-testimonial-grid::-webkit-scrollbar { display: none; }

/* Three cards visible at once on a desktop, so the section reads as a row of
   voices rather than one card in a void. The track still steps one card at a time,
   so the movement stays smooth. Two on a tablet, one on a phone. */
.home-testimonials-section .home-testimonial-item {
	flex: 0 0 calc((100% - 36px) / 3);   /* 3 cards + 2 gaps of 18px */
	scroll-snap-align: start;
	margin: 0;
}

@media (max-width: 1024px) {
	.home-testimonials-section .home-testimonial-item { flex-basis: calc((100% - 18px) / 2); }
}

@media (max-width: 620px) {
	.home-testimonials-section .home-testimonial-item { flex-basis: 88%; }
}

/* ---------------------------------------------- the comment area, on request */
.home-testimonials-section .testimonial-post {
	padding: 0;
	overflow: hidden;
}
.home-testimonials-section .testimonial-post-summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 16px 20px;
	cursor: pointer;
	font-weight: 800;
	font-size: .92rem;
	color: #006B3F;
	list-style: none;
	transition: background .15s ease;
}
.home-testimonials-section .testimonial-post-summary::-webkit-details-marker { display: none; }
.home-testimonials-section .testimonial-post-summary:hover { background: #f6faf7; }
.home-testimonials-section .testimonial-post-summary::after {
	content: '+';
	font-size: 1.15rem;
	line-height: 1;
	color: #006B3F;
}
.home-testimonials-section .testimonial-post[open] .testimonial-post-summary::after { content: '–'; }
.home-testimonials-section .testimonial-post[open] .testimonial-post-summary { border-bottom: 1px solid #eef3ee; }
.home-testimonials-section .testimonial-post-body { padding: 20px 24px 22px; }

@media (max-width: 620px) {
	.home-testimonials-section .testimonial-post-body { padding: 16px 16px 18px; }
}