/* ═══════════════════════════════════════════════════════════════════════════
   CHROME — CLASSIC.

   The page architecture Cornerstone uses, and the one most church sites use:
   top bar, full-bleed hero with a scrim and a docked action bar, then a stack
   of centred sections each introduced by a kicker and a heading.

   It is a good architecture. It is not the ONLY one, and a family that wants a
   different page shape should write its own rather than inherit this — see
   families/movement.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Site header ────────────────────────────────────────────────────────── */
.site-header {
  border-block-end: var(--border);
  background: var(--bg);
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-block-size: 4.5rem;
}
.site-header__brand {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.15;
}
.site-header__brand small {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  margin: 0; padding: 0;
}
.site-nav a {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  text-decoration: none;
  padding-block: var(--s-2);
  border-block-end: 2px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { border-block-end-color: var(--accent); }

.nav-toggle { display: none; }

@media (max-width: 60rem) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    min-block-size: 2.75rem;
    background: transparent;
    border: var(--border-strong);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: var(--t-sm);
    cursor: pointer;
  }
  .site-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    background: var(--bg);
    border-block-end: var(--border);
    padding: var(--s-4) var(--gutter) var(--s-6);
  }
  .site-nav[data-open] { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li + li { border-block-start: var(--border); }
  .site-nav a { display: block; padding: var(--s-4) 0; border-block-end: none; }
}

/* ── Hero ───────────────────────────────────────────────────────────────────
   Full-bleed photograph, name over it, action bar docked to the bottom edge.
   This is the idiom every serious liturgical site uses, and it is what makes
   a church site read as a church rather than as a journal.

   Contrast is held by a FLAT scrim — no gradient anywhere in this system —
   sized so the type sits on the darkest part of the frame. */
.hero {
  position: relative;
  isolation: isolate;
  min-block-size: min(78vh, 40rem);
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  /* base.css gives every <section> a 6rem block padding; here it would float
     the docked action bar 96px off the bottom edge of the image. */
  padding-block: 0;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(12 10 14 / 0.56);
}

.hero__inner {
  align-self: end;
  padding-block: var(--s-8) var(--s-7);
  color: #fff;
  text-shadow: 0 1px 14px rgb(0 0 0 / 0.5);
}
.hero__title {
  font-size: var(--t-3xl);
  max-inline-size: 15ch;
  color: #fff;
  margin-block-start: var(--s-3);
}
.hero__lede {
  font-size: var(--t-md);
  max-inline-size: 42ch;
  color: rgb(255 255 255 / 0.9);
  margin-block-start: var(--s-4);
}

/* The hero kicker sits on photography, so it cannot inherit --fg-muted.
   Families that give the hero its own ground (Movement's ink slug) override
   this from their own stylesheet, which loads later. */
.hero__inner .label { color: #fff; opacity: 0.82; }

/* Docked action bar. Three doors, edge to edge, on the darkest band. */
.hero__bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgb(255 255 255 / 0.22);
  border-block-start: 1px solid rgb(255 255 255 / 0.22);
}
.hero__bar a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--s-4) var(--gutter);
  background: rgb(12 10 14 / 0.72);
  color: #fff;
  text-decoration: none;
  min-block-size: 2.75rem;
  transition: background var(--transition);
}
.hero__bar a:hover { background: var(--accent); }
.hero__bar span { font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 600; }
.hero__bar small { font-family: var(--font-ui); font-size: var(--t-xs); color: rgb(255 255 255 / 0.7); }

@media (max-width: 46rem) {
  .hero { min-block-size: min(70vh, 32rem); }
  .hero__bar { grid-template-columns: 1fr; }
  .hero__bar small { display: none; }
  .hero__bar a { padding-block: var(--s-3); }
}

/* ── Today ──────────────────────────────────────────────────────────────────
   The strip that makes the site feel inhabited: the date, the season, and
   what is on next. */
