/* ============================================================
   Grace & Truth Church — Component styles (redesign)
   Ported 1:1 from the approved design-system bundle (deploy/_ds_bundle.js).
   Class styles mirror the bundle's inline component styles exactly.
   ============================================================ */

/* ---- Layout primitives (Section) ---- */
.gt-section { padding: var(--space-section) 0; }
.gt-section--page    { background: var(--surface-page); }
.gt-section--card    { background: var(--white); }
.gt-section--sunken  { background: var(--mist-100); }
.gt-section--inverse { background: var(--slate-800); }
.gt-section--brand   { background: var(--slate-700); }
.gt-wrap { width: 100%; max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--gutter); }
.gt-wrap--narrow { max-width: 52rem; }

/* ============================================================
   Button — bundle: radius-sm, weight 600, variant map below
   ============================================================ */
.gt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-label); font-weight: 600; font-size: var(--text-base);
  line-height: 1.1; letter-spacing: 0.01em;
  padding: 0.7rem 1.4rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.gt-btn--sm { font-size: var(--text-sm); padding: 0.5rem 1rem; gap: 0.4rem; }
.gt-btn--lg { font-size: var(--text-lg); padding: 0.9rem 1.9rem; gap: 0.6rem; }
.gt-btn--full { display: flex; width: 100%; }
.gt-btn:active { transform: translateY(1px); }
.gt-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.gt-btn--primary   { background: var(--accent); color: var(--white); border-color: var(--accent); }
.gt-btn--primary:hover { background: var(--blue-700); border-color: var(--blue-700); color: var(--white); }
.gt-btn--secondary { background: transparent; color: var(--brand); border-color: var(--slate-300); }
.gt-btn--secondary:hover { background: var(--slate-50); border-color: var(--slate-400); }
.gt-btn--accent    { background: var(--leaf-600); color: var(--white); border-color: var(--leaf-600); }
.gt-btn--accent:hover { background: var(--leaf-700); border-color: var(--leaf-700); color: var(--white); }
.gt-btn--ghost     { background: transparent; color: var(--text-body); border-color: transparent; }
.gt-btn--ghost:hover { background: var(--mist-100); }
.gt-btn--link      { background: transparent; color: var(--text-accent); border-color: transparent; padding: 0; }
.gt-btn--link:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
/* on-dark secondary (hero/CTA overlays) */
.gt-btn--on-dark { color: var(--white); border-color: rgba(255,255,255,0.4); }
.gt-btn--on-dark:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.6); color: var(--white); }
.gt-btn svg { width: 1.15em; height: 1.15em; }

/* ============================================================
   Eyebrow
   ============================================================ */
.gt-eyebrow { font-family: var(--font-label); font-weight: 700; font-size: var(--text-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-accent); margin: 0; }
.gt-eyebrow--light { color: var(--lime-400); }
.gt-eyebrow--muted { color: var(--text-muted); }

/* ============================================================
   SectionHeading — eyebrow + serif h2 + 56x3 accent rule + intro
   ============================================================ */
.gt-heading { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.gt-heading--center { align-items: center; text-align: center; max-width: 44rem; margin-inline: auto; }
.gt-heading > h2, .gt-heading > h1, .gt-heading > h3 {
  font-family: var(--font-display); font-size: var(--text-h2); font-weight: 600;
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: 0; }
/* default accent rule (rule=true in bundle) */
.gt-heading > h2::after {
  content: ""; display: block; width: 56px; height: 3px; border-radius: var(--radius-pill);
  background: var(--accent); margin-top: var(--space-3); }
.gt-heading--center > h2::after { margin-inline: auto; }
.gt-heading--norule > h2::after { display: none; }
.gt-heading .gt-intro { font-size: var(--text-lead); line-height: var(--leading-relaxed);
  color: var(--text-body); margin: 0; max-width: 40rem; }
.gt-heading--light > h2, .gt-heading--light > h1 { color: var(--text-on-dark); }
.gt-heading--light .gt-intro { color: var(--text-on-dark-muted); }

/* ============================================================
   Card — radius-md, padding lg, optional top rule
   ============================================================ */
.gt-card { position: relative; background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.gt-card--pad, .gt-card__pad { padding: var(--space-6); }
.gt-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.gt-card--interactive { cursor: pointer; }
.gt-card--interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.gt-card--toprule::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); }
.gt-num { font-family: var(--font-label); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-accent); margin-bottom: 8px; }
.gt-num--muted { color: var(--text-muted); }

