/* ============================================================
   Ministries – Sidebar Navigator Layout
   Option I redesign — uses theme CSS variables from theme.css
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────────── */
.min-sidebar-page {
  background: var(--cream);
}

.cm-page-ministries .page-hero {
  padding: calc(var(--nav-h) + 64px) 0 64px;
}

/* ── Two-column layout ────────────────────────────────────── */
.min-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 80vh;
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* ── Sidebar ──────────────────────────────────────────────── */
.min-sidebar {
  background: var(--off);
  border-right: 1px solid var(--border);
  padding: 40px 0 60px;
  position: sticky;
  top: var(--nav-h);   /* flush under the fixed nav, no gap */
  align-self: start;
}

.admin-bar .min-sidebar {
  top: calc(var(--nav-h) + 32px);
}

@media screen and (max-width: 900px) {
  .admin-bar .min-sidebar {
    top: calc(var(--nav-h) + 46px + var(--ministry-mobile-nav-gap));
  }
}

.min-sidebar__heading {
  font-size: 11px;
  font-weight: 700;
  color: var(--light);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0 24px;
  margin-bottom: 16px;
}

/* Sidebar nav button */
.min-sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 20px;
  background: none;
  border: none;
  border-radius: 0;          /* override any Astra button border-radius */
  -webkit-appearance: none;
  appearance: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  color: var(--light);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.min-sidebar__link:hover {
  background: var(--cream);
  color: var(--navy);
  border-left-color: var(--olive-l);
}

/* Icon bubble */
.min-sidebar__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-xs);
  background: rgba(107,140,42,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light);
  transition: background 0.2s, color 0.2s;
  border: none;
}

.min-sidebar__link:hover .min-sidebar__icon {
  background: rgba(107,140,42,.14);
  color: var(--navy);
}

/* In active state — icon inherits the button's white text, no box */
.min-sidebar__link.is-active .min-sidebar__icon {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
  border: none;
}

.min-sidebar__icon svg {
  width: 16px;
  height: 16px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: stroke 0.2s;
}

/* Text block */
.min-sidebar__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;           /* allows text-overflow to work in flex */
}

