/* Ligbron Moot theme 1.1.1: page layouts. Heroes, photos, and the section patterns used by the page content. */

/* ---------- photos: no text overlaid, never taller than 460px in a band ---------- */
.lb-foto { margin: 0; width: 100%; }
.lb-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 460px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.lb-foto--wyd img { aspect-ratio: 16 / 9; }
.lb-foto--band img { aspect-ratio: 16 / 9; max-height: 460px; }
@media (min-width: 900px) { .lb-foto--band img { aspect-ratio: 21 / 9; } }
.lb-foto--kind img { object-position: 50% 30%; }
.lb-foto--hoog img { aspect-ratio: 4 / 5; }
/* on phones and tablets text always comes before its photo, so two photos never stack */
@media (max-width: 899px) { .two > .lb-foto:first-child { order: 2; } }

/* ---------- home hero: full-bleed photo with a dark gradient, white type ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--jac-deep); }
.hero .hero-bg { position: absolute; inset: 0; z-index: -1; margin: 0; }
.hero .hero-bg img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; object-position: 50% 45%; border-radius: 0; box-shadow: none; }
.hero .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 20, 16, .55) 0%, rgba(14, 20, 16, .70) 55%, rgba(14, 20, 16, .82) 100%); }
@media (min-width: 900px) {
	.hero .hero-bg::after { background: linear-gradient(90deg, rgba(14, 20, 16, .88) 0%, rgba(14, 20, 16, .74) 42%, rgba(14, 20, 16, .30) 75%, rgba(14, 20, 16, .12) 100%), linear-gradient(0deg, rgba(14, 20, 16, .45) 0%, transparent 35%); }
}
.hero .hero-inner { position: relative; padding-block: 64px 60px; }
@media (min-width: 900px) { .hero .hero-inner { padding-block: 88px 76px; } }
.hero .hero-inner > * { margin: 0; max-width: 680px; }
.hero .kicker { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.75rem); line-height: 1.1; color: #FDEBDD; }
.hero h1 { margin-top: 14px; font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: #fff; max-width: 21ch; }
.hero .sub { margin-top: 24px; font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem); line-height: 1.65; color: rgba(255, 255, 255, .92); max-width: 58ch; }
.hero .btns { margin-top: 34px; }
.hero .plant { margin-top: 30px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .32); font-size: .92rem; color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero .plant::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); flex: none; }
.hero .plant strong { color: #fff; }

/* buttons on dark backgrounds */
:is(.hero, .page-hero, .dark) .is-style-sec .wp-block-button__link, :is(.hero, .page-hero, .dark) .btn.sec { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .04); }
:is(.hero, .page-hero, .dark) .is-style-sec .wp-block-button__link:hover, :is(.hero, .page-hero, .dark) .btn.sec:hover { background: #fff; color: var(--ink); }

/* ---------- inner page hero: deep green, text left and photo right (stacked on phones) ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--jac-deep); color: #fff; padding-block: 48px 52px; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 90% at 100% 0%, rgba(205, 90, 38, .22), transparent 65%), radial-gradient(ellipse 50% 80% at 0% 100%, rgba(58, 98, 73, .55), transparent 70%); }
@media (min-width: 900px) { .page-hero { padding-block: 72px 76px; } }
.page-hero .wrap > * { margin: 0; }
.page-hero .crumb { color: rgba(255, 255, 255, .78); margin-bottom: 18px; }
.page-hero .crumb a { color: #fff; }
.page-hero .eyebrow { color: var(--amber); margin-bottom: 12px; }
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .lede, .page-hero .wrap > p:not(.crumb), .page-hero .hero-text > p:not(.crumb) { color: rgba(255, 255, 255, .9); max-width: 58ch; }
.page-hero h1 + .lede, .page-hero h1 + p, .page-hero h1 + div { margin-top: 22px; }
.page-hero .lede { font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem); }
.page-hero .btns { margin-top: 30px; }
.page-hero .hero-text > * { margin: 0; }
.page-hero .hero-text > h1 + * { margin-top: 22px; }
.page-hero .hero-text > .btns, .page-hero .hero-text > .wp-block-buttons, .page-hero .wrap > .btns { margin-top: 30px; }
.page-hero .meta-row { color: rgba(255, 255, 255, .86); }
.page-hero h1 + .meta-row { margin-top: 18px; }
.page-hero .meta-row :is(b, a) { color: #fff; }
/* text-only heroes: the flame from the logo, drawn as a quiet outline on the right */
.page-hero:not(:has(.hero-split))::after { content: ""; position: absolute; z-index: -1; right: max(4vw, calc((100vw - var(--wrap)) / 2 + 40px)); top: 50%; width: 220px; height: 280px; transform: translateY(-50%); opacity: .14; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40'%3E%3Cpath d='M16 1c2 7-3 10-6 15-3 4-4 8-4 11a10 10 0 0 0 20 0c0-5-3-9-5-12 0 4-1 6-3 7 1-7-1-14-2-21z' fill='none' stroke='%23F4B488' stroke-width='.7'/%3E%3Cpath d='M15 22h2v4h4v2h-4v8h-2v-8h-4v-2h4z' fill='%23F4B488'/%3E%3C/svg%3E") center / contain no-repeat; display: none; }
@media (min-width: 900px) { .page-hero:not(:has(.hero-split))::after { display: block; } }
.page-hero .hero-split { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .page-hero .hero-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; } }
.page-hero .hero-foto img { aspect-ratio: 4 / 3; max-height: 440px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
@media (max-width: 899px) { .page-hero .hero-foto img { aspect-ratio: 16 / 10; } }

/* ---------- choice cards (Tuis "Wat het jou hierheen gebring?", Raak betrokke) ---------- */
.choices { display: grid; gap: 20px; }
@media (min-width: 760px) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .choices.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choice { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.choice > * { margin: 0; }
.choice h3 { font-size: 1.3rem; }
.choice h3 a { text-decoration: none; }
.choice h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.choice p { color: var(--ink-soft); }
.choice .go { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--lamp-ink); display: inline-flex; align-items: center; gap: 8px; }
.choice .go::after { content: "\2192"; transition: transform .18s ease; }
.choice:hover { border-color: var(--glow); transform: translateY(-2px); box-shadow: var(--shadow); }
.choice:hover .go::after { transform: translateX(4px); }
.choice:hover h3 a { text-decoration: underline; text-underline-offset: 4px; }
.blk:nth-child(even of .blk) .choice { background: var(--surface); }

/* ---------- week rhythm ---------- */
.rhythm { display: grid; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
@media (min-width: 760px) { .rhythm:not(.list) { grid-template-columns: repeat(3, 1fr); } }
.rhythm > div { padding: 24px 26px; display: grid; gap: 4px; align-content: start; }
.rhythm > div + div { border-top: 1px solid var(--line); }
@media (min-width: 760px) { .rhythm:not(.list) > div + div { border-top: 0; border-left: 1px solid var(--line); } }
.rhythm .day { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lamp-ink); }
.rhythm .what { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
.rhythm .meta { color: var(--ink-soft); font-size: .95rem; }
.rhythm .textlink { margin-top: 8px; font-size: .95rem; }
/* stacked version beside a photo: day label on the left */
@media (min-width: 560px) {
	.rhythm.list > div { grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 18px; padding: 20px 24px; }
	.rhythm.list > div > * { grid-column: 2; }
	.rhythm.list .day { grid-column: 1; grid-row: 1 / span 3; padding-top: .3em; }
}
.stack > .rhythm { margin-top: 8px; }

/* ---------- FAQ rows (Kom kuier "Voor jy kom") ---------- */
.faq { border-top: 1px solid var(--line-strong); }
.faq > .faq-row { display: grid; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--line-strong); }
@media (min-width: 800px) { .faq > .faq-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; } }
.faq-row > * { margin: 0; }
.faq-row h3 { font-size: 1.22rem; }
.faq-row .faq-a { display: grid; gap: .7em; color: var(--ink-soft); max-width: 64ch; }

/* ---------- a card with a photo beside its text ---------- */
.split-card { display: grid; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 36px; }
@media (min-width: 800px) { .split-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.split-card > .lb-foto img { border-radius: 0; box-shadow: none; height: 100%; max-height: 420px; }
.split-card > .stack { padding: 30px; align-content: center; }
@media (min-width: 900px) { .split-card > .stack { padding: 44px 48px; } }

/* ---------- call-to-action strip: text left, buttons right ---------- */
.cta-strip { display: grid; gap: 22px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--glow); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); }
@media (min-width: 900px) { .cta-strip { grid-template-columns: minmax(0, 1fr) auto; padding: 36px 44px; gap: 40px; } }
.cta-strip > .stack { gap: 10px; }
.cta-strip h2 { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); }
.cta-strip p { color: var(--ink-soft); max-width: 62ch; }
@media (min-width: 900px) { .cta-strip .btns { justify-content: flex-end; } }

