/*
 * Structural styles for the base template: body defaults, container,
 * sticky site header, primary nav, footer. Sits on top of tokens.css
 * (custom properties) and fonts.css (@font-face for Poppins).
 *
 * Section-specific styles (hero, intro band, cards, news strip, etc.)
 * live in their own files alongside this one.
 */

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

html {
  -webkit-text-size-adjust: 100%;

  /* Anchor scrolling: glide instead of snap, and offset the target
     so it lands below the sticky header instead of being hidden by
     it. Affects every fragment link (e.g. /about/#andre-beck from
     the sermons table). */
  scroll-behavior: smooth;
  scroll-padding-top: 96px;

  /* Reserve scrollbar space so page width does not jump between
     short and long pages or when modals/overlays appear. */
  scrollbar-gutter: stable;

  /* Standard CSS scrollbar styling (Firefox always, Chrome 121+,
     Safari 18.2+). The thumb is a brand-tinted translucent fill via
     color-mix so it reads as branded without competing with content;
     the track stays transparent. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--color-brand) 38%, transparent) transparent;
}

/* Honour user preference for reduced motion (accessibility). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Tint native form controls (the /sermons/ search input, any
   future checkboxes / radios) to the brand colour. */
:root {
  accent-color: var(--color-brand);
}

/* Chromium-only fallback for the hover transition that the
   standard scrollbar-color spec cannot express. Matches the standard
   styling above so the visual result is identical at rest; on hover
   the thumb tints to full brand red. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--color-brand) 38%, transparent);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  transition: background-color 0.18s ease-out;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand);
  background-clip: padding-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--size-body);
  line-height: var(--line-body);
  color: var(--color-text);
  background: #fff;
}

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

a {
  color: var(--color-brand);
}

/* Focus ring for keyboard users (mouse clicks suppress it via
   :focus-visible). The default UA outline varies a lot; ours is a
   solid brand-red ring with offset for legibility on any background. */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 2px;
}

.btn:focus-visible,
.btn--brand:focus-visible {
  outline-color: #fff;
  outline-offset: -4px;
}

.hero__inner :focus-visible {
  outline-color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--weight-bold);
  color: var(--color-heading);
}

/* Container: shared inner-bound for header, footer, and content
   sections. 1200 / 1024 / 767 caps lifted from the live site's
   Elementor kit (reference/design-notes.md). */
.container {
  width: 100%;
  max-width: var(--container-desktop);
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 1024px) {
  .container {
    max-width: var(--container-tablet);
  }
}

@media (max-width: 767px) {
  .container {
    max-width: var(--container-mobile);
    padding: 0 16px;
  }
}

/* ----- Skip to content (keyboard accessibility) ----- */
.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  padding: 8px 16px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  z-index: 200;
  transform: translateY(-110%);
  transition: transform 0.15s ease-out;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--color-brand-bright);
  outline-offset: 2px;
}

/* ----- Site header ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--color-rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
  flex-wrap: wrap;
}

/* On desktop, swap to a 3-column grid so the nav block sits in the
   visually-centred middle column with the logo anchored to the left.
   The side columns are fixed-width so they reliably hold the logo
   (178px wide) and balance it on the right; the centre column flexes
   to the remaining width, which keeps both nav rows centred relative
   to the container.
   Threshold = 1100px because below that the row 1 items (~592px)
   don't fit in the remaining nav column, which would force "About
   Us" onto a third row. At narrower viewports the hamburger menu
   takes over instead. */
@media (min-width: 1100px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    align-items: center;
  }

  .site-header__brand {
    grid-column: 1;
    justify-self: start;
  }

  .site-nav {
    grid-column: 2;
  }
}

/* Mobile menu toggle. Hidden on desktop; on narrow viewports it
   appears as a hamburger that toggles `aria-expanded`, which then
   shows/hides the primary nav. A small inline script in `base.html`
   wires up the click. */
.site-menu-btn {
  display: none;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--color-brand);
  border-radius: 3px;
  color: var(--color-brand);
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
}

.site-header__brand img {
  display: block;
  height: 50px;
  width: auto;
}

/* ----- Primary nav ----- */
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  /* Centred so the shorter second row (3 items) sits under the
     centre of row 1 rather than hanging off to the left. Wrap is
     forced by the .site-nav__break li between item 5 and item 6.
     Row gap is small: line-height already provides visual breathing. */
  justify-content: center;
  gap: 4px 24px;
}