.min-sidebar__name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.min-sidebar__sub {
  font-size: 11px;
  color: var(--light);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.min-sidebar__link.is-active .min-sidebar__sub {
  color: rgba(255,255,255,0.55);
}

/* Sidebar bottom CTA */
.min-sidebar__cta {
  margin: 32px 16px 0;
  background: #0D2210;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.min-sidebar__cta p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
  line-height: 1.5;
}

.min-sidebar__cta a {
  display: block;
  background: #6B8C2A;
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s;
}

.min-sidebar__cta a:hover {
  background: #4C5B0D;
}

/* ── Panels container ─────────────────────────────────────── */
.min-panels {
  min-height: 80vh;
}

/* ── Single panel ─────────────────────────────────────────── */
.min-panel {
  display: none;
  flex-direction: column;
  animation: minFadeIn 0.35s ease;
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

.min-panel.is-active {
  display: flex;
}

@keyframes minFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero image */
.min-panel__hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  padding: 28px 48px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(245,240,230,.96) 0%, rgba(255,255,255,.98) 22%, #fff 50%, rgba(255,255,255,.98) 78%, rgba(245,240,230,.96) 100%);
  border-bottom: 1px solid rgba(12,30,10,.08);
}

.min-panel__hero-img {
  width: min(430px, 100%);
  max-width: 100%;
  height: auto;
  max-height: 205px;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
  transform: scale(1.45);
  transform-origin: center;
}

.min-panel__hero-media .cm-editable-region {
  display: flex;
  justify-content: center;
  width: 100%;
}

.min-panel__hero-media img {
  width: min(430px, 100%);
  max-width: 100%;
  height: auto;
  max-height: 205px;
  object-fit: contain;
  transform: scale(1.45);
  transform-origin: center;
}

.min-panel__hero-img--contain {
  object-fit: contain;
  object-position: center;
}

/* Panel body */
.min-panel__body {
  padding: 40px 56px 56px;
  flex: 1;
}

/* Title */
.min-panel__title {
  font-family: var(--font-head);
  font-size: 44px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.1;
  margin-bottom: 8px;
}

/* Subtitle tag line */
.min-panel__subtitle {
  font-size: 13px;
  font-weight: 700;
  color: var(--olive-l);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Description */
.min-panel__desc {
  font-size: 16px;
  color: var(--light);
  line-height: 1.8;
  margin-bottom: 32px;
  max-width: 640px;
}

/* Action buttons */
.min-panel__actions {
  display: none; /* Temporary: hide per-ministry CTA buttons. */
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .min-panel__body {
    padding: 40px 40px 56px;
  }

  .min-panel__title {
    font-size: 36px;
  }
}

@media (max-width: 900px) {
  .min-sidebar-page {
    --ministry-mobile-nav-gap: 0px;
  }

  .min-layout {
    grid-template-columns: 1fr;
    scroll-margin-top: calc(var(--nav-h) + 54px);
  }

  /* Sidebar becomes a compact tab grid on mobile */
  .min-sidebar {
    position: sticky;
    top: calc(var(--nav-h) + var(--ministry-mobile-nav-gap));
    z-index: 200;
    max-height: 80px;
    padding: 10px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
    transform: translateY(0);
    transition: transform 0.26s cubic-bezier(.2, .7, .2, 1), opacity 0.18s ease;
  }

  .min-sidebar.is-hidden-on-scroll {
    transform: translateY(calc(-100% - var(--ministry-mobile-nav-gap) - 1px));
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
  }

  .min-sidebar__heading {
    display: none;
  }

  .min-sidebar__cta {
    display: none;
  }

  .min-sidebar__link {
    width: auto;
    min-width: 0;
    min-height: 58px;
    padding: 8px 4px 9px;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--r-xs);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
  }

  .min-sidebar__link:hover,
  .min-sidebar__link.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--navy);
  }

  .min-sidebar__sub {
    display: none;
  }

  .min-sidebar__name {
    display: block;
    width: 100%;
    font-size: 11px;
    line-height: 1.15;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .min-sidebar__icon {
    width: 28px;
    height: 28px;
  }

  .min-sidebar__icon svg {
    width: 15px;
    height: 15px;
  }

  .min-panel__hero-media {
    min-height: 190px;
    padding: 22px 24px;
  }

  .min-panel__hero-img {
    width: min(330px, 100%);
    max-height: 150px;
    transform: scale(1.35);
  }

  .min-panel__hero-media img {
    width: min(330px, 100%);
    max-height: 150px;
    transform: scale(1.35);
  }

  .min-panel__body {
    padding: 32px 20px 48px;
  }

  .min-panel__title {
    font-size: 30px;
  }

  .min-panel__detail-value {
    text-align: left;
  }
}

@media (max-width: 520px) {
  .min-sidebar {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    padding: 6px 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  .min-sidebar__link {
    box-sizing: border-box;
    min-height: 32px;
    padding: 5px 0;
    gap: 3px;
    border-radius: 0;
    overflow: hidden;
  }

  .min-sidebar__icon {
    width: 24px;
    height: 24px;
  }

  .min-sidebar__icon svg {
    width: 13px;
    height: 13px;
  }

  .min-sidebar__name {
    font-size: 8px;
    line-height: 1.08;
    max-width: 100%;
    overflow: hidden;
  }
}

/* ── Hero quick-jump chips ────────────────────────────────── */
.min-hero-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.min-hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-pill);
  color: rgba(255,255,255,0.7);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.min-hero-chip:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.95);
}

.min-hero-chip.is-active {
  background: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.95);
  color: var(--navy);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* ── Sidebar active state — full navy fill ────────────────── */
.min-sidebar__link.is-active {
  background: var(--navy);
  color: var(--white);
  border-left-color: var(--navy);
  border-radius: 0;
}
.min-sidebar__link.is-active .min-sidebar__name {
  color: var(--white);
}
.min-sidebar__link.is-active .min-sidebar__sub {
  color: rgba(255,255,255,0.55);
}
/* No trailing arrow — keep it clean */
.min-sidebar__link::after { display: none; }

@media (max-width: 900px) {
  .min-sidebar__link.is-active {
    border-left-color: transparent;
    border-radius: var(--r-xs);
  }
}

