/*
 * Crossroads Theme — servingthe.best Church Vertical
 * Deep navy + warm gold on parchment. Playfair Display over Lato.
 *
 * Three layers, in order:
 *   1. Tokens      — the brand contract (palette, type scale, spacing, shape)
 *   2. Base        — element defaults + the .cr-prose scope for backend HTML
 *   3. Components  — every .cr-* class the theme's JSX renders
 *
 * Layer 3 is not optional decoration. The JSX carries ~110 .cr-* class names
 * and nothing else in the platform styles them, so without it every page
 * renders as unstyled document flow — tokens applied, layout absent.
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Lato:wght@300;400;500;700;900&display=swap');

/* The commerce override layer (catalog / cart / checkout / orders /
 * site-accounts) is NOT @imported here — see THEMING.md §8.
 *
 * An @import URL cannot carry the ?v= cache-bust token, so importing
 * commerce.css put it on a stable path behind Cloudflare's 4h TTL with no
 * purge-on-deploy: a commerce-CSS change deployed, reported success, and did
 * nothing for hours. ThemeShell links both sheets directly instead, in this
 * same cascade order (theme.css, then commerce.css).
 *
 * @see resources/js/Pages/Themes/Crossroads/identity.js themeStylesheetHrefs()
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * 1. TOKENS
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Palette */
  --color-primary:              #0F2A3C;
  --color-primary-foreground:   #F6F1E9;
  --color-primary-light:        #1C4A72;
  --color-secondary:            #EFE7D9;
  --color-secondary-foreground: #21323F;
  --color-accent:               #DD923C;
  --color-accent-light:         #E9B477;
  --color-accent-foreground:    #15242E;
  --color-background:           #F6F1E9;
  --color-surface:              #FBF7F0;
  --color-text:                 #21323F;
  --color-muted:                #5C6770;
  --color-border:               #E7DECF;
  --color-footer-bg:            #0B1F2D;
  --color-link-on-dark:         #2E6DB4;
  --color-danger:               #C0392B;
  --color-danger-foreground:    #FFFFFF;
  --color-success:              #1F8A5B;
  --color-success-foreground:   #FFFFFF;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Lato', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  --text-hero:    clamp(2.75rem, 1.9rem + 4.2vw, 4.75rem);
  --text-display: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  --text-lead: 1.1875rem;
  --text-base: 1rem;
  --text-sm:   0.875rem;
  --text-xs:   0.75rem;

  --leading-hero:  1.04;
  --leading-tight: 1.12;
  --leading-snug:  1.4;
  --leading-body:  1.7;

  --tracking-kicker:       0.28em;
  --tracking-hero-eyebrow: 0.32em;
  --tracking-wide:         0.05em;
  --tracking-label:        0.22em;
  --tracking-wordmark:     0.15em;

  /* Spacing */
  --container-max: 1180px;
  --container-pad: 2.5rem;
  --nav-height:    76px;
  --section-py:    6rem;
  --measure-prose: 65ch;
  --measure-lead:  38rem;

  /* Shape */
  --radius-sm:   0.25rem;
  --radius:      0.375rem;
  --radius-lg:   0.625rem;
  --radius-xl:   0.75rem;
  --radius-full: 9999px;

  --border-hairline:    1px solid var(--color-border);
  --border-accent:      4px solid var(--color-accent);
  --border-accent-soft: 4px solid rgba(221, 146, 60, 0.40);

  --shadow-sm:       0 1px 2px rgba(15, 35, 53, 0.06);
  --shadow-card:     0 24px 60px -28px rgba(20, 40, 60, 0.18);
  --shadow-lg:       0 28px 70px -24px rgba(20, 40, 60, 0.22);
  --shadow-gold-cta: 0 12px 34px rgba(221, 146, 60, 0.30);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 500ms;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 2. BASE
 * ═══════════════════════════════════════════════════════════════════════════ */

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

body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-text);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-text);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--color-primary-light);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover { color: var(--color-accent); }

img { max-width: 100%; }