.today { padding-block: 0; background: var(--bg-raised); border-block-end: var(--border); }
.today__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5) var(--s-7);
  padding-block: var(--s-5);
}
.today__inner > div { display: flex; flex-direction: column; gap: 0.1rem; }
.today__inner strong { font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; }
.today__cta { margin-inline-start: auto; }
@media (max-width: 46rem) { .today__cta { margin-inline-start: 0; } }

/* ── Service times ──────────────────────────────────────────────────────────
   The single most-looked-for thing on a church website. It is a definition
   list, because that is what it is: a time and what happens at it. */
.services {
  display: grid;
  gap: 0;
  border-block-start: var(--border-strong);
}
.service {
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-4);
  border-block-end: var(--border);
}
@media (max-width: 40rem) {
  .service { grid-template-columns: 1fr; gap: var(--s-1); }
}
.service__time {
  font-family: var(--font-ui);
  font-size: var(--t-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.service__name { font-size: var(--t-md); }
.service__note { font-family: var(--font-ui); font-size: var(--t-sm); color: var(--fg-muted); }

/* ── Cards ──────────────────────────────────────────────────────────────────
   Square corners, hairline rule, no shadow. Elevation is not a church idiom. */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--bg-raised);
  border: var(--border);
  border-radius: var(--radius);
}
.card__title { font-size: var(--t-lg); }
.card__meta { font-family: var(--font-ui); font-size: var(--t-xs); color: var(--fg-muted); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s-5);
}

/* ── Pathways — the three-doors pattern, done without icon boxes ─────────── */
.pathway {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-block-start: var(--s-4);
  border-block-start: 3px solid var(--accent);
  text-decoration: none;
}
.pathway h3 { font-size: var(--t-lg); }
.pathway p { color: var(--fg-muted); font-size: var(--t-sm); }
.pathway__go {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accent);
  margin-block-start: auto;
  padding-block-start: var(--s-3);
}

/* ── Giving slot ────────────────────────────────────────────────────────────
   Provider-agnostic: the church drops in Tithe.ly, Givebutter, Planning
   Center or a plain link. We never hardcode a processor. */
.giving {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
  padding: var(--s-7);
  background: var(--bg-raised);
  border: var(--border);
}
@media (max-width: 54rem) { .giving { grid-template-columns: 1fr; padding: var(--s-5); } }
.giving__embed { min-block-size: 12rem; }
.giving__embed:empty::after {
  content: "Paste your giving provider’s embed code here — see README.";
  display: grid;
  place-items: center;
  min-block-size: 12rem;
  padding: var(--s-5);
  border: 1px dashed var(--line-strong);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  color: var(--fg-muted);
  text-align: center;
}

/* ── Staff ──────────────────────────────────────────────────────────────── */
.person { display: flex; flex-direction: column; gap: var(--s-3); }
.person img { aspect-ratio: 4 / 5; object-fit: cover; inline-size: 100%; border-radius: var(--radius); }
.person__role { font-family: var(--font-ui); font-size: var(--t-sm); color: var(--fg-muted); }

/* ── Section heading ────────────────────────────────────────────────────── */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-block-end: var(--s-6);
  padding-block-start: var(--s-3);
  border-block-start: var(--border-strong);
}
.section-head h2 { max-inline-size: 22ch; }
.section-head .label { color: var(--accent); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  margin-block-start: var(--s-9);
  padding-block: var(--s-7) var(--s-6);
  border-block-start: var(--border-strong);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--s-6);
}
.site-footer h3 { font-size: var(--t-base); font-family: var(--font-ui); text-transform: uppercase;
  letter-spacing: var(--tracking-label); font-size: var(--t-xs); color: var(--fg-muted); }
.site-footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.site-footer a { text-decoration: none; font-size: var(--t-sm); }
.site-footer a:hover { text-decoration: underline; }
.site-footer__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4);
  margin-block-start: var(--s-7); padding-block-start: var(--s-4);
  border-block-start: var(--border);
  font-family: var(--font-ui); font-size: var(--t-xs); color: var(--fg-muted);
}