/* ── Panel breadcrumb — improved ─────────────────────────── */
.min-panel__breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}

/* ── Panel volunteer badge ────────────────────────────────── */
.min-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(107,140,42,.1);
  color: var(--olive-d);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.min-panel__badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--olive-l);
  flex-shrink: 0;
}

/* ── Detail rows — card-style ────────────────────────────── */
.min-panel__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 28px;
  max-width: none;
}
.min-panel__detail-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 16px 18px;
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  border-bottom: 1px solid var(--border);
}
.min-panel__detail-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--light);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.min-panel__detail-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  line-height: 1.4;
}

/* ── Scripture verse — improved ──────────────────────────── */
.min-panel__verse {
  position: relative;
  overflow: hidden;
  max-width: 760px;
  margin: 4px 0 0;
  padding: 22px 28px;
  background: rgba(255,255,255,.46);
  border-left: 4px solid rgba(107,140,42,.34);
  color: #697589;
}
.min-panel__verse::before {
  content: none;
}
.min-panel__verse cite {
  color: var(--olive-l);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── Keep legacy classes intact (used elsewhere in theme) ─── */
.ministries__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.min-card { background: var(--white); border-radius: var(--r); padding: 32px; box-shadow: var(--shadow); transition: transform .22s; }
.min-card:hover { transform: translateY(-4px); }
.min-card__icon { width:56px; height:56px; margin-bottom:18px; border-radius:18px; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(107,140,42,.16) 0%,rgba(12,30,10,.06) 100%); color:var(--olive-d); border:1px solid rgba(107,140,42,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.55); }
.min-card__icon svg { width:28px; height:28px; display:block; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.min-card__title { font-family:var(--font-head); font-size:20px; color:var(--navy); margin:8px 0 12px; }
.min-card__desc  { font-size:14px; color:var(--light); line-height:1.75; margin-bottom:16px; }
.min-card__link, .min-card__link:visited { font-size:13px; color:var(--navy); font-weight:700; }
.min-card__link:hover, .min-card__link:focus { color:var(--olive-d); }
.cm-page-ministries .cta-banner__inner,
.cm-page-ministries .cta-banner__btns .btn {
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .min-panel {
    animation: none;
  }

  .min-sidebar {
    transition: none;
  }
}
.cm-page-ministries .cta-banner {
  background: #0D2210;
}
.cm-page-ministries .cta-banner__btns .btn--primary,
.cm-page-ministries .cta-banner__btns .btn--primary:visited {
  background: #6B8C2A;
  border-color: #6B8C2A;
  color: var(--white);
}
.cm-page-ministries .cta-banner__btns .btn--primary:hover,
.cm-page-ministries .cta-banner__btns .btn--primary:focus-visible {
  background: #4C5B0D;
  border-color: #4C5B0D;
  color: var(--white);
}
.cm-page-ministries .cta-banner__btns .btn--outline,
.cm-page-ministries .cta-banner__btns .btn--outline:visited {
  background: transparent;
  border-color: rgba(255,255,255,.7);
  color: var(--white);
}
.cm-page-ministries .cta-banner__btns .btn--outline:hover,
.cm-page-ministries .cta-banner__btns .btn--outline:focus-visible {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.7);
  color: var(--white);
}
@media (max-width:560px) { .ministries__grid { grid-template-columns:1fr; } }
.ministry-detail-copy {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 32px;
  color: var(--body);
}

.ministry-detail-card-title {
  color: var(--navy);
  margin-bottom: 16px;
  font-size: 20px;
}

.ministry-detail-card-body {
  color: var(--body);
  line-height: 1.8;
}

.ministry-detail-card-body ul,
.ministry-detail-card-body ol {
  margin-left: 20px;
}

.ministry-detail-card-body li {
  margin-bottom: 12px;
}

.ministry-detail-info-title {
  color: var(--navy);
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
}

.ministry-detail-info-body {
  color: var(--light);
}

.ministry-detail-info-body small {
  color: var(--light);
}

.ministry-detail-cta-title {
  margin-bottom: 24px;
}

.ministry-detail-cta-subtitle {
  font-size: 16px;
  color: var(--light);
  margin-bottom: 32px;
}