/* Trusted backend HTML (sermon descriptions, rich-text intros, blog bodies).
 *
 * ticket #102 item 1 / packages ISSUE #868: `.cr-richtext .stb-content-rich-text__body`
 * joins every selector here rather than getting its own duplicate block. It is
 * the package-owned `content.rich-text` default's body wrapper
 * (content/resources/js/Public/RichTextSection.jsx) — deliberately unstyled
 * there by design, so it inherits "whatever prose styling the surrounding
 * theme already applies". `.cr-richtext` is this theme's own wrapper around
 * that default (`RichTextSection` in sections.jsx, ticket #102 item C). Same
 * category of content as `.cr-prose`'s other consumers — sermon descriptions,
 * intros, blog bodies — so it gets the SAME rules, not a copy of them: one
 * definition of "this theme's prose look", not two to keep in sync. Nothing
 * here touches the package default's own styling; `.stb-content-rich-text__body`
 * is targeted only inside this theme's own `.cr-richtext` scope. Other themes
 * are unaffected — none of them import this stylesheet.
 */
.cr-prose,
.cr-richtext .stb-content-rich-text__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-muted);
  max-width: var(--measure-prose);
}

.cr-prose > * + *,
.cr-richtext .stb-content-rich-text__body > * + * { margin-top: 1.15em; }

.cr-prose h2,
.cr-prose h3,
.cr-richtext h2,
.cr-richtext h3 {
  font-family: var(--font-display);
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin-top: 1.8em;
}

.cr-prose h2,
.cr-richtext h2 { font-size: 1.75rem; }
.cr-prose h3,
.cr-richtext h3 { font-size: 1.35rem; }

.cr-prose a,
.cr-richtext .stb-content-rich-text__body a {
  color: var(--color-primary-light);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.cr-prose a:hover,
.cr-richtext .stb-content-rich-text__body a:hover { color: var(--color-accent); }

.cr-prose ul,
.cr-prose ol,
.cr-richtext .stb-content-rich-text__body ul,
.cr-richtext .stb-content-rich-text__body ol { padding-left: 1.35rem; margin: 1.15em 0; }

.cr-prose li + li,
.cr-richtext .stb-content-rich-text__body li + li { margin-top: 0.4em; }

.cr-prose blockquote,
.cr-richtext .stb-content-rich-text__body blockquote {
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.4rem;
  border-left: var(--border-accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--color-text);
}

.cr-prose img,
.cr-richtext .stb-content-rich-text__body img { border-radius: var(--radius-lg); }

/* ═══════════════════════════════════════════════════════════════════════════
 * 3. COMPONENTS
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout primitives ──────────────────────────────────────────────────── */

.cr-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.cr-main {
  flex: 1 0 auto;
  /* The header is fixed; keep content clear of it. */
  padding-top: var(--nav-height);
}

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

/* ── Header ─────────────────────────────────────────────────────────────── */

.cr-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-height);
  background: rgba(246, 241, 233, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: var(--border-hairline);
}

.cr-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: var(--nav-height);
}

.cr-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  color: inherit;
}

.cr-brand__logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.cr-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.cr-brand__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  color: var(--color-primary);
}

.cr-brand__tagline {
  font-size: 0.625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.cr-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: auto;
}

.cr-nav__link {
  position: relative;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  padding-block: 0.35rem;
  white-space: nowrap;
}

/* Gold active underline — the brand's nav signature. */
.cr-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-standard);
}

.cr-nav__link:hover::after,
.cr-nav__link[aria-current='page']::after { transform: scaleX(1); }

.cr-nav__link:hover { color: var(--color-primary); }

.cr-nav__link--shop { color: var(--color-primary); }

.cr-header__actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.cr-iconlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: var(--color-primary);
  transition: background var(--duration-fast) var(--ease-standard);
}

.cr-iconlink:hover { background: var(--color-secondary); }

.cr-iconlink__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-accent-foreground);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  line-height: 18px;
  text-align: center;
}

