/*
 * sermon-hub: Front-end styles
 * Spec source: Elevation Church code analysis (sermon-section-spec.md)
 *
 * All colour values are CSS custom properties so the theme can override them.
 * --sh-bg-dark       : page/hero dark background
 * --sh-text-light    : text on dark backgrounds
 * --sh-card-radius   : card corner radius
 * --sh-accent        : interactive accent colour
 */

:root {
    --sh-bg-dark:      #1a1a1a;
    --sh-bg-card:      #ffffff;
    --sh-text-light:   #ffffff;
    --sh-text-muted:   #757575;
    --sh-card-radius:  16px;
    --sh-accent:       #1a1a1a;
    --sh-drawer-width: 400px;
    --sh-toolbar-h:    64px;
}

/* ── Reset / scoping ────────────────────────────────────────────────────────── */

.sermon-archive *,
.sermon-archive *::before,
.sermon-archive *::after {
    box-sizing: border-box;
}

.sermon-archive {
    position: relative;
    background: #fafafa;
    min-height: 100vh;
}

/* ── Hero ────────────────────────────────────────────────────────────────────── */

.sermon-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3.5;
    overflow: hidden;
    background-color: var(--sh-bg-dark);
    background-size: cover;
    background-position: center;
}

.sermon-hero--featured,
.sermon-hero--compact {
    aspect-ratio: unset;
}

@media (min-width: 600px) {
    .sermon-hero:not(.sermon-hero--featured):not(.sermon-hero--compact) { aspect-ratio: 1.5; }
}

@media (min-width: 1024px) {
    .sermon-hero:not(.sermon-hero--featured):not(.sermon-hero--compact) { aspect-ratio: 24 / 9; }
}

.sermon-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(26, 26, 26, 0) 40.5%, rgb(26, 26, 26));
}

.sermon-hero__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 24px 32px;
    color: var(--sh-text-light);
}

@media (min-width: 768px) {
    .sermon-hero__content {
        padding: 32px 48px 48px;
    }
}

.sermon-hero__title {
    margin: 0 0 8px;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--sh-text-light);
}

.sermon-hero__subtitle {
    margin: 0;
    font-size: 1rem;
    opacity: 0.85;
    max-width: 540px;
}

/* Hero with image: gradient from bottom */
.sermon-hero--has-img .sermon-hero__overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.75) 100%);
}

/* Featured hero: deeper gradient so bottom-left text stays legible over busy
   thumbnail artwork, with a slight left bias to anchor the content. */
.sermon-hero--featured.sermon-hero--has-img .sermon-hero__overlay {
    background:
        linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 30%, rgba(0,0,0,0) 60%),
        linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 55%);
}

/* Compact hero — no image, just a small dark strip with heading */
.sermon-hero--compact {
    aspect-ratio: unset;
    min-height: 0;
    padding: 48px 24px 40px;
    display: flex;
    align-items: flex-end;
}
.sermon-hero--compact .sermon-hero__overlay { display: none; }
.sermon-hero--compact .sermon-hero__content {
    position: static;
    padding: 0;
}
@media (min-width: 768px) {
    .sermon-hero--compact .sermon-hero__content { padding: 0; }
}

/* Featured sermon hero — sized to match the YouTube player window on single
   sermon pages: a centred 16:9 box at the same width (1200px region − 24px
   gutters) with the same 16px rounding. The 16:9 thumbnail fits exactly, so
   nothing is cropped — the badge and title art stay intact. */
.sermon-hero--featured {
    aspect-ratio: 16 / 9;
    height: auto;
    width: calc(100% - 48px);
    max-width: 900px;
    margin: 0 auto;
    border-radius: 16px;
}

/* The image sits in its own layer so the caption can overlay it on desktop and
   stack beneath it on phones. */
.sermon-hero--featured .sermon-hero__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* Phones: the 16:9 hero is too short for an overlay — the caption would ride up
   over the thumbnail's baked-in title. So stack the image with the caption below
   it on the dark band instead of overlaying. */
