/* ==========================================================================
   section.css: the four section landing pages (page-templates/section.php).
   Values copied from Leadership / ReformedTheology / EducationalPractices / MinistryAreas .dc.html (revision 14):
   tint hero + door photo, module card grid with no connecting line and no numbers (".mods-j.alt"),
   "Engaging this module" band. --sec / --tint are set on <main> from odtd_sections().
   The boards have no phone layout; the <=1139 / <=820 / <=640 rules are ours.
   ========================================================================== */

/* ---------- hero ---------- */
.sp-hero { position: relative; overflow: hidden; background: var(--tint); }
.sp-hero-in { position: relative; padding-top: 44px; padding-bottom: 128px; }
.sp-hero-mark { position: absolute; top: -150px; left: 540px; transform: translateX(-50%); height: calc(100% + 150px); width: auto; aspect-ratio: 120 / 152; opacity: 0.55; pointer-events: none; }
.sp-crumb { position: relative; display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--odtd-muted); }
.sp-crumb [aria-current] { color: var(--odtd-ink); font-weight: 600; }
.sp-hero-grid { position: relative; margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr) 374px; gap: 96px; align-items: center; }
.sp-hero-text { display: flex; flex-direction: column; gap: 34px; }
.sp-title { font-family: var(--odtd-serif); font-size: 68px; font-weight: 400; line-height: 1.06; color: var(--odtd-blue); }
.sp-lead { font-family: var(--odtd-serif); font-size: 36px; font-weight: 400; line-height: 1.22; color: var(--odtd-ink); max-width: 32ch; text-wrap: balance; }

/* door-proportioned photo: 360x520 arch, offset frame in the section colour */
.sp-door { position: relative; width: 374px; height: 534px; }
.sp-door .fr, .sp-door .im { position: absolute; width: 360px; height: 520px; border-radius: 180px 180px 3px 3px; box-sizing: border-box; }
.sp-door .fr { left: 14px; top: 14px; border: 2px solid var(--sec); }
.sp-door .im { left: 0; top: 0; overflow: hidden; background: var(--tint); }
.sp-door img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Leadership round 6 crop: 15% zoom-out anchored to the bottom, 53% across; the photo's top row stretched behind (image set inline) */
.sp-door .im.im-r6 { background-color: #EDF3F9; background-repeat: no-repeat; background-position: 53% 0; background-size: 138.62% 4000%; }
.sp-door .im.im-r6 img.focus-r6 { position: absolute; left: -20.47%; bottom: 0; width: 138.62%; height: 85%; max-width: none; object-fit: cover; }

.sp-hero-curve { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; }
.sp-hero-curve svg { display: block; width: 100%; height: 92px; }

/* ---------- modules: card grid, no connecting line, no numbers (round 14) ---------- */
.sp-mods-wrap { display: block; padding-top: 40px; padding-bottom: 96px; }
.sp-mods { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 88px 40px; padding-top: 60px; }
.sp-mod { position: relative; display: flex; flex-direction: column; padding: 0 48px 48px; border-radius: 12px; background: transparent; border: 1.5px solid color-mix(in srgb, var(--sec) 30%, transparent); }
.sp-mod:nth-child(4n+1), .sp-mod:nth-child(4n) { background: var(--tint); border-color: transparent; }
.sp-mod:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 20px); box-sizing: border-box; }
.sp-mod-icon { position: relative; z-index: 1; width: 112px; height: 112px; margin-top: -56px; flex: none; border-radius: 50%; background: var(--sec); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px #FCFAF6, 0 10px 24px rgba(51, 56, 61, 0.14); }
.sp-mod-ic { display: block; width: 58px; height: 58px; fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sp-mod-body { position: relative; flex: 1; display: flex; flex-direction: column; gap: 14px; padding-top: 28px; }
.sp-mod-title { font-family: var(--odtd-serif); font-size: 34px; font-weight: 400; line-height: 1.12; color: var(--odtd-ink); }
.sp-chips { list-style: none; margin: 0 0 18px; padding: 4px 0 0; max-width: 64ch; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 17px; line-height: 1.45; color: var(--odtd-muted); }
.sp-chips li { position: relative; padding-left: 15px; }
.sp-chips li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--sec); }

.sp-btn { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 12px; padding: 17px 30px; font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; background: var(--odtd-blue); color: var(--odtd-paper); transition: background .15s ease; }
.sp-btn:hover { background: var(--odtd-rust); color: var(--odtd-paper); }
.section-page .ar { display: inline-flex; transition: transform .25s ease; }
.sp-btn:hover .ar, .sp-eng-btn:hover .ar { transform: translateX(5px); }