/* Mobile menu (packages#926): shown only at 900px and below, see Responsive. */
.cr-menu-button,
.cr-mobile-nav { display: none; }

.cr-menu-button {
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: var(--border-hairline);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
}

.cr-menu-button:hover { background: var(--color-secondary); }

.cr-mobile-nav {
  position: absolute;
  inset: 100% 0 auto 0;
  max-height: calc(100vh - var(--nav-height));
  overflow-y: auto;
  background: rgb(246, 241, 233);
  border-bottom: var(--border-hairline);
  box-shadow: var(--shadow-card);
}

.cr-mobile-nav:focus { outline: none; }

.cr-mobile-nav__list {
  display: flex;
  flex-direction: column;
  padding-block: 0.75rem 1rem;
}

.cr-mobile-nav__link {
  padding-block: 0.8rem;
  border-bottom: var(--border-hairline);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary);
}

.cr-mobile-nav__link:last-child { border-bottom: 0; }

.cr-mobile-nav__count {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  margin-left: 0.5rem;
  padding-inline: 4px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-accent-foreground);
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
}

/* The gold marker, as on desktop; gold text is too faint on parchment. */
.cr-mobile-nav__link[aria-current='page'] {
  padding-left: 0.75rem;
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.cr-icon { width: 20px; height: 20px; }

/* ── Shared type ────────────────────────────────────────────────────────── */

.cr-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  color: var(--color-accent);
  margin-bottom: 0.9rem;
}

.cr-heading {
  font-size: var(--text-display);
  margin-bottom: 1rem;
}

.cr-heading--on-dark { color: var(--color-primary-foreground); }

.cr-lede {
  font-size: var(--text-lead);
  color: var(--color-muted);
  max-width: var(--measure-lead);
  margin-bottom: 2rem;
}

/* Rich-text blocks: authored HTML nests <p>/<ul>/… inside the block, so the
   children carry the copy's rhythm and inherit the block's colour (which the
   --on-dark modifiers override). The block's own outer spacing is unchanged. */
.cr-lede > *,
.cr-hero__body > *,
.cr-ministry-card__body > *,
.cr-expect__body > * {
  margin: 0 0 1em;
  color: inherit;
}

.cr-lede > :last-child,
.cr-hero__body > :last-child,
.cr-ministry-card__body > :last-child,
.cr-expect__body > :last-child { margin-bottom: 0; }

.cr-lede--on-dark { color: rgba(246, 241, 233, 0.78); }

.cr-link {
  display: inline-block;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-primary-light);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
}

.cr-link--on-dark { color: var(--color-accent-light); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.cr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.9rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}

.cr-btn:hover { transform: translateY(-1px); }

.cr-btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}

.cr-btn--primary:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-foreground);
}

.cr-btn--accent {
  background: var(--color-accent);
  color: var(--color-accent-foreground);
  box-shadow: var(--shadow-gold-cta);
}

.cr-btn--accent:hover {
  background: var(--color-accent-light);
  color: var(--color-accent-foreground);
}

.cr-btn--ghost {
  background: transparent;
  border-color: rgba(246, 241, 233, 0.55);
  color: var(--color-primary-foreground);
}

.cr-btn--ghost:hover {
  background: rgba(246, 241, 233, 0.12);
  color: var(--color-primary-foreground);
}

/*
 * The light-surface counterpart to --ghost.
 *
 * --ghost is parchment-on-transparent and only legible on the navy hero, which
 * was its only caller. Reaching for it on a parchment section renders cream
 * text on a cream background — present in the DOM, invisible on screen, and
 * unreachable by any test that asserts a link exists.
 */
.cr-btn--outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.cr-btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.cr-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(78vh, 680px);
  /* The fixed header floats over the hero, so pull it up under the bar. */
  margin-top: calc(var(--nav-height) * -1);
  padding-top: var(--nav-height);
  overflow: hidden;
  isolation: isolate;
}

.cr-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.cr-hero__image--placeholder {
  display: block;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(46, 109, 180, 0.55), transparent 60%),
    linear-gradient(160deg, var(--color-primary), var(--color-footer-bg));
}

