/* =============================================================================
   Courtyard of Christ Light Ministry — base.css
   Design tokens, reset and typography.
   ========================================================================== */

/* 1. Tokens ================================================================ */


:root {
  --ink: #141414;
  --ink-soft: #1c1c1c;
  --ink-line: rgba(244, 238, 228, 0.14);
  --cream: #f4eee4;
  --cream-deep: #eae0cf;
  --olive: #3b4a33;
  --olive-deep: #2c3826;
  --coral: #e4572e;
  --coral-dark: #c6441f;
  --amber: #f0b429;
  --white: #ffffff;

  --text: #1b1b1b;
  --text-soft: #55504a;
  --muted: #7a746a;
  --on-dark: rgba(244, 238, 228, 0.74);

  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --script: "Caveat", "Segoe Script", cursive;

  --container: 1200px;
  --gutter: 24px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  --shadow-sm: 0 4px 16px rgba(20, 20, 20, 0.08);
  --shadow: 0 18px 44px rgba(20, 20, 20, 0.14);
  --shadow-lg: 0 34px 80px rgba(20, 20, 20, 0.26);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Logo height sets the header height. Change it in Customize → CCLM Theme →
     Header → Logo height; the header grows to fit. */
  --logo-h: 96px;
  --header-h: max(86px, calc(var(--logo-h, 96px) + 30px));
}

/* 2. Reset & base ========================================================== */


*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text);
  background: var(--cream);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; border: 0; background: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--coral);
  color: #fff;
  padding: 12px 20px;
  font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

::selection { background: var(--coral); color: #fff; }

/* 3. Typography ============================================================ */


h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.01em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.display-xl { font-size: clamp(2.9rem, 7.4vw, 6rem); }
.display-lg { font-size: clamp(2.3rem, 5.2vw, 4rem); }
.display-md { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.display-sm { font-size: clamp(1.25rem, 2vw, 1.6rem); }

.accent { color: var(--coral); }
.accent-amber { color: var(--amber); }
.accent-cream { color: var(--cream); }

.eyebrow {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 18px;
}
.eyebrow--pill {
  background: var(--coral);
  color: #fff;
  padding: 7px 16px;
  border-radius: 4px;
}
.eyebrow--dark { background: var(--ink); color: var(--cream); }
.eyebrow--light { color: var(--amber); }

.script-note {
  font-family: var(--script);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--coral);
  line-height: 1;
  transform: rotate(-4deg);
  display: inline-block;
}

.lede {
  font-size: 1.05rem;
  color: var(--text-soft);
  max-width: 62ch;
}
.lede--center { margin-inline: auto; text-align: center; }

.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head p { color: var(--text-soft); }
.section-head--left { margin-inline: 0; text-align: left; }
/* =============================================================================
   Courtyard of Christ Light Ministry — layout.css
   Page scaffolding: containers, section bands, grids and buttons.
   ========================================================================== */

/* 4. Layout & sections ===================================================== */


/* Space between content and the sides of the page. One variable, three
   sizes, chosen in Customize → CCLM Theme → Layout → Space from the edges.
   Elementor's own wrappers pick it up too (see elementor.css). */
:root             { --gutter-x: clamp(20px, 4vw, 44px); }   /* Comfortable */
body.cclm-inset-2 { --gutter-x: clamp(28px, 6vw, 88px); }   /* Roomy — 2× */
body.cclm-inset-3 { --gutter-x: clamp(36px, 8vw, 132px); }  /* Spacious — 3× */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter-x);
}

/* The header, the heroes and the footer keep the original tighter gutter:
   they frame the page, so their content belongs near the edge. Only the page
   sections in between take the wider spacing. */
.site-header .container,
.hero .container,
.page-hero .container,
.site-footer .container {
  padding-inline: var(--gutter);
}

/* The nav bar runs edge to edge: logo hard left, Give hard right. It is not
   capped at the content width and it ignores the boxed layout entirely. */
.site-header .container {
  max-width: none;
  padding-inline: clamp(20px, 2.5vw, 48px);
}
.container--wide { max-width: 1380px; }
.container--narrow { max-width: 880px; }

.section { padding: clamp(64px, 8vw, 110px) 0; }
.section--tight { padding: clamp(48px, 5vw, 72px) 0; }

.section--cream { background: var(--cream); }
.section--cream-deep { background: var(--cream-deep); }
.section--white { background: var(--white); }
.section--ink { background: var(--ink); color: var(--cream); }
.section--olive { background: var(--olive); color: var(--cream); }

.section--ink .lede,
.section--olive .lede,
.section--ink .section-head p,
.section--olive .section-head p { color: var(--on-dark); }

.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.center { text-align: center; }
.stack-cta { margin-top: 46px; text-align: center; }

/* 5. Buttons =============================================================== */


.btn {
  --btn-bg: var(--coral);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }

.btn--coral:hover { background: var(--coral-dark); }
.btn--amber { --btn-bg: var(--amber); --btn-fg: var(--ink); }
.btn--amber:hover { background: #dda31c; }
.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--cream); }
.btn--light { --btn-bg: var(--cream); --btn-fg: var(--ink); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  border: 2px solid currentColor;
  padding: 13px 28px;
}
.btn--ghost:hover { background: currentColor; }
.btn--ghost:hover span { color: var(--ink); }
.btn--sm { padding: 11px 22px; font-size: 0.72rem; }
.btn--block { width: 100%; justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.link-arrow::after {
  content: "↗";
  transition: transform 0.25s var(--ease);
}
.link-arrow:hover::after { transform: translate(3px, -3px); }
/* =============================================================================
   Courtyard of Christ Light Ministry — chrome.css
   Header, navigation, photo strip, footer, back-to-top.
   ========================================================================== */

/* 6. Header & navigation =================================================== */


.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.3s var(--ease), height 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.55), transparent);
  opacity: 1;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.site-header.is-stuck {
  height: 70px;
  background: var(--ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.site-header.is-stuck::before { opacity: 0; }

.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative;
  z-index: 1;
}

/* Logo only — swap .brand-mark for an <img> and it inherits the same sizing. */
.brand { display: flex; align-items: center; color: var(--cream); }
.brand-mark {
  flex: none;
  display: block;
  width: var(--logo-h, 96px);
  height: var(--logo-h, 96px);
  transition: transform 0.4s var(--ease), width 0.3s var(--ease), height 0.3s var(--ease);
}
.brand img.brand-mark {
  width: auto;
  max-width: calc(var(--logo-h, 96px) * 4);
  height: var(--logo-h, 96px);
  object-fit: contain;
}
.brand:hover .brand-mark { transform: rotate(20deg); }
.brand img.brand-mark:hover { transform: none; }

/* Once the page has scrolled the header condenses and the logo shrinks a
   little with it. */
.site-header.is-stuck .brand-mark { width: calc(var(--logo-h, 96px) * 0.8); height: calc(var(--logo-h, 96px) * 0.8); }
.site-header.is-stuck .brand img.brand-mark { width: auto; height: calc(var(--logo-h, 96px) * 0.8); }

.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 30px; }
.nav-list a {
  position: relative;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cream);
  padding: 6px 0;
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--coral);
  transition: width 0.28s var(--ease);
}
.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after { width: 100%; }
.nav-list a[aria-current="page"] { color: var(--amber); }