@media (max-width: 767px) {
    .sermon-hero--featured {
        aspect-ratio: auto;
        background: #141414;
    }
    .sermon-hero--featured .sermon-hero__media {
        position: relative;
        inset: auto;
        aspect-ratio: 16 / 9;
    }
    .sermon-hero--featured .sermon-hero__media .sermon-hero__overlay {
        display: none;
    }
    .sermon-hero--featured .sermon-hero__content {
        position: static;
        padding: 14px 16px 4px;
    }
}

/* Space above the featured hero lives as PADDING on the wrapper (white), not as
   a margin on the hero — a top margin would collapse through the wrapper and
   expose the grey page background as a band under the header. */
/* The featured hero sits in its own full-width dark band; the "Sermons" heading,
   search bar and grid follow below on the light page background. */
.sermon-hero-section:has(.sermon-hero--featured) {
    background: #e6e6e6;
    padding: 40px 0;
}
@media (max-width: 767px) {
    .sermon-hero-section:has(.sermon-hero--featured) { padding: 24px 0; }
}

/* Featured speaker name under the eyebrow (no overlaid title — thumbnail carries it) */
.sermon-hero__featured-speaker {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--sh-text-light);
}

.sermon-hero__eyebrow {
    margin: 0 0 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}

.sermon-hero__cta {
    display: inline-flex;
    margin-top: 20px;
}

/* Light variant for hero CTA button */
.sh-btn--light {
    background: #ffffff;
    color: #0a0a0a;
    border-color: #ffffff;
}
.sh-btn--light:hover,
.sh-btn--light:focus-visible {
    background: rgba(255,255,255,0.9);
    border-color: rgba(255,255,255,0.9);
}

/* ── Archive page heading ───────────────────────────────────────────────────── */
.sermon-archive__heading-wrap {
    padding: 36px 24px 8px;
    max-width: 1200px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    /* 24px sides to match the toolbar + grid below, so "Sermons" lines up with the cards */
    .sermon-archive__heading-wrap { padding: 48px 24px 8px; }
}

.sermon-archive__heading {
    margin: 0 0 8px;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #0a0a0a;
    line-height: 1.15;
}

.sermon-archive__subheading {
    margin: 0;
    font-size: 1rem;
    color: #666666;
    max-width: 560px;
}

/* ── Podcast badges ──────────────────────────────────────────────────────────── */

.sh-podcast-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.sh-podcast-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.15s;
    white-space: nowrap;
}

.sh-podcast-badge:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.sh-podcast-badge svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: currentColor;
}

.sh-podcast-badge--apple {
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid #e0e0e0;
}

/* Apple's official icon is a full-colour tile, so it uses an <img>, not currentColor. */
.sh-podcast-badge__img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 5px;
}

.sh-podcast-badge--spotify {
    background: #1DB954;
    /* Spotify-brand black label (white failed WCAG AA on the green ~2:1). */
    color: #191414;
}

.sh-podcast-badge--youtube {
    /* Darkened YouTube red so the white label meets WCAG AA (#FF0000 was ~4:1). */
    background: #CC0000;
    color: #ffffff;
}

/* Subscribe-badge strip below the hero on the main archive (light background) */
.sermon-podcast-bar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 24px 0;
}
.sermon-podcast-bar .sh-podcast-badges {
    margin-top: 0;
}

/* ── Toolbar: search + filter ────────────────────────────────────────────────── */

.sermon-toolbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fafafa;
    height: var(--sh-toolbar-h);
}

.sermon-toolbar__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
}

/* Search input */
.sermon-search {
    flex: 1;
    position: relative;
    max-width: 480px;
}

.sermon-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sh-text-muted);
    display: flex;
    pointer-events: none;
}

.sermon-search__input {
    width: 100%;
    height: 40px;
    padding: 0 16px 0 40px;
    border: 1px solid #757575;
    border-radius: 36px;
    font-size: 0.9375rem;
    outline: none;
    transition: border-color 0.15s;
    background: #ffffff;
}

.sermon-search__input:focus {
    border-color: var(--sh-accent);
    box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.1);
}