/* Scrim so the headline stays readable over any photograph. */
.cr-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(11, 31, 45, 0.86) 0%,
    rgba(11, 31, 45, 0.66) 46%,
    rgba(11, 31, 45, 0.30) 100%
  );
}

.cr-hero__inner {
  padding-block: 5rem;
  max-width: 46rem;
}

.cr-hero .cr-eyebrow {
  color: var(--color-accent-light);
  letter-spacing: var(--tracking-hero-eyebrow);
}

.cr-hero__headline {
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  color: var(--color-primary-foreground);
  margin-bottom: 1.5rem;
}

/* The signature: "find AND follow" — italic gold. */
.cr-accent {
  color: var(--color-accent);
  font-style: italic;
}

.cr-hero__body {
  font-size: var(--text-lead);
  color: rgba(246, 241, 233, 0.85);
  max-width: var(--measure-lead);
  margin-bottom: 2.25rem;
}

.cr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ── Page head (interior pages without a hero) ──────────────────────────── */

.cr-pagehead {
  background: var(--color-secondary);
  border-bottom: var(--border-hairline);
  padding-block: 4rem;
}

.cr-pagehead__title {
  font-size: var(--text-display);
  margin-block: 0.35rem;
}

.cr-pagehead__sub {
  font-size: var(--text-lead);
  color: var(--color-muted);
  max-width: var(--measure-lead);
}

/* ── Intro ──────────────────────────────────────────────────────────────── */

.cr-intro { padding-block: var(--section-py); }
/* Rich text sections (ticket #102 item C): same rhythm as the intro. */
.cr-richtext { padding-block: var(--section-py); }

/* ── Accordion (packages#885) ──────────────────────────────────────────────
 *
 * content's package default (content/resources/js/Public/AccordionSection.jsx)
 * renders native <details>/<summary> with `.stb-accordion*` hooks and ships no
 * stylesheet. This theme reaches it through renderSection's default fallback,
 * which does NOT wrap it in `.cr-container`, so the block supplies its own
 * container width and section rhythm here. Opening and closing is the
 * browser's own, so this works before hydration and without JavaScript.
 */
.stb-accordion {
  width: 100%;
  max-width: calc(var(--measure-prose) + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-block: var(--section-py);
}

.stb-accordion__heading {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.stb-accordion__item { border-bottom: var(--border-hairline); }
.stb-accordion__item:first-of-type { border-top: var(--border-hairline); }

.stb-accordion__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: var(--leading-snug);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

/* The browser's own disclosure triangle, replaced by the chevron below. */
.stb-accordion__title::-webkit-details-marker { display: none; }

.stb-accordion__title::after {
  content: '';
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--duration-base) var(--ease-standard);
}

.stb-accordion__item[open] > .stb-accordion__title::after { transform: translateY(25%) rotate(-135deg); }

.stb-accordion__title:hover { color: var(--color-primary-light); }

/* Same accent ring as .cr-input:focus: a keyboard user sees where they are. */
.stb-accordion__title:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px rgba(221, 146, 60, 0.35);
}

.stb-accordion__body {
  padding-bottom: 1.25rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-muted);
}

.stb-accordion__body > * + * { margin-top: 1em; }

@media (prefers-reduced-motion: reduce) {
  .stb-accordion__title::after { transition: none; }
}

.cr-intro__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
}

/* No photograph seeded yet: let the copy use the full measure instead of
   leaving a dead column beside it. */
.cr-intro__inner:not(:has(.cr-intro__image)) { grid-template-columns: 1fr; }

.cr-intro__inner:not(:has(.cr-intro__image)) .cr-prose { max-width: var(--measure-prose); }

.cr-intro__text .cr-link { margin-top: 1.5rem; }

.cr-intro__image {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  object-fit: cover;
}

/* ── Service times (navy band) ──────────────────────────────────────────── */