/* Zero-height full-width item that forces a flex wrap. Lives in the
   markup between "About Us" and "News & Updates" so the desktop nav
   splits 5/3 across two rows. */
.site-nav__break {
  flex-basis: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  color: var(--color-brand);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.site-nav a:hover,
.site-nav a:focus {
  text-decoration: underline;
}

.site-nav .is-active a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Hamburger menu kicks in below 1100px (the threshold where the
   desktop 2-row nav stops fitting): the wrapper becomes a block,
   the menu button is visible, and opening it lays the nav out as a
   full-width stack below the brand row. */
@media (max-width: 1099px) {
  .site-menu-btn {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    flex-basis: 100%;
  }

  .site-menu-btn[aria-expanded="true"] + .site-nav {
    display: block;
    padding-bottom: 12px;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .site-nav__break {
    display: none;
  }

  .site-nav__list li {
    border-bottom: 1px solid var(--color-rule);
  }

  .site-nav__list a {
    display: block;
    padding: 12px 4px;
    font-size: 15px;
  }
}

/* ----- Site footer ----- */
.site-footer {
  margin-top: 64px;
  padding: 40px 0;
  border-top: 1px solid var(--color-rule);
  font-size: 14px;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 0.8fr auto;
  align-items: start;
  gap: 24px;
}

.site-footer__address {
  font-style: normal;
}

.site-footer__contact a {
  color: var(--color-brand);
}

.site-footer__heading {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-heading);
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__list li + li {
  margin-top: 2px;
}

.site-footer__list a,
.site-footer__more a {
  color: var(--color-brand);
}

.site-footer__more {
  margin: 8px 0 0;
}

.site-footer__meta {
  color: #666;
  margin: 0;
  grid-column: 1 / -1;
}

.site-footer__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
}

.site-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-on-brand);
  text-decoration: none;
  transition: background 0.15s ease-out;
}

.site-footer__socials a:hover,
.site-footer__socials a:focus {
  background: #9b1010;
}

.social-icon {
  width: 18px;
  height: 18px;
  display: block;
}

@media (max-width: 900px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

/* Below ~380px the 50px logo plus the menu button no longer share a
   row, which doubled the sticky header's height. Shrink both a notch
   so the header stays one row down to 320px. */
@media (max-width: 379px) {
  .site-header__inner {
    gap: 12px;
  }

  .site-header__brand img {
    height: 40px;
  }

  .site-menu-btn {
    padding: 7px 10px;
    font-size: 13px;
  }
}

/* ----- Page (static prose) ----- */
.page {
  max-width: 720px;
  margin: 56px auto 80px;
  padding: 0 24px;
}

.page__header {
  margin-bottom: 32px;
}

.page__title {
  font-size: clamp(2rem, 5vw, 2.5rem);
  line-height: 1.1;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-heading);
  margin: 0;
  /* Shrink to text width so the ::after bar below scales with the
     title rather than always sitting at the same absolute size. */
  width: fit-content;
  max-width: 100%;
}

/* Brand-red rule under every page title. Width tracks the title so
   short headings ("CALENDAR") get a proportional bar and long ones
   ("WHAT'S ON EACH WEEK") get something more substantial; min/max
   keeps it sensible at the extremes. */
.page__title::after {
  content: '';
  display: block;
  width: clamp(56px, 35%, 160px);
  height: 3px;
  background: var(--color-brand);
  margin-top: 18px;
  border-radius: 2px;
}

/* Markdown-rendered body. .prose is the wrapper class on the rendered
   page content; styling targets the elements Zola emits. */
.prose > * + * {
  margin-top: 16px;
}

.prose h2 {
  font-size: 24px;
  line-height: 1.3;
  margin-top: 32px;
  margin-bottom: 12px;
}

.prose h3 {
  font-size: 20px;
  line-height: 1.3;
  margin-top: 24px;
  margin-bottom: 8px;
}

.prose p {
  margin: 0 0 16px;
}

.prose ul,
.prose ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.prose li + li {
  margin-top: 4px;
}