/* Filter button */
.sermon-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 24px;
    background: #eeeeee;
    border: none;
    border-radius: 16px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    position: relative;
}

.sermon-filter-btn:hover {
    background: #e0e0e0;
}

.sermon-filter-btn--active {
    background: var(--sh-accent);
    color: var(--sh-text-light);
}

.sermon-filter-btn--active:hover {
    background: #333333;
}

.sermon-filter-btn__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--sh-accent);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.sermon-filter-btn--active .sermon-filter-btn__badge {
    background: rgba(255,255,255,0.2);
    color: #ffffff;
}

/* ── Sermon grid ────────────────────────────────────────────────────────────── */

.sermon-grid-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

.sermon-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Unified, site-wide sermon grid breakpoints (mobile-first). Applies to the
   archive, the front-page recent grid, and anywhere .sermon-grid appears:
     < 480px  → 1 column   (a single full-width card looks oversized above this)
     ≥ 480px  → 2 columns
     ≥ 1024px → 3 columns
   The theme no longer defines .sermon-grid — the plugin is the single owner. */
@media (min-width: 480px) {
    .sermon-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .sermon-grid { grid-template-columns: repeat(3, 1fr); }
}

.sermon-grid__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 0;
    color: var(--sh-text-muted);
}

/* ── List view ─────────────────────────────────────────────────────────────────
   The same cards re-flowed into single-column rows. Switching grid⇄list is a pure
   class swap on #sermon-grid, so infinite-scroll items inherit it automatically.
   Compound selectors (.sermon-grid.sermon-grid--list …) out-specify the base grid
   card rules regardless of source order. */
.sermon-grid.sermon-grid--list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sermon-grid--list .sermon-grid__empty {
    text-align: left;
    padding: 32px 0;
}

/* Row layout: thumbnail left, meta centred to its right. */
.sermon-grid.sermon-grid--list .sermon-card-link {
    flex-direction: row;
    align-items: stretch;
    height: auto;
    border-radius: var(--sh-card-radius);
}
.sermon-grid.sermon-grid--list .sermon-card__thumb {
    width: 200px;
    max-width: 38%;
    height: auto;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
}
.sermon-grid.sermon-grid--list .sermon-card__meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    padding: 14px 20px;
}

/* Text-only list: drop the thumbnail entirely. */
.sermon-grid.sermon-grid--list-text .sermon-card__thumb {
    display: none;
}
.sermon-grid.sermon-grid--list-text .sermon-card__meta {
    padding: 16px 20px;
}

@media (max-width: 480px) {
    .sermon-grid.sermon-grid--list .sermon-card__thumb {
        width: 120px;
    }
    .sermon-grid.sermon-grid--list .sermon-card__meta {
        padding: 10px 14px;
    }
}

/* ── View toggle (grid / list switch in the toolbar) ───────────────────────── */
.sermon-view-toggle {
    display: inline-flex;
    flex-shrink: 0;
    border: 1px solid #e0e0e2;
    border-radius: 8px;
    overflow: hidden;
}
.sermon-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: #ffffff;
    border: 0;
    cursor: pointer;
    color: var(--sh-text-muted, #6b6b6b);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sermon-view-btn + .sermon-view-btn {
    border-left: 1px solid #e0e0e2;
}
.sermon-view-btn:hover {
    background: #f2f2f3;
}
.sermon-view-btn.is-active {
    background: var(--sh-accent);
    color: #ffffff;
}
.sermon-view-btn:focus-visible {
    outline: 2px solid var(--sh-accent);
    outline-offset: -2px;
}

/* ── Sermon card ────────────────────────────────────────────────────────────── */

.sermon-card {
    /* list item wrapper */
}

.sermon-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #ffffff;
    border-radius: var(--sh-card-radius);
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* No hover movement / zoom — cards are static (Sean's request). */

.sermon-card-link:focus-visible {
    outline: 2px solid var(--sh-accent);
    outline-offset: 2px;
}

.sermon-card__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f0f1f3;
    /* No own radius — the card-link's overflow:hidden rounds the top corners and
       the bottom meets the meta squarely. This avoids the mismatched-radius grey
       edges that came from the thumb, link and <li> each rounding differently. */
    border-radius: 0;
}

