/* ============================================================================
   MAMBO — COMPONENTS.  v3.0.0
   One flat block per component. No IDs, no !important, never a literal colour,
   never more than two levels of nesting.

   Every interactive element carries the same five states:
     default   as specified
     hover     background steps to --soft / --btn2Hover, text to --ink;
               primary buttons darken to --accHover and lift 1px
     active    the lift collapses — the press IS the lift going away
     focus     handled centrally in mambo-base.css (:focus-visible)
     disabled  opacity .45, pointer-events none, no colour change
   Timing: hover --dur (.18s), press .1s, toggles --dur-enter (.22s) on --spring.
   ============================================================================ */

/* ---- buttons ------------------------------------------------------------- */

.mb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-12);
  background: transparent;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.008em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--dur) ease,
    border-color var(--dur) ease,
    color var(--dur) ease,
    transform var(--dur) ease,
    box-shadow var(--dur) ease;
}

.mb-btn:active { transform: none; transition-duration: .1s; }

.mb-btn[disabled],
.mb-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.mb-btn--primary {
  background: var(--acc);
  color: var(--onacc);
  font-weight: 700;
  box-shadow: var(--sc);
}

.mb-btn--primary:hover {
  background: var(--accHover);
  transform: translateY(-1px);
  box-shadow: var(--sh);
}

.mb-btn--secondary {
  background: var(--btn2);
  color: var(--ink);
  border-color: var(--line);
}

.mb-btn--secondary:hover {
  background: var(--btn2Hover);
  border-color: var(--muted);
}

.mb-btn--ghost { color: var(--ink); }
.mb-btn--ghost:hover { background: var(--soft); }

/* The hero pair is taller and rounder than the in-card pair. */
.mb-btn--lg { height: 50px; padding: 0 25px; font-size: 15px; }

.mb-btn--tint {
  background: var(--btn2);
  color: var(--acc);
  border-color: var(--line);
  border-radius: var(--r-ctl);
  font-size: 14px;
}

.mb-btn--tint:hover { background: var(--accsoft); border-color: var(--acc); }

.mb-btn--quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  border-radius: var(--r-ctl);
  font-size: 14px;
  transition: transform var(--dur-pop) var(--spring), background var(--dur-pop) ease;
}

.mb-btn--quiet:hover { transform: translateY(-2px); background: var(--soft); }

/* ---- icon button — the 38px square in the tools cluster ------------------ */

.mb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: transparent;
  color: var(--body);
  cursor: pointer;
  transition: background var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease, transform var(--dur) ease;
}

/* No border change here: the search and theme buttons hover on wash + ink alone.
   Only the burger darkens its border, and that lives in mambo-chrome.css. */
.mb-icon-btn:hover {
  background: var(--soft);
  color: var(--ink);
  transform: translateY(-1px);
}

.mb-icon-btn:active { transform: none; }

/* ---- cards --------------------------------------------------------------- */

.mb-card {
  position: relative;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sc);
  transition: transform var(--dur) var(--ease), border-color var(--dur) ease, box-shadow var(--dur) ease;
}

/* Shadow only — the design never darkens a card's border on hover, and the lift
   itself comes from the tilt handler, not a CSS transform. */
.mb-card--link:hover { box-shadow: var(--sh); }

.mb-card--flat { box-shadow: none; background: var(--stage); border-color: var(--line2); }

/* ---- the lift ------------------------------------------------------------
   Every card the design tilts carries [data-tilt]. Two things live here:

   1. A LONGER transition (.32s, not the .18s hover default) — mambo-landing.js
      overrides it inline while the pointer is moving, but this is what plays on
      the way in and out, and a card settling is a slower gesture than a colour
      change.
   2. A CSS-only hover shadow. The tilt is an enhancement, not the effect: it is
      skipped for coarse pointers and for prefers-reduced-motion, and if the JS
      never loads there must still be a hover state. The prototype leaves its
      announcement cards with no CSS hover at all — that reads as an oversight
      rather than a decision, so they get one here too.
   -------------------------------------------------------------------------- */
[data-tilt] {
  transition:
    transform .32s var(--ease),
    box-shadow .32s ease,
    border-color var(--dur) ease;
}

[data-tilt]:hover { box-shadow: var(--sh); }

.mb-card h4,
.mb-card .mb-card-title {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink);
}

.mb-card p { margin-top: 7px; font-size: 13.5px; line-height: 1.5; color: var(--body); }

/* ---- grids — auto-fit with min(100%,…) so nothing overflows on narrow ----- */

.mb-grid { display: grid; gap: 14px; }

.mb-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.mb-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.mb-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.mb-grid--sermons { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }

/* ---- eyebrow chip — the pill above the hero headline --------------------- */

.mb-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 33px;
  /* asymmetric: the dot side is tighter, so the optical gap matches the text side */
  padding: 0 15px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--body);
  white-space: nowrap;
}

.mb-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--muted);
}

.mb-dot--live { background: var(--live); animation: mbPulse 2s ease-out infinite; }

/* ---- badge / status chip ------------------------------------------------- */

/* Four tonal families, and the DEFAULT is neutral. That matters: the prototype's standing
   "ONGOING" chip is --soft/--muted, and a teal default would have quietly given every
   unclassified chip an informational tone it has not earned. */
.mb-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  background: var(--soft);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mb-badge--clay { background: var(--tint2); color: var(--tint2ink); }   /* current / this week */
.mb-badge--teal { background: var(--tint); color: var(--tintink); }     /* informational       */
.mb-badge--acc  { background: var(--accsoft); color: var(--acc); }      /* leadership          */
.mb-badge--sand { background: var(--sand); color: var(--sandink); }

/* ---- icon tile — the 42px square behind a section icon ------------------- */

.mb-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: var(--r-12);
  background: var(--tint2);
  color: var(--tint2ink);
  transition: background var(--dur) ease, transform var(--dur) var(--spring);
}

.mb-icon-tile--sm { width: 26px; height: 26px; flex-basis: 26px; border-radius: var(--r-8); background: var(--stage); color: var(--body); }

/* ---- avatar -------------------------------------------------------------- */

.mb-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--acc);
  color: var(--onacc);
  font-size: 12px;
  font-weight: 700;
}

.mb-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mb-avatar--lg { width: 40px; height: 40px; flex-basis: 40px; font-size: 14px; }
.mb-avatar--quiet { background: var(--stage); color: var(--body); }

/* ---- stat ---------------------------------------------------------------- */

.mb-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; }

.mb-stat-figure {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--ink);
}

.mb-stat-label { font-size: 13px; font-weight: 400; color: var(--muted); }

/* ---- go-arrow — the "Watch live →" row at the foot of an action card ----- */

.mb-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 650;
  color: var(--acc);
  transition: gap var(--dur) var(--ease);
}

.mb-card--link:hover .mb-go { gap: 10px; }

/* ---- reveal-on-scroll ---------------------------------------------------- */

/* The hidden state is applied by JS (mambo-landing.js), NOT here. That is
   deliberate: if the script fails to load, is stripped by a cache, or throws,
   nothing is hidden and the page renders fully styled and static rather than
   blank. This sheet only describes how a revealed element travels. */
[data-mb-reveal] {
  transition:
    opacity var(--dur-reveal) var(--ease),
    transform var(--dur-reveal) var(--ease);
}

[data-mb-revealed] { opacity: 1; transform: none; }