.cr-times {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  /* packages ISSUE #882: a local override, not the shared 6rem default, so
     compact spacing (.cr-section--compact below) can still halve it. */
  --section-py: 4.5rem;
  padding-block: var(--section-py);
  text-align: center;
}

.cr-times__list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3.5rem;
}

.cr-times__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cr-times__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-accent-light);
}

.cr-times__time {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: var(--weight-bold);
}

.cr-times__note {
  font-size: var(--text-sm);
  color: rgba(246, 241, 233, 0.7);
}

.cr-times__address {
  color: rgba(246, 241, 233, 0.85);
  margin-bottom: 0.75rem;
  white-space: pre-line;
}

/*
 * packages ISSUE #882 / ticket #103 item 8: "Compact spacing" per section,
 * halving the vertical rhythm for sections an operator stacks closely.
 *
 * MUST come after every rule above that sets its own local --section-py
 * (currently only .cr-times): with equal specificity, source order decides
 * which --section-py declaration wins on an element carrying both classes,
 * and this one has to win.
 *
 * Hero (.cr-hero__inner) and the page head (.cr-pagehead) are deliberately
 * NOT covered — they are full-bleed headers, not stacked sections, and
 * neither reads --section-py, so the class would do nothing there. Neither
 * has a `compact` field in CrossroadsSectionTypes.php for the same reason.
 */
.cr-section--compact {
  --section-py: 3rem;
}

/* ── Ministries ─────────────────────────────────────────────────────────── */

.cr-ministries {
  padding-block: var(--section-py);
  text-align: center;
}

.cr-ministries .cr-lede { margin-inline: auto; }

.cr-ministries__grid {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;
  text-align: left;
}

.cr-ministry-card {
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-xl);
  padding: 2rem 1.75rem;
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.cr-ministry-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.cr-ministry-card__icon {
  width: 30px;
  height: 30px;
  color: var(--color-accent);
  margin-bottom: 1.1rem;
}

.cr-ministry-card__title {
  font-size: 1.35rem;
  margin-bottom: 0.6rem;
}

.cr-ministry-card__body {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin-bottom: 1rem;
}

/* ── What to expect ─────────────────────────────────────────────────────── */

.cr-expect {
  background: var(--color-secondary);
  padding-block: var(--section-py);
}

.cr-expect__steps {
  list-style: none;
  margin: 3rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem;
}

.cr-expect__step { position: relative; }

.cr-expect__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-accent-light);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: var(--weight-bold);
}

.cr-expect__title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.cr-expect__body {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* ── Sermons ────────────────────────────────────────────────────────────── */

.cr-sermons { padding-block: var(--section-py); }

.cr-sermons--archive { padding-top: 3.5rem; }

.cr-sermons__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}

.cr-chip {
  padding: 0.5rem 1.1rem;
  border: var(--border-hairline);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.cr-chip:hover { border-color: var(--color-accent); }

.cr-chip--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.cr-sermons__grid {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem;
}

.cr-sermon-card {
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.cr-sermon-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.cr-sermon-card__link {
  display: block;
  color: inherit;
  padding-bottom: 1.5rem;
}

.cr-sermon-card__art {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 1.25rem;
}

.cr-sermon-card__title {
  font-size: 1.3rem;
  padding-inline: 1.5rem;
  margin-bottom: 0.4rem;
}

.cr-sermon-card__speaker {
  padding-inline: 1.5rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.cr-sermons__empty {
  padding: 3rem 2rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-xl);
  text-align: center;
  color: var(--color-muted);
  margin-bottom: 2rem;
}

/* Sermon detail */
.cr-sermon { padding-block: 4rem var(--section-py); }

.cr-sermon__title {
  font-size: var(--text-display);
  margin: 1.5rem 0 0.75rem;
}

.cr-sermon__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-bottom: 2rem;
}

.cr-sermon__video { margin-bottom: 1.5rem; }

.cr-sermon__audio { margin-bottom: 2rem; }

/* ── Giving ─────────────────────────────────────────────────────────────── */

.cr-give {
  background: var(--color-footer-bg);
  padding-block: var(--section-py);
  text-align: center;
}

.cr-give .cr-lede { margin-inline: auto; }

.cr-give--thanks { padding-block: 7rem; }

.cr-giveform { padding-block: 4rem var(--section-py); }

.cr-giveform__inner {
  max-width: 34rem;
  margin-inline: auto;
}

/* ── Plan your visit ────────────────────────────────────────────────────── */

.cr-visit { padding-block: 4rem var(--section-py); }

.cr-visit__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: start;
}

