/* ============================================================
   New Celestial Parish — stylesheet (Lakewood-inspired redesign)
   2026-05-09
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

/* ===== Tokens ===== */
:root {
  --c-bg:           #ffffff;
  --c-bg-soft:      #f7f4ec;
  --c-bg-dark:      #162a52;
  --c-bg-dark-2:    #1f3870;
  --c-text:         #1f2433;
  --c-text-soft:    #5c6473;
  --c-text-on-dark: #ffffff;
  --c-accent:       #1f6db8;
  --c-accent-warm:  #c9a23a;
  --c-border:       #e6e3da;
  --c-divider:      #ece9e0;
  --c-overlay-dark: rgba(22, 42, 82, 0.55);

  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-sans:    "Inter", "Plus Jakarta Sans", system-ui, sans-serif;

  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem;
  --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem; --fs-3xl: 2.5rem; --fs-4xl: 3.5rem;
  --fs-hero: clamp(2.6rem, 7vw, 5.5rem);

  --lh-tight: 1.08; --lh-snug: 1.25; --lh-body: 1.6;
  --ls-tight: -0.015em; --ls-eyebrow: 0.16em;

  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  --maxw-prose:   65ch;
  --maxw-content: 1200px;
  --maxw-wide:    1440px;
  --gutter:       max(20px, 4vw);

  --r-sm: 8px; --r-md: 14px; --r-lg: 24px; --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(15,32,70,0.05), 0 1px 3px rgba(15,32,70,0.06);
  --shadow-2: 0 6px 20px rgba(15,32,70,0.07), 0 2px 6px rgba(15,32,70,0.05);
  --shadow-3: 0 16px 40px rgba(15,32,70,0.10), 0 4px 8px rgba(15,32,70,0.06);

  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Legacy aliases (let old class refs keep working) */
  --black: var(--c-text);
  --white: var(--c-bg);
  --bg: var(--c-bg-soft);
  --bg-alt: var(--c-bg-soft);
  --text: var(--c-text);
  --muted: var(--c-text-soft);
  --border: var(--c-border);
  --section-dark: var(--c-bg-dark);
  --section-dark-card: var(--c-bg-dark-2);
  --accent: var(--c-accent-warm);
  --maxw: var(--maxw-content);
  --radius: var(--r-md);
  --pill: var(--r-pill);
  --gap: var(--s-5);
}

/* ===== Reset & base ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; max-width: 100vw; overflow-x: hidden; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.85; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-4);
  overflow-wrap: anywhere;
  color: var(--c-text);
}
h1 { font-size: var(--fs-hero); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 4vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
p  { margin: 0 0 var(--s-4); }
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--s-3);
}
.muted { color: var(--c-text-soft); }
.center { text-align: center; }

/* ===== Layout ===== */
.container       { max-width: var(--maxw-content); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide  { max-width: var(--maxw-wide);    margin: 0 auto; padding: 0 var(--gutter); }
.container-prose { max-width: var(--maxw-prose);   margin: 0 auto; padding: 0 var(--gutter); }
.section         { padding: var(--s-9) 0; }
.section-tight   { padding: var(--s-7) 0; }
.section-soft    { background: var(--c-bg-soft); }
.section-dark    { background: var(--c-bg-dark); color: var(--c-text-on-dark); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--c-text-on-dark); }
.section-dark .eyebrow { color: rgba(255,255,255,0.65); }
.section-dark .muted   { color: rgba(255,255,255,0.7); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: 0.01em; white-space: nowrap;
  transition: transform var(--t-fast), background-color var(--t-fast),
              color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btn-primary { background: var(--c-bg-dark); color: var(--c-text-on-dark); }
.btn-primary:hover { background: var(--c-accent); opacity: 1; }
.btn-light   { background: var(--c-bg); color: var(--c-text); border: 1px solid var(--c-border); }
.btn-light:hover { border-color: var(--c-text); }
.btn-on-dark { background: var(--c-bg); color: var(--c-text); }
.btn-on-dark:hover { background: var(--c-accent-warm); color: var(--c-text); opacity: 1; }
.btn-ghost-on-dark { background: transparent; color: var(--c-bg); border: 1px solid rgba(255,255,255,0.5); }
.btn-ghost-on-dark:hover { border-color: var(--c-bg); background: rgba(255,255,255,0.08); opacity: 1; }
.btn-outline { background: transparent; color: var(--c-text); border: 1.5px solid var(--c-text); }
.btn-outline:hover { background: var(--c-text); color: var(--c-bg); }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--c-divider);
}
.site-header .inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  max-width: var(--maxw-wide); margin: 0 auto;
  padding: var(--s-3) var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-3); }