.header-actions { display: flex; align-items: center; gap: 16px; }

.icon-link {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--cream);
  border-radius: 50%;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.icon-link:hover { background: var(--coral); color: #fff; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--cream);
}
.nav-toggle span {
  position: relative;
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: background 0.2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-8px) rotate(-45deg); }

/* 14. Photo strip & footer ================================================= */


.photo-strip { display: grid; grid-template-columns: repeat(6, 1fr); }
.photo-strip img {
  width: 100%;
  object-fit: cover;
  /* Height and focal point: see images.css */
  filter: saturate(0.92);
  transition: filter 0.4s var(--ease), transform 0.6s var(--ease);
}
.photo-strip a { overflow: hidden; display: block; }
.photo-strip a:hover img { filter: saturate(1.15); transform: scale(1.07); }

.site-footer { background: var(--ink); color: var(--cream); padding: clamp(56px, 6vw, 84px) 0 0; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 44px;
  padding-bottom: 56px;
}
.footer-col h3 { font-size: 1.15rem; margin-bottom: 18px; }
.footer-col p { font-size: 0.92rem; color: var(--on-dark); }
.footer-col ul { display: grid; gap: 11px; font-size: 0.94rem; }
.footer-col ul a { color: var(--on-dark); transition: color 0.22s var(--ease), padding-left 0.22s var(--ease); }
.footer-col ul a:hover { color: var(--amber); padding-left: 5px; }
.footer-col address { font-style: normal; font-size: 0.94rem; color: var(--on-dark); line-height: 1.75; }

.newsletter { display: flex; gap: 10px; margin-top: 20px; max-width: 400px; }
/* A light field on the dark footer, so what you type is unmistakably black.
   Doubled selector out-specifies the generic input resets WordPress plugins
   and Elementor ship, which were making typed text match the placeholder. */
.site-footer .newsletter input,
.site-footer .newsletter input:focus {
  flex: 1;
  padding: 13px 15px;
  border: 1px solid rgba(244, 238, 228, 0.25);
  border-radius: 6px;
  background: #ffffff;
  color: #111111;
  -webkit-text-fill-color: #111111;
}
.site-footer .newsletter input::placeholder {
  color: #222222;
  -webkit-text-fill-color: #222222;
  opacity: 1;
}
.site-footer .newsletter input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.35); }

/* Church logo in the footer. */
.footer-brand { display: flex; align-items: center; gap: 18px; }
.footer-brand .brand-mark { width: 56px; height: 56px; }
.footer-brand img.brand-mark { width: auto; max-width: 200px; height: 56px; object-fit: contain; }
.footer-brand .brand:hover .brand-mark { transform: none; }

.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ink-line);
  border-radius: 50%;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.footer-social a:hover { background: var(--coral); border-color: var(--coral); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0 34px;
  border-top: 1px solid var(--ink-line);
}
.footer-wordmark {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  text-transform: uppercase;
  line-height: 1;
}
.footer-bottom p { font-size: 0.84rem; color: rgba(244, 238, 228, 0.5); margin: 0; }

.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--coral);
  color: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.3s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--coral-dark); }
/* =============================================================================
   Courtyard of Christ Light Ministry — components.css
   Reusable pieces: split layouts, pillars, media cards, carousel, accordion.
   ========================================================================== */

/* 8. Content blocks ======================================================== */


/* Split */
.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
/* Crop ratio and focal point: see images.css */
.split__body h2 { margin-bottom: 22px; }

/* Pillars */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(27, 27, 27, 0.14);
  border-bottom: 1px solid rgba(27, 27, 27, 0.14);
}
.pillar {
  padding: 40px 34px;
  text-align: center;
  border-left: 1px solid rgba(27, 27, 27, 0.14);
}
.pillar:first-child { border-left: 0; }
.pillar h3 { font-size: 1.15rem; margin-bottom: 14px; }
.pillar p { font-size: 0.94rem; color: var(--text-soft); margin: 0; }

/* Generic media card */
.media-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  display: block;
  background: var(--ink);
}
.media-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.media-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.85) 8%, rgba(10, 10, 10, 0.05) 60%);
  z-index: 1;
}
.media-card:hover img { transform: scale(1.06); }
.media-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 26px;
  color: var(--cream);
}
.media-card__body h3 { font-size: 1.3rem; margin-bottom: 12px; }
.media-card__body p { font-size: 0.9rem; color: var(--on-dark); margin-bottom: 14px; }