.cr-visit__thanks {
  padding: 3rem;
  background: var(--color-surface);
  border-left: var(--border-accent);
  border-radius: var(--radius-lg);
}

.cr-visit__aside {
  background: var(--color-secondary);
  border-radius: var(--radius-xl);
  padding: 2.25rem;
}

.cr-visit__asideTitle {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin-bottom: 1.25rem;
}

.cr-visit__faq { margin: 0; }

.cr-visit__faq dt {
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-top: 1.15rem;
}

.cr-visit__faq dt:first-of-type { margin-top: 0; }

.cr-visit__faq dd {
  margin: 0.3rem 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */

.cr-form { display: grid; gap: 1.35rem; }

.cr-field { display: grid; gap: 0.4rem; }

.cr-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-muted);
}

.cr-input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: var(--border-hairline);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.cr-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(221, 146, 60, 0.18);
}

.cr-error {
  font-size: var(--text-sm);
  color: var(--color-danger);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.cr-footer {
  background: var(--color-footer-bg);
  color: rgba(246, 241, 233, 0.8);
  margin-top: auto;
}

.cr-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem;
  padding-block: 4rem 3rem;
}

.cr-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.cr-footer__logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  margin-bottom: 0.5rem;
}

.cr-footer__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  color: var(--color-primary-foreground);
}

.cr-footer__tagline {
  font-size: 0.625rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(246, 241, 233, 0.6);
}

.cr-footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-accent-light);
  margin-bottom: 0.9rem;
}

.cr-footer__meta,
.cr-footer__times { display: grid; gap: 0.4rem; font-size: var(--text-sm); }

.cr-footer__address { white-space: pre-line; }

.cr-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--text-sm);
}

.cr-footer__social {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--text-sm);
}

.cr-footer__link { color: var(--color-link-on-dark); }

.cr-footer__link:hover { color: var(--color-accent-light); }

/* Platform attribution — required, not editable. */
.cr-attribution {
  border-top: 1px solid rgba(246, 241, 233, 0.12);
  padding-block: 1.5rem;
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(246, 241, 233, 0.55);
}

.cr-attribution p { margin: 0; }

.cr-attribution__link { color: rgba(246, 241, 233, 0.75); }

.cr-attribution__link:hover { color: var(--color-accent-light); }

/* ═══════════════════════════════════════════════════════════════════════════
 * Team — directory (/team) and member profile (/team/{slug})
 * ═══════════════════════════════════════════════════════════════════════════ */

.cr-team { padding-block: var(--section-py); }

.cr-team__empty {
  color: var(--color-muted);
  font-size: var(--text-lead);
  max-width: var(--measure-prose);
}

.cr-team__group + .cr-team__group { margin-top: 4rem; }

/* Gold rule to the right of the label, echoing the section headings elsewhere. */
/*
 * A department's image and description on the team page.
 *
 * Part of the documented staff group shape (staff/THEMING.md); the staff
 * package's own Directory.jsx renders both. A theme with its own team page has
 * to render and style them, or the operator fills the fields in admin and the
 * default page shows them while this theme silently does not -- pkgs #692 and
 * #695.
 */
.cr-team__groupImage {
  width: 100%;
  max-height: 16rem;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}

.cr-team__groupDescription {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  max-width: 65ch;
  color: var(--color-muted);
}

.cr-team__groupTitle {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  color: var(--color-accent);
  margin-bottom: 2rem;
}

.cr-team__groupTitle::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.cr-team__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.75rem;
}