.brand-logo { height: 64px; width: auto; }
.brand-text {
  display: inline-flex; flex-direction: column; line-height: 1;
  font-family: var(--font-display);
  font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.04em;
  color: var(--c-text); text-transform: uppercase;
}
.brand-text small {
  font-size: 0.6rem; color: var(--c-text-soft); letter-spacing: var(--ls-eyebrow);
  margin-top: 4px; font-weight: 600; text-transform: uppercase;
}

.site-nav ul { display: flex; gap: var(--s-5); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--font-sans);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--c-text);
  padding: var(--s-2) 0; position: relative;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--c-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-base);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-header .header-cta { display: inline-flex; align-items: center; gap: var(--s-3); }

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: clamp(440px, 75vh, 720px);
  display: flex; align-items: center;
  background-color: var(--c-bg-dark);
  background-size: cover; background-position: center;
  color: var(--c-text-on-dark);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,22,46,0.55), rgba(11,22,46,0.25) 60%, rgba(11,22,46,0.55));
}
.hero > .container { position: relative; padding-top: var(--s-9); padding-bottom: var(--s-9); text-align: center; }
.hero h1 { color: var(--c-text-on-dark); max-width: 18ch; margin-left: auto; margin-right: auto; }
.hero .eyebrow { color: rgba(255,255,255,0.85); }
.hero .lead { font-size: var(--fs-md); max-width: 52ch; opacity: 0.92; margin-bottom: var(--s-6); color: var(--c-text-on-dark); margin-left: auto; margin-right: auto; }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

.hero.hero-light {
  background: var(--c-bg-soft);
  color: var(--c-text);
  min-height: clamp(360px, 55vh, 520px);
}
.hero.hero-light::before { display: none; }
.hero.hero-light h1 { color: var(--c-text); }
.hero.hero-light .eyebrow { color: var(--c-accent); }
.hero.hero-light .lead { color: var(--c-text-soft); opacity: 1; }

/* ===== Section header ===== */
.s-head { max-width: 64ch; margin-bottom: var(--s-7); }
.s-head .eyebrow { color: var(--c-accent); }
.s-head h2 { margin-bottom: var(--s-3); }
.s-head p  { color: var(--c-text-soft); font-size: var(--fs-md); }
.s-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-dark .s-head .eyebrow { color: rgba(255,255,255,0.7); }
.section-dark .s-head p { color: rgba(255,255,255,0.78); }

/* ===== Cards ===== */
.cards { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  color: var(--c-text);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: transparent; opacity: 1; }
.card .card-image {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--c-bg-dark-2), var(--c-bg-dark));
  background-size: cover; background-position: center;
}
.card .card-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.card .card-body h3 { font-size: var(--fs-xl); margin: 0; }
.card .card-body p  { color: var(--c-text-soft); margin: 0; flex: 1; }
.card .card-body .cta { font-weight: 600; color: var(--c-accent); display: inline-flex; gap: 6px; align-items: center; }
.card .card-body .cta::after { content: "→"; transition: transform var(--t-fast); }
.card:hover .card-body .cta::after { transform: translateX(4px); }