/* Carousel */
.carousel { position: relative; }
.carousel__viewport { overflow: hidden; }
.carousel__track {
  display: flex;
  gap: 24px;
  transition: transform 0.55s var(--ease);
}
.carousel__item { flex: 0 0 calc((100% - 72px) / 4); }
.carousel__btn {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  font-size: 1.1rem;
  box-shadow: var(--shadow-sm);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.carousel__btn:hover { background: var(--coral); color: #fff; }
.carousel__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.carousel__btn--prev { left: -22px; }
.carousel__btn--next { right: -22px; }

/* Accordion */
.accordion { border-top: 1px solid rgba(27, 27, 27, 0.14); }
.accordion__item { border-bottom: 1px solid rgba(27, 27, 27, 0.14); }
.accordion__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 4px;
  text-align: left;
  font-size: 1.02rem;
  font-weight: 600;
  transition: color 0.25s var(--ease);
}
.accordion__btn:hover { color: var(--coral); }
.accordion__icon {
  flex: none;
  position: relative;
  width: 18px;
  height: 18px;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.accordion__icon::before { top: 8px; left: 0; width: 18px; height: 2px; }
.accordion__icon::after { top: 0; left: 8px; width: 2px; height: 18px; }
.accordion__btn[aria-expanded="true"] .accordion__icon::after { transform: scaleY(0); }
.accordion__btn[aria-expanded="true"] { color: var(--coral); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}
.accordion__panel > div { overflow: hidden; }
.accordion__panel.is-open { grid-template-rows: 1fr; }
.accordion__panel p {
  padding: 0 4px 24px;
  color: var(--text-soft);
  max-width: 70ch;
}

.section--ink .accordion,
.section--ink .accordion__item { border-color: var(--ink-line); }
.section--ink .accordion__panel p { color: var(--on-dark); }

/* In-page email sign-up (CCLM Email Sign-up widget). Same look as the footer
   form, usable on any band. */
.newsletter--inline { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter--inline .field { flex: 1 1 200px; }
.newsletter--inline input,
.newsletter--inline input:focus {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(20, 20, 20, 0.18);
  border-radius: 6px;
  background: #ffffff;
  color: #111111;
  -webkit-text-fill-color: #111111;
}
.newsletter--inline input::placeholder { color: #222222; -webkit-text-fill-color: #222222; opacity: 1; }
.newsletter--inline input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.35); }
.newsletter--inline .form-status { flex-basis: 100%; }
@media (max-width: 640px) {
  .newsletter--inline { flex-direction: column; }
}
/* =============================================================================
   Courtyard of Christ Light Ministry — heroes.css
   The home hero and the inner-page title banners.
   ========================================================================== */

/* 7. Heroes ================================================================ */


.hero {
  position: relative;
  min-height: min(92vh, 820px);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 40px) 0 60px;
  color: var(--cream);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(12, 12, 12, 0.86) 0%,
    rgba(12, 12, 12, 0.6) 45%,
    rgba(12, 12, 12, 0.25) 100%
  );
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 48px;
  align-items: end;
}
.hero__title { max-width: 14ch; }
.hero__title .line-2 { display: block; color: var(--amber); }
.hero__text { max-width: 46ch; color: var(--on-dark); margin: 26px 0 34px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__card {
  background: var(--olive);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.hero__card .script-note {
  position: absolute;
  top: -22px;
  right: 18px;
  color: var(--amber);
}
.hero__card h3 { font-size: 2rem; margin-bottom: 6px; }
.hero__card ul { display: grid; gap: 10px; margin-top: 18px; }
.hero__card li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.9rem;
  color: var(--on-dark);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-line);
}
.hero__card li:last-child { border-bottom: 0; padding-bottom: 0; }
.hero__card li strong { color: var(--cream); font-weight: 600; }

/* Inner page hero */
.page-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 60px) 0 60px;
  color: var(--cream);
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(12, 12, 12, 0.78), rgba(12, 12, 12, 0.35));
}
.page-hero .container { position: relative; z-index: 1; }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.breadcrumb a:hover { color: var(--amber); }
.breadcrumb span[aria-hidden] { color: var(--coral); }
/* =============================================================================
   Courtyard of Christ Light Ministry — home.css
   Home page only: welcome, events, sermons, countdown band, pastors, giving band, get involved, FAQ.
   ========================================================================== */

/* 9. Home page blocks ====================================================== */


.welcome { text-align: center; position: relative; }
.welcome__mark {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--olive);
  color: var(--cream);
}
.welcome h2 { margin-bottom: 22px; }
.welcome .script-note { margin-top: 26px; }

/* Events */
.event-list { display: grid; gap: 18px; }
.event {
  display: grid;
  grid-template-columns: 84px 168px 1fr auto;
  gap: 28px;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius);
  padding: 18px 26px 18px 18px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.event:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.event__date {
  text-align: center;
  padding: 14px 8px;
  border-right: 1px solid rgba(27, 27, 27, 0.1);
}
.event__day { font-family: var(--display); font-size: 2.4rem; line-height: 1; }
.event__month {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
  margin-top: 4px;
}
.event__thumb { border-radius: var(--radius-sm); overflow: hidden; }
.event__thumb img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.event__body h3 { font-size: 1.15rem; margin-bottom: 8px; }
.event__body p { font-size: 0.9rem; color: var(--text-soft); margin-bottom: 8px; }
.event__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Sermon cards */
.sermon-card {
  background: rgba(244, 238, 228, 0.06);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.sermon-card:hover { transform: translateY(-5px); border-color: var(--coral); }
.sermon-card__media { position: relative; }
.sermon-card__media img { width: 100%; object-fit: cover; }
/* Crop ratio and focal point: see images.css */
.play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(228, 87, 46, 0.94);
  color: #fff;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.play-btn:hover { transform: scale(1.12); background: var(--coral-dark); }
.sermon-card__body { padding: 24px 22px 26px; }
.sermon-card__body h3 { font-size: 1.08rem; margin-bottom: 12px; color: var(--cream); }
.sermon-card__meta {
  display: flex;
  gap: 16px;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}

/* Countdown */
.countdown-band {
  position: relative;
  padding: clamp(56px, 6vw, 84px) 0;
  color: var(--cream);
  overflow: hidden;
  text-align: center;
}
.countdown-band__media { position: absolute; inset: 0; }
.countdown-band__media img { width: 100%; height: 100%; object-fit: cover; }
.countdown-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 12, 0.8);
}
.countdown-band .container { position: relative; z-index: 1; }
.countdown {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 4vw, 54px);
  margin: 30px 0 34px;
}
.countdown__unit { min-width: 84px; }
.countdown__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1;
}
.countdown__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: 8px;
}

/* Pastors */
.pastor-card { position: relative; border-radius: var(--radius); overflow: hidden; }
.pastor-card img {
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.pastor-card:hover img { transform: scale(1.05); }
.pastor-card__body {
  position: absolute;
  inset: auto 16px 16px 16px;
  background: rgba(20, 20, 20, 0.86);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  color: var(--cream);
}
.pastor-card__body h3 { font-size: 1.1rem; }
.pastor-card__body span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
  margin-top: 6px;
}

/* Support band */
.support {
  position: relative;
  padding: clamp(70px, 8vw, 120px) 0;
  color: var(--cream);
  overflow: hidden;
}
.support__media { position: absolute; inset: 0; }
.support__media img { width: 100%; height: 100%; object-fit: cover; }
.support__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(12, 12, 12, 0.88), rgba(12, 12, 12, 0.45));
}
.support .container { position: relative; z-index: 1; }
.support__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 56px;
  align-items: center;
}
.support__panel {
  background: var(--cream);
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
  box-shadow: var(--shadow-lg);
}
.support__panel h3 { font-size: 1.4rem; margin-bottom: 8px; }
.support__panel p { font-size: 0.92rem; color: var(--text-soft); }

.amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 16px; }
.amount-btn {
  padding: 13px 6px;
  border: 2px solid rgba(27, 27, 27, 0.16);
  border-radius: 8px;
  background: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.22s var(--ease);
}
.amount-btn:hover { border-color: var(--coral); color: var(--coral); }
.amount-btn.is-active { background: var(--coral); border-color: var(--coral); color: #fff; }

.field-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid rgba(27, 27, 27, 0.16);
  border-radius: 8px;
  padding: 0 14px;
  margin-bottom: 18px;
  background: var(--white);
}
.field-inline span { font-weight: 700; color: var(--muted); }
.field-inline input { flex: 1; border: 0; padding: 13px 0; background: none; outline: none; }

/* Get involved */
.involve-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 34px 28px 32px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.involve-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.involve-card__media {
  width: 150px;
  height: 150px;
  margin: 0 auto 24px;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--cream-deep);
}
.involve-card__media img { width: 100%; height: 100%; object-fit: cover; }
.involve-card h3 { font-size: 1.15rem; margin-bottom: 12px; }
.involve-card p { font-size: 0.92rem; color: var(--text-soft); margin-bottom: 18px; }

/* FAQ split */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 70px);
  align-items: start;
}
/* =============================================================================
   Courtyard of Christ Light Ministry — ministries.css
   The ministries grid and the how-to-join steps.
   ========================================================================== */

/* 10. Ministries page ====================================================== */


.ministry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ministry-card { min-height: 340px; }
.ministry-card .media-card__body h3 { font-size: 1.45rem; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: step; }
.step { position: relative; padding-top: 56px; }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--display);
  font-size: 2.6rem;
  color: var(--coral);
  opacity: 0.85;
  line-height: 1;
}
.step h3 { font-size: 1.05rem; margin-bottom: 10px; }
.step p { font-size: 0.92rem; color: var(--text-soft); }
.section--ink .step p { color: var(--on-dark); }
/* =============================================================================
   Courtyard of Christ Light Ministry — broadcast.css
   Live player, platform cards, schedule table, filterable archive.
   ========================================================================== */

/* 11. Broadcast page ======================================================= */


.live-hero {
  background: var(--ink);
  color: var(--cream);
  padding: calc(var(--header-h) + 70px) 0 clamp(60px, 7vw, 96px);
  position: relative;
  overflow: hidden;
}
.live-hero::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  top: -220px;
  right: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 87, 46, 0.24), transparent 68%);
  pointer-events: none;
}
.live-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr);
  gap: 44px;
  align-items: center;
}

.player {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #000;
  aspect-ratio: 16 / 9;
}
.player img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.player__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  text-align: center;
  padding: 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.18));
}
.player__overlay h3 { font-size: clamp(1.2rem, 2.4vw, 1.8rem); }
.player .play-btn { position: static; width: 76px; height: 76px; }

.live-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 40px;
  background: var(--coral);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.live-badge--offline { background: rgba(244, 238, 228, 0.16); color: var(--cream); }
.live-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

.viewer-count {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 40px;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(6px);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--cream);
}

.next-panel {
  background: rgba(244, 238, 228, 0.055);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}
.next-panel h3 { font-size: 1.5rem; margin-bottom: 6px; }
.next-panel > p { font-size: 0.92rem; color: var(--on-dark); }
.next-panel .countdown { margin: 24px 0 22px; gap: 10px; justify-content: flex-start; }
.next-panel .countdown__unit {
  min-width: 0;
  flex: 1;
  background: rgba(244, 238, 228, 0.06);
  border-radius: 10px;
  padding: 14px 6px;
  text-align: center;
}
.next-panel .countdown__num { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.next-panel .countdown__label { font-size: 0.58rem; letter-spacing: 0.14em; }

.platform-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.platform-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.platform-card__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--olive);
  color: var(--cream);
}
.platform-card h3 { font-size: 1rem; margin-bottom: 3px; }
.platform-card p { font-size: 0.82rem; color: var(--muted); margin: 0; }

.schedule {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.schedule caption { text-align: left; padding-bottom: 18px; color: var(--on-dark); font-size: 0.94rem; }
.schedule th {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  padding: 0 16px 14px 0;
  border-bottom: 1px solid var(--ink-line);
}
.schedule td {
  padding: 20px 16px 20px 0;
  border-bottom: 1px solid var(--ink-line);
  color: var(--on-dark);
  font-size: 0.94rem;
  vertical-align: middle;
}
.schedule td:first-child { color: var(--cream); font-weight: 600; }
.schedule tr:hover td { background: rgba(244, 238, 228, 0.035); }
.tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 40px;
  border: 1px solid var(--ink-line);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
}
.tag--live { background: var(--coral); border-color: var(--coral); color: #fff; }

.filter-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 44px; }
.chip {
  padding: 10px 22px;
  border: 1.5px solid rgba(27, 27, 27, 0.18);
  border-radius: 40px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: all 0.22s var(--ease);
}
.chip:hover { border-color: var(--coral); color: var(--coral); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.archive-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.archive-card.is-hidden { display: none; }
.archive-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.archive-card__media { position: relative; }
.archive-card__media img { width: 100%; object-fit: cover; }
/* Crop ratio and focal point: see images.css */
.archive-card__media .play-btn { width: 52px; height: 52px; }
.duration {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(10, 10, 10, 0.82);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
}
.archive-card__body { padding: 22px 22px 24px; }
.archive-card__body h3 { font-size: 1.05rem; margin-bottom: 12px; }
.archive-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.archive-card__meta .cat { color: var(--coral); }

/* Elementor draws Font Awesome as inline SVG; without a size the SVG takes its
   own proportions and a tall glyph bursts out of the tile. Pin it. */
.platform-card__icon { overflow: hidden; }
.platform-card__icon svg,
.platform-card__icon i {
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 1;
  fill: currentColor;
  display: block;
}
/* =============================================================================
   Courtyard of Christ Light Ministry — contact.css
   Map frame, location cards, form fields.
   ========================================================================== */

/* 12. Contact page ========================================================= */


.map-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--cream-deep);
  min-height: 340px;
}
.map-frame img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }
.map-note {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 20px;
  background: rgba(20, 20, 20, 0.82);
  color: var(--cream);
  font-size: 0.84rem;
  text-align: center;
}
.map-pin {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 0;
  background: var(--coral);
  transform: rotate(-45deg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}
.map-pin::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--cream);
}