.cr-team-card {
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.cr-team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.cr-team-card__link {
  display: block;
  color: inherit;
}

/* Portrait crop. Square rather than 16/9 so faces are not cut off. */
.cr-team-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Stands in for a missing portrait so the card keeps its shape. */
.cr-team-card__monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-secondary);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: var(--weight-bold);
  line-height: 1;
}

.cr-team-card__body {
  display: block;
  padding: 1.25rem 1.35rem 1.5rem;
}

.cr-team-card__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: var(--leading-tight);
}

.cr-team-card__role {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.cr-team-card__link:hover .cr-team-card__name { color: var(--color-primary-light); }

/* Page-builder staff sections. The grid, card, monogram and role rules above
   are shared with LeadershipPage; these are the few hooks the sections add. */
.cr-team-card__department {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

/* The featured variant is a single person, so it drops the grid's top padding
   and reads as a band rather than a roster. */
.cr-team--featured {
  padding-block: 4rem;
}

.cr-team-feature__body {
  min-width: 0;
}

.cr-team-feature {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 48rem) {
  .cr-team-feature { grid-template-columns: minmax(0, 18rem) 1fr; }
}

.cr-team-feature__photo,
.cr-team-feature__monogram {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.cr-team-feature__monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--color-muted);
}

.cr-team-feature__blurb {
  margin-top: 1rem;
  line-height: var(--leading-body);
}

.cr-team-feature__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 1rem 0 1.5rem;
  font-size: var(--text-sm);
}

/* Profile — navy identity band over the parchment reading column. */
.cr-teamhero {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}

.cr-teamhero__inner {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding-block: 4.5rem;
}

.cr-teamhero__photo {
  width: 240px;
  height: 240px;
  flex: none;
  object-fit: cover;
  border-radius: var(--radius-xl);
  border: var(--border-accent);
}

.cr-teamhero__identity { min-width: 0; }

.cr-teamhero__name {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  color: var(--color-primary-foreground);
  line-height: var(--leading-tight);
}

.cr-teamhero__role {
  margin-top: 0.75rem;
  font-size: var(--text-lead);
  color: rgba(246, 241, 233, 0.72);
}

.cr-teambody { padding-block: var(--section-py); }

.cr-team-bio {
  max-width: var(--measure-prose);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-muted);
}

.cr-team-bio p + p { margin-top: 1.15em; }

.cr-team-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, max-content));
  gap: 1.75rem 3rem;
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: var(--border-hairline);
}

/* The <dl> is the grid; each dt/dd pair is wrapped so they track together. */
.cr-team-facts__item { min-width: 0; }

.cr-team-facts__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  color: var(--color-accent);
}

.cr-team-facts__value {
  margin: 0.4rem 0 0;
  color: var(--color-text);
}

.cr-team-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
}

/* Nested inside the form, where the surrounding grid already spaces things. */
.cr-team-form .cr-team-actions { margin-top: 0.5rem; }

.cr-team-form {
  max-width: var(--measure-lead);
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: var(--border-hairline);
}

.cr-team-form__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-text);
}

.cr-textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: var(--leading-body);
}

.cr-team-sent {
  color: var(--color-text);
  font-size: var(--text-lead);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Responsive
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  :root {
    --container-pad: 1.5rem;
    --section-py: 4rem;
  }

  .cr-intro__inner,
  .cr-visit__inner { grid-template-columns: 1fr; gap: 2.5rem; }

  /* The header links move behind the menu button (packages#926). */
  .cr-nav { display: none; }
  .cr-menu-button { display: inline-flex; }
  .cr-mobile-nav:not([hidden]) { display: block; }

  /* The bar holds only the brand and the menu button (packages#930): the
   * cart and account links move into the panel, and the brand gives way
   * before the button ever can. */
  .cr-header__inner { gap: 1rem; }
  .cr-header__actions .cr-iconlink { display: none; }
  .cr-brand,
  .cr-brand__text { min-width: 0; flex-shrink: 1; }
  .cr-brand__name,
  .cr-brand__tagline {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cr-times__list { gap: 2rem; }

  /* Portrait over identity rather than beside it. */
  .cr-teamhero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    padding-block: 3.5rem;
  }

  .cr-teamhero__photo { width: 180px; height: 180px; }
}