/* ===== Feature row (alternating image-text) ===== */
.feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: center;
}
.feature-row > .copy { padding: var(--s-5) 0; }
.feature-row > .media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #d6dee9, #b8c4d4);
  background-size: cover; background-position: center;
  border-radius: var(--r-md);
  min-height: 240px;
}
.feature-row.reverse { direction: rtl; }
.feature-row.reverse > * { direction: ltr; }

/* ===== CTA band ===== */
.cta-band {
  background: var(--c-bg-dark);
  color: var(--c-text-on-dark);
  text-align: center;
  padding: var(--s-9) var(--gutter);
}
.cta-band h2 { color: var(--c-text-on-dark); max-width: 26ch; margin: 0 auto var(--s-4); }
.cta-band p  { max-width: 52ch; margin: 0 auto var(--s-6); opacity: 0.85; color: var(--c-text-on-dark); }
.cta-band .eyebrow { color: rgba(255,255,255,0.7); }

/* ===== Service times block ===== */
.service-times {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.stime {
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.stime:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.stime .day  { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); margin-bottom: var(--s-1); display: block; color: var(--c-text); }
.stime .name { color: var(--c-text-soft); font-size: var(--fs-sm); margin-bottom: var(--s-2); display: block; }
.stime .time { font-weight: 700; color: var(--c-accent); }

/* ===== Accordion ===== */
.accordion { border-top: 1px solid var(--c-border); }
.accordion .item { border-bottom: 1px solid var(--c-border); }
.accordion .summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-5) 0; gap: var(--s-3);
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-lg);
  cursor: pointer; width: 100%; text-align: left;
  overflow-wrap: anywhere;
  color: var(--c-text);
}
.accordion .summary .icon {
  position: relative; display: inline-block; width: 18px; height: 18px;
  transition: transform var(--t-base); font-size: 0;
  color: var(--c-text); flex: 0 0 18px;
}
.accordion .summary .icon::before, .accordion .summary .icon::after {
  content: ""; position: absolute; background: currentColor;
  left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 1px;
}
.accordion .summary .icon::before { width: 18px; height: 1.6px; }
.accordion .summary .icon::after  { width: 1.6px; height: 18px; transition: transform var(--t-base); }
.accordion .item.open .summary .icon::after { transform: translate(-50%, -50%) scaleY(0); }
.accordion .body { display: none; padding: 0 0 var(--s-5); color: var(--c-text-soft); max-width: 70ch; line-height: var(--lh-body); }
.accordion .item.open .body { display: block; }

.accordion-dark .summary { color: var(--c-text-on-dark); }
.accordion-dark .summary .icon { color: var(--c-text-on-dark); }
.accordion-dark .body { color: rgba(255,255,255,0.8); }
.accordion-dark .item { border-bottom-color: rgba(255,255,255,0.15); }
.accordion-dark { border-top-color: rgba(255,255,255,0.15); }

/* ===== Footer ===== */
.site-footer {
  background: var(--c-bg-dark);
  color: var(--c-text-on-dark);
  padding: var(--s-9) 0 var(--s-5);
}
.site-footer .inner {
  max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: var(--s-7);
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.site-footer h5 {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 var(--s-4);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.site-footer a { color: rgba(255,255,255,0.85); font-size: var(--fs-sm); }
.site-footer a:hover { color: #fff; opacity: 1; }
.site-footer .meta { font-size: var(--fs-sm); color: rgba(255,255,255,0.7); line-height: var(--lh-body); }
.site-footer .meta a { color: rgba(255,255,255,0.85); }
.site-footer .brand-text, .site-footer .brand-text small { color: var(--c-text-on-dark); }
.site-footer .copy { border-top: 1px solid rgba(255,255,255,0.1); margin-top: var(--s-7); padding-top: var(--s-5); font-size: var(--fs-xs); color: rgba(255,255,255,0.5); text-align: center; }

/* ===== Floating "Plan a Visit" pill ===== */
.floating-next {
  position: fixed; right: 16px; bottom: 24px; z-index: 30;
  background: var(--c-bg-dark); color: var(--c-text-on-dark);
  padding: 14px 22px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700;
  text-align: center; line-height: 1.1;
  box-shadow: var(--shadow-3);
}

/* ===== Calendar (interactive widget — preserved structure) ===== */
.calendar-shell { padding: var(--s-7) var(--gutter) var(--s-9); max-width: var(--maxw-content); margin: 0 auto; }
.calendar-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-5);
}
.calendar-toolbar .nav { display: flex; align-items: center; gap: var(--s-3); }
.calendar-toolbar .nav h2 { margin: 0; font-size: var(--fs-xl); }
.calendar-toolbar .nav button {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--c-border);
  display: inline-flex; align-items: center; justify-content: center; background: var(--c-bg);
  color: var(--c-text);
}
.calendar-toolbar .nav button:disabled { opacity: 0.35; cursor: not-allowed; }
.calendar-toolbar .views { display: flex; background: var(--c-bg-soft); border-radius: var(--r-pill); padding: 4px; }
.calendar-toolbar .views button {
  padding: 8px 18px; border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-sm); color: var(--c-text-soft);
}
.calendar-toolbar .views button.active { background: var(--c-bg-dark); color: var(--c-bg); }