.sermon-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sermon-card__no-thumb {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2a2a2a 0%, #444 100%);
}

.sermon-card__thumb--dark {
    background: #111;
}

.sermon-card__meta {
    padding: 12px 4px 4px;
    display: block;
    border-top: none;
    margin-top: 0;
}

/* The theme's style.css also defines `.sermon-card__meta { display: flex }` with
   equal specificity, and loads AFTER this file — so it was winning and forcing the
   title / speaker / date into a horizontal row. Raising specificity here (descendant
   of the plugin's own containers) makes plugin cards reliably stack, Elevation-style,
   without touching the theme's own front-page cards. */
.sermon-grid .sermon-card__meta,
.sh-carousel .sermon-card__meta {
    display: block;
    padding: 12px 14px 16px;
    /* Theme's style.css adds a border-top + margin-top here (grey line + gap under
       the thumbnail) — override both away. */
    border-top: none;
    margin-top: 0;
}

/* The theme also styles the <li>.sermon-card as its own white box (bg + 12px radius +
   shadow), which double-stacked with the link's 16px box and produced messy edges.
   Neutralise the <li> so the white rounded card lives on a single element (the link). */
.sermon-grid .sermon-card,
.sh-carousel .sermon-card {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* Neutralise the theme's card hover (it targets .sermon-card:hover — lift + shadow,
   plus an image zoom — which is why removing the link's own hover didn't help). */
.sermon-grid .sermon-card:hover,
.sh-carousel .sermon-card:hover {
    transform: none;
    box-shadow: none;
}
.sermon-grid .sermon-card:hover .sermon-card__thumb img,
.sh-carousel .sermon-card:hover .sermon-card__thumb img {
    transform: none;
}

/* Equal-height cards: the <li> grid items stretch to the tallest in their row, so
   make the white card fill that height — thumbnail fixed, meta below, any slack
   falls at the bottom of the card. */
.sermon-grid .sermon-card-link,
.sh-carousel .sermon-card-link {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Win the theme's grey thumb placeholder too (only seen if an image is missing),
   and keep the thumbnail from shrinking inside the flex card. */
.sermon-grid .sermon-card__thumb,
.sh-carousel .sermon-card__thumb {
    background: #f0f1f3;
    flex-shrink: 0;
}

.sermon-card__title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: #1a1a1a;
}

.sermon-card__speaker {
    display: block;
    margin: 0 0 2px;
    font-size: 0.8125rem;
    font-weight: 400;
    color: #555555;
}

.sermon-card__sub {
    display: block;
    margin: 0;
    font-size: 0.75rem;
    color: var(--sh-text-muted);
}

/* ── Infinite scroll ────────────────────────────────────────────────────────── */

.sermon-scroll-sentinel {
    height: 1px;
    margin-top: 24px;
}

.sermon-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
    gap: 12px;
    color: var(--sh-text-muted);
}

/* The JS toggles the `hidden` attribute to show/hide the spinner, but the rule
   above forces `display:flex`, which overrides `[hidden]`'s default display:none —
   so the spinner sat visible permanently. Honour the attribute explicitly. */
.sermon-loading[hidden] {
    display: none;
}

.sermon-loading__spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid #e0e0e0;
    border-top-color: var(--sh-accent);
    border-radius: 50%;
    animation: sh-spin 0.7s linear infinite;
}

@keyframes sh-spin {
    to { transform: rotate(360deg); }
}

/* ── Filter drawer backdrop ──────────────────────────────────────────────────── */

.sermon-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s;
}

.sermon-filter-backdrop.is-visible {
    background: rgba(0, 0, 0, 0.4);
}

/* ── Filter drawer ───────────────────────────────────────────────────────────── */

.sermon-filter-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sh-drawer-width);
    max-width: 100vw;
    z-index: 201;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.15);
}

.sermon-filter-drawer.is-open {
    transform: translateX(0);
}

.sermon-filter-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.sermon-filter-drawer__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.sermon-filter-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    color: #333;
    transition: background 0.15s;
}