/* ============================================================
   Badge — soft (with border) + solid variants
   ============================================================ */
.gt-badge { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-label);
  font-weight: 700; font-size: var(--text-xs); letter-spacing: var(--tracking-label-tight);
  text-transform: uppercase; padding: 0.32em 0.72em; border-radius: var(--radius-pill); line-height: 1.2;
  border: 1px solid transparent; }
.gt-badge--teal  { background: var(--blue-100); color: var(--blue-700); border-color: var(--blue-200); }
.gt-badge--leaf  { background: var(--lime-200); color: var(--leaf-700); border-color: var(--leaf-400); }
.gt-badge--lime  { background: var(--lime-200); color: var(--leaf-700); border-color: var(--lime-400); }
.gt-badge--slate { background: var(--slate-100); color: var(--slate-600); border-color: var(--slate-300); }
.gt-badge--solid { border-color: transparent; }
.gt-badge--solid.gt-badge--teal  { background: var(--blue-500); color: var(--white); }
.gt-badge--solid.gt-badge--leaf  { background: var(--leaf-600); color: var(--white); }
.gt-badge--solid.gt-badge--lime  { background: var(--lime-500); color: var(--slate-900); }
.gt-badge--solid.gt-badge--slate { background: var(--slate-600); color: var(--white); }

/* ============================================================
   Photo / on-brand placeholder
   ============================================================ */