.info-block h3 {
  font-size: 0.74rem;
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: 8px;
}
.info-block p { font-size: 0.96rem; }

.location-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.location-card > img { width: 100%; object-fit: cover; }
/* Crop ratio and focal point: see images.css */
.location-card__body { padding: 26px 26px 28px; }
.location-card__body h3 { font-size: 1.25rem; margin-bottom: 18px; }
.location-card__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 20px; }

/* Forms */
.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid rgba(27, 27, 27, 0.18);
  border-radius: 8px;
  background: var(--white);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(228, 87, 46, 0.16);
}
.field.has-error input,
.field.has-error textarea { border-color: #c0392b; }
.field__error {
  display: none;
  margin-top: 6px;
  font-size: 0.8rem;
  color: #c0392b;
}
.field.has-error .field__error { display: block; }

.form-status {
  display: none;
  padding: 14px 18px;
  border-radius: 8px;
  background: rgba(59, 74, 51, 0.12);
  border-left: 4px solid var(--olive);
  font-size: 0.92rem;
}
.form-status.is-visible { display: block; }

/* A live map fills the frame. */
.map-frame iframe { width: 100%; height: 100%; min-height: 380px; display: block; border: 0; }
/* =============================================================================
   Courtyard of Christ Light Ministry — give.css
   Giving panel, impact cards, other-ways cards.
   ========================================================================== */

/* 13. Give page ============================================================ */


.give-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow);
}
.give-toggle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 6px;
  background: var(--cream-deep);
  border-radius: 10px;
  margin-bottom: 28px;
}
.give-toggle button {
  padding: 12px;
  border-radius: 7px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: all 0.22s var(--ease);
}
.give-toggle button.is-active { background: var(--white); color: var(--coral); box-shadow: var(--shadow-sm); }

.give-panel .amount-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.give-panel .amount-btn { padding: 18px 6px; font-size: 1.1rem; font-family: var(--display); letter-spacing: 0.02em; }

.give-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  margin: 6px 0 22px;
  border-top: 1px solid rgba(27, 27, 27, 0.12);
  border-bottom: 1px solid rgba(27, 27, 27, 0.12);
}
.give-summary span { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.give-summary strong { font-family: var(--display); font-size: 2rem; color: var(--coral); }

.impact-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--coral);
}
.impact-card .pct {
  font-family: var(--display);
  font-size: 2.6rem;
  color: var(--olive);
  line-height: 1;
  display: block;
  margin-bottom: 12px;
}
.impact-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.impact-card p { font-size: 0.9rem; color: var(--text-soft); margin: 0; }

.way-card {
  padding: 30px 28px;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  background: rgba(244, 238, 228, 0.045);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.way-card:hover { border-color: var(--coral); transform: translateY(-4px); }
.way-card h3 { font-size: 1.1rem; margin-bottom: 12px; color: var(--cream); }
.way-card p { font-size: 0.92rem; color: var(--on-dark); margin: 0; }
.way-card dl { display: grid; gap: 8px; margin: 14px 0 0; font-size: 0.9rem; }
.way-card dt { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.way-card dd { margin: 0 0 8px; color: var(--cream); }
/* =============================================================================
   Courtyard of Christ Light Ministry — images.css
   Responsive image behaviour: focal points and per-breakpoint crop ratios.

   Every cropped image in this design uses `object-fit: cover`, which by default
   crops evenly around the CENTRE. That is why faces get cut off: a wide group
   photo dropped into a tall card keeps the middle and throws away the sides.

   Two things fix it, and both live here:
     1. A focal point per image, so you choose what must stay in frame.
     2. Crop ratios that relax as the screen narrows, so a tall frame on a wide
        photograph does not have to discard most of the picture.
   ========================================================================== */

/* 1. Focal points ========================================================== */

:root {
  --focal-x: 50%;
  --focal-y: 50%;
}

/* Everything this design crops honours the focal point. */
.hero__media img,
.page-hero__media img,
.countdown-band__media img,
.support__media img,
.split__media img,
.media-card img,
.pastor-card img,
.sermon-card__media img,
.archive-card__media img,
.event__thumb img,
.location-card > img,
.involve-card__media img,
.photo-strip img,
.cclm-image-strip img,
.player > img,
.map-frame img {
  object-position: var(--focal-x) var(--focal-y);
}

/* Faces sit above the middle of a frame more often than not, so portraits and
   people-led cards lean upward unless told otherwise.

   This is set on the CARD, not the <img>. A custom property set on an ancestor
   is inherited, which means a .focal-* class on the image still overrides it.
   Setting it on the image directly would out-specify every utility class below
   and quietly make them do nothing. */
.pastor-card,
.involve-card__media {
  --focal-y: 28%;
}

/* Put a focal class on the image, or on any wrapper around it.
   Vertical: what part of the picture to keep. */
.focal-top    { --focal-y: 0%; }
.focal-upper  { --focal-y: 25%; }
.focal-middle { --focal-y: 50%; }
.focal-lower  { --focal-y: 75%; }
.focal-bottom { --focal-y: 100%; }

/* Horizontal. */
.focal-left   { --focal-x: 0%; }
.focal-centre { --focal-x: 50%; }
.focal-right  { --focal-x: 100%; }

/* Corners, for when a subject sits off to one side. */
.focal-top-left     { --focal-x: 0%;   --focal-y: 0%; }
.focal-top-right    { --focal-x: 100%; --focal-y: 0%; }
.focal-bottom-left  { --focal-x: 0%;   --focal-y: 100%; }
.focal-bottom-right { --focal-x: 100%; --focal-y: 100%; }


/* 2. Crop ratios that relax as the screen narrows ========================== */

/* Split photographs: nearly square on desktop, wider and shallower on phones
   so a landscape source is not squeezed into a portrait hole. */
.split__media img { aspect-ratio: 4 / 3.4; }

@media (max-width: 1024px) {
  .split__media img { aspect-ratio: 16 / 11; }
}
@media (max-width: 640px) {
  .split__media img { aspect-ratio: 16 / 10; }
}

/* Card images keep their proportion at every width, deliberately.

   It is tempting to widen a card's crop as the screen narrows, but that is the
   wrong instinct: when a three-column grid drops to two, and then to one, each
   card gets WIDER, not narrower. Widening the ratio as well makes cards squat —
   a ministry card ended up 1.45:1 on a phone with a heading, a paragraph and a
   link sitting on top of it, and a portrait came out landscape.

   Only photographs that sit BESIDE text (above) relax, because there the frame
   really does change shape. */

/* Ministry / overlay cards: square-ish, so overlaid text has room.

   The ratio lives on the CARD and the photograph is pinned to fill it. If the
   ratio sat on the image instead, anything that made the card taller — a long
   caption, a flex row stretching items to match — would leave the image short
   and the bottom of the card bare, which is exactly what happened. */
.media-card.media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1 / 1.05;
  min-height: 340px;
  overflow: hidden;
  isolation: isolate;

  /* aspect-ratio plus min-height lets a card derive its WIDTH from its
     height, and a 1fr grid column will stretch to fit that rather than clamp
     it — on a phone the card grew wider than the screen. Pin the width to the
     column so the ratio can only ever set height. */
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* On a phone the caption often makes the card taller than the ratio allows,
   so drop the ratio there and let a generous min-height carry it. */
@media (max-width: 640px) {
  .media-card.media-card {
    aspect-ratio: auto;
    min-height: 380px;
  }
}

/* Grid columns must be allowed to shrink below their content's preferred width. */
.ministry-grid,
.grid {
  min-width: 0;
}
.ministry-grid > *,
.grid > * {
  min-width: 0;
}
.media-card.media-card > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--focal-x) var(--focal-y);
}
.media-card.media-card::after { z-index: 1; }
.media-card.media-card > .media-card__body {
  position: relative;
  inset: auto;
  z-index: 2;
  margin-top: auto;
}