.sermon-filter-close:hover {
    background: #f5f5f5;
}

/* Filter form scrolls if content overflows */
.sermon-filter-form {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 16px;
}

/* ── Accordion groups ───────────────────────────────────────────────────────── */

.sermon-filter-group {
    border-bottom: 1px solid #f0f0f0;
}

.sermon-filter-group__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 24px;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    color: #1a1a1a;
    transition: background 0.1s;
}

.sermon-filter-group__toggle:hover {
    background: #fafafa;
}

.sermon-filter-group__chevron {
    flex-shrink: 0;
    transition: transform 0.2s;
}

.sermon-filter-group__toggle[aria-expanded="true"] .sermon-filter-group__chevron {
    transform: rotate(180deg);
}

.sermon-filter-group__list {
    list-style: none;
    margin: 0;
    padding: 0 24px 12px;
}

.sermon-filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
    font-size: 0.9375rem;
    color: #333;
}

.sermon-filter-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--sh-accent);
    cursor: pointer;
}

/* ── Drawer actions bar ────────────────────────────────────────────────────── */

.sermon-filter-drawer__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
    background: #ffffff;
}

.sermon-filter-reset {
    font-size: 0.9375rem;
    color: var(--sh-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.sermon-filter-reset:hover {
    color: #333;
}

.sermon-filter-apply {
    flex: 1;
    max-width: 180px;
    height: 44px;
    background: var(--sh-accent);
    color: var(--sh-text-light);
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.sermon-filter-apply:hover {
    background: #333333;
}

/* ── Card entrance animation (infinite scroll) ───────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
    .sermon-card--entering {
        animation: sh-card-in 0.3s ease both;
    }
}

@keyframes sh-card-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SINGLE SERMON
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ─────────────────────────────────────────────────────────────── */

.sermon-single,
.sermon-single *,
.sermon-single *::before,
.sermon-single *::after {
    box-sizing: border-box;
}

.sermon-single {
    background: #ffffff;
    color: #1a1a1a;
    min-height: 100vh;
    padding-top: 48px;
    font-family: 'DM Sans', sans-serif;
}

/* ── Video region ─────────────────────────────────────────────────────────────── */

.sermon-single__video-region {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* .sh-video-wrap is shared between Stream and YouTube iframes */
.sh-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
    border-radius: 16px;
    overflow: hidden;
}

.sh-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.sh-video-wrap--error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #f4f5f7;
    font-size: 0.875rem;
}

.sh-video-wrap--error p,
.sh-video-wrap--error a {
    color: #c62828;
}

/* ── Thumbnail hero (audio-only fallback) ─────────────────────────────────────── */

.sermon-single__thumb-hero {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: #e0e0e0;
}

@media (min-width: 1024px) {
    .sermon-single__thumb-hero { aspect-ratio: 24 / 9; }
}

/* ── Body / content area ─────────────────────────────────────────────────────── */

.sermon-single__body {
    padding: 32px 0 64px;
}

.sermon-single__inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Two-column layout when a sidebar (discussion panel) is present */
.sermon-single__inner--has-sidebar {
    max-width: 1200px;
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.sermon-single__main {
    flex: 1;
    min-width: 0;
}

.sermon-single__sidebar {
    flex: 0 0 380px;
    width: 380px;
    align-self: flex-start;
}

@media (max-width: 900px) {
    .sermon-single__inner--has-sidebar {
        flex-direction: column;
    }
    .sermon-single__sidebar {
        width: 100%;
        flex: none;
    }
}

/* ── Breadcrumb ───────────────────────────────────────────────────────────────── */

.sermon-single__breadcrumb {
    margin-bottom: 16px;
}

.sermon-single__back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #757575;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: color 0.15s;
}

.sermon-single__back-link:hover,
.sermon-single__back-link:focus-visible {
    color: #1a1a1a;
}

.sermon-single__back-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── Title ────────────────────────────────────────────────────────────────────── */

.sermon-single__title {
    margin: 0 0 16px;
    font-size: clamp(1.375rem, 2.5vw, 1.625rem);
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

/* ── Meta row ─────────────────────────────────────────────────────────────────── */

.sermon-single__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    font-size: 0.9375rem;
    color: #757575;
}

.sermon-single__meta-item {
    color: #757575;
    text-decoration: none;
    transition: color 0.15s;
}

a.sermon-single__meta-item:hover,
a.sermon-single__meta-item:focus-visible {
    color: #1a1a1a;
}

.sermon-single__meta-sep {
    color: #bdbdbd;
    user-select: none;
}

/* ── Action buttons ───────────────────────────────────────────────────────────── */

.sermon-single__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

/* Button atoms (shared: archive badges + single actions) */
.sh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 100px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    cursor: pointer;
    border: 2px solid transparent;
}

.sh-btn--give {
    background: transparent;
    color: #1a1a1a;
    border-color: #1a1a1a;
}

.sh-btn--give:hover,
.sh-btn--give:focus-visible {
    background: rgba(0,0,0,0.06);
}

.sh-btn--subscribe {
    background: transparent;
    color: #1a1a1a;
    border-color: #1a1a1a;
}

.sh-btn--subscribe:hover,
.sh-btn--subscribe:focus-visible {
    background: rgba(0,0,0,0.06);
}

.sh-btn--custom {
    background: transparent;
    color: #757575;
    border-color: #d0d0d0;
}

.sh-btn--custom:hover,
.sh-btn--custom:focus-visible {
    color: #1a1a1a;
    border-color: #1a1a1a;
}

.sh-btn--outline {
    background: transparent;
    color: #1a1a1a;
    border-color: #d0d0d0;
}

.sh-btn--outline:hover,
.sh-btn--outline:focus-visible {
    border-color: #1a1a1a;
}

/* ── Post content ─────────────────────────────────────────────────────────────── */

.sermon-single__content {
    margin-bottom: 40px;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #424242;
}

.sermon-single__content p:last-child { margin-bottom: 0; }

/* ── Audio player ─────────────────────────────────────────────────────────────── */

.sermon-single__audio-wrap {
    margin-bottom: 32px;
}

.sermon-single__audio-label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #757575;
    margin: 0 0 10px;
}