.gt-photo { aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center; }
.gt-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gt-photo--lg { border-radius: var(--radius-lg); }
.gt-photo--slate { background: linear-gradient(135deg,#4E606E 0%,#3C4C59 55%,#212B33 100%); }
.gt-photo--teal  { background: linear-gradient(135deg,#4496B7 0%,#306B91 60%,#1B3F54 100%); }
.gt-photo--leaf  { background: linear-gradient(135deg,#95C58C 0%,#76AF85 50%,#3C7A57 100%); }
.gt-photo--label { color: rgba(255,255,255,0.6); font-family: var(--font-label); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }

/* ============================================================
   ScriptureQuote
   ============================================================ */
.gt-scripture-band { display: flex; justify-content: center; }
.gt-scripture-quote { margin: 0; display: flex; flex-direction: column; gap: var(--space-3);
  max-width: 46rem; text-align: left; align-items: flex-start; }
.gt-scripture-quote--center { text-align: center; align-items: center; }
.gt-scripture-quote blockquote { margin: 0; font-family: var(--font-display); font-style: italic;
  font-weight: 500; font-size: var(--text-h3); line-height: var(--leading-snug); color: var(--text-strong); }
.gt-scripture-quote--lg blockquote { font-size: var(--text-h2); }
.gt-scripture-quote--sm blockquote { font-size: var(--text-h4); }
.gt-scripture-quote--light blockquote { color: var(--text-on-dark); }
.gt-scripture-quote cite { font-style: normal; font-family: var(--font-label); font-weight: 700;
  font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-accent); }
.gt-scripture-quote--light cite { color: var(--lime-400); }
.gt-scripture-quote cite .gt-trans { font-weight: 500; color: var(--text-muted); }
.gt-scripture-quote--light cite .gt-trans { color: var(--slate-300); }

/* ============================================================
   ServiceTimeCard — icon 44 radius-sm, schedule in accent uppercase
   ============================================================ */
.gt-svc { display: flex; gap: var(--space-4); align-items: flex-start;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.gt-svc--soft { background: var(--surface-brand-soft); border-color: var(--border-brand); box-shadow: none; }
.gt-svc__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  flex: none; border-radius: var(--radius-sm); background: var(--blue-100); color: var(--accent); }
.gt-svc--soft .gt-svc__icon { background: var(--white); }
.gt-svc__icon svg { width: 22px; height: 22px; }
.gt-svc__body { display: flex; flex-direction: column; gap: 0.2rem; }
.gt-svc__body h4 { font-family: var(--font-display); font-size: var(--text-h4); font-weight: 600;
  color: var(--text-strong); margin: 0; line-height: 1.2; }
.gt-svc--soft .gt-svc__body h4 { color: var(--slate-800); }
.gt-svc__time { font-family: var(--font-label); font-weight: 700; font-size: var(--text-sm);
  letter-spacing: 0.04em; color: var(--accent); margin: 0; text-transform: uppercase; }
.gt-svc__note { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-body); margin: 0.35rem 0 0; }

/* ============================================================
   Grids
   ============================================================ */
.gt-grid { display: grid; gap: var(--space-5); }
.gt-grid--2 { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-9); }
.gt-grid--2start { grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: start; }
.gt-grid--3 { grid-template-columns: repeat(3,1fr); }
.gt-grid--4 { grid-template-columns: repeat(4,1fr); }
.gt-grid--rhythm { grid-template-columns: repeat(2,1fr); gap: var(--space-4); margin-top: var(--space-7); }
.gt-grid--studies { grid-template-columns: repeat(3,1fr); gap: var(--space-5); margin-top: var(--space-7); }

/* ============================================================
   Inputs / forms
   ============================================================ */
.gt-field { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; }
.gt-field label, .gt-label { font-family: var(--font-label); font-weight: 600; font-size: var(--text-sm);
  color: var(--text-strong); letter-spacing: 0.01em; }
.gt-input, .gt-textarea, .gt-select { font-family: var(--font-body); font-size: var(--text-base);
  color: var(--text-strong); background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; width: 100%; line-height: var(--leading-normal);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.gt-textarea { min-height: 120px; resize: vertical; }
.gt-input::placeholder, .gt-textarea::placeholder { color: var(--slate-400); }
.gt-input:hover, .gt-textarea:hover { border-color: var(--border-strong); }
.gt-input:focus, .gt-textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.gt-form { display: flex; flex-direction: column; gap: var(--space-4); }
.gt-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

/* ============================================================
   Interior page header bands
   ============================================================ */
.gt-pagehead { background: var(--slate-700); padding: var(--space-9) 0; position: relative; overflow: hidden; }
.gt-pagehead--gradient { background: linear-gradient(150deg,#4E606E 0%,#3C4C59 55%,#212B33 100%); }
.gt-pagehead--green { background: linear-gradient(150deg,#4F9A6B 0%,#3C7A57 55%,#2C3843 100%); }
.gt-pagehead::after { content:""; position:absolute; inset:0;
  background: radial-gradient(50% 70% at 84% 15%, rgba(168,202,85,0.15), transparent 60%); pointer-events:none; }
.gt-pagehead__inner { position: relative; z-index:1; max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--gutter); }
.gt-pagehead h1 { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 600; color: var(--white); margin: var(--space-2) 0 0; }
.gt-pagehead--big h1 { font-size: var(--text-display-2); max-width: 20ch; line-height: 1.08; }
.gt-pagehead__lead { color: var(--slate-300); font-size: var(--text-lead); max-width: 40rem; margin: var(--space-4) 0 0; line-height: 1.7; }
.gt-pagehead--green .gt-pagehead__lead { color: rgba(255,255,255,0.88); }
.gt-pagehead__grid { display:grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-8); align-items:center; }
.gt-pagehead__split { display:flex; justify-content:space-between; align-items:flex-end; gap: var(--space-5); flex-wrap:wrap; }

/* ---- Elders ---- */
.gt-elder { display:flex; flex-direction:column; align-items:center; text-align:center; gap: var(--space-3); }
.gt-elder__photo { width: 150px; height: 150px; border-radius: var(--radius-circle); object-fit: cover; background: var(--slate-200); }
.gt-elder__role { margin: 2px 0 0; font-family: var(--font-label); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

/* ---- Icon badge (steps / ways / reassurance) ---- */
.gt-iconbadge { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius: var(--radius-md);
  background: var(--blue-100); color: var(--accent); margin-bottom: var(--space-3); }
.gt-iconbadge svg { width:24px; height:24px; }
.gt-iconbadge--leaf { background: var(--lime-200); color: var(--leaf-700); }

/* ---- Media row card (services / featured sermon) ---- */
.gt-row { display:grid; grid-template-columns: 1.1fr 0.9fr; overflow:hidden; }
.gt-row__body { padding: var(--space-7); display:flex; flex-direction:column; gap: var(--space-3); justify-content:center; }

/* ---- Play overlay / sermon cards ---- */
.gt-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.gt-play span { display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%;
  background: rgba(255,255,255,0.92); color: var(--accent); box-shadow: var(--shadow-lg); }
.gt-play svg { width:28px; height:28px; margin-left:3px; }
.gt-len { position:absolute; top: var(--space-3); right: var(--space-3); font-family: var(--font-label); font-size:11px; font-weight:700;
  color:#fff; background: rgba(33,43,51,0.6); padding:.2rem .5rem; border-radius: var(--radius-pill); }
.gt-meta { display:flex; gap: var(--space-4); align-items:center; font-family: var(--font-label); font-size: var(--text-sm); font-weight:600; color: var(--text-muted); flex-wrap:wrap; }
.gt-meta span { display:inline-flex; align-items:center; gap:6px; }
.gt-meta svg { width:16px; height:16px; }

/* ---- Pills (series filter) ---- */
.gt-pills { display:flex; gap: var(--space-2); flex-wrap:wrap; }
.gt-pill { font-family: var(--font-label); font-weight:600; font-size: var(--text-sm); padding:.5rem 1rem; border-radius: var(--radius-pill);
  cursor:pointer; border:1px solid var(--border-default); background: var(--white); color: var(--text-body); }
.gt-pill--on { border-color: var(--accent); background: var(--accent); color:#fff; }

/* ---- Sermon detail player ---- */
.gt-player-wrap { background: var(--slate-900); }
.gt-player-wrap .gt-wrap { padding-bottom: var(--space-7); }
.gt-player { position:relative; aspect-ratio:16/9; border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(48,107,145,0.5) 0%, rgba(27,63,84,0.55) 60%, rgba(33,43,51,0.65) 100%), var(--gt-poster, none) center 30%/cover; }
.gt-player__btn { display:inline-flex; align-items:center; justify-content:center; width:88px; height:88px; border-radius:50%;
  background: rgba(255,255,255,0.94); color: var(--accent); box-shadow: var(--shadow-xl); }
.gt-player__btn svg { width:38px; height:38px; margin-left:5px; }
.gt-player__bar { position:absolute; left:0; right:0; bottom:0; padding: var(--space-4); background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); }
.gt-player__track { height:4px; border-radius:999px; background: rgba(255,255,255,0.3); }
.gt-player__fill { width:28%; height:100%; border-radius:999px; background: var(--lime-500); }
.gt-player__time { display:flex; justify-content:space-between; margin-top:8px; font-family: var(--font-mono); font-size:12px; color: rgba(255,255,255,0.85); }
.gt-crumb { background: var(--slate-800); padding: var(--space-4) 0; }
.gt-crumb a, .gt-crumb button { display:inline-flex; align-items:center; gap:8px; background:transparent; border:none; color: var(--slate-300);
  font-family: var(--font-label); font-weight:600; font-size: var(--text-sm); cursor:pointer; text-decoration:none; }
.gt-crumb svg { width:16px; height:16px; }
.gt-outline { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--space-4); }
.gt-outline li { display:flex; gap: var(--space-4); }
.gt-outline__n { flex:none; width:36px; height:36px; border-radius: var(--radius-md); background: var(--blue-100); color: var(--accent);
  display:inline-flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:600; }
.gt-sticky { position: sticky; top: calc(var(--space-8) + 40px); }

/* ---- Give widget ---- */
.gt-seg { display:flex; background: var(--mist-100); border-radius: var(--radius-pill); padding:4px; margin-bottom: var(--space-5); }
.gt-seg button { flex:1; padding:.6rem 1rem; border-radius: var(--radius-pill); border:none; cursor:pointer;
  font-family: var(--font-label); font-weight:700; font-size: var(--text-sm); background: transparent; color: var(--text-muted); }
.gt-seg button.gt-on { background: var(--white); color: var(--text-brand); box-shadow: var(--shadow-sm); }
.gt-amts { display:grid; grid-template-columns: repeat(5,1fr); gap: var(--space-2); margin: var(--space-3) 0; }
.gt-amts button { padding:.7rem 0; border-radius: var(--radius-sm); cursor:pointer; font-family: var(--font-label); font-weight:700;
  font-size: var(--text-base); border:1px solid var(--border-default); background: var(--white); color: var(--text-body); }
.gt-amts button.gt-on { border-color: var(--accent); background: var(--blue-100); color: var(--text-accent); }
.gt-funds { display:flex; gap: var(--space-2); flex-wrap:wrap; margin: var(--space-3) 0 var(--space-6); }
.gt-funds button { padding:.45rem .9rem; border-radius: var(--radius-pill); cursor:pointer; font-family: var(--font-label); font-weight:600;
  font-size: var(--text-sm); border:1px solid var(--border-default); background: var(--white); color: var(--text-body); }
.gt-funds button.gt-on { border-color: var(--accent); background: var(--accent); color:#fff; }
.gt-amt-input { position:relative; margin-bottom: var(--space-5); }
.gt-amt-input span { position:absolute; left:14px; top:50%; transform: translateY(-50%); color: var(--text-muted); font-weight:600; }
.gt-amt-input input { width:100%; padding:.7rem .85rem .7rem 1.6rem; font-family: var(--font-body); font-size: var(--text-base);
  border:1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-strong); }
.gt-secure { display:flex; align-items:center; justify-content:center; gap:6px; margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.gt-secure svg { width:13px; height:13px; }
.gt-wayrow { display:flex; gap: var(--space-4); align-items:flex-start; }

/* ============================================================
   Hero (home)
   ============================================================ */
.gt-hero { position: relative; overflow: hidden; background-color: var(--slate-700);
  background: linear-gradient(150deg, rgba(78,96,110,0.86) 0%, rgba(60,76,89,0.90) 50%, rgba(33,43,51,0.94) 100%), var(--gt-hero-img, none) center 32% / cover; }
.gt-hero::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(55% 75% at 80% 12%, rgba(168,202,85,0.16), transparent 60%); }
.gt-hero__inner { position: relative; z-index: 1; max-width: 52rem; margin: 0 auto;
  padding: var(--space-12) var(--gutter) var(--space-10);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); }
.gt-hero h1 { font-family: var(--font-display); font-size: var(--text-display-1); font-weight: 600;
  line-height: 1.06; letter-spacing: -0.02em; color: var(--white); margin: 0; }
.gt-hero h1 em { color: var(--lime-400); font-weight: 500; font-style: italic; }
.gt-hero__lead { font-size: var(--text-lead); line-height: var(--leading-relaxed); color: var(--slate-300); max-width: 36rem; margin: 0; }
.gt-hero__actions, .gt-cta__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); }

/* ---- CTA band ---- */
.gt-cta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); }
.gt-cta h2 { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 600; color: var(--white); margin: 0; }
.gt-cta p { color: var(--slate-300); font-size: var(--text-lead); max-width: 36rem; margin: 0; }

/* ============================================================
   NavBar — translucent, logo wordmark, active underline, Button CTA
   ============================================================ */
.gt-nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-subtle); }
.gt-nav__bar { max-width: var(--container-xl); margin: 0 auto; padding: 0.85rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.gt-nav__brand { display: inline-flex; }
.gt-nav__brand img { height: 34px; width: auto; display: block; }
.gt-nav__desktop { display: flex; align-items: center; gap: var(--space-6); }
.gt-nav__links { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.gt-nav__links a { font-family: var(--font-label); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.02em;
  color: var(--text-body); text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out); }
.gt-nav__links a:hover { color: var(--accent-strong); }
.gt-nav__links a.is-active { color: var(--text-brand); font-weight: 700; border-bottom-color: var(--accent); }
.gt-nav__burger { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: var(--text-strong); }
.gt-nav__burger svg { width: 26px; height: 26px; }
.gt-mobile { display: none; border-top: 1px solid var(--border-subtle); background: var(--white); }
.gt-mobile.is-open { display: block; }
.gt-mobile ul { list-style: none; margin: 0; padding: var(--space-3) var(--gutter) var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.gt-mobile a { display: block; padding: var(--space-3) 0; font-family: var(--font-label); font-weight: 600;
  color: var(--text-body); text-decoration: none; border-bottom: 1px solid var(--border-subtle); }
.gt-mobile .gt-btn { margin-top: var(--space-4); }

/* ============================================================
   Footer — brand slate, logo, mission, services, contact
   ============================================================ */
.gt-footer { background: var(--slate-700); color: var(--slate-300); }
.gt-footer__grid { max-width: var(--container-xl); margin: 0 auto; padding: var(--space-9) var(--gutter) var(--space-6);
  display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: var(--space-8); }
.gt-footer__brand img { height: 38px; width: auto; display: block; border-radius: var(--radius-xs); }
.gt-footer__mission { margin-top: var(--space-4); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--slate-300); max-width: 26rem; }
.gt-footer__tag { margin-top: var(--space-4); font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--white); font-size: var(--text-lg); }
.gt-footer h4 { font-family: var(--font-label); font-weight: 700; font-size: var(--text-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--lime-400); margin: 0 0 var(--space-4); }
.gt-footer ul { list-style: none; margin: 0; padding: 0; }
.gt-footer ul a { color: var(--slate-300); font-size: var(--text-sm); line-height: 2; text-decoration: none; }
.gt-footer ul a:hover { color: var(--white); }
.gt-footer address { font-style: normal; font-size: var(--text-sm); line-height: 1.9; color: var(--slate-300); }
.gt-footer address a { color: var(--lime-400); display: inline-block; margin-top: var(--space-3); text-decoration: none; }
.gt-footer__bottom { border-top: 1px solid var(--border-on-dark); max-width: var(--container-xl); margin: 0 auto;
  padding: var(--space-4) var(--gutter); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  font-size: var(--text-xs); color: var(--slate-400); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  /* `1fr` means `minmax(auto, 1fr)`, and that `auto` floor is the item's
     min-content width — so grid items refuse to shrink below their content and
     push the page sideways (/plan-a-visit/ overflowed 16px at 375px wide).
     minmax(0, 1fr) plus min-width:0 on the children lets them actually shrink. */
  .gt-grid--2, .gt-grid--2start, .gt-grid--studies, .gt-grid--3, .gt-grid--4,
  .gt-pagehead__grid, .gt-row { grid-template-columns: minmax(0, 1fr) !important; }
  .gt-grid--rhythm { grid-template-columns: minmax(0, 1fr); }
  .gt-grid--2 > *, .gt-grid--2start > *, .gt-grid--studies > *, .gt-grid--3 > *,
  .gt-grid--4 > *, .gt-pagehead__grid > *, .gt-row > *, .gt-grid--rhythm > * { min-width: 0; }
  .gt-nav__desktop { display: none; }
  .gt-nav__burger { display: inline-flex; }
  .gt-sticky { position: static; }
}
@media (max-width: 720px) {
  .gt-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .gt-form__row { grid-template-columns: 1fr; }
}