/* ---------- "Engaging this module" band (round 6) ---------- */
.sp-eng { position: relative; overflow: hidden; background: var(--odtd-blue); color: var(--odtd-paper); }
.sp-eng-mark { position: absolute; top: -70px; left: 50%; transform: translateX(-50%); height: calc(100% + 70px); width: auto; aspect-ratio: 120 / 152; opacity: 0.04; pointer-events: none; }
.sp-eng-in { position: relative; padding-top: 80px; padding-bottom: 88px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sp-eng-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #F5F8FB; }
.sp-eng-h { margin-top: 14px; font-family: var(--odtd-serif); font-size: 42px; font-weight: 400; line-height: 1.15; color: var(--odtd-paper); }
.sp-eng-steps { margin-top: 48px; width: 100%; max-width: 940px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.sp-eng-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sp-eng-step + .sp-eng-step::before { content: ""; position: absolute; top: 45px; left: calc(-50% + 32px); width: calc(100% - 96px); border-top: 2px dotted rgba(252, 250, 246, 0.45); }
.sp-eng-icon { width: 92px; height: 92px; border-radius: 50%; border: 1.5px solid rgba(252, 250, 246, 0.5); background: rgba(252, 250, 246, 0.08); display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin-bottom: 8px; }
.sp-eng-ic { display: block; width: 48px; height: 48px; fill: none; stroke: var(--odtd-paper); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sp-eng-label { font-family: var(--odtd-serif); font-size: 28px; font-weight: 400; line-height: 1.1; color: var(--odtd-paper); }
.sp-eng-text { font-size: 17px; line-height: 1.5; color: var(--odtd-paper); max-width: 28ch; text-wrap: balance; }
.sp-eng-btn { margin-top: 52px; display: inline-flex; align-items: center; gap: 12px; padding: 17px 30px; font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; background: var(--odtd-paper); color: var(--odtd-blue); transition: background .15s ease, color .15s ease; }
.sp-eng-btn:hover { background: var(--odtd-rust); color: var(--odtd-paper); }

@media (prefers-reduced-motion: reduce) { .section-page .ar, .sp-btn, .sp-eng-btn { transition: none !important; transform: none !important; } }

/* ---------- wide screens (boards: >=1600 the content area grows to 1760 / 80px gutters) ---------- */
@media (min-width: 1600px) {
	.page-template-page-templates-section .wrap { max-width: 1760px; padding-left: 80px; padding-right: 80px; }
	.page-template-page-templates-section .foot-grid { gap: 80px; }
	.sp-hero-grid { grid-template-columns: minmax(0, 1fr) 430px; gap: 128px; }
	.sp-door { width: 430px; height: 615px; }
	.sp-door .fr, .sp-door .im { width: 416px; height: 601px; border-radius: 208px 208px 3px 3px; }
	.sp-lead { font-size: 40px; }
	.sp-eng-h { font-size: 46px; }
	.sp-eng-steps { max-width: 1040px; }
}

/* ---------- tablet ---------- */
@media (max-width: 1139px) {
	.sp-hero-grid { grid-template-columns: minmax(0, 1fr) 288px; gap: 56px; }
	.sp-door { width: 288px; height: 412px; }
	.sp-door .fr, .sp-door .im { width: 278px; height: 402px; border-radius: 139px 139px 3px 3px; }
	.sp-door .fr { left: 10px; top: 10px; }
	.sp-title { font-size: 56px; }
	.sp-lead { font-size: 30px; }
	.sp-mod { padding: 0 36px 40px; }
}

@media (max-width: 820px) {
	.sp-hero-mark { left: 50%; }
	.sp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
	.sp-door { justify-self: center; }
	.sp-mods { grid-template-columns: minmax(0, 1fr); gap: 80px; }
	.sp-mod:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
	/* one column: alternate tint / outline row by row */
	.sp-mod:nth-child(4n+1), .sp-mod:nth-child(4n) { background: transparent; border-color: color-mix(in srgb, var(--sec) 30%, transparent); }
	.sp-mod:nth-child(odd) { background: var(--tint); border-color: transparent; }
	.sp-hero-curve svg { height: 56px; }
}

/* ---------- phone (390) ---------- */
@media (max-width: 640px) {
	.sp-hero-in { padding-top: 24px; padding-bottom: 84px; }
	.sp-crumb { font-size: 15px; }
	.sp-hero-grid { margin-top: 24px; gap: 36px; }
	.sp-hero-text { gap: 18px; }
	.sp-title { font-size: 44px; }
	.sp-lead { font-size: 25px; line-height: 1.28; }
	.sp-door { width: 260px; height: 371px; }
	.sp-door .fr, .sp-door .im { width: 250px; height: 361px; border-radius: 125px 125px 3px 3px; }
	.sp-hero-curve svg { height: 36px; }
	.sp-mods-wrap { padding-top: 24px; padding-bottom: 64px; }
	.sp-mods { padding-top: 44px; gap: 68px; }
	.sp-mod { padding: 0 24px 32px; }
	.sp-mod-icon { width: 88px; height: 88px; margin-top: -44px; box-shadow: 0 0 0 8px #FCFAF6, 0 8px 20px rgba(51, 56, 61, 0.14); }
	.sp-mod-ic { width: 46px; height: 46px; }
	.sp-mod-body { padding-top: 22px; gap: 12px; }
	.sp-mod-title { font-size: 28px; }
	.sp-chips { font-size: 16px; gap: 8px 18px; margin-bottom: 14px; }
	.sp-btn { align-self: stretch; justify-content: center; min-height: 48px; box-sizing: border-box; }
	.sp-eng-in { padding-top: 56px; padding-bottom: 64px; }
	.sp-eng-h { font-size: 32px; }
	.sp-eng-steps { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 36px; }
	.sp-eng-step + .sp-eng-step::before { display: none; }
	.sp-eng-btn { margin-top: 40px; }
}