.sermon-single__audio-player {
    width: 100%;
    border-radius: 8px;
    accent-color: #1a1a1a;
    /* Chrome / Edge tint */
    color-scheme: light;
}

/* ── Downloads ────────────────────────────────────────────────────────────────── */

.sermon-single__downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

.sh-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 100px;
    background: #f4f5f7;
    color: #424242;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    border: 1px solid #e0e0e0;
}

.sh-download-btn:hover,
.sh-download-btn:focus-visible {
    background: #ebedf0;
    color: #1a1a1a;
}

.sh-download-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── Discussion guide card ────────────────────────────────────────────────────── */

.sermon-discussion-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: #f4f5f7;
    border-radius: 16px;
    margin-bottom: 40px;
}

/* Sidebar variant — vertical centred card, sticky */
.sermon-single__sidebar .sermon-discussion-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
    margin-bottom: 0;
    position: sticky;
    top: 24px;
}

.sermon-discussion-card__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8eaed;
    border-radius: 12px;
    color: #757575;
}

.sermon-discussion-card__icon svg {
    width: 22px;
    height: 22px;
}

.sermon-discussion-card__text {
    flex: 1;
    min-width: 0;
}

.sermon-discussion-card__heading {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
}

.sermon-discussion-card__sub {
    margin: 0;
    font-size: 0.875rem;
    color: #757575;
    line-height: 1.4;
}

.sermon-discussion-card__cta {
    flex-shrink: 0;
    font-size: 0.875rem;
    padding: 10px 20px;
}

@media (max-width: 540px) {
    .sermon-discussion-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .sermon-discussion-card__cta { align-self: stretch; justify-content: center; }
}

/* ── Topic chips ──────────────────────────────────────────────────────────────── */

.sermon-single__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 40px;
}

.sh-topic-chip {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 100px;
    background: #f4f5f7;
    color: #757575;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid #e0e0e0;
    transition: color 0.15s, border-color 0.15s;
}

