/* Sermon Hub → Sean McIntyre light-minimal harmonising.
   The plugin owns structure; this file only restyles it to match the
   narrow, light link-hub aesthetic (loaded after the plugin stylesheet). */

/* Constrain sermon pages to the same narrow column as the rest of the site.
   (.sermon-archive / .sermon-single are the plugin's real <main> wrappers —
   their internal 1200px containers shrink to fit automatically.) */
.sermon-archive,
.sermon-single {
  max-width: var(--sm-col, 700px) !important;
  margin: 26px auto 60px !important;   /* breathing room below the sticky header */
  padding: 24px 20px 40px !important;
  box-sizing: border-box;
  background: var(--sm-card, #fff);
  border-radius: var(--sm-radius, 22px);
  box-shadow: var(--sm-shadow, 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06));
}

/* Archive hero: light, not dark */
.sermon-hero,
.sh-hero {
  background: var(--sm-card, #fff) !important;
  color: var(--sm-text, #1f2328) !important;
  border-radius: var(--sm-radius, 22px);
  box-shadow: var(--sm-shadow, 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06));
  overflow: hidden;
}

/* Cards */
.sermon-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
@media (max-width: 520px) { .sermon-grid { grid-template-columns: 1fr !important; } }
.sermon-card {
  border-radius: 14px !important;
  box-shadow: var(--sm-shadow, 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06)) !important;
  background: var(--sm-card, #fff) !important;
}

/* Single sermon: lift the dark section to light */
.single-sermon .sermon-dark,
.sh-single-dark,
.sermon-hub-single .sh-dark {
  background: var(--sm-card, #fff) !important;
  color: var(--sm-text, #1f2328) !important;
  border-radius: var(--sm-radius, 22px);
  box-shadow: var(--sm-shadow, 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06));
}

/* Buttons → pill style like the link cards */
.sh-btn, .sermon-hub-btn, .sh-action-btn {
  border-radius: 999px !important;
  font-family: var(--sm-font, 'Inter', sans-serif) !important;
  font-weight: 600 !important;
}

/* Podcast badges keep their brand colours but get the pill treatment */
.sh-podcast-badge { border-radius: 999px !important; }

/* ── Mobile featured hero ──
   On phones the plugin stacks the caption BELOW the image on a dark band with
   white text. This theme made the band white, leaving white-on-white text and
   a bare-looking CTA. Restyle the caption for the light card (mobile only —
   desktop overlays the image, where white text is correct). */
@media (max-width: 767px) {
  .sermon-hero--featured { background: var(--sm-card, #fff) !important; }
  .sermon-hero--featured .sermon-hero__content { padding: 14px 18px 18px !important; }
  .sermon-hero--featured .sermon-hero__eyebrow { color: var(--sm-text-light, #6b7280) !important; }
  .sermon-hero--featured .sermon-hero__featured-speaker {
    color: var(--sm-text, #1f2328) !important;
    font-size: 1.15rem !important;
  }
  .sermon-hero--featured .sermon-hero__cta {
    margin-top: 12px !important;
    background: var(--sm-text, #1f2328) !important;
    color: #fff !important;
    border-color: var(--sm-text, #1f2328) !important;
  }
}

/* The grey band behind the featured hero blends into this theme's page bg */
.sermon-hero-section { background: transparent !important; }

/* ── Single sermon in the narrow column ──
   The plugin's two-column main+sidebar layout keys its stacking breakpoint on
   the VIEWPORT (900px), but this theme's container is 700px on any screen —
   so on desktop the 380px sidebar crushed the main column to a sliver.
   Always stack: content first, discussion-guide card below, full width. */
.sermon-single__inner--has-sidebar { flex-direction: column !important; }
.sermon-single__sidebar { width: 100% !important; flex: none !important; }

/* ── Related sermons ("More from …") in the narrow column ──
   The horizontal 300px-card carousel overflows a 660px content area. Replace
   it with a tidy 2-up grid of the first four related sermons — no sliding,
   no arrow buttons, nothing to overflow. */
.sermon-related {
  margin: 36px -20px -40px;                /* bleed to the card's edges… */
  padding: 26px 20px 34px;
  border-radius: 0 0 var(--sm-radius, 22px) var(--sm-radius, 22px); /* …and finish its bottom corners */
  background: #f7f8f9 !important;
}
.sermon-related__header { padding: 0 !important; margin-bottom: 18px !important; }
.sh-carousel { padding: 0 !important; overflow: hidden !important; }
.sh-carousel__track {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  transform: none !important;
  cursor: default !important;
}
.sh-carousel__track .sermon-card { width: auto !important; min-width: 0 !important; flex: none !important; }
.sh-carousel__track > *:nth-child(n+5) { display: none; }  /* cap at four */
.sh-carousel__fab { display: none !important; }
@media (max-width: 520px) {
  .sh-carousel__track { grid-template-columns: 1fr; }
  .sh-carousel__track > *:nth-child(n+4) { display: none; } /* cap at three on phones */
}