.prose a {
  color: var(--color-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Scripture reference links, emitted by the `scripture` shortcode and
   macro (e.g. "Luke 15:4" opening the full passage on Bible Gateway).
   Treated as a quiet citation, not a call to action: brand red (from the
   base `a` rule) with a dotted underline that turns solid on hover and
   focus, and kept on one line so a reference never breaks awkwardly. The
   .prose-scoped selector is there to override the solid underline that
   .prose a would otherwise apply. */
.scripture-ref,
.prose a.scripture-ref {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.scripture-ref:hover,
.scripture-ref:focus-visible,
.prose a.scripture-ref:hover,
.prose a.scripture-ref:focus-visible {
  text-decoration-style: solid;
}

/* Icon form of the scripture link (the scripture macro's icon=true mode):
   a small open-book glyph shown next to a passage that acts as a series
   filter, so the Bible Gateway destination survives as its own control. */
.scripture-ref--icon,
.prose a.scripture-ref--icon {
  display: inline-flex;
  /* Centre the glyph on the text's x-height so it sits on the passage's
     line rather than hanging below the baseline. */
  vertical-align: middle;
  /* A 15px glyph alone is a fiddly touch target; the padding grows the
     hit area to ~27px square (negative margin keeps the line height
     unaffected). */
  padding: 6px;
  margin: -6px 0;
  text-decoration: none;
}

.scripture-ref--icon svg {
  display: block;
}

/* A passage rendered as a series-filter link: on /sermons/ cards it
   applies the book chip in place (js-filter-book). Quieter than a prose
   link: underline only on hover and focus. */
.prose a.sermon-series {
  text-decoration: none;
}

.prose a.sermon-series:hover,
.prose a.sermon-series:focus-visible {
  text-decoration: underline;
}

.prose strong {
  font-weight: var(--weight-bold);
}

.prose blockquote {
  margin: 16px 0;
  padding: 8px 16px;
  border-left: 3px solid var(--color-brand);
  color: #555;
}

/* Pull quote: emphasis treatment for declarations like the mission
   statement and the Mark 1:1 quote on About. Use:
     <blockquote class="pullquote">
     ...statement...
     <cite>Optional attribution</cite>
     </blockquote>
   Bigger and bolder than a default blockquote on purpose. */
.prose blockquote.pullquote {
  margin: 28px 0;
  padding: 14px 22px;
  border-left: 4px solid var(--color-brand);
  font-size: 19px;
  font-style: italic;
  line-height: 1.55;
  color: inherit;
}

.prose blockquote.pullquote p {
  margin: 0;
}

.prose blockquote.pullquote p + p {
  margin-top: 12px;
}

.prose blockquote.pullquote cite {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  font-style: normal;
  color: #555;
}

.prose img {
  display: block;
  margin: 24px auto;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 15px;
}

.prose thead th {
  text-align: left;
  padding: 12px 14px;
  background: #fafafa;
  border-bottom: 2px solid var(--color-brand);
  font-size: 13px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-heading);
}

.prose tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
}

.prose tbody tr:hover {
  background: rgba(188, 20, 20, 0.03);
}

/* Filter chip, used by the /sermons/ filter bar (sermons.css owns the
   bar layout; the chip look lives here). */
.filter-chip {
  display: inline-block;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text);
  padding: 6px 14px;
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.filter-chip:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.filter-chip:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.filter-chip.is-active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .filter-chip {
    transition: none;
  }
}

/* Share button and its fallback popover (static/js/share.js). The round
   icon button sits on each sermon card; the lightbox carries its own
   share button styled in lightbox.css. The popover appears only where
   the Web Share API is missing (desktops). */
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: #555;
  cursor: pointer;
}

/* The button ships with [hidden] until share.js wires it up; the
   display above would otherwise override the UA's [hidden] rule and
   show a dead control to no-JS visitors. */
.share-btn[hidden] {
  display: none;
}

.share-btn:hover,
.share-btn:focus-visible {
  color: var(--color-brand);
  background: rgba(188, 20, 20, 0.08);
}

.share-btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 1px;
}

.share-pop {
  position: fixed;
  z-index: 1100; /* above the lightbox overlay (1000 in lightbox.css) */
  min-width: 172px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.share-pop__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 4px;
  background: none;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}

.share-pop__item svg {
  flex: none;
}

.share-pop__item:hover {
  background: rgba(188, 20, 20, 0.07);
  color: var(--color-brand);
}

.share-pop__item:focus-visible {
  background: rgba(188, 20, 20, 0.07);
  color: var(--color-brand);
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
}