/* ============================================================
   Secondary pages (Events / Blog / Ministries / sub-pages)
   ============================================================ */

/* ---- Event date chip (re-skins the sermon play overlay) ---- */
.gt-datechip { position:absolute; top:var(--space-3); left:var(--space-3); background:rgba(255,255,255,0.95);
  border-radius:var(--radius-sm); padding:.35rem .65rem; text-align:center; box-shadow:var(--shadow-sm); line-height:1; }
.gt-datechip .m { font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); display:block; }
.gt-datechip .d { font-family:var(--font-display); font-size:1.5rem; font-weight:600; color:var(--text-strong); display:block; margin-top:2px; }

/* ---- Detail meta list (event/post when-where) ---- */
.gt-detail-list { display:flex; flex-direction:column; gap:var(--space-3); margin:0; }
.gt-detail-list > div { display:flex; gap:var(--space-3); align-items:flex-start; }
.gt-detail-list i, .gt-detail-list svg { width:20px; height:20px; color:var(--accent); flex:none; margin-top:2px; }
.gt-detail-list .lab { font-family:var(--font-label); font-weight:700; font-size:var(--text-xs); letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-muted); margin:0 0 2px; }
.gt-detail-list .val { font-size:var(--text-sm); line-height:1.5; color:var(--text-body); margin:0; }