/* a section that only holds a call-to-action strip needs less air */
.blk:has(> .wrap > .cta-strip:only-child) { padding-block: clamp(40px, 2vw + 32px, 64px); }
/* library result columns start at the top */
.two.sp { align-items: start; margin-top: 28px; }

/* ---------- mini cards (two short facts side by side) ---------- */
.minis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 6px; }
.minis > .card { padding: 20px 22px; gap: 4px; }
.minis h3 { font-size: 1.08rem; }
.minis p { font-size: .95rem; color: var(--ink-soft); }

/* ---------- "Wat ons glo": heading and photo stay beside the beliefs ---------- */
.beliefs-side { display: grid; gap: 22px; align-content: start; }
@media (min-width: 900px) { .beliefs-side { position: sticky; top: calc(var(--head-h) + 32px); } }
.beliefs { display: block; max-width: none; }
.beliefs p { padding: 18px 0 18px 46px; border-top: 1px solid var(--line-strong); position: relative; counter-increment: glo; }
.beliefs p::before { content: counter(glo); position: absolute; left: 0; top: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--jac-soft); color: var(--jac); font-weight: 800; font-size: .88rem; display: grid; place-items: center; }
.beliefs { counter-reset: glo; }
.beliefs p:last-child { border-bottom: 1px solid var(--line-strong); }