/* Wrap a wide table in `.table-scroll` to allow horizontal scrolling
   on small screens without breaking layout. (Generic utility; the
   sermons table that used to build on it left with /resources/.) */
.table-scroll {
  overflow-x: auto;
  margin: 16px 0;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  min-width: 540px;
  margin: 0;
}

/* Brand-coloured external links (YouTube, Spotify). Used inside
   `.prose` next to the corresponding section. */
.brand-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 4px;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: var(--weight-semibold);
  font-size: 14px;
  letter-spacing: 0.2px;
  transition: filter 0.15s ease-out, transform 0.15s ease-out;
}

.brand-link:hover,
.brand-link:focus-visible {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.brand-link--youtube     { background: #FF0000; }
.brand-link--spotify     { background: #1DB954; }
.brand-link--ytmusic     { background: #FF0033; }
.brand-link--applemusic  { background: #FA243C; }
.brand-link--gcal        { background: #1A73E8; }
.brand-link--apple-cal   { background: #000; }
.brand-link--outlook     { background: #0078D4; }
.brand-link--ical        { background: var(--color-brand); }

/* `.is-pending` is used on the YouTube Music and Apple Podcasts
   placeholders. Keep the original translucent brand look (the bg
   mutes via rgba alpha so the badge inside is free to stay vivid),
   render them as `<span>` (not `<a>`), so they read as visible but
   not yet linked. */
.brand-link.is-pending {
  cursor: not-allowed;
  filter: grayscale(0.15);
}

.brand-link--ytmusic.is-pending {
  background: rgba(255, 0, 51, 0.55);
}

.brand-link--applemusic.is-pending {
  background: rgba(250, 36, 60, 0.55);
}

.brand-link.is-pending .brand-link__icon,
.brand-link.is-pending .brand-link__label {
  opacity: 0.85;
}

.brand-link.is-pending:hover,
.brand-link.is-pending:focus-visible {
  filter: grayscale(0.15);
  transform: none;
}

/* Solid dark pill so "Coming soon" pops against the muted button. */
.brand-link__badge {
  margin-left: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.4;
}

/* On the resources page the four buttons should sit in a 2x2 (or 4
   across on wide screens) responsive grid. */
.brand-links--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.brand-links--grid .brand-link {
  justify-content: flex-start;
}

.brand-link__icon {
  flex: none;
  width: 20px;
  height: 20px;
}

/* Weekly schedule on the whats-on-each-week page. The `.schedule-grid`
   is a quick "at a glance" anchor list at the top; each `.schedule-item`
   jumps to the detailed `.event` section further down. */
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 16px 0 24px;
}

.schedule-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-brand);
  border-radius: 4px;
  color: var(--color-heading);
  text-decoration: none;
  transition: background 0.15s ease-out, transform 0.15s ease-out;
}

.schedule-item:hover,
.schedule-item:focus-visible {
  background: rgba(188, 20, 20, 0.04);
  transform: translateY(-1px);
}

.schedule-item__day {
  font-size: 11px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-brand);
}

.schedule-item__time {
  font-size: 16px;
  font-weight: var(--weight-bold);
  line-height: 1.2;
}

.schedule-item__name {
  font-size: 14px;
  color: var(--color-text);
  margin-top: 2px;
}

/* Detailed event sections lower on the page. Each block has a small
   day badge in its header, the event name as a regular h2, and the
   body underneath. */
.event {
  margin: 32px 0;
  padding: 24px 24px 8px;
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-brand);
  border-radius: 4px;
  background: #fff;
  scroll-margin-top: 96px;
}

.event__header {
  margin-bottom: 12px;
}

.event__when {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.event__day-badge {
  display: inline-block;
  padding: 2px 10px;
  margin-right: 8px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  vertical-align: 1px;
}

.event h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.event img {
  border-radius: 4px;
  margin: 12px 0 16px;
}

/* Values grid on the what-we-believe page. Each card has a brand-red
   top accent, the value name in brand red, an italic tagline, then
   the body paragraph. */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 20px 0 8px;
}

.value-card {
  padding: 20px 22px;
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-brand);
  border-radius: 4px;
  background: #fff;
  scroll-margin-top: 96px;
}

.value-card__name {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-brand);
}

.value-card__tagline {
  margin: 0 0 12px;
  font-style: italic;
  color: #555;
  font-size: 15px;
  line-height: 1.4;
}

.value-card > p:last-child {
  margin-bottom: 0;
}

/* Statement-of-faith style: tighten the spacing under each doctrine
   heading so the bond between heading and paragraph feels tight,
   and add a small brand-red top-rule for visual rhythm. The
   `.prose h3` rule from above sets the type sizes; we only override
   the surrounding ornamentation. */
.prose h3 {
  scroll-margin-top: 96px;
}

/* Leadership photo grids on the about page. Real names + bios are
   Each figure has the photo plus a figcaption with the leader's
   name. */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  margin: 20px 0 32px;
}