/* Pastor portraits stay portrait. Never let this exceed 1:1. */
.pastor-card img { aspect-ratio: 3 / 3.7; }

@media (max-width: 640px) {
  /* Full width on a phone, so a touch taller reads better. */
  .pastor-card img { aspect-ratio: 3 / 3.9; }
}

/* Sermon and archive thumbnails are already wide; keep them steady. */
.sermon-card__media img,
.archive-card__media img { aspect-ratio: 16 / 9; }

@media (max-width: 640px) {
  .sermon-card__media img,
  .archive-card__media img { aspect-ratio: 16 / 10; }
}

/* Location photographs. */
.location-card > img { aspect-ratio: 16 / 10; }

@media (max-width: 640px) {
  .location-card > img { aspect-ratio: 16 / 11; }
}

/* The full-bleed strip between content and footer. */
.photo-strip img { height: 190px; }

@media (max-width: 1024px) {
  .photo-strip img { height: 170px; }
}
@media (max-width: 640px) {
  .photo-strip img { height: 140px; }
}

/* Heroes: a tall viewport crop on a wide photograph loses the sides, so shrink
   the demand for height as the screen narrows. */
@media (max-width: 860px) {
  .hero { min-height: 0; }
  .page-hero { min-height: 380px; }
}
@media (max-width: 640px) {
  .page-hero { min-height: 320px; }
}

/* 3. Loading behaviour ===================================================== */

/* Reserve space while an image loads so the page does not jump. Pair this with
   width and height attributes on the <img> itself. */
img[width][height] { height: auto; }

/* A decoded image fades in rather than snapping, which hides slow connections. */
@media (prefers-reduced-motion: no-preference) {
  .split__media img,
  .media-card img,
  .pastor-card img,
  .archive-card__media img {
    transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
  }
}

/* 4. Elementor image widgets ===============================================
   Elementor's own stylesheet contains:

       .elementor-widget-image img { width: 100%; height: auto; }

   `height: auto` has the same specificity as a plain `.class img` rule and is
   loaded after the theme, so it silently cancels any height or crop we set.
   The result is an image that simply scales with its natural proportions — it
   never fills its frame, card heights drift apart, and everything looks like it
   is shrinking as the window changes.

   The rules below out-specify it (two classes + element) rather than reaching
   for !important, and give each kind of image a frame it always fills.
   ====================================================================== */

.cclm-framed .elementor-widget-container img,
.cclm-thumb .elementor-widget-container img,
.cclm-strip .elementor-widget-container img,
.cclm-round-photo .elementor-widget-container img,
.cclm-cover .elementor-widget-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal-x) var(--focal-y);
}

/* The frame each one fills. Change a ratio here and it changes site-wide. */
.cclm-framed .elementor-widget-container { aspect-ratio: 4 / 3.4; }
.cclm-thumb  .elementor-widget-container { aspect-ratio: 16 / 10; }
.cclm-cover  .elementor-widget-container { aspect-ratio: 3 / 2; }

.cclm-strip .elementor-widget-container {
  height: clamp(240px, 32vw, 420px);
  line-height: 0;
}

.cclm-round-photo .elementor-widget-container {
  width: 150px;
  height: 150px;
  aspect-ratio: auto;
}

/* Same relaxation as the rest of the design: shallower frames on narrow
   screens so a wide photograph is not forced into a tall hole. */
@media (max-width: 1024px) {
  .cclm-framed .elementor-widget-container { aspect-ratio: 16 / 11; }
}
@media (max-width: 640px) {
  .cclm-framed .elementor-widget-container { aspect-ratio: 16 / 10; }
  .cclm-thumb  .elementor-widget-container { aspect-ratio: 16 / 11; }
  .cclm-round-photo .elementor-widget-container { width: 130px; height: 130px; }
}

/* Ratio overrides you can add to any image widget's CSS Classes field. */
.ratio-square    .elementor-widget-container { aspect-ratio: 1 / 1; }
.ratio-portrait  .elementor-widget-container { aspect-ratio: 3 / 4; }
.ratio-landscape .elementor-widget-container { aspect-ratio: 3 / 2; }
.ratio-wide      .elementor-widget-container { aspect-ratio: 16 / 9; }
.ratio-auto      .elementor-widget-container { aspect-ratio: auto; }
.ratio-auto      .elementor-widget-container img { height: auto; object-fit: fill; }

/* Containers carrying a photograph as their background: keep a sensible height
   at every width instead of collapsing to whatever the content needs. */
.cclm-overlay-card { min-height: 400px; background-size: cover; }
.cclm-portrait-card { min-height: 480px; background-size: cover; }
.cclm-hero { background-size: cover; }
.cclm-page-hero { background-size: cover; }
.cclm-band { background-size: cover; }

/* Two across: each card is wider, so it needs MORE height, not less. */
@media (max-width: 1024px) {
  .cclm-overlay-card { min-height: 380px; }
  .cclm-portrait-card { min-height: 440px; }
}
/* Full width on a phone. */
@media (max-width: 640px) {
  .cclm-overlay-card { min-height: 360px; }
  .cclm-portrait-card { min-height: 420px; }
}

