/* GVBC site polish (2026-10-26): video hero, larger body type, spacing fixes.
   Loaded after styles.css on every page. Small font sizes in styles.css are scaled up at build time
   (build.py FONT_SCALE); this file holds the layout and spacing changes that go with them. */

:root{--section-gap:clamp(72px,7vw,120px);--heading-gap:20px;--cta-gap:28px}

/* ---------- Body type ---------- */
body{font-size:18px;line-height:1.7}
p+p{margin-top:18px}
p{max-width:68ch}
.section-head{margin-bottom:48px;gap:40px}
.section-head>p{max-width:42ch}
.eyebrow{font-size:13px;letter-spacing:.14em;margin-bottom:18px}
.btn{gap:14px;min-height:54px;padding:14px 26px}
@media(max-width:680px){
	body{font-size:17px}
	.section-head{margin-bottom:32px;gap:20px}
	.btn{min-height:52px;padding:13px 22px}
}

/* ---------- Video hero ---------- */
.hero.hero--video{min-height:clamp(640px,calc(100svh - var(--header-h)),900px);display:flex;align-items:center;background:var(--deep-2);color:var(--cream)}
.hero--video .hero-media{position:absolute;inset:-6% 0 0;z-index:0;overflow:hidden;background:var(--deep-2)}
.hero--video .hero-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.hero--video .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
	background:
		linear-gradient(90deg,rgb(13 58 63 / 94%) 0%,rgb(13 58 63 / 84%) 32%,rgb(13 58 63 / 40%) 58%,rgb(13 58 63 / 6%) 82%),
		linear-gradient(0deg,var(--deep) 0%,rgb(18 75 81 / 0%) 26%)}
.hero--video:after{display:none}
.hero--video .hero-copy{position:relative;z-index:3;margin:0 auto;padding-block:72px 104px;width:100%;max-width:calc(var(--max) + var(--gutter)*2);background:none;box-shadow:none;border-radius:0}
.hero--video .hero-copy-inner{max-width:640px}
.hero--video .eyebrow{color:var(--gold);white-space:normal;margin-bottom:22px}
.hero--video h1{color:var(--cream);font-size:clamp(46px,5vw,76px);line-height:1.08;text-shadow:0 2px 30px rgb(13 58 63 / 35%)}
.hero--video h1 em{color:var(--gold)}
.hero--video .hero-statement{color:rgb(248 244 238 / 92%);font-size:20px;line-height:1.65;max-width:34ch;margin-top:26px}
.hero--video .hero-statement strong{color:var(--cream)}
.hero--video .hero-benefits{margin:28px 0 36px;gap:12px;font-size:17px;color:var(--cream)}
.hero--video .hero-benefits .icon{color:var(--gold);width:22px;height:22px}
.hero--video .hero-ctas{gap:28px}
.hero--video .watch-link{color:var(--cream);font-size:16px}
.hero--video .watch-link:hover{color:var(--gold)}
.hero--video .reviews-badge{margin-top:32px;color:rgb(248 244 238 / 88%)}
.hero--video .reviews-badge b{color:var(--cream)}

.hero-video-toggle{position:absolute;z-index:4;right:var(--gutter);bottom:36px;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 12px;border:1px solid rgb(248 244 238 / 45%);border-radius:999px;background:rgb(13 58 63 / 45%);backdrop-filter:blur(6px);color:var(--cream);font-size:14px;font-weight:600;transition:background .2s,border-color .2s}
.hero-video-toggle:hover{background:rgb(13 58 63 / 75%);border-color:var(--cream)}
.hero-video-toggle .icon{width:18px;height:18px}
.hero-video-toggle .icon-play{display:none}
.hero-video-toggle[aria-pressed="true"] .icon-play{display:block}
.hero-video-toggle[aria-pressed="true"] .icon-pause{display:none}

@media(max-width:1000px){
	.hero--video .hero-scrim{background:linear-gradient(90deg,rgb(13 58 63 / 86%) 0%,rgb(13 58 63 / 60%) 60%,rgb(13 58 63 / 30%) 100%),linear-gradient(0deg,var(--deep) 0%,rgb(18 75 81 / 0%) 30%)}
}
@media(max-width:680px){
	.hero.hero--video{min-height:calc(100svh - 72px);align-items:flex-end;padding:0}
	.hero--video .hero-video{object-position:center}
	.hero--video .hero-scrim{background:linear-gradient(0deg,var(--deep) 0%,rgb(13 58 63 / 92%) 38%,rgb(13 58 63 / 55%) 62%,rgb(13 58 63 / 15%) 100%)}
	.hero--video .hero-copy{padding-block:120px 84px}
	.hero--video h1{font-size:42px}
	.hero--video .hero-statement{font-size:18px}
	.hero--video .hero-benefits{font-size:16px;margin:22px 0 28px}
	.hero--video .hero-ctas{gap:20px}
	.hero-video-toggle{bottom:24px;right:20px;padding:0 12px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.hero--video .hero-media{inset:0}}

/* ---------- Spacing fixes ---------- */
/* Review cards: each card is as tall as its own text (they stretched to the longest review) */
.reviews-carousel .carousel-track{align-items:flex-start}
.review-card{padding:28px 30px}
@media(max-width:680px){.review-card{padding:24px}}
/* Event cards: date beside the details, "Add to my calendar" under the details instead of a squeezed third column */
.home-events .event-card,.calendar-section .event-card{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:20px;row-gap:0;align-items:start}
.home-events .event-date,.calendar-section .event-date{width:52px;grid-row:span 2}
.home-events .event-download,.calendar-section .event-download{grid-column:2;max-width:none;margin-top:14px}
.calendar-section .event-card{padding:18px 20px;column-gap:16px}
.calendar-section .event-download{margin-top:8px}
.event-detail h3{overflow-wrap:break-word}
/* Month view: date ranges fit their day cell */
.d.range{font-size:.82em;letter-spacing:-.02em}
/* Vertical rhythm: blocks that sat flush against the one above */
:is(p,ul,ol,.fact-line,.small,.times,.facts)+h3{margin-top:40px}
p.lead+h3.eyebrow{margin-top:40px}
:is(p,.lead)+:is(.group-list,.ministry-role-list,.hero-ctas,div.fact-line){margin-top:24px}
:is(p,.lead)+.group-list{margin-top:32px}
.calendar-status+div{margin-top:20px}
/* Photo at the end of a stacked grid, followed by the next block on phones */
@media(max-width:900px){.photo+*,div:has(>.photo:last-child)+.wrap{margin-top:48px}}
div:has(>.photo:last-child)+.wrap[data-s]{margin-top:clamp(56px,6vw,96px)}