.people-grid--single {
  grid-template-columns: minmax(180px, 240px);
}

.person {
  margin: 0;
}

.person img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.person figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-heading);
}

.person__name {
  font-weight: var(--weight-bold);
}

/* ----- News card + grid (shared by home-page news strip and the
   news index). Each card has an optional featured image at the top,
   then a body with date / title / description / Read More. ----- */
.news-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.news-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-color: rgba(188, 20, 20, 0.25);
}

.news-card__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #f5f5f5;
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease-out;
}

.news-card:hover .news-card__media img {
  transform: scale(1.04);
}

.news-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
  border-top: 3px solid var(--color-brand);
}

/* When there is no featured image, the body's top accent IS the card
   accent. */
.news-card:not(:has(.news-card__media)) .news-card__body {
  padding-top: 18px;
}

.news-card__date {
  margin: 0;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-brand);
}

.news-card__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: var(--weight-bold);
}

.news-card__title a {
  color: var(--color-heading);
  text-decoration: none;
}

.news-card__title a:hover,
.news-card__title a:focus {
  color: var(--color-brand);
  text-decoration: underline;
}

.news-card__cta {
  margin: auto 0 0;
  padding-top: 4px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
}

/* Tablets get 2-up cards; the old 3-to-1 jump at 1024px produced
   enormous single-column cards on an iPad. */
@media (max-width: 1024px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}

.news-card__summary {
  margin: 0;
  font-size: 15px;
  color: #555;
  line-height: 1.5;
}

.news-index {
  margin: 40px auto 64px;
}

.news-index__header {
  margin-bottom: 32px;
}

/* Photo gallery inside news posts. Wrap a cluster of `![](...)` or
   `[![](thumb)](full)` images in `<div class="post-gallery">` to lay
   them out as a uniform grid of clickable thumbnails. */
.post-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
  margin: 24px 0;
}

/* Markdown wraps consecutive image lines in a single `<p>`, which
   becomes one grid item and squashes the layout. `display: contents`
   makes the `<p>` transparent so the inline `<a>`s become direct grid
   items. */
.post-gallery p {
  display: contents;
  margin: 0;
}

.post-gallery a {
  display: block;
  overflow: hidden;
  border-radius: 3px;
}

.post-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin: 0;
  transition: transform 0.3s ease-out;
}

.post-gallery a:hover img,
.post-gallery a:focus-visible img {
  transform: scale(1.05);
}

/* Calendar / map / generic embed wrappers used inside .prose. */
.calendar-embed,
.map-embed {
  margin: 24px 0;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.calendar-embed {
  /* Scale with viewport rather than the container's width: a 4:3 box
     was a tiny rectangle on phones and showed only 2-3 agenda events.
     The clamp gives a sensible minimum (~6-8 events visible), grows
     to 80% of viewport height, and caps so it does not become absurd
     on tall monitors. The max-height stops the 480px floor forcing
     nested scrolling on short viewports (landscape phones). */
  height: clamp(480px, 80vh, 900px);
  max-height: calc(100dvh - 110px);
}


.map-embed {
  aspect-ratio: 16 / 9;
  max-height: 420px;
}

.calendar-embed iframe,
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ----- News post-specific bits on top of .page ----- */
.post__back {
  margin: 0 0 12px;
  font-size: 14px;
}

.post__back a {
  color: var(--color-brand);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.5px;
}

.post__back a:hover,
.post__back a:focus {
  text-decoration: underline;
}

.post__meta {
  margin: 8px 0 0;
  color: #666;
  font-size: 14px;
}

@media (max-width: 767px) {
  .page {
    padding: 0 16px;
    margin: 32px auto 48px;
  }
}