/* Background focal point, mirroring the object-position utilities. */
.cclm-overlay-card,
.cclm-portrait-card,
.cclm-hero,
.cclm-page-hero,
.cclm-band { background-position: var(--focal-x) var(--focal-y); }

/* 5. Beating Elementor's blanket image reset ===============================
   Elementor's frontend stylesheet carries a reset of the form

       .elementor img { height: auto; max-width: 100%; }

   Images in this design that fill a FIXED-SIZE parent — the circular photos,
   the hero and band photographs, the photo strip, the player poster, the map —
   depend on `height: 100%`. That reset has the same specificity as a plain
   `.class img` rule and loads after the theme, so it cancels those heights and
   the image falls back to its natural proportions: a landscape strip floating
   inside a circle, or a photograph that no longer reaches the bottom of its
   band.

   Repeating the class raises specificity just enough to win, without reaching
   for !important, and it behaves identically outside Elementor.
   ====================================================================== */

.hero__media.hero__media img,
.page-hero__media.page-hero__media img,
.countdown-band__media.countdown-band__media img,
.support__media.support__media img,
.involve-card__media.involve-card__media img,
.player.player > img,
.map-frame.map-frame img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--focal-x) var(--focal-y);
  display: block;
}

/* The photo strip uses a fixed height rather than a ratio, so it needs the
   same treatment at each breakpoint. */
.photo-strip.photo-strip img {
  width: 100%;
  height: 190px;
  max-width: none;
  object-fit: cover;
}
@media (max-width: 1024px) {
  .photo-strip.photo-strip img { height: 170px; }
}
@media (max-width: 640px) {
  .photo-strip.photo-strip img { height: 140px; }
}

/* Images sized by aspect-ratio (cards, thumbnails, split photos) are NOT
   affected: `height: auto` combined with an aspect-ratio still computes the
   right height. They are left alone deliberately. */
/* =============================================================================
   Courtyard of Christ Light Ministry — utilities.css
   Helpers, motion preferences, responsive rules and print styles. Loads last so its media queries win.
   ========================================================================== */

/* 15. Utilities, motion, responsive ======================================== */


.img-fallback {
  background: linear-gradient(135deg, var(--olive) 0%, var(--ink) 55%, var(--coral) 160%);
  position: relative;
}
.img-fallback::after {
  content: "CCLM";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  color: rgba(244, 238, 228, 0.28);
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1120px) {
  .carousel__item { flex: 0 0 calc((100% - 48px) / 3); }
  .carousel__btn--prev { left: 6px; }
  .carousel__btn--next { right: 6px; }
}

@media (max-width: 1024px) {
  :root { --header-h: max(74px, calc(var(--logo-h, 96px) + 20px)); }

  .nav-list { gap: 22px; }
  .nav-list a { font-size: 0.72rem; letter-spacing: 0.1em; }

  .hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .hero__card { max-width: 420px; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ministry-grid { grid-template-columns: repeat(2, 1fr); }
  .archive-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .live-hero__grid { grid-template-columns: 1fr; }
  .support__grid { grid-template-columns: 1fr; gap: 36px; }
  .faq-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .photo-strip { grid-template-columns: repeat(3, 1fr); }
  .event { grid-template-columns: 72px 140px 1fr; }
  .event > .btn { grid-column: 3; justify-self: start; }
}

@media (max-width: 860px) {
  .nav-toggle { display: grid; }

  /* The nav is a fixed drawer from here down, so it can no longer push the
     actions right — .header-actions has to claim the free space itself. */
  .header-actions { margin-left: auto; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 84vw);
    background: var(--ink);
    padding: calc(var(--header-h) + 26px) 30px 30px;
    transform: translateX(100%);
    transition: transform 0.38s var(--ease);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav-list a {
    display: block;
    padding: 14px 0;
    font-size: 0.92rem;
    border-bottom: 1px solid var(--ink-line);
  }
  .nav-list a::after { display: none; }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease);
    z-index: 99;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-left: 0; border-top: 1px solid rgba(27, 27, 27, 0.14); }
  .pillar:first-child { border-top: 0; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .carousel__item { flex: 0 0 calc((100% - 24px) / 2); }
  .event { grid-template-columns: 64px 1fr; gap: 18px; }
  .event__thumb { display: none; }
  .event > .btn { grid-column: 2; }
  .location-card__cols { grid-template-columns: 1fr; }
  .schedule thead { display: none; }
  .schedule tr { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--ink-line); }
  .schedule td { border: 0; padding: 0; }
  .schedule td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 2px;
  }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .grid-2, .grid-3, .grid-4,
  .ministry-grid, .archive-grid, .steps,
  .amount-grid, .form__row, .footer-grid { grid-template-columns: 1fr; }
  .give-panel .amount-grid { grid-template-columns: repeat(2, 1fr); }
  .carousel__item { flex: 0 0 100%; }
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .countdown { gap: 10px; }
  .countdown__unit { min-width: 0; flex: 1; }
  .newsletter { flex-direction: column; max-width: none; }
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 70px); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Narrow phones: drop the header social links so the logo, GIVE and the
     menu button always fit on one row instead of overflowing off-screen. */
  .header-actions .icon-link { display: none; }
  .header-actions { gap: 8px; }
  .brand-mark { width: calc(var(--logo-h, 96px) * 0.75); height: calc(var(--logo-h, 96px) * 0.75); }
  .brand img.brand-mark { width: auto; max-width: calc(var(--logo-h, 96px) * 3); height: calc(var(--logo-h, 96px) * 0.75); }
  .nav-toggle { width: 40px; }
}