.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden;
  background: var(--c-border); gap: 1px;
}
.cal-grid .dow {
  background: var(--c-bg-soft); padding: 12px 10px;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--c-text-soft); font-weight: 700; text-align: center;
}
.cal-grid .day { background: var(--c-bg); min-height: 120px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.cal-grid .day.muted-day { background: #fafaf6; color: #bbb; }
.cal-grid .day.today { background: #fff8e6; }
.cal-grid .day .num { font-weight: 700; font-size: var(--fs-sm); }
.cal-grid .day .ev {
  font-size: 0.72rem; padding: 3px 8px; border-radius: 6px;
  background: var(--c-bg-dark); color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.cal-grid .day .ev.tag-service     { background: var(--c-bg-dark); }
.cal-grid .day .ev.tag-fasting     { background: #c84d2c; }
.cal-grid .day .ev.tag-prayer      { background: #4a5d3a; }
.cal-grid .day .ev.tag-harvest     { background: #c9a23a; color: #1a1a1a; }
.cal-grid .day .ev.tag-revival     { background: #5a4a82; }
.cal-grid .day .ev.tag-youth       { background: var(--c-accent); }
.cal-grid .day .ev.tag-celebration { background: #b71f2f; }

.cal-legend { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--c-text-soft); }
.cal-legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

.cal-list { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.cal-list .row {
  display: grid; grid-template-columns: 80px 1fr auto; gap: var(--s-4); align-items: center;
  padding: 14px 16px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg);
}
.cal-list .row .date { font-weight: 800; font-size: var(--fs-md); line-height: 1.1; font-family: var(--font-display); }
.cal-list .row .date small { display: block; font-size: var(--fs-xs); text-transform: uppercase; color: var(--c-text-soft); font-weight: 600; }
.cal-list .row .info h4 { margin: 0 0 4px; font-size: var(--fs-base); }
.cal-list .row .info .meta { font-size: var(--fs-sm); color: var(--c-text-soft); }
.cal-list .row .tag { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-bg-soft); font-weight: 700; color: var(--c-text); }

/* Service-list (footer) */
.site-footer ul.service-list { gap: var(--s-2); }
.site-footer ul.service-list li { font-size: var(--fs-sm); color: rgba(255,255,255,0.8); line-height: var(--lh-snug); }
.site-footer ul.service-list li strong { color: var(--c-text-on-dark); font-weight: 700; }

/* Login form (staff-resources) */
.login-shell { max-width: 420px; margin: 0 auto; padding: var(--s-8) var(--gutter) var(--s-9); }
.login-shell .card { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-6); box-shadow: var(--shadow-1); display: block; }
.login-shell .card:hover { transform: none; box-shadow: var(--shadow-1); }
.login-shell h1 { font-size: var(--fs-xl); margin-bottom: 4px; }
.login-shell .sub { color: var(--c-text-soft); margin-bottom: var(--s-5); font-size: var(--fs-sm); }
.login-shell label { display: block; font-size: var(--fs-sm); font-weight: 600; margin: var(--s-4) 0 6px; }
.login-shell input { width: 100%; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--c-border); font: inherit; box-sizing: border-box; }
.login-shell .row { display: flex; align-items: center; justify-content: space-between; margin: var(--s-4) 0; font-size: var(--fs-sm); }
.login-shell .row a { color: var(--c-text-soft); text-decoration: underline; }
.login-shell .btn { width: 100%; }

/* Search */
.search-shell { padding: var(--s-8) var(--gutter); max-width: 760px; margin: 0 auto; }
.search-shell input { width: 100%; padding: 18px 22px; border-radius: var(--r-pill); border: 1px solid var(--c-border); font: inherit; }

/* 2026 Event Program (legacy — currently hidden) */
.program-shell { padding: var(--s-7) var(--gutter) var(--s-9); max-width: 1080px; margin: 0 auto; }
.program-shell[hidden] { display: none; }

/* ===== FAM stats band ===== */
.stats-band { padding: var(--s-7) 0; }
.stats-band .nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin-bottom: var(--s-6); }
.stats-band .nums > div { text-align: center; padding: var(--s-5) var(--s-3); border-radius: var(--r-md); background: var(--c-bg-soft); }
.stats-band .nums .num { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-3xl); color: var(--c-bg-dark); line-height: 1; margin-bottom: var(--s-2); }
.stats-band .nums .lbl { font-size: var(--fs-sm); color: var(--c-text-soft); }

/* ===== Staff portal grid (after login) ===== */
.staff-portal { max-width: var(--maxw-content); margin: 0 auto; padding: var(--s-8) var(--gutter); }
.staff-portal h1 { font-size: var(--fs-2xl); margin-bottom: var(--s-2); }
.staff-portal .sub { color: var(--c-text-soft); margin-bottom: var(--s-6); }
.staff-portal .grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: var(--s-6); }
.staff-portal .tile {
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2);
  color: var(--c-text); transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.staff-portal .tile:hover { border-color: var(--c-accent); transform: translateY(-2px); box-shadow: var(--shadow-2); opacity: 1; }
.staff-portal .tile h4 { margin: 0; font-size: var(--fs-lg); }
.staff-portal .tile p { margin: 0; color: var(--c-text-soft); font-size: var(--fs-sm); }

/* ===== Sermon cards (search page) ===== */
.sermon-card { display: flex; flex-direction: column; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; color: var(--c-text); transition: transform var(--t-base), box-shadow var(--t-base); }
.sermon-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); opacity: 1; }
.sermon-card .thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--c-bg-dark-2), var(--c-bg-dark));
  position: relative; display: flex; align-items: center; justify-content: center;
}
.sermon-card .thumb.alt-1 { background: linear-gradient(135deg, #1f6db8, #162a52); }
.sermon-card .thumb.alt-2 { background: linear-gradient(135deg, #2c3e50, #1f3870); }
.sermon-card .thumb.alt-3 { background: linear-gradient(135deg, #5a4a82, #2a1f4f); }
.sermon-card .thumb.alt-4 { background: linear-gradient(135deg, #c9a23a, #7a5e16); }
.sermon-card .thumb.alt-5 { background: linear-gradient(135deg, #c84d2c, #6b220e); }
.sermon-card .thumb.alt-6 { background: linear-gradient(135deg, #4a5d3a, #1f2e1a); }
.sermon-card .thumb .play {
  display: inline-block; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.92); position: relative;
}
.sermon-card .thumb .play::before {
  content: ""; position: absolute; left: 56%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent var(--c-bg-dark);
}
.sermon-card .meta { padding: var(--s-4) var(--s-5) var(--s-5); }
.sermon-card .meta h4 { margin: 0 0 4px; font-size: var(--fs-md); color: var(--c-text); }
.sermon-card .meta .sub { font-size: var(--fs-sm); color: var(--c-text-soft); }
.card-grid { display: grid; gap: var(--s-5); }
.card-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.subscribe { background: var(--c-bg-soft); padding: var(--s-7) var(--gutter); text-align: center; }
.subscribe h2 { margin-bottom: var(--s-4); }

/* ===== Two-column intro (used on staff-leaders) ===== */
.intro-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-7); align-items: end; max-width: var(--maxw-content); margin: 0 auto; padding: var(--s-9) var(--gutter) var(--s-7); }
.intro-split h1 { margin: 0; max-width: 12ch; }
.intro-split p { margin: var(--s-2) 0 0; color: var(--c-text-soft); }
@media (max-width: 720px) {
  .intro-split { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-7) var(--gutter) var(--s-6); }
  .stats-band .nums { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Two-column copy + accordion (ministries, next-steps) ===== */
.copy-accordion { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s-7); }
@media (max-width: 960px) { .copy-accordion { grid-template-columns: 1fr; gap: var(--s-5); } }

/* ===== Mobile responsive ===== */
@media (max-width: 960px) {
  .feature-row { grid-template-columns: 1fr; gap: var(--s-5); }
  .feature-row.reverse > * { direction: ltr; }
  .site-footer .inner { grid-template-columns: 1fr 1fr; }
  .site-header .inner { flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
  .site-nav { flex: 1 1 100%; justify-content: center; }
  .site-nav ul { justify-content: center; gap: var(--s-3) var(--s-5); }
  .header-cta { display: none; }
}
@media (max-width: 720px) {
  :root { --gutter: 18px; }
  .section { padding: var(--s-7) 0; }
  .section-tight { padding: var(--s-6) 0; }
  .hero { min-height: 65vh; }
  .hero h1 { font-size: clamp(2.2rem, 8.5vw, 3.4rem); }
  .hero .lead { font-size: var(--fs-base); }
  .brand-logo { height: 56px; }
  .brand-text { font-size: var(--fs-sm); }
  .site-nav a { font-size: var(--fs-xs); padding: 4px 0; }
  .floating-next { padding: 12px 16px; font-size: var(--fs-xs); right: 12px; bottom: 16px; }
  .cal-grid .day { min-height: 80px; padding: 4px 6px; }
  .cal-grid .day .ev { font-size: 0.62rem; padding: 2px 5px; }
  .calendar-shell { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cal-grid { min-width: 640px; }

  /* Lakewood-style mobile centering (hero already centered at all viewports) */
  .feature-row > .copy { text-align: center; }
  .feature-row > .copy h2, .feature-row > .copy h3, .feature-row > .copy p { margin-left: auto; margin-right: auto; }
  .card .card-body { text-align: center; align-items: center; }
  .stime { text-align: center; }
  .stime .day, .stime .name, .stime .time { display: block; }
  .stats-band .nums > div { text-align: center; }
  .site-footer .inner > div:first-child { text-align: center; }
  .site-footer .inner > div:first-child .brand,
  .site-footer .inner > div:first-child .brand-on-dark { justify-content: center; }
  .s-head { margin-left: auto; margin-right: auto; text-align: center; }
}
@media (max-width: 480px) {
  .site-footer .inner { grid-template-columns: 1fr; gap: var(--s-5); text-align: center; }
  .site-footer ul { align-items: center; }
  .site-footer h5 { text-align: center; }
  .service-times { grid-template-columns: 1fr; }
  .stime { padding: var(--s-4); }
  .cards { gap: var(--s-4); }
  .hero { min-height: 55vh; }
  .hero h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
  .feature-row > .media { aspect-ratio: 16 / 10; min-height: 180px; }
  .login-shell { padding: var(--s-6) 16px var(--s-7); }
  .login-shell .card { padding: var(--s-5); }
  .calendar-shell { padding: var(--s-5) 12px var(--s-7); }
  .cal-list .row { grid-template-columns: 1fr; gap: 6px; }
  .cal-list .row .tag { justify-self: flex-start; }
}