/* ---- Prose (blog post / sub-page WP content) ---- */
.gt-prose { max-width:44rem; }
.gt-prose > * { margin-block: 0 var(--space-4); }
.gt-prose h2 { font-family:var(--font-display); font-size:var(--text-h2); font-weight:600; color:var(--text-strong);
  letter-spacing:var(--tracking-tight); margin-block:var(--space-7) var(--space-3); }
.gt-prose h3 { font-family:var(--font-display); font-size:var(--text-h3); font-weight:600; color:var(--text-strong);
  margin-block:var(--space-6) var(--space-3); }
.gt-prose p, .gt-prose li { font-size:var(--text-lg); line-height:var(--leading-relaxed); color:var(--text-body); }
.gt-prose img { border-radius:var(--radius-md); margin-block:var(--space-5); }
.gt-prose blockquote { margin:var(--space-5) 0; padding-left:var(--space-5); border-left:3px solid var(--accent);
  font-family:var(--font-display); font-style:italic; font-size:var(--text-h4); color:var(--text-strong); }
.gt-prose a { color:var(--text-accent); text-decoration:underline; text-underline-offset:3px; }
.gt-prose ul, .gt-prose ol { padding-left:1.4rem; }

/* ---- Post/article meta byline ---- */
.gt-byline { display:flex; gap:var(--space-4); align-items:center; font-family:var(--font-label); font-size:var(--text-sm);
  font-weight:600; color:var(--text-muted); flex-wrap:wrap; margin-top:var(--space-4); }
.gt-byline span { display:inline-flex; align-items:center; gap:6px; }

/* ---- Empty state ---- */
.gt-empty { text-align:center; padding:var(--space-9) var(--gutter); max-width:36rem; margin-inline:auto; }
.gt-empty .gt-iconbadge { margin-inline:auto; }