/* ═══════════════════════════════════════════════════════════════════════════
   CORNERSTONE — template-specific styles only.

   Everything structural lives in core/ and families/liturgical.css. What is
   here is what makes this template Cornerstone rather than Lantern: the arch
   proportion, the hero rhythm, and the treatment of the sacraments table.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Service times get a little more air than the shared component: this is the
   thing most visitors came for. */
.services { margin-block-start: var(--s-5); }
.service { padding-block: var(--s-5); }

/* The sacraments table reads as a rubric sheet, not a data grid. */
#sacraments table { font-size: var(--t-sm); }
#sacraments thead th { border-block-end: var(--border-strong); }
#sacraments td:first-child { font-variant-caps: all-small-caps; letter-spacing: 0.05em; font-size: var(--t-base); }

/* Giving sits on the raised surface with a hairline, no shadow. */
.giving { border-color: var(--line-strong); }

/* Pathway rules take the season colour, so the whole page shifts together. */
.pathway { border-block-start-width: 3px; }
.pathway:hover h3 { color: var(--accent); }

/* ── Plan-your-visit page ───────────────────────────────────────────────────
   A definition list, because the questions genuinely are terms and answers.
   No accordion: hiding the answers behind a click is exactly wrong on the one
   page a nervous first-time visitor came to read. */
.qa { display: grid; gap: 0; border-block-start: var(--border-strong); }
.qa dt {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  padding-block-start: var(--s-5);
}
.qa dd {
  margin: 0;
  padding-block: var(--s-2) var(--s-5);
  border-block-end: var(--border);
  color: var(--fg-muted);
}

/* Wide screens: question left, answer right. Stacked, the answer was capped at
   the measure while its rule ran the full column — leaving a dead strip down
   the right of every row. Two columns fill the width and align the rules. */
@media (min-width: 52rem) {
  .qa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); column-gap: var(--s-7); }
  .qa dt {
    grid-column: 1;
    padding-block: var(--s-5);
    border-block-end: var(--border);
  }
  .qa dd { grid-column: 2; padding-block: var(--s-5); }
}

/* The order of service is a real sequence, so it is numbered — and the
   numerals are set in the display face, aligned in their own column. */
.order { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 0; }
.order li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3rem 1fr;
  /* Row gap must be 0: the heading and paragraph are now separate rows in
     column 2, so a row gap would stack on top of the paragraph's own margin. */
  column-gap: var(--s-4);
  row-gap: 0;
  padding-block: var(--s-5);
  border-block-end: var(--border);
}
/* ::before is itself a grid item and takes cell 1, so without this the <h3>
   lands in cell 2 and the <p> wraps onto a new row back in the 3rem numeral
   column — 48px wide. Both children belong in column 2. */
.order li > * { grid-column: 2; }
.order li::before {
  grid-column: 1;
  content: counter(step);
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-variant-numeric: lining-nums;
  color: var(--accent);
  line-height: 1;
}
.order h3 { font-size: var(--t-md); }
.order p { color: var(--fg-muted); margin-block-start: var(--s-2); }

@media (max-width: 34rem) {
  .order li { grid-template-columns: 2rem 1fr; gap: var(--s-3); }
}

/* The church year layout now lives in core/css/viz.css, beside the wheel it
   lays out — a second template needed it. */

/* ── Stewardship sits under the giving panel, sharing its column ─────────── */
.stewardship { margin-block-start: var(--s-8); }
.stewardship .section-head { border-block-start: none; padding-block-start: 0; }

.figures { margin-block-start: var(--s-8); }

/* ── Inner-page hero: same idiom, half the height ──────────────────────────── */
.hero--page { min-block-size: min(50vh, 24rem); grid-template-rows: 1fr; }
.hero--page .hero__inner { padding-block: var(--s-7) var(--s-6); }
.hero--page .hero__title { font-size: var(--t-2xl); max-inline-size: 18ch; }

/* ── Feature row: image beside prose ──────────────────────────────────────── */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: center;
}
@media (max-width: 54rem) { .feature { grid-template-columns: 1fr; } }

/* ── Sermon list ──────────────────────────────────────────────────────────── */
.sermons { list-style: none; padding: 0; display: grid; gap: 0; border-block-start: var(--border-strong); }
.sermon {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding-block: var(--s-4);
  border-block-end: var(--border);
}
.sermon__date {
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  font-family: var(--font-ui); color: var(--accent);
}
.sermon__date span { font-size: var(--t-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.sermon__date small { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; }
.sermon__title { font-size: var(--t-md); }
.sermon__title a { text-decoration: none; }
.sermon__title a:hover { color: var(--accent); text-decoration: underline; }
.sermon__meta { font-family: var(--font-ui); font-size: var(--t-xs); color: var(--fg-muted); margin-block-start: .15rem; }
@media (max-width: 42rem) {
  .sermon { grid-template-columns: 3rem 1fr; }
  .sermon__actions { grid-column: 2; }
}

/* ── Cards that are links ─────────────────────────────────────────────────── */
.card--link { text-decoration: none; padding: 0; border: none; background: none; gap: var(--s-3); }
.card--link .frame { border: var(--border); }
.card--link:hover .card__title { color: var(--accent); }

/* ── Events ───────────────────────────────────────────────────────────────── */
.events { list-style: none; padding: 0; display: grid; gap: 0; border-block-start: var(--border-strong); }
.event {
  display: grid; grid-template-columns: 7rem 1fr auto; gap: var(--s-4);
  align-items: baseline; padding-block: var(--s-4); border-block-end: var(--border);
}
.event__date { font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.event__title { font-size: var(--t-md); }
.event__meta { font-size: var(--t-sm); color: var(--fg-muted); margin-block-start: .2rem; }
.event__price { font-family: var(--font-ui); font-size: var(--t-xs); color: var(--fg-muted); }
@media (max-width: 42rem) { .event { grid-template-columns: 1fr; gap: var(--s-1); } }

/* ── Timeline ─────────────────────────────────────────────────────────────── */
.timeline { list-style: none; padding: 0; display: grid; gap: 0; border-block-start: var(--border-strong); }
.timeline li { display: grid; grid-template-columns: 5rem 1fr; gap: var(--s-5); padding-block: var(--s-5); border-block-end: var(--border); }
.timeline__year { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; color: var(--accent); font-variant-numeric: lining-nums; }
.timeline h3 { font-size: var(--t-md); }
.timeline p { color: var(--fg-muted); margin-block-start: var(--s-2); }
@media (max-width: 42rem) { .timeline li { grid-template-columns: 1fr; gap: var(--s-2); } }

/* ── Contact ──────────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-8); align-items: start; }
@media (max-width: 60rem) { .contact-grid { grid-template-columns: 1fr; } }
.person > div { display: flex; flex-direction: column; gap: .2rem; }

/* Demo only — added by build/demo.mjs, not present in the downloadable zip. */
.photo-credit {
  padding-block: var(--s-4) var(--s-6);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--fg-muted);
}
.photo-credit a { color: inherit; }