@media (max-width: 360px) {
  .header-actions .btn--sm { padding: 10px 14px; font-size: 0.66rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .to-top, .nav, .photo-strip { display: none; }
  body { background: #fff; color: #000; }
}

/* Site overrides ============================================================ */
/* ============================================================
   HERO BACKGROUND
   ============================================================ */

/* ---- A. Current pages — the photo is an <img> -------------- */

/* Change which part of the photo stays in frame */
.hero .hero__media img {
  object-position: 50% 35%;   /* x%  y%  — lower y = show more of the top */
}

/* Darkness of the wash over it */
.hero .hero__media::after {
  background: linear-gradient(
    100deg,
    rgba(12,12,12,0.86) 0%,
    rgba(12,12,12,0.60) 45%,
    rgba(12,12,12,0.25) 100%
  );
}


/* ============================================================
   HERO — centre the text and buttons
   ============================================================ */

/* ---- Current pages (CCLM Hero widget) ---------------------- */
.hero .hero__inner > div:first-child {
  /*text-align: center;*/
}
.hero .hero__title {
  max-width: none;          /* it's capped at 14ch, which blocks centring */
}
.hero .hero__text {
  max-width: 46ch;
  /*margin-left: auto;*/
  /*margin-right: auto;*/
}
.hero .hero__actions {
  /*justify-content: center;*/
}

/* ---- New-layout pages (container hero) --------------------- */
/* Laptop: left-aligned (the theme's default, so nothing to add) */

/* Tablet and mobile: centred */
@media (max-width: 1024px) {
  .hero .hero__inner > div:first-child { text-align: center; }
  .hero .hero__title { max-width: none; }
  .hero .hero__text { margin-left: auto; margin-right: auto; }
  .hero .hero__actions { justify-content: center; }
}

/* ============================================================
   MINISTRY CARDS — photo fills the whole card
   (carousel on Home, grid on Our Ministries)
   ============================================================ */

/* The card carries the shape; the photo is pinned to fill it. */
.media-card.media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1 / 1.05;      /* card shape — try 4/5 for taller */
  min-height: 340px;
  overflow: hidden;
  isolation: isolate;
}

.media-card.media-card > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 50%);
}

/* Dark gradient stays between photo and text. */
.media-card.media-card::after { z-index: 1; }

/* Text sits at the bottom, over the photo. */
.media-card.media-card > .media-card__body {
  position: relative;
  inset: auto;
  z-index: 2;
  margin-top: auto;
}

/* ============================================================
   COUNTDOWN BAND ("Gathering again in")
   ============================================================ */

.countdown-band {
  /* Height comes from the content + padding, never from a fixed value —
     that is what guarantees the photo always reaches the button. */
  aspect-ratio: auto;
  min-height: 0;
  display: block;
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 7vw, 96px);

  /* Which part of the photo survives the crop.
     Lower = more of the top. Try 30%, 40%, 55%. */
  --focal-x: 50%;
  --focal-y: 40%;
}

/* Make the photo cover the whole band, whatever its height turns out to be. */
.countdown-band__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.countdown-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkness of the wash. Lower the last number to show more of the photo. */
.countdown-band__media::after {
  background: rgba(12, 12, 12, 0.72);
}

@media (max-width: 640px) {
  .countdown-band {
    padding-block: 56px;
    --focal-y: 35%;
  }
}

/* GET INVOLVED — circular photos */
.involve-card__media {
  width: 150px;
  height: 150px;
  margin: 0 auto 24px;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--cream-deep);
  --focal-y: 30%;          /* lower = more of the top of the photo */
}
.involve-card__media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: var(--focal-x) var(--focal-y);
  display: block;
}

/* ============================================================
   MINISTRY CARDS — stop overflowing on mobile
   ============================================================ */

/* Pin the card to its column so the ratio can only set height, never width. */
.media-card.media-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Let grid columns shrink below their content's preferred width. */
.ministry-grid,
.ministry-grid > * {
  min-width: 0;
}

/* On a phone the caption is taller than the ratio allows, so drop the ratio
   there and let a generous min-height carry the card instead. */
@media (max-width: 640px) {
  .media-card.media-card {
    aspect-ratio: auto;
    min-height: 380px;
  }
}

/* ============================================================
   MINISTRY CARDS — photo fills the whole card, every screen size
   ============================================================ */

/* The card sets the size; the photo is pinned to fill it. */
.ministry-card.media-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1.05;
  min-height: 340px;
  overflow: hidden !important;
  isolation: isolate;
  background: #141414;
}

/* Photo: cover the card edge to edge, whatever its height. */
.ministry-card.media-card > img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: var(--focal-x, 50%) var(--focal-y, 35%);
}

/* Dark gradient so the text stays readable over the photo. */
.ministry-card.media-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(10,10,10,.88) 10%, rgba(10,10,10,.05) 62%);
  pointer-events: none;
}

/* Caption sits on top, anchored to the bottom. */
.ministry-card.media-card > .media-card__body {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  margin-top: auto !important;
}

/* Grid columns may shrink below their content width (stops phone overflow). */
.ministry-grid,
.ministry-grid > * { min-width: 0; }

/* Tablet: two columns, slightly shorter cards. */
@media (max-width: 1024px) {
  .ministry-card.media-card { min-height: 320px; }
}

/* Phone: caption can be taller than the ratio allows — drop the ratio and
   let min-height carry the card; the photo still fills whatever height it is. */
@media (max-width: 640px) {
  .ministry-card.media-card {
    aspect-ratio: auto;
    min-height: 380px;
  }
}

/* Header logo size (set in Customizer on the WordPress site) */
:root { --logo-h: 70px; }
.site-header .brand .brand-mark { height: 70px !important; width: auto !important; max-width: 280px !important; }
.site-header.is-stuck .brand .brand-mark { height: 56px !important; }
@media (max-width: 640px) { .site-header .brand .brand-mark { height: 53px !important; } }

/* Section columns (replaces Elementor's section/column layout) ============== */
/* Sections run to the page gutter rather than the 1200px container width. */
.section > .container { max-width: none; }
.cols {
  display: grid;
  grid-template-columns: var(--cols, 1fr);
  gap: 0;
  align-items: stretch;
}
/* Each column pads 10px and stacks its widgets 20px apart in a flex column,
   so vertical margins add up instead of collapsing. */
.col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 10px;
}
@media (max-width: 767px) {
  .cols { grid-template-columns: 1fr; }
}

/* Widget rows (Elementor "container" wrappers) ============================== */
.econ { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
.econ--row { flex-direction: row; }
.econ__item { flex: 1 1 0; min-width: 0; }
@media (max-width: 767px) {
  .econ--row { flex-direction: column; }
  .econ__item { align-self: stretch !important; width: 100%; }
}

/* Form feedback ============================================================= */
.form-status.is-error { background: rgba(192, 57, 43, 0.1); border-left-color: #c0392b; }

/* Very narrow phones: let long button labels wrap instead of overflowing. */
@media (max-width: 360px) { .btn { white-space: normal; text-align: center; } }

/* Video embed fills the player frame (the YouTube snippet ships fixed 560x315). */
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* Keep the Live/Offline badge above the video, and clear of its title bar. */
.player .live-badge { z-index: 3; top: auto; bottom: 18px; left: 18px; }

/* Footer credit link */
.footer-bottom p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color 0.22s var(--ease); }
.footer-bottom p a:hover { color: var(--amber); }