.sh-topic-chip:hover,
.sh-topic-chip:focus-visible {
    color: #1a1a1a;
    border-color: #bdbdbd;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RELATED SERMONS (section + carousel)
   ═══════════════════════════════════════════════════════════════════════════════ */

.sermon-related {
    padding: 48px 20px 72px;
    background: #fafafa;
    border-top: 1px solid #eaeaea;
}

/* ── Section header ───────────────────────────────────────────────────────────── */

.sermon-related__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    max-width: 1280px;
    margin: 0 auto 28px;
    padding: 0 24px; /* keeps heading aligned with carousel padding */
}

.sermon-related__heading {
    margin: 0;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

.sermon-related__view-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    color: #757575;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s;
}

.sermon-related__view-all:hover,
.sermon-related__view-all:focus-visible {
    color: #1a1a1a;
}

.sermon-related__view-all svg {
    width: 14px;
    height: 14px;
}

/* ── Carousel viewport ────────────────────────────────────────────────────────── */

.sh-carousel {
    position: relative;
    overflow: hidden;
    max-width: 1280px;
    margin: 0 auto;
    /* Horizontal padding creates room for FAB buttons that sit at ±20px */
    padding: 0 44px;
}

.sh-carousel__track {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: grab;
}

.sh-carousel__track:active {
    cursor: grabbing;
}

/* ── Cards ────────────────────────────────────────────────────────────────────── */

.sh-carousel__item {
    flex: 0 0 300px;
    width: 300px;
}

/* Light variant of the shared sermon card inside the carousel */
.sh-carousel__item .sermon-card__thumb {
    background: #f4f5f7;
}

.sh-carousel__item .sermon-card__meta {
    background: transparent;
}

.sh-carousel__item .sermon-card__title {
    color: #1a1a1a;
}

.sh-carousel__item .sermon-card__speaker,
.sh-carousel__item .sermon-card__sub {
    color: #757575;
}

/* ── FAB navigation buttons ───────────────────────────────────────────────────── */

.sh-carousel__fab {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid #eaeaea;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    transition: opacity 0.2s, background 0.15s;
    padding: 0;
    line-height: 1;
}

.sh-carousel__fab svg {
    width: 20px;
    height: 20px;
    display: block;
}

.sh-carousel__fab--prev { left: -20px; }
.sh-carousel__fab--next { right: -20px; }

.sh-carousel__fab:hover  { background: #e0e0e0; }
.sh-carousel__fab:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.sh-carousel__fab:disabled { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .sh-carousel__track { transition: none; }
}

/* ── Mobile: smaller items ────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .sh-carousel { padding: 0 12px; }
    .sh-carousel__item { flex: 0 0 260px; width: 260px; }
    .sh-carousel__fab--prev { left: -8px; }
    .sh-carousel__fab--next { right: -8px; }
}

/* ── Screen reader utilities ─────────────────────────────────────────────────── */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Recent / shortcode grid ────────────────────────────────────────────────────
   Used by sermon_hub_render_recent() (the [sermon_hub_recent] shortcode, the front
   page, and the future block). Inherits the site-wide .sermon-grid columns (1/2/3);
   the NUMBER of cards shown at each breakpoint is controlled from the Front Page
   settings tab — render_recent fetches the largest count and emits scoped CSS that
   hides the surplus per breakpoint. Chrome (heading/button) uses inherit /
   currentColor so it aligns with whatever theme it sits in. */

.sh-recent {
    margin: 0 auto;
}

.sh-recent__header {
    text-align: center;
    margin-bottom: 2rem;
}

.sh-recent__title {
    margin: 0 0 0.5rem;
}

.sh-recent__subtitle {
    margin: 0;
    opacity: 0.8;
}

.sh-recent__actions {
    text-align: center;
    margin-top: 2rem;
}

.sh-recent__button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 1px solid currentColor;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    font: inherit;
    line-height: 1;
}