@media (max-width: 560px) {
  .cr-brand__logo { width: 36px; height: 36px; }
  .cr-brand__name { font-size: 1rem; }
  .cr-hero__inner { padding-block: 3.5rem; }
  .cr-hero__actions .cr-btn { width: 100%; }
  .cr-footer__inner { padding-block: 3rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .cr-btn:hover,
  .cr-ministry-card:hover,
  .cr-sermon-card:hover { transform: none; }
}

/* ---------- Planning Center: group finder ---------- */

.cr-groups {
  padding: 3rem 0 4rem;
}

.cr-groups__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.cr-groups__select {
  padding: 0.5rem 1.1rem;
  border: var(--border-hairline);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}

.cr-groups__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.cr-groups__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem;
}

.cr-groups__empty {
  color: var(--color-muted);
  font-family: var(--font-body);
}

.cr-group-card {
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.cr-group-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.cr-group-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.cr-group-card__art {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.cr-group-card__body {
  display: block;
  padding: 1.25rem;
}

.cr-group-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.cr-group-card__title {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.cr-group-card__status {
  flex-shrink: 0;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  border: var(--border-hairline);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.cr-group-card__status--open {
  color: var(--color-text);
  border-color: currentColor;
}

.cr-group-card__type,
.cr-group-card__schedule {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ---------- Planning Center: group detail ---------- */

.cr-group {
  padding: 3rem 0 4rem;
}

.cr-group__title {
  margin: 1.25rem 0 0.5rem;
}

.cr-group__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.cr-group__art {
  display: block;
  width: 100%;
  max-width: 32rem;
  margin: 1.75rem 0;
  border-radius: var(--radius-xl);
  object-fit: cover;
}

.cr-group__closed,
.cr-group__done {
  margin-top: 2rem;
  padding: 1.25rem;
  border: var(--border-hairline);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-muted);
}

.cr-group__form,
.cr-group__confirm {
  margin-top: 2.5rem;
  padding: 1.75rem;
  border: var(--border-hairline);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  max-width: 32rem;
}

.cr-group__form-title,
.cr-group__confirm-title {
  margin: 0 0 1.25rem;
}

.cr-group__confirm-body {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

.cr-group__confirm-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.cr-field {
  display: block;
  margin-bottom: 1.1rem;
}

.cr-field__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.cr-field__input {
  display: block;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: var(--border-hairline);
  border-radius: var(--radius-xl);
  background: #fff;
  font-family: var(--font-body);
  color: var(--color-text);
}

.cr-field__error {
  margin: -0.6rem 0 1rem;
  font-size: var(--text-sm);
  color: #9b2c2c;
}

/* ---------- Planning Center: events list ---------- */

.cr-events {
  padding: 3rem 0 4rem;
}

.cr-events__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cr-events__empty {
  color: var(--color-muted);
  font-family: var(--font-body);
}

.cr-event-row {
  border-bottom: var(--border-hairline);
}

.cr-event-row:last-child {
  border-bottom: 0;
}

.cr-event-row__link {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem 0;
  text-decoration: none;
  color: inherit;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.cr-event-row__link:hover {
  opacity: 0.75;
}

.cr-event-row__art {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-xl);
  object-fit: cover;
}

.cr-event-row__body {
  display: block;
}

.cr-event-row__title {
  display: block;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.cr-event-row__when,
.cr-event-row__where {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ---------- Planning Center: event detail ---------- */

.cr-event {
  padding: 3rem 0 4rem;
}

.cr-event__title {
  margin: 1.25rem 0 0.5rem;
}

.cr-event__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.cr-event__art {
  display: block;
  width: 100%;
  margin: 1.75rem 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  object-fit: cover;
}

.cr-event__cta {
  margin-top: 2rem;
}