/* ---------- leaders: avatar cards (initials when no photo) ---------- */
.leaders { display: grid; gap: 20px; }
@media (min-width: 640px) { .leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .leaders { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.leader { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-items: center; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.leader > :not(.leader-photo) { grid-column: 2; margin: 0; }
.leader > p:not(.role) { grid-column: 1 / -1; margin-top: 10px; color: var(--ink-soft); font-size: .95rem; }
.leader-photo { grid-row: 1 / span 2; width: 84px; height: 84px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.leader-ph { display: grid; place-items: center; background: linear-gradient(135deg, var(--jac-soft), #F6E2D3); color: var(--jac); font-weight: 800; font-size: 1.5rem; letter-spacing: .04em; }
.leader h3 { font-size: 1.2rem; align-self: end; }
.leader .role { color: var(--lamp-ink); font-weight: 700; font-size: .9rem; align-self: start; }
.leader:not(:has(.role)) h3 { grid-row: 1 / span 2; align-self: center; }

/* ---------- intro card (Wie ons is "Ons droom") ---------- */
.dream { background: var(--surface); }
.dream h2 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); }

/* ---------- "Wat kan ek verwag?" items beside the photo ---------- */
.expect { display: grid; border-top: 1px solid var(--line-strong); margin-top: 6px; }
.expect > div { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--line-strong); }
.expect > div > * { margin: 0; }
.expect h3 { font-size: 1.15rem; }
.expect p { color: var(--ink-soft); }

/* ---------- a grid item that only wraps a card (conditional sermon card) fills its cell ---------- */
.grid > .wp-block-group:not(.card) { display: flex; min-width: 0; }
.grid > .wp-block-group:not(.card) > .card { flex: 1 1 auto; }
.two > .stack > .lede + .facts, .two > .stack > .prose + .facts { margin-top: 6px; }
.stack > .btns, .stack > .wp-block-buttons { margin-top: 8px; }
.stack > .eyebrow + h2, .card > .eyebrow + h2, .stack > .eyebrow + h3 { margin-top: -8px; }

/* ---------- safety net, part 2: component headings keep their own size and colour even if Elementor's kit
   loads (the generic heading rules in main.css are (0,1,2); these are (0,2,3)). ---------- */
html body.wp-theme-ligbron-moot .hero h1 { font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.2rem); line-height: 1.1; letter-spacing: -.02em; color: #fff; font-weight: 800; }
html body.wp-theme-ligbron-moot :is(.hero, .page-hero) :is(h1, h2) { color: #fff; }
html body.wp-theme-ligbron-moot .page-hero h1 { line-height: 1.08; }
html body.wp-theme-ligbron-moot :is(.hero, .page-hero) :is(.crumb a, .meta-row a) { color: #fff; }
html body.wp-theme-ligbron-moot :is(.card, .feature, .dream) h2 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); }
html body.wp-theme-ligbron-moot .cta-strip h2 { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); }
html body.wp-theme-ligbron-moot .choice h3 { font-size: 1.3rem; }
html body.wp-theme-ligbron-moot :is(.leader, .events) h3 { font-size: 1.2rem; }
html body.wp-theme-ligbron-moot .faq-row h3 { font-size: 1.22rem; }
html body.wp-theme-ligbron-moot :is(.minis, .notice) h3 { font-size: 1.1rem; }
html body.wp-theme-ligbron-moot .expect h3 { font-size: 1.15rem; }
html body.wp-theme-ligbron-moot .article h2 { font-size: 1.5rem; }
html body.wp-theme-ligbron-moot .success h3 { color: var(--ok-ink); }
html body.wp-theme-ligbron-moot :is(.is-style-pri, .wp-block-button:not([class*="is-style-"])) .wp-block-button__link, html body.wp-theme-ligbron-moot .btn.pri { color: var(--on-lamp); }
html body.wp-theme-ligbron-moot .is-style-wa .wp-block-button__link, html body.wp-theme-ligbron-moot .btn.wa { color: var(--on-wa); }