/* ── Discussion guide → sermon back-link ─────────────────────── */
.sermon-hub-guide-intro {
	margin: 0 0 1.5em; padding: 0.75em 1em; background: #f4f5f7;
	border-left: 3px solid #c3c4c7; border-radius: 4px; font-size: 0.95em;
}
.sermon-hub-guide-back { margin-top: 2em; }

/* Vertical rhythm for the guide body — the theme gives plain pages little spacing,
   so set it explicitly here (this stylesheet now loads on guide pages). */
.sermon-hub-guide-body h3 { margin: 1.6em 0 0.5em; line-height: 1.3; }
.sermon-hub-guide-body h3:first-child { margin-top: 0; }
.sermon-hub-guide-body p { margin: 0 0 1em; line-height: 1.7; }
.sermon-hub-guide-body ul,
.sermon-hub-guide-body ol { margin: 0 0 1.2em 1.4em; padding: 0; }
.sermon-hub-guide-body li { margin: 0 0 0.4em; line-height: 1.6; }
/* Make the links unmistakably links: accent colour + underline.
   (--sh-accent is near-black, so use the theme accent with a clear blue fallback.) */
.sermon-hub-guide-intro a,
.sermon-hub-guide-back a {
	color: var(--color-accent, #1d62d6);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
}
.sermon-hub-guide-intro a:hover,
.sermon-hub-guide-back a:hover {
	text-decoration: underline;
	opacity: 0.8;
}

/* ── Sermon embed block ──────────────────────────────────────── */
.sermon-embed { max-width: 800px; margin: 1.5em auto; }
.sermon-embed__media,
.sermon-embed__thumb { aspect-ratio: 16/9; border-radius: var(--sh-card-radius, 16px); overflow: hidden; }
.sermon-embed__thumb { background-size: cover; background-position: center; background-color: #e8e8e8; }
.sermon-embed__media iframe { width: 100%; height: 100%; border: 0; display: block; }
.sermon-embed__audio { width: 100%; margin-top: 0.75em; }
.sermon-embed__title { margin: 0.6em 0 0.4em; font-size: 1.25rem; line-height: 1.3; }
.sermon-embed__title a { text-decoration: none; color: inherit; }
.sermon-embed__title a:hover { text-decoration: underline; }
.sermon-embed__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 0.5em; }

/* ── Short-height (13" laptop) fixes ──────────────────────────────────────────
   The featured archive hero and the single-sermon video are 16:9 boxes sized by
   WIDTH (capped ~1152px), so on a short-but-wide laptop screen they fill the
   viewport and push the heading / grid / title below the fold. On short screens
   only, cap their width by viewport HEIGHT so the whole 16:9 box shrinks
   proportionally — nothing is cropped, and tall monitors are left untouched.
   100vh wide at 16:9 => ~56vh tall, leaving ~44vh for the content beneath. */
@media (min-width: 768px) and (max-height: 850px) {
    .sermon-hero--featured {
        width: min(calc(100% - 48px), 900px, 100vh);
    }
    .sermon-hero-section:has(.sermon-hero--featured) {
        padding: 24px 0;
    }

    .sermon-single {
        padding-top: 24px;
    }
    .sermon-single__video-region .sh-video-wrap {
        max-width: 100vh;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── Single sermon: transcript (crawlable, collapsed by default) ─────────────── */
.sermon-single__transcript {
    max-width: 800px;
    margin: 32px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 20px;
}
.sermon-single__transcript-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #e6e6e6;
    list-style: none;
    user-select: none;
}
.sermon-single__transcript-toggle::-webkit-details-marker { display: none; }
.sermon-single__transcript-toggle::before {
    content: "\25B8"; /* ▸ */
    font-size: 0.8em;
    transition: transform 0.15s ease;
}
.sermon-single__transcript[open] .sermon-single__transcript-toggle::before {
    transform: rotate(90deg);
}
.sermon-single__transcript-body {
    margin-top: 16px;
    max-height: 60vh;
    overflow-y: auto;
    color: #c9c9c9;
    font-size: 0.95rem;
    line-height: 1.7;
}
.sermon-single__transcript-body p { margin: 0 0 1em; }