/* Build timestamp: 2026-05-12-scripture-linker-v1 */
/**
 * Pulpit Studio — Public Stylesheet (Phase 4a)
 *
 * Single sermon page styles. Phase 4b will add archive/taxonomy styles.
 *
 * Brand colors are injected as CSS custom properties via PHP inline style
 * by Pulpit_Studio::enqueue_frontend_assets():
 *   --ps-brand-primary, --ps-brand-secondary, --ps-brand-accent
 *
 * All other colors are theme constants tied to the light page treatment.
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600;1,700;1,800;1,900&display=swap');


/* ═════════════════════════════════════════════════════════════════════════
   ROOT — design tokens
   ═════════════════════════════════════════════════════════════════════════ */

:root {
    /* Brand colors get overridden via wp_add_inline_style; defaults shown */
    --ps-brand-primary:    #ED8B00;
    --ps-brand-secondary:  #004F71;
    --ps-brand-accent:     #2E3D48;

    /* Derived shades */
    --ps-brand-primary-light:  color-mix(in srgb, var(--ps-brand-primary) 75%, white);
    --ps-brand-primary-dark:   color-mix(in srgb, var(--ps-brand-primary) 80%, black);
    --ps-brand-primary-soft:   color-mix(in srgb, var(--ps-brand-primary) 8%, transparent);

    /* Light theme palette (the page sits on light background) */
    --ps-page-bg:        #F8F9FA;
    --ps-text:           #0b1020;
    --ps-text-dim:       rgba(11, 16, 32, 0.7);
    --ps-text-muted:     rgba(11, 16, 32, 0.45);
    --ps-border-soft:    rgba(11, 16, 32, 0.1);
    --ps-glass:          rgba(11, 16, 32, 0.04);
    --ps-card-bg:        #ffffff;

    /* Dark cinematic block (used for video hero, share modal) */
    --ps-dark:           #0b1020;
    --ps-dark-2:         #101730;
    --ps-dark-3:         #162040;
    --ps-text-on-dark:   #e8ecf5;
    --ps-text-dim-dark:  rgba(232, 236, 245, 0.65);

    /* Geometry */
    --ps-radius-sm:      8px;
    --ps-radius:         14px;
    --ps-radius-lg:      22px;

    /* Shadows */
    --ps-shadow:         0 20px 60px rgba(0, 0, 0, 0.18);
    --ps-shadow-card:    0 4px 16px rgba(11, 16, 32, 0.06);
    --ps-shadow-glow:    0 0 40px rgba(237, 139, 0, 0.15);

    /* Typography */
    --ps-font-body:      'Montserrat', system-ui, -apple-system, sans-serif;
    --ps-font-accent:    'Playfair Display', Georgia, serif;
}


/* ═════════════════════════════════════════════════════════════════════════
   SECTION WRAPPER + atmospheric background
   ═════════════════════════════════════════════════════════════════════════ */

.ps-section {
    position: relative;
    background: var(--ps-page-bg);
    color: var(--ps-text);
    padding: 48px 0 72px;
    overflow: hidden;
    font-family: var(--ps-font-body);
}

.ps-section-inner {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .ps-section { padding: 32px 0 48px; }
    .ps-section-inner { padding: 0 16px; }
}

.ps-section-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.ps-grain {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.ps-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.08;
    pointer-events: none;
}

.ps-orb-1 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--ps-brand-primary) 0%, transparent 70%);
    top: 10%; right: -150px;
}

.ps-orb-2 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, var(--ps-brand-secondary) 0%, transparent 70%);
    bottom: -100px; left: -100px;
}


/* ═════════════════════════════════════════════════════════════════════════
   QUICK NAV (pill bar)
   ═════════════════════════════════════════════════════════════════════════ */

.ps-quick-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 auto 44px;
    padding: 6px;
    background: var(--ps-glass);
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
    max-width: fit-content;
    backdrop-filter: blur(10px);
}

.ps-quick-nav-link {
    padding: 9px 20px;
    font-family: var(--ps-font-body);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ps-text);
    text-decoration: none !important;
    border-radius: 999px;
    transition: all 0.25s ease;
}

.ps-quick-nav-link:hover {
    color: var(--ps-text);
    background: var(--ps-brand-primary);
}

.ps-quick-nav-link.is-active {
    color: var(--ps-text);
    background: var(--ps-brand-primary);
    font-weight: 600;
}

@media (max-width: 768px) {
    .ps-quick-nav { display: none !important; }
}


/* ═════════════════════════════════════════════════════════════════════════
   MOBILE NAV (Browse Sermons modal)
   ═════════════════════════════════════════════════════════════════════════ */

.ps-mobile-nav-trigger {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 32px;
    padding: 14px 22px;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
    color: var(--ps-text);
    font-family: var(--ps-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--ps-shadow-card);
    transition: all 0.2s;
}

.ps-mobile-nav-trigger:hover,
.ps-mobile-nav-trigger.is-open {
    border-color: var(--ps-brand-primary);
    color: var(--ps-brand-primary);
}

.ps-mobile-nav-trigger svg {
    transition: transform 0.3s;
}

.ps-mobile-nav-trigger.is-open svg {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    .ps-mobile-nav-trigger { display: flex; }
}

.ps-mobile-nav-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s, visibility 0.25s;
}

.ps-mobile-nav-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.ps-mobile-nav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 16, 32, 0.65);
    backdrop-filter: blur(4px);
}

.ps-mobile-nav-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ps-card-bg);
    border-radius: 24px 24px 0 0;
    padding: 28px 22px 36px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.25);
}

.ps-mobile-nav-modal.is-open .ps-mobile-nav-panel {
    transform: translateY(0);
}

.ps-mobile-nav-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--ps-text-dim);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.ps-mobile-nav-close:hover {
    background: var(--ps-glass);
    color: var(--ps-text);
}

.ps-mobile-nav-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ps-brand-primary);
    margin-bottom: 18px;
    text-align: center;
}

.ps-mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ps-mobile-nav-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--ps-glass);
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--ps-text);
    text-decoration: none !important;
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.2s;
}

.ps-mobile-nav-item:hover,
.ps-mobile-nav-item.is-active {
    background: var(--ps-brand-primary);
    color: var(--ps-text);
    border-color: var(--ps-brand-primary);
}

body.ps-mobile-nav-locked {
    overflow: hidden;
}


/* ═════════════════════════════════════════════════════════════════════════
   CINEMATIC TITLE BLOCK (series tag + split title + meta line)
   ═════════════════════════════════════════════════════════════════════════ */

.ps-latest-heading-block {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.ps-series-tag-sm {
    display: inline-block;
    font-family: var(--ps-font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ps-brand-primary);
}

.ps-series-tag-link {
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.ps-series-tag-link:hover {
    color: var(--ps-brand-primary-light);
}

.ps-latest-title-xl,
h1.ps-latest-title-xl,
h2.ps-latest-title-xl {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-style: normal !important;
    font-size: clamp(2rem, 4.5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
    text-transform: none !important;
    color: var(--ps-text) !important;
}

@media (max-width: 768px) {
    .ps-latest-title-xl { font-size: clamp(1.6rem, 7vw, 2.4rem); }
}

.ps-split-featured-title {
    display: inline-flex !important;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.12em;
    color: var(--ps-text) !important;
    text-decoration: none !important;
}

.ps-split-featured-title .ps-title-main {
    color: var(--ps-text) !important;
}

.ps-split-featured-title .ps-title-sep {
    color: var(--ps-text) !important;
    font-style: normal !important;
}

.ps-split-featured-title .ps-title-week {
    color: var(--ps-brand-primary) !important;
    font-style: italic !important;
    font-family: var(--ps-font-accent) !important;
    font-weight: 800 !important;
}

.ps-latest-meta-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 20px;
    font-family: var(--ps-font-body);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ps-text-dim);
    padding: 14px 0;
    border-top: 1px solid var(--ps-border-soft);
    border-bottom: 1px solid var(--ps-border-soft);
    width: 100%;
    max-width: 720px;
}

.ps-latest-meta-line span + span::before {
    content: '\2022';
    margin-right: 20px;
    color: var(--ps-brand-primary);
}


/* ═════════════════════════════════════════════════════════════════════════
   VIDEO HERO (cinematic dark block)
   ═════════════════════════════════════════════════════════════════════════ */

.ps-latest-video-hero {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 32px;
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow);
    overflow: hidden;
}

.ps-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--ps-radius);
    background: #000;
}

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

.ps-video-placeholder {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    background: linear-gradient(135deg, var(--ps-dark-2), var(--ps-dark-3));
    border-radius: var(--ps-radius);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ps-video-placeholder svg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 72px; height: 72px;
    color: rgba(237, 139, 0, 0.4);
}

@media (max-width: 600px) {
    .ps-latest-video-hero { margin-left: -8px; margin-right: -8px; }
}

/* AUDIO MODE — when toggled, hide the iframe and show an audio-only treatment */
.ps-video-wrapper.ps-audio-mode {
    padding-bottom: 0;
    height: 200px;
    background: linear-gradient(135deg, var(--ps-dark-2), var(--ps-dark-3));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    color: var(--ps-text-on-dark);
}

.ps-video-wrapper.ps-audio-mode iframe {
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
}

.ps-audio-mode::before {
    content: '🎧 Audio Only';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    z-index: 2;
}


/* ═════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═════════════════════════════════════════════════════════════════════════ */

.ps-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 999px;
    font-family: var(--ps-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.ps-btn-primary {
    background: var(--ps-brand-primary);
    color: var(--ps-text) !important;
    border-color: var(--ps-brand-primary);
}

.ps-btn-primary:hover {
    background: var(--ps-brand-primary-light);
    border-color: var(--ps-brand-primary-light);
    transform: translateY(-2px);
}

.ps-btn-ghost {
    background: transparent;
    color: var(--ps-text) !important;
    border-color: var(--ps-border-soft);
}

.ps-btn-ghost:hover {
    border-color: var(--ps-brand-primary);
    color: var(--ps-brand-primary) !important;
    background: var(--ps-brand-primary-soft);
}

.ps-btn-ghost.ps-audio-mode-toggle[aria-pressed="true"] {
    background: var(--ps-brand-primary);
    color: var(--ps-text) !important;
    border-color: var(--ps-brand-primary);
}


/* ═════════════════════════════════════════════════════════════════════════
   ACTION BUTTONS ROW (below video)
   ═════════════════════════════════════════════════════════════════════════ */

.ps-single-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 28px auto 32px;
    /* No max-width — buttons stay centered via flex justify-content, while
       the row itself fills the full content width to match the video and
       Key Points sections above/below. Matches the original Grove design. */
}

.ps-single-actions .ps-btn {
    font-size: 0.78rem;
    padding: 11px 22px;
}


/* ═════════════════════════════════════════════════════════════════════════
   DIVIDER (used by content sections)
   ═════════════════════════════════════════════════════════════════════════ */

.ps-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
}

.ps-divider::before,
.ps-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ps-border-soft), transparent);
}

.ps-divider-label {
    font-family: var(--ps-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ps-brand-primary);
    white-space: nowrap;
}


/* ═════════════════════════════════════════════════════════════════════════
   CHAPTER MARKERS (NEW in Phase 4a)
   ═════════════════════════════════════════════════════════════════════════ */

.ps-chapter-markers {
    max-width: 920px;
    margin: 28px auto 32px;
}

.ps-chapter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
}

.ps-chapter-item {
    margin: 0;
}

.ps-chapter-button {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 18px;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    color: var(--ps-text);
    font-family: var(--ps-font-body);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
}

.ps-chapter-button:hover {
    border-color: var(--ps-brand-primary);
    background: var(--ps-brand-primary-soft);
    transform: translateX(2px);
}

.ps-chapter-time {
    flex: 0 0 auto;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ps-brand-primary);
    background: var(--ps-brand-primary-soft);
    padding: 4px 10px;
    border-radius: 6px;
    min-width: 56px;
    text-align: center;
}

.ps-chapter-label {
    flex: 1;
    font-weight: 500;
}

.ps-chapter-arrow {
    flex: 0 0 auto;
    color: var(--ps-text-muted);
    transition: transform 0.2s, color 0.2s;
    font-size: 1.1rem;
}

.ps-chapter-button:hover .ps-chapter-arrow {
    color: var(--ps-brand-primary);
    transform: translateX(2px);
}


/* ═════════════════════════════════════════════════════════════════════════
   CONTENT SECTIONS (Key Points, Transcript, Discussion Questions)
   ═════════════════════════════════════════════════════════════════════════ */

.ps-single-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 920px;
    margin: 0 auto;
}

/* — KEY POINTS — */

.ps-key-points-section {
    margin-bottom: 36px;
}

.ps-key-points-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ps-key-point {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 24px;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-card);
    transition: transform 0.2s, box-shadow 0.2s;
}

.ps-key-point:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(11, 16, 32, 0.08);
}

.ps-key-point-number {
    flex: 0 0 auto;
    font-family: var(--ps-font-accent);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ps-brand-primary);
    font-style: italic;
    min-width: 40px;
}

.ps-key-point-text {
    flex: 1;
    font-family: var(--ps-font-body);
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--ps-text);
    padding-top: 4px;
}

/* — TRANSCRIPT (collapsible) — */

.ps-transcript-section {
    margin-bottom: 36px;
}

.ps-transcript-details {
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-card);
    overflow: hidden;
}

.ps-transcript-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 26px;
    cursor: pointer;
    list-style: none;
    color: var(--ps-text);
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    transition: background 0.15s;
}

.ps-transcript-toggle::-webkit-details-marker { display: none; }

.ps-transcript-toggle:hover {
    background: var(--ps-glass);
    color: var(--ps-brand-primary);
}

.ps-transcript-toggle-icon {
    transition: transform 0.3s ease;
    color: var(--ps-brand-primary);
}

.ps-transcript-details[open] .ps-transcript-toggle-icon {
    transform: rotate(180deg);
}

.ps-transcript-details[open] .ps-transcript-toggle {
    border-bottom: 1px solid var(--ps-border-soft);
}

.ps-transcript-content {
    padding: 28px 32px;
    font-family: var(--ps-font-body);
    font-size: 0.98rem;
    line-height: 1.75;
    color: var(--ps-text-dim);
}

.ps-transcript-content p {
    margin: 0 0 1.2em;
}

.ps-transcript-content p:last-child {
    margin-bottom: 0;
}

/* — DISCUSSION QUESTIONS — */

.ps-discussion-section {
    margin-bottom: 36px;
    padding: 32px 36px;
    background: linear-gradient(135deg, var(--ps-brand-primary-soft), transparent 70%);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
}

.ps-discussion-intro {
    font-family: var(--ps-font-accent);
    font-style: italic;
    color: var(--ps-text-dim);
    margin: 0 0 16px;
    font-size: 1.05rem;
}

.ps-discussion-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: ps-q;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ps-discussion-item {
    counter-increment: ps-q;
    position: relative;
    padding: 14px 18px 14px 56px;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius-sm);
    font-family: var(--ps-font-body);
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--ps-text);
}

.ps-discussion-item::before {
    content: counter(ps-q, decimal-leading-zero);
    position: absolute;
    left: 16px;
    top: 14px;
    font-family: var(--ps-font-accent);
    font-style: italic;
    font-weight: 700;
    color: var(--ps-brand-primary);
    font-size: 1.1rem;
}

@media (max-width: 600px) {
    .ps-discussion-section { padding: 22px 18px; }
    .ps-key-point { padding: 16px 18px; gap: 14px; }
}


/* ═════════════════════════════════════════════════════════════════════════
   NEXT STEP CTA BAR
   ═════════════════════════════════════════════════════════════════════════ */

.ps-next-step-wrap {
    margin: 48px auto 0;
    /* No max-width — let the next-step bar fill the full content width
       to match the rest of the page (matches original Grove design). */
}

.ps-next-step-label {
    text-align: center;
    margin-bottom: 18px;
}

.ps-next-step-label span {
    display: inline-block;
    font-family: var(--ps-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ps-brand-primary);
    padding: 6px 16px;
    background: var(--ps-brand-primary-soft);
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
}

.ps-next-step-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.ps-next-step-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    color: var(--ps-text);
    text-decoration: none !important;
    box-shadow: var(--ps-shadow-card);
    transition: all 0.25s;
}

.ps-next-step-item:hover {
    border-color: var(--ps-brand-primary);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(237, 139, 0, 0.15);
}

.ps-next-step-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ps-brand-primary-soft);
    color: var(--ps-brand-primary);
    border-radius: 12px;
}

.ps-next-step-icon svg {
    width: 22px;
    height: 22px;
}

.ps-next-step-copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ps-next-step-copy strong {
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ps-text);
}

.ps-next-step-copy small {
    font-size: 0.78rem;
    color: var(--ps-text-dim);
}

.ps-next-step-arrow {
    flex: 0 0 auto;
    color: var(--ps-brand-primary);
    font-size: 1.2rem;
    transition: transform 0.2s;
}

.ps-next-step-item:hover .ps-next-step-arrow {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .ps-next-step-bar { grid-template-columns: 1fr; }
}


/* ═════════════════════════════════════════════════════════════════════════
   CONTINUE LISTENING (related sermon rail)
   ═════════════════════════════════════════════════════════════════════════ */

.ps-continue-listening {
    margin-top: 64px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.ps-listening-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 26px;
}

.ps-listening-header h2 {
    font-family: var(--ps-font-accent);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--ps-text);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.ps-listening-header p {
    color: var(--ps-text-dim);
    margin: 0;
    font-size: 0.95rem;
}

.ps-listening-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ps-listening-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    color: var(--ps-text-dim);
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.ps-listening-arrow:hover {
    background: var(--ps-brand-primary);
    color: var(--ps-text);
    border-color: var(--ps-brand-primary);
}

.ps-drag-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ps-text-muted);
}

.ps-listening-rail-wrap {
    overflow: hidden;
    margin: 0 -8px;
}

.ps-listening-rail {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ps-listening-rail::-webkit-scrollbar { display: none; }

.ps-listening-rail.is-dragging { scroll-behavior: auto; cursor: grabbing; }

.ps-listening-card {
    flex: 0 0 220px !important;
    width: 220px !important;
    max-width: 220px !important;
    border-radius: var(--ps-radius);
    overflow: hidden;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    box-shadow: var(--ps-shadow-card);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

@media (max-width: 640px) {
    .ps-listening-card {
        flex: 0 0 190px !important;
        width: 190px !important;
        max-width: 190px !important;
    }
}

.ps-listening-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(11, 16, 32, 0.1);
    border-color: var(--ps-brand-primary);
}

.ps-listening-card-link {
    display: block;
    color: inherit;
    text-decoration: none !important;
}

.ps-listening-art {
    position: relative;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: var(--ps-dark-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ps-listening-initial {
    font-family: var(--ps-font-accent);
    font-size: 3rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.15);
    z-index: 1;
}

.ps-listening-art-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.45));
    z-index: 2;
}

.ps-listening-badges {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 5px;
    z-index: 3;
}

.ps-listening-body {
    padding: 14px 16px 16px;
}

.ps-listening-series {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ps-brand-primary);
    margin-bottom: 6px;
}

.ps-listening-title {
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ps-text);
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ps-listening-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 0.78rem;
    color: var(--ps-text-dim);
    margin-bottom: 16px;
}

.ps-listening-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--ps-border-soft);
    font-size: 0.78rem;
    color: var(--ps-text-muted);
}

.ps-listening-footer strong {
    color: var(--ps-brand-primary);
    font-weight: 700;
}


/* ═════════════════════════════════════════════════════════════════════════
   BADGES
   ═════════════════════════════════════════════════════════════════════════ */

.ps-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--ps-font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.ps-badge-video {
    background: var(--ps-brand-primary);
    color: var(--ps-text);
}

.ps-badge-audio {
    background: var(--ps-brand-secondary);
    color: #fff;
}


/* ═════════════════════════════════════════════════════════════════════════
   SHARE MODAL
   ═════════════════════════════════════════════════════════════════════════ */

.ps-share-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s, visibility 0.25s;
}

.ps-share-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.ps-share-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 16, 32, 0.7);
    backdrop-filter: blur(6px);
}

.ps-share-panel {
    position: relative;
    z-index: 1;
    width: calc(100% - 32px);
    max-width: 480px;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%) scale(0.95);
    background: var(--ps-card-bg);
    border-radius: var(--ps-radius-lg);
    padding: 36px 32px 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps-share-modal.is-open .ps-share-panel {
    transform: translateY(-50%) scale(1);
}

.ps-share-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--ps-text-dim);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.ps-share-close:hover {
    background: var(--ps-glass);
    color: var(--ps-text);
}

.ps-share-modal-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ps-brand-primary);
    text-align: center;
    margin-bottom: 8px;
}

.ps-share-modal-title {
    font-family: var(--ps-font-accent);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ps-text);
    text-align: center;
    margin: 0 0 24px;
    line-height: 1.3;
}

.ps-share-modal-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.ps-share-modal-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 10px;
    background: var(--ps-glass);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    color: var(--ps-text);
    text-decoration: none !important;
    cursor: pointer;
    font-family: var(--ps-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    transition: all 0.2s;
}

.ps-share-modal-btn:hover {
    background: var(--ps-brand-primary);
    color: var(--ps-text);
    border-color: var(--ps-brand-primary);
    transform: translateY(-2px);
}

.ps-share-modal-btn.copied {
    background: #10b981;
    color: #fff;
    border-color: #10b981;
}


/* ═════════════════════════════════════════════════════════════════════════
   FADE-IN ANIMATIONS (scroll-triggered via IntersectionObserver)
   ═════════════════════════════════════════════════════════════════════════ */

.ps-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.ps-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .ps-fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   SECTION-SPECIFIC TWEAKS
   ═════════════════════════════════════════════════════════════════════════ */

.ps-single-sermon {
    padding: 40px 0 80px;
}

@media (max-width: 600px) {
    .ps-single-actions { gap: 8px; }
    .ps-single-actions .ps-btn { padding: 9px 16px; font-size: 0.72rem; }
}


/* ═════════════════════════════════════════════════════════════════════════
   PHASE 4b-1 — ARCHIVE PAGE STYLES
   ═════════════════════════════════════════════════════════════════════════ */


/* ─── HERO HEADING (top of archive) ──────────────────────────────────── */

.ps-hero {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 36px;
    padding: 8px 0;
}

.ps-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ps-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ps-brand-primary);
    padding: 7px 16px;
    background: var(--ps-brand-primary-soft);
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
    margin-bottom: 20px;
}

.ps-pulse {
    display: inline-block;
    width: 7px; height: 7px;
    background: var(--ps-brand-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(237, 139, 0, 0.7);
    animation: ps-pulse 2.2s ease-in-out infinite;
}

@keyframes ps-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(237, 139, 0, 0.6); transform: scale(1); }
    50%      { box-shadow: 0 0 0 8px rgba(237, 139, 0, 0); transform: scale(1.1); }
}

.ps-hero-title {
    font-family: var(--ps-font-accent);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--ps-text);
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}

.ps-hero-title em {
    color: var(--ps-brand-primary);
    font-style: italic;
    font-weight: 800;
}

.ps-hero-subtitle {
    font-family: var(--ps-font-body);
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--ps-text-dim);
    margin: 0;
}


/* ─── FEATURED SERMON BLOCK (cinematic hero with CORNER/STONE lockup) ── */

.ps-featured-divider {
    margin: 32px 0 24px;
}

.ps-featured-sermon {
    margin-bottom: 56px;
}

.ps-featured-sermon .ps-latest-heading-block {
    margin-bottom: 28px;
}

.ps-archive-featured-heading .ps-latest-title-xl {
    /* Slightly smaller on archive than on single page */
    font-size: clamp(1.8rem, 4vw, 3rem);
}

.ps-latest-excerpt-center {
    font-family: var(--ps-font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ps-text-dim);
    margin: 6px 0 0;
    max-width: 680px;
}

/* The big cinematic poster block */
.ps-cinematic-hero {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    min-height: clamp(420px, 42vw, 560px);
    background-color: #071120;
    background-size: cover;
    background-position: center;
    border-radius: var(--ps-radius-lg);
    overflow: hidden;
    box-shadow:
        0 34px 90px rgba(11, 16, 32, 0.2),
        0 10px 26px rgba(11, 16, 32, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.ps-cinematic-hero.no-art {
    background: linear-gradient(135deg, var(--ps-dark-2) 0%, var(--ps-dark-3) 100%);
}

.ps-cinematic-full-link {
    position: absolute;
    inset: 0;
    z-index: 4;
    text-indent: -9999px;
    overflow: hidden;
}

.ps-cinematic-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(11, 16, 32, 0.2) 0%,
        rgba(11, 16, 32, 0.45) 45%,
        rgba(11, 16, 32, 0.85) 100%
    );
    pointer-events: none;
}

.ps-cinematic-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(
        ellipse at center,
        transparent 35%,
        rgba(11, 16, 32, 0.4) 100%
    );
    pointer-events: none;
}

.ps-cinematic-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 36px 44px 40px;
    color: #fff;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.ps-cinematic-now-playing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(237, 139, 0, 0.18);
    border: 1px solid rgba(237, 139, 0, 0.5);
    border-radius: 999px;
    color: var(--ps-brand-primary);
    font-family: var(--ps-font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.ps-cinematic-lockup-title {
    font-family: var(--ps-font-accent);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.015em;
    margin: 4px 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ps-cinematic-lockup-title span {
    display: block;
    font-size: clamp(2.6rem, 6.5vw, 5.4rem);
    text-transform: uppercase;
}

.ps-cinematic-lockup-title span:first-child {
    color: #fff;
}

.ps-cinematic-lockup-title span:last-child {
    color: var(--ps-brand-primary);
    font-style: italic;
    font-family: var(--ps-font-accent);
}

.ps-cinematic-lockup-title span:only-child {
    color: #fff;
}

.ps-cinematic-tagline {
    font-family: var(--ps-font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    max-width: 560px;
    margin: 4px 0 8px;
}

.ps-cinematic-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
    position: relative;
    z-index: 5;
}

.ps-cinematic-primary,
.ps-cinematic-secondary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    border-radius: 999px;
    font-family: var(--ps-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none !important;
    border: 2px solid transparent;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.ps-cinematic-primary {
    background: var(--ps-brand-primary);
    color: var(--ps-text) !important;
    border-color: var(--ps-brand-primary);
    box-shadow: 0 8px 24px rgba(237, 139, 0, 0.35);
}

.ps-cinematic-primary:hover {
    background: var(--ps-brand-primary-light);
    border-color: var(--ps-brand-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(237, 139, 0, 0.45);
}

.ps-cinematic-arrow {
    transition: transform 0.2s;
}

.ps-cinematic-primary:hover .ps-cinematic-arrow {
    transform: translateX(3px);
}

.ps-cinematic-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
}

.ps-cinematic-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}

.ps-cinematic-badges {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 4;
    display: flex;
    gap: 6px;
}

@media (max-width: 768px) {
    .ps-cinematic-hero { min-height: 380px; border-radius: var(--ps-radius); }
    .ps-cinematic-content { padding: 22px 24px 26px; }
    .ps-cinematic-lockup-title span { font-size: clamp(2.2rem, 9vw, 3rem); }
    .ps-cinematic-tagline { font-size: 0.88rem; }
    .ps-cinematic-actions { gap: 8px; }
    .ps-cinematic-primary, .ps-cinematic-secondary { padding: 10px 18px; font-size: 0.72rem; }
}

@media (max-width: 480px) {
    .ps-cinematic-actions { flex-direction: column; align-items: stretch; }
    .ps-cinematic-primary, .ps-cinematic-secondary { justify-content: center; }
}


/* ─── PLAY ORBIT (rotating "VIEW MESSAGE" circle) ────────────────────── */

.ps-play-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    z-index: 3;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.ps-play-orbit:hover {
    transform: translate(-50%, -50%) scale(1.06);
}

.ps-play-orbit::before {
    content: '';
    position: absolute;
    inset: 12px;
    background: rgba(237, 139, 0, 0.15);
    border: 1.5px solid rgba(237, 139, 0, 0.5);
    border-radius: 50%;
    backdrop-filter: blur(8px);
    transition: background 0.25s, border-color 0.25s;
}

.ps-play-orbit:hover::before {
    background: rgba(237, 139, 0, 0.25);
    border-color: var(--ps-brand-primary);
}

.ps-play-orbit-text {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: ps-orbit-spin 14s linear infinite;
}

.ps-play-orbit-text text {
    fill: #fff;
    font-family: var(--ps-font-body);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ps-play-orbit-icon {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    background: var(--ps-brand-primary);
    color: var(--ps-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(237, 139, 0, 0.4);
}

.ps-play-orbit-icon svg {
    width: 22px;
    height: 22px;
    margin-left: 2px; /* optical centering for the play triangle */
}

@keyframes ps-orbit-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .ps-play-orbit { width: 120px; height: 120px; }
    .ps-play-orbit-text text { font-size: 7px; letter-spacing: 0.16em; }
    .ps-play-orbit-icon { width: 48px; height: 48px; }
    .ps-play-orbit-icon svg { width: 20px; height: 20px; }
}

@media (max-width: 480px) {
    .ps-play-orbit { width: 80px; height: 80px; }
    .ps-play-orbit::before { inset: 0; }
    .ps-play-orbit-text { display: none !important; }
    .ps-play-orbit-icon { width: 60px; height: 60px; }
    .ps-play-orbit-icon svg { width: 28px; height: 28px; }
}


/* ─── FILTER BAR (Speaker / Series / Book / Year + Reset) ────────────── */

.ps-filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    padding: 18px 20px;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    box-shadow: var(--ps-shadow-card);
    margin-bottom: 32px;
}

.ps-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ps-filter-label {
    font-family: var(--ps-font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ps-text-muted);
}

.ps-filter-select {
    width: 100%;
    padding: 11px 14px;
    background: var(--ps-glass);
    border: 1px solid var(--ps-border-soft);
    border-radius: 10px;
    color: var(--ps-text);
    font-family: var(--ps-font-body);
    font-size: 0.88rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    transition: border-color 0.2s, background-color 0.2s;
}

.ps-filter-select:hover,
.ps-filter-select:focus {
    border-color: var(--ps-brand-primary);
    outline: none;
    background-color: var(--ps-card-bg);
}

.ps-filter-select option,
.ps-filter-select optgroup {
    background: var(--ps-card-bg);
    color: var(--ps-text);
}

.ps-filter-select optgroup {
    font-weight: 700;
    font-style: normal;
    color: var(--ps-brand-primary);
}

.ps-filter-reset {
    padding: 11px 22px;
    background: transparent;
    border: 1px solid var(--ps-border-soft);
    border-radius: 10px;
    color: var(--ps-text-dim);
    font-family: var(--ps-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.ps-filter-reset:hover {
    border-color: var(--ps-brand-primary);
    color: var(--ps-brand-primary);
    background: var(--ps-brand-primary-soft);
}

@media (max-width: 768px) {
    .ps-filter-bar { grid-template-columns: 1fr 1fr; }
    .ps-filter-reset { grid-column: span 2; }
}

@media (max-width: 480px) {
    .ps-filter-bar { grid-template-columns: 1fr; padding: 14px; }
    .ps-filter-reset { grid-column: auto; }
}


/* ─── SERMON GRID + CARDS ────────────────────────────────────────────── */

.ps-grid {
    display: grid;
    gap: 22px;
    margin-bottom: 40px;
}

.ps-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ps-cols-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 968px) {
    .ps-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .ps-cols-3, .ps-cols-2 { grid-template-columns: 1fr; }
}

.ps-grid.ps-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s;
}

.ps-card {
    position: relative;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    overflow: hidden;
    box-shadow: var(--ps-shadow-card);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.ps-card:hover {
    transform: translateY(-4px);
    border-color: var(--ps-brand-primary);
    box-shadow: 0 14px 32px rgba(11, 16, 32, 0.1);
}

.ps-card-link {
    display: block;
    color: inherit;
    text-decoration: none !important;
}

.ps-card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-color: var(--ps-dark-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ps-card-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.55));
    z-index: 2;
}

.ps-card-initial {
    font-family: var(--ps-font-accent);
    font-size: 4.5rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.18);
    z-index: 1;
}

.ps-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    width: 56px;
    height: 56px;
    background: var(--ps-brand-primary);
    color: var(--ps-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 8px 22px rgba(237, 139, 0, 0.4);
}

.ps-card-play svg { margin-left: 2px; }

.ps-card:hover .ps-card-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.ps-card-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 4;
    display: flex;
    gap: 6px;
}

.ps-card-body {
    padding: 18px 20px 20px;
}

.ps-card-series {
    font-family: var(--ps-font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ps-brand-primary);
    margin-bottom: 8px;
}

.ps-card-title {
    font-family: var(--ps-font-body);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ps-text);
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ps-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 0.78rem;
    color: var(--ps-text-dim);
    margin-bottom: 14px;
    min-height: 1.5em;
}

.ps-card-meta-item.ps-meta-scripture {
    color: var(--ps-brand-primary);
    font-weight: 600;
}

.ps-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--ps-border-soft);
    font-size: 0.78rem;
    color: var(--ps-text-muted);
}

.ps-card-watch {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ps-brand-primary);
    font-weight: 700;
    transition: gap 0.2s;
}

.ps-card:hover .ps-card-watch {
    gap: 9px;
}


/* ─── LOAD MORE BUTTON ───────────────────────────────────────────────── */

.ps-load-more-wrap {
    display: flex;
    justify-content: center;
    margin: 32px 0;
}

.ps-load-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
    color: var(--ps-text);
    font-family: var(--ps-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--ps-shadow-card);
    transition: all 0.25s;
}

.ps-load-more:hover {
    border-color: var(--ps-brand-primary);
    color: var(--ps-brand-primary);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(11, 16, 32, 0.1);
}

.ps-load-more.is-loading {
    pointer-events: none;
    opacity: 0.7;
}

.ps-load-more-icon {
    transition: transform 0.2s;
}

.ps-load-more:hover .ps-load-more-icon {
    transform: translateY(2px);
}


/* ─── EMPTY STATE ────────────────────────────────────────────────────── */

.ps-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--ps-text-dim);
    font-family: var(--ps-font-body);
    font-size: 1rem;
    background: var(--ps-glass);
    border: 1px dashed var(--ps-border-soft);
    border-radius: var(--ps-radius);
}


/* ═════════════════════════════════════════════════════════════════════════
   THEME COMPATIBILITY — auto full-width no-sidebar on sermon pages
   ═════════════════════════════════════════════════════════════════════════
   These rules are scoped to body.pulpit-sermon-page (added by
   PS_Theme_Compat) so they ONLY affect sermon-related views. They null
   out common theme container constraints and hide sidebar widget areas.
   The plugin's own .ps-section-inner enforces a 1240px max-width with
   centering, so removing theme containers doesn't make content too wide.
   ═════════════════════════════════════════════════════════════════════════ */

/* Remove theme container max-widths and padding so .ps-section can render edge-to-edge */
body.pulpit-sermon-page .entry-content,
body.pulpit-sermon-page .entry-header,
body.pulpit-sermon-page .post-content,
body.pulpit-sermon-page .site-content,
body.pulpit-sermon-page .content-area,
body.pulpit-sermon-page .ast-container,
body.pulpit-sermon-page .ast-container-fluid,
body.pulpit-sermon-page #primary,
body.pulpit-sermon-page #content,
body.pulpit-sermon-page main.site-main,
body.pulpit-sermon-page .inside-article,
body.pulpit-sermon-page .inside-content,
body.pulpit-sermon-page .ct-container,
body.pulpit-sermon-page .entry-content-wrap,
body.pulpit-sermon-page .ast-no-sidebar .entry-content,
body.pulpit-sermon-page .single-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Hide sidebar widget areas */
body.pulpit-sermon-page #secondary,
body.pulpit-sermon-page .widget-area,
body.pulpit-sermon-page .sidebar,
body.pulpit-sermon-page #left-sidebar,
body.pulpit-sermon-page .ast-sidebar,
body.pulpit-sermon-page .right-sidebar,
body.pulpit-sermon-page .left-sidebar {
    display: none !important;
}

/* Hide WP/theme post titles, breadcrumbs, and meta — our template renders its own */
body.pulpit-sermon-page .entry-title,
body.pulpit-sermon-page .ast-archive-title,
body.pulpit-sermon-page .archive-title,
body.pulpit-sermon-page .page-title,
body.pulpit-sermon-page .entry-meta,
body.pulpit-sermon-page .post-meta,
body.pulpit-sermon-page .ast-breadcrumbs-wrapper,
body.pulpit-sermon-page .breadcrumb-trail,
body.pulpit-sermon-page header.entry-header,
body.pulpit-sermon-page .ast-archive-description {
    display: none !important;
}

/* Astra-specific: force the article to span full width — but only the MAIN
 * post article, not the article elements used by our internal cards
 * (continue-listening cards, archive grid cards, hub grid cards, etc.) */
body.pulpit-sermon-page article:not(.ps-listening-card):not(.ps-card):not(.ps-series-card):not(.ps-speaker-card),
body.pulpit-sermon-page .ast-row,
body.pulpit-sermon-page .ast-grid-common-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* GeneratePress, Kadence, Blocksy single-content wrappers */
body.pulpit-sermon-page .grid-container,
body.pulpit-sermon-page .grid-parent,
body.pulpit-sermon-page .one-container,
body.pulpit-sermon-page .separate-containers,
body.pulpit-sermon-page .container.grid-container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Strip any background/border on the post wrapper that would create a "boxed" feel */
body.pulpit-sermon-page article.post,
body.pulpit-sermon-page article[class*="post-"],
body.pulpit-sermon-page .single-post .ast-article-single,
body.pulpit-sermon-page .ast-article-single {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* ═════════════════════════════════════════════════════════════════════════
   PHASE 4b-1.1 — Targeted fixes for theme overrides on shortcode pages
   ═════════════════════════════════════════════════════════════════════════ */

/* Reset button — defeat Astra's default <button> styling with stronger selectors */
body.pulpit-sermon-page .ps-filter-reset,
.ps-filter-bar .ps-filter-reset {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--ps-border-soft) !important;
    border-radius: 10px !important;
    color: var(--ps-text-dim) !important;
    padding: 11px 22px !important;
    font-family: var(--ps-font-body) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

body.pulpit-sermon-page .ps-filter-reset:hover,
.ps-filter-bar .ps-filter-reset:hover {
    border-color: var(--ps-brand-primary) !important;
    color: var(--ps-brand-primary) !important;
    background: var(--ps-brand-primary-soft) !important;
}

/* Title links — defeat Astra's default link underline on title links */
body.pulpit-sermon-page .ps-split-featured-title a,
body.pulpit-sermon-page .ps-split-featured-title a:hover,
body.pulpit-sermon-page .ps-latest-title-xl a,
body.pulpit-sermon-page .ps-latest-title-xl a:hover,
.ps-split-featured-title a {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    color: inherit !important;
}

body.pulpit-sermon-page .ps-split-featured-title a .ps-title-main {
    color: var(--ps-text) !important;
}

body.pulpit-sermon-page .ps-split-featured-title a .ps-title-week {
    color: var(--ps-brand-primary) !important;
}

/* Card title links — same defeat */
body.pulpit-sermon-page .ps-card-link,
body.pulpit-sermon-page .ps-card-link:hover,
body.pulpit-sermon-page .ps-listening-card-link,
body.pulpit-sermon-page .ps-listening-card-link:hover {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Pill nav links — same */
body.pulpit-sermon-page .ps-quick-nav-link,
body.pulpit-sermon-page .ps-quick-nav-link:hover {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Cinematic action buttons */
body.pulpit-sermon-page .ps-cinematic-primary,
body.pulpit-sermon-page .ps-cinematic-secondary,
body.pulpit-sermon-page .ps-cinematic-primary:hover,
body.pulpit-sermon-page .ps-cinematic-secondary:hover {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Force the play orbit text to render at the right size — defend against any
   theme CSS that affects SVG <text> sizing on the page */
body.pulpit-sermon-page .ps-play-orbit-text text {
    font-size: 8px !important;
    fill: #fff !important;
}

/* Filter bar — make sure the horizontal grid layout takes effect on shortcode pages */
body.pulpit-sermon-page .ps-filter-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr auto !important;
    gap: 12px !important;
    align-items: end !important;
}

@media (max-width: 768px) {
    body.pulpit-sermon-page .ps-filter-bar {
        grid-template-columns: 1fr 1fr !important;
    }
    body.pulpit-sermon-page .ps-filter-reset {
        grid-column: span 2 !important;
    }
}

@media (max-width: 480px) {
    body.pulpit-sermon-page .ps-filter-bar {
        grid-template-columns: 1fr !important;
    }
    body.pulpit-sermon-page .ps-filter-reset {
        grid-column: auto !important;
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   PHASE 4b-1.2 — SPECIFICITY ESCALATION (don't depend on body class)
   ═════════════════════════════════════════════════════════════════════════
   The body.pulpit-sermon-page approach was unreliable — it depends on the
   PHP body_class filter winning a race with theme priorities, AND the
   shortcode-detection logic must work perfectly. Both are fragile.
   
   These rules use .ps-section (which our HTML always renders) plus html
   tag prefix for extreme specificity. They override Astra's defaults
   reliably regardless of theme settings or body class status.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── FILTER BAR — horizontal grid layout ────────────────────────────── */

html body .ps-section .ps-filter-bar,
.ps-archive-section .ps-filter-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr auto !important;
    gap: 12px !important;
    align-items: end !important;
    padding: 18px 20px !important;
    background: var(--ps-card-bg) !important;
    border: 1px solid var(--ps-border-soft) !important;
    border-radius: var(--ps-radius) !important;
    box-shadow: var(--ps-shadow-card) !important;
    margin-bottom: 32px !important;
}

@media (max-width: 768px) {
    html body .ps-section .ps-filter-bar,
    .ps-archive-section .ps-filter-bar {
        grid-template-columns: 1fr 1fr !important;
    }
    html body .ps-section .ps-filter-reset,
    .ps-archive-section .ps-filter-reset {
        grid-column: span 2 !important;
    }
}

@media (max-width: 480px) {
    html body .ps-section .ps-filter-bar,
    .ps-archive-section .ps-filter-bar {
        grid-template-columns: 1fr !important;
    }
    html body .ps-section .ps-filter-reset,
    .ps-archive-section .ps-filter-reset {
        grid-column: auto !important;
    }
}


/* ─── RESET BUTTON — defeat Astra's default <button> styling ────────── */

html body .ps-section button.ps-filter-reset,
html body .ps-section .ps-filter-bar button,
.ps-archive-section button.ps-filter-reset,
.ps-archive-section .ps-filter-bar button {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--ps-border-soft) !important;
    border-radius: 10px !important;
    color: var(--ps-text-dim) !important;
    padding: 11px 22px !important;
    font-family: var(--ps-font-body) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer !important;
}

html body .ps-section button.ps-filter-reset:hover,
html body .ps-section .ps-filter-bar button:hover,
.ps-archive-section button.ps-filter-reset:hover {
    border-color: var(--ps-brand-primary) !important;
    color: var(--ps-brand-primary) !important;
    background: var(--ps-brand-primary-soft) !important;
}


/* ─── FILTER LABELS — defeat Astra's input label styling ────────────── */

html body .ps-section .ps-filter-label,
.ps-archive-section .ps-filter-label {
    font-family: var(--ps-font-body) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--ps-text-muted) !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* ─── FILTER SELECTS — defeat Astra's default select styling ─────────── */

html body .ps-section select.ps-filter-select,
.ps-archive-section select.ps-filter-select {
    width: 100% !important;
    padding: 11px 36px 11px 14px !important;
    background-color: var(--ps-glass) !important;
    border: 1px solid var(--ps-border-soft) !important;
    border-radius: 10px !important;
    color: var(--ps-text) !important;
    font-family: var(--ps-font-body) !important;
    font-size: 0.88rem !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    box-shadow: none !important;
}

html body .ps-section select.ps-filter-select:hover,
html body .ps-section select.ps-filter-select:focus,
.ps-archive-section select.ps-filter-select:focus {
    border-color: var(--ps-brand-primary) !important;
    outline: none !important;
    background-color: var(--ps-card-bg) !important;
    box-shadow: 0 0 0 3px var(--ps-brand-primary-soft) !important;
}


/* ─── PAGE TITLE HIDE (multiple fallback selectors) ──────────────────── */
/* For shortcode pages where the WP page title shows above our content,
   use every selector we know themes might use. */

body.page header.entry-header,
body.page .entry-header,
body.page h1.entry-title,
body.page .entry-title,
body.page-template-default header.entry-header,
body.page-template-default .entry-title,
body[class*="page-id-"] header.entry-header,
body[class*="page-id-"] .entry-title,
.page header.entry-header:has(+ .entry-content .ps-section),
.page .entry-header:has(+ .entry-content .ps-section) {
    /* Only hide if our shortcode is actually on the page — use :has() to
       check that the entry-content following it contains our section. */
    /* The simpler approach: hide on any page that contains a .ps-section */
}

/* Simpler, more reliable: when our section is present anywhere on the
   current page, retroactively hide common page-title containers via
   sibling combinator (looks up the DOM via :has). Modern browsers only,
   gracefully degrades. */
body:has(.ps-archive-section) .entry-header,
body:has(.ps-archive-section) .entry-title,
body:has(.ps-archive-section) h1.entry-title,
body:has(.ps-archive-section) header.entry-header,
body:has(.ps-archive-section) .ast-archive-description,
body:has(.ps-archive-section) .ast-page-builder-template .entry-header,
body:has(.ps-section.ps-archive-section) .page-title,
body:has(.ps-section.ps-single-sermon) .entry-header,
body:has(.ps-section.ps-single-sermon) .entry-title {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ─── LINK UNDERLINE DEFEAT (no body class needed) ───────────────────── */

html body .ps-section a,
html body .ps-section a:hover,
html body .ps-section a:visited,
html body .ps-section a:focus {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* But preserve link colors that we explicitly set */
html body .ps-section .ps-split-featured-title a {
    color: inherit !important;
}

html body .ps-section .ps-split-featured-title a .ps-title-main {
    color: var(--ps-text) !important;
}

html body .ps-section .ps-split-featured-title a .ps-title-week {
    color: var(--ps-brand-primary) !important;
}


/* ─── FULL WIDTH OVERRIDE for sermon section content ─────────────────── */
/* Even without body class, force the section to stretch full-width
   inside its container. */

html body .entry-content .ps-section,
html body .post-content .ps-section,
html body article .ps-section,
.entry-content > .ps-section,
.post-content > .ps-section {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

/* When the section is the direct child of a constrained container,
   the inner content keeps its 1240px max-width via .ps-section-inner */
html body .ps-section .ps-section-inner {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    html body .ps-section .ps-section-inner {
        padding: 0 16px !important;
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   PHASE 4b-1.3 — Dropdown clipping + Astra flexbox column overrides
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── DROPDOWN VERTICAL CLIPPING FIX ─────────────────────────────────── */
/* Astra sets fixed heights on form controls that clip our padded text.
   Force auto height + explicit line-height + box-sizing to eliminate it. */

html body .ps-section select.ps-filter-select,
html body .ps-archive-section select.ps-filter-select,
.ps-section select.ps-filter-select {
    height: auto !important;
    min-height: 46px !important;
    line-height: 1.5 !important;
    padding: 11px 36px 11px 14px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    font-size: 0.88rem !important;
    color: var(--ps-text) !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

/* Filter group label → select gap consistency */
html body .ps-section .ps-filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
}


/* ─── ASTRA FLEXBOX SIDEBAR LAYOUT — force content to 100% width ────── */
/* Astra renders archive/single CPT pages inside a flex container with
   #primary (content) at flex-basis ~70% and #secondary (sidebar) at ~30%.
   Hiding #secondary alone leaves #primary at 70%, creating left-aligned
   look. We must force the flex sizing explicitly. */

body.pulpit-sermon-page #primary,
body.pulpit-sermon-page .content-area,
body.pulpit-sermon-page .ast-grid-common-col,
body.pulpit-sermon-page .ast-row > [class*="col-"],
body.pulpit-sermon-page .ast-grid-col,
body.pulpit-sermon-page .ast-flex,
html body.pulpit-sermon-page #primary,
html body.pulpit-sermon-page .ast-archive-description,
html body.pulpit-sermon-page main#main,
html body.pulpit-sermon-page main.site-main,
body[class*="archive"] #primary,
body[class*="archive"][class*="post-type-archive"] #primary,
body[class*="single-ps_sermon"] #primary,
body[class*="post-type-archive-ps_sermon"] #primary,
body[class*="tax-ps_"] #primary {
    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* The .ast-container itself (parent of #primary + #secondary) — force
   grid/flex behavior to single column when our content is inside. */

body.pulpit-sermon-page .ast-container,
body.pulpit-sermon-page .ast-container-fluid,
body[class*="single-ps_sermon"] .ast-container,
body[class*="post-type-archive-ps_sermon"] .ast-container,
body[class*="tax-ps_"] .ast-container {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Belt-and-suspenders for archive views even when body class isn't present */
body.post-type-archive-ps_sermon #primary,
body.single-ps_sermon #primary,
body.tax-ps_series #primary,
body.tax-ps_speaker #primary,
body.tax-ps_book #primary {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

body.post-type-archive-ps_sermon .ast-container,
body.single-ps_sermon .ast-container,
body.tax-ps_series .ast-container,
body.tax-ps_speaker .ast-container,
body.tax-ps_book .ast-container {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hide sidebar widget areas explicitly with all known WP/Astra classes */
body.post-type-archive-ps_sermon #secondary,
body.single-ps_sermon #secondary,
body.tax-ps_series #secondary,
body.tax-ps_speaker #secondary,
body.tax-ps_book #secondary,
body.post-type-archive-ps_sermon .secondary,
body.single-ps_sermon .secondary,
body.post-type-archive-ps_sermon .widget-area,
body.single-ps_sermon .widget-area {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* If .ast-container is using CSS grid (Astra has variants), reset columns */
body.pulpit-sermon-page .ast-container[style*="grid"],
body[class*="ps_sermon"] .ast-container,
body[class*="tax-ps_"] .ast-container {
    grid-template-columns: 1fr !important;
}


/* ═════════════════════════════════════════════════════════════════════════
   PHASE 4b-1.4 — Restore the 1024px play-orbit text breakpoint
   ═════════════════════════════════════════════════════════════════════════
   Per the decision finalized during the original Grove plugin work
   (church-sermon-features Round 12): the rotating "VIEW MESSAGE" text
   on the play orbit had visible gaps between repeats and rendered
   awkwardly on screens below 1024px.

   The agreed solution was to hide ONLY the rotating text below 1024px,
   while keeping the orbit size, glassy backdrop ring, orange play
   button, and click target completely unchanged. At 1024px and above,
   everything renders exactly as designed.

   This restores that exact behavior in Pulpit Studio.
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023.98px) {
    .ps-play-orbit-text {
        display: none !important;
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   PHASE 4b-1.5 — Restore the cinematic play orbit treatment
   ═════════════════════════════════════════════════════════════════════════
   These values match the original Grove plugin's final cinematic-hero
   orbit styling (church-sermon-features.css, lines 3087-3109).
   
   The key fix: replace the orange-tinted backdrop ring with a glassy
   white blurred ring. This creates visual separation between the
   rotating text and the orange play button. The original orange-tinted
   approach blended the layers together and made the text feel "tight"
   against the button.
   ═════════════════════════════════════════════════════════════════════════ */

.ps-cinematic-hero .ps-play-orbit,
.ps-play-orbit {
    width: 140px !important;
    height: 140px !important;
}

/* Glassy white ring instead of orange-tinted — creates breathing room */
.ps-cinematic-hero .ps-play-orbit::before,
.ps-play-orbit::before {
    inset: 0 !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    box-shadow:
        0 0 0 8px rgba(255, 255, 255, 0.06),
        0 18px 50px rgba(237, 139, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

.ps-play-orbit:hover::before {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Bigger orange play button — 70px (was 56px) */
.ps-cinematic-hero .ps-play-orbit-icon,
.ps-play-orbit-icon {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    background: var(--ps-brand-primary) !important;
    color: #071120 !important;
    box-shadow: 0 12px 34px rgba(237, 139, 0, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.ps-play-orbit-icon svg {
    width: 28px !important;
    height: 28px !important;
    margin-left: 2px !important; /* optical centering for the play triangle */
}

/* Rotating text — white at 82% opacity, tighter letter-spacing */
.ps-cinematic-hero .ps-play-orbit-text text,
.ps-play-orbit-text text {
    fill: rgba(255, 255, 255, 0.82) !important;
    letter-spacing: 0.11em !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Responsive sizing — keep the orange button big enough on tablet */
@media (max-width: 1023.98px) and (min-width: 601px) {
    .ps-cinematic-hero .ps-play-orbit,
    .ps-play-orbit {
        width: 120px !important;
        height: 120px !important;
    }
    .ps-cinematic-hero .ps-play-orbit-icon,
    .ps-play-orbit-icon {
        width: 60px !important;
        height: 60px !important;
    }
    .ps-play-orbit-icon svg {
        width: 26px !important;
        height: 26px !important;
    }
}

@media (max-width: 600px) {
    .ps-cinematic-hero .ps-play-orbit,
    .ps-play-orbit {
        width: 80px !important;
        height: 80px !important;
    }
    .ps-cinematic-hero .ps-play-orbit-icon,
    .ps-play-orbit-icon {
        width: 60px !important;
        height: 60px !important;
    }
    .ps-play-orbit-icon svg {
        width: 28px !important;
        height: 28px !important;
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   PHASE 4b-2 — TAXONOMY PAGE STYLES
   ═════════════════════════════════════════════════════════════════════════ */


/* ─── SERIES INTRO ───────────────────────────────────────────────────── */

.ps-series-intro {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 36px;
    padding: 16px 0;
}

.ps-series-intro-stats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 6px 16px;
    background: var(--ps-brand-primary-soft);
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
    font-family: var(--ps-font-body);
    font-size: 0.78rem;
    color: var(--ps-text-dim);
}

.ps-series-intro-stats strong {
    color: var(--ps-brand-primary);
    font-weight: 700;
    margin-right: 2px;
}


/* ─── SPEAKER BIO BLOCK ──────────────────────────────────────────────── */

.ps-speaker-bio {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 40px;
    align-items: start;
    margin: 0 auto 48px;
    max-width: 1100px;
    padding: 36px 40px;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius-lg);
    box-shadow: var(--ps-shadow-card);
}

.ps-speaker-bio-photo {
    aspect-ratio: 1 / 1;
    border-radius: var(--ps-radius);
    overflow: hidden;
    background: var(--ps-glass);
    position: relative;
}

.ps-speaker-bio-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ps-speaker-bio-photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ps-dark-2), var(--ps-dark-3));
}

.ps-speaker-bio-photo--placeholder span {
    font-family: var(--ps-font-accent);
    font-size: 5rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.2);
}

.ps-speaker-bio-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ps-speaker-bio-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 10px;
    background: var(--ps-brand-primary-soft);
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
    color: var(--ps-brand-primary);
    font-family: var(--ps-font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ps-speaker-bio-eyebrow {
    font-family: var(--ps-font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ps-brand-primary);
}

.ps-speaker-bio-name {
    font-family: var(--ps-font-accent);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--ps-text);
    margin: 0;
    letter-spacing: -0.01em;
}

.ps-speaker-bio-title {
    font-family: var(--ps-font-body);
    font-size: 1.02rem;
    color: var(--ps-text-dim);
    margin: 0;
    font-weight: 500;
}

.ps-speaker-bio-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-top: 1px solid var(--ps-border-soft);
    border-bottom: 1px solid var(--ps-border-soft);
    font-family: var(--ps-font-body);
    font-size: 0.85rem;
    color: var(--ps-text-dim);
}

.ps-speaker-bio-stats strong {
    color: var(--ps-brand-primary);
    font-weight: 700;
    margin-right: 4px;
}

.ps-speaker-bio-text {
    font-family: var(--ps-font-body);
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--ps-text-dim);
}

.ps-speaker-bio-text p:first-child { margin-top: 0; }
.ps-speaker-bio-text p:last-child  { margin-bottom: 0; }

.ps-speaker-bio-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ps-speaker-bio-links li { margin: 0; }

.ps-speaker-bio-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--ps-glass);
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
    color: var(--ps-text);
    font-family: var(--ps-font-body);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s;
}

.ps-speaker-bio-links a:hover {
    border-color: var(--ps-brand-primary);
    color: var(--ps-brand-primary);
    background: var(--ps-brand-primary-soft);
}

@media (max-width: 768px) {
    .ps-speaker-bio {
        grid-template-columns: 1fr;
        padding: 24px 22px;
        gap: 22px;
        text-align: center;
    }
    .ps-speaker-bio-photo {
        max-width: 240px;
        margin: 0 auto;
    }
    .ps-speaker-bio-content { align-items: center; }
    .ps-speaker-bio-badge,
    .ps-speaker-bio-eyebrow { align-self: center; }
    .ps-speaker-bio-stats { justify-content: center; }
    .ps-speaker-bio-links { justify-content: center; }
}


/* ─── BOOK HERO BLOCK ────────────────────────────────────────────────── */

.ps-book-hero {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 48px;
    padding: 20px 0;
}

.ps-book-hero-testament {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.ps-book-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    background: var(--ps-brand-primary);
    color: var(--ps-text);
    border-radius: 999px;
    font-family: var(--ps-font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.ps-book-hero-order {
    font-family: var(--ps-font-body);
    font-size: 0.74rem;
    color: var(--ps-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ps-book-hero-name {
    font-family: var(--ps-font-accent);
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    font-weight: 800;
    line-height: 1;
    color: var(--ps-text);
    margin: 0 0 18px;
    letter-spacing: -0.02em;
}

.ps-book-hero-overview {
    font-family: var(--ps-font-body);
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--ps-text-dim);
    margin: 0 auto 18px;
    max-width: 640px;
}

.ps-book-hero-overview p:first-child { margin-top: 0; }
.ps-book-hero-overview p:last-child  { margin-bottom: 0; }

.ps-book-hero-stats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 6px 16px;
    background: var(--ps-brand-primary-soft);
    border: 1px solid var(--ps-border-soft);
    border-radius: 999px;
    font-family: var(--ps-font-body);
    font-size: 0.78rem;
    color: var(--ps-text-dim);
}

.ps-book-hero-stats strong {
    color: var(--ps-brand-primary);
    font-weight: 700;
    margin-right: 2px;
}

@media (max-width: 600px) {
    .ps-book-hero-testament {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 14px;
    }
}


/* ─── TAXONOMY SECTION SHARED ────────────────────────────────────────── */

.ps-taxonomy-section .ps-divider {
    margin-top: 32px;
    margin-bottom: 28px;
}


/* ═════════════════════════════════════════════════════════════════════════
   PHASE 4b-2.1 — Defeat Astra's <a> tag underline-via-shadow on buttons & cards
   ═════════════════════════════════════════════════════════════════════════
   Astra applies a subtle bottom box-shadow (or border-bottom) to <a> tags
   in content as a modern underline replacement. On styled buttons and cards
   this appears as a visible "cut off" line near the bottom inside the
   element.
   
   The <button> Share element doesn't get this treatment, which is why it
   looks clean while the <a class="ps-btn"> Download Audio and Sermon Notes
   look pinched at the bottom.
   
   Solution: target the specific elements with higher-than-Astra specificity
   and explicitly null every Astra underline mechanism, while preserving our
   intentional borders and (for cards) the card shadow.
   ═════════════════════════════════════════════════════════════════════════ */

/* Action buttons that are <a> tags — Download Audio, Sermon Notes, etc. */
html body .ps-single-actions a.ps-btn,
html body .ps-single-actions a.ps-btn:link,
html body .ps-single-actions a.ps-btn:visited,
html body .ps-single-actions a.ps-btn:hover,
html body .ps-single-actions a.ps-btn:focus,
html body .ps-single-actions a.ps-btn:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
    text-decoration-thickness: 0 !important;
    text-underline-offset: 0 !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: var(--ps-border-soft) !important;
    border-bottom-color: var(--ps-border-soft) !important;
    box-shadow: none !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Hover state for action buttons — change border + bg, no underline */
html body .ps-single-actions a.ps-btn:hover {
    border-color: var(--ps-brand-primary) !important;
    border-bottom-color: var(--ps-brand-primary) !important;
    color: var(--ps-brand-primary) !important;
    background-color: var(--ps-brand-primary-soft) !important;
}


/* Next Step cards — <a> tags with card styling. Preserve card shadow. */
html body .ps-next-step-item,
html body .ps-next-step-item:link,
html body .ps-next-step-item:visited,
html body .ps-next-step-item:hover,
html body .ps-next-step-item:focus,
html body .ps-next-step-item:active,
html body .ps-section .ps-next-step-item {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
    text-decoration-thickness: 0 !important;
    text-underline-offset: 0 !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--ps-border-soft) !important;
    border-bottom-color: var(--ps-border-soft) !important;
    box-shadow: var(--ps-shadow-card) !important;
    background-image: none !important;
}

html body .ps-next-step-item:hover,
html body .ps-section .ps-next-step-item:hover {
    border-color: var(--ps-brand-primary) !important;
    border-bottom-color: var(--ps-brand-primary) !important;
    box-shadow: 0 12px 30px rgba(237, 139, 0, 0.15) !important;
}


/* Sermon cards in archive/taxonomy grids — also <a> tags, preserve shadow */
html body .ps-section .ps-card,
html body .ps-section .ps-card .ps-card-link,
html body .ps-section .ps-card .ps-card-link:hover {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
    text-decoration-thickness: 0 !important;
    background-image: none !important;
}

html body .ps-section .ps-card {
    box-shadow: var(--ps-shadow-card) !important;
}

html body .ps-section .ps-card:hover {
    box-shadow: 0 14px 32px rgba(11, 16, 32, 0.1) !important;
}


/* Continue Listening cards — same treatment */
html body .ps-section .ps-listening-card,
html body .ps-section .ps-listening-card-link,
html body .ps-section .ps-listening-card-link:hover {
    text-decoration: none !important;
    text-decoration-line: none !important;
    background-image: none !important;
}


/* ═════════════════════════════════════════════════════════════════════════
   PHASE 4b-2.2 — Restore the original Grove next-step hover treatment
   ═════════════════════════════════════════════════════════════════════════
   The original csf plugin used a simple background tint on hover with no
   transform or shadow change. My fancier version (translateY + orange
   glow shadow) caused the bottom edge to be clipped by the section's
   overflow:hidden (which we need to keep the decorative orbs contained).
   
   Reverting to the original's hover treatment removes the clipping issue
   entirely while preserving the orange-accent feedback on hover.
   ═════════════════════════════════════════════════════════════════════════ */

html body .ps-next-step-item:hover,
html body .ps-section .ps-next-step-item:hover {
    background-color: rgba(237, 139, 0, 0.07) !important;
    border-color: var(--ps-brand-primary) !important;
    border-bottom-color: var(--ps-brand-primary) !important;
    box-shadow: var(--ps-shadow-card) !important;
    transform: none !important;
}


/* ═════════════════════════════════════════════════════════════════════════
   PHASE 4b-2.3 — RESTORE lift + orange glow, fix invisible bottom border
   ═════════════════════════════════════════════════════════════════════════
   Roger preferred the lifted-card + orange glow hover treatment. The
   invisible-bottom-border issue was caused by an earlier rule
   (`html body .ps-section a { border-bottom: none !important }`)
   killing the bottom border on the <a>-tag cards even at hover.
   
   This block:
     1. Puts the lift + orange glow back
     2. Explicitly sets every border-bottom longhand to defeat the
        border-bottom: none shorthand at the longhand level
     3. Adds position: relative + z-index so cards paint above siblings
        when lifted (defends against any stacking-context issue)
   ═════════════════════════════════════════════════════════════════════════ */

/* Base state — position + z-index for clean stacking when lifted */
html body .ps-next-step-item,
html body .ps-section .ps-next-step-item {
    position: relative !important;
    z-index: 1 !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s ease,
                border-color 0.2s ease,
                background-color 0.2s ease !important;
}

/* Hover state — lift, orange glow, and full orange border on ALL four sides */
html body .ps-next-step-item:hover,
html body .ps-section .ps-next-step-item:hover {
    background-color: var(--ps-card-bg) !important;
    /* Set every border longhand explicitly so border-bottom: none can't win */
    border-top-style: solid !important;
    border-right-style: solid !important;
    border-bottom-style: solid !important;
    border-left-style: solid !important;
    border-top-width: 1px !important;
    border-right-width: 1px !important;
    border-bottom-width: 1px !important;
    border-left-width: 1px !important;
    border-top-color: var(--ps-brand-primary) !important;
    border-right-color: var(--ps-brand-primary) !important;
    border-bottom-color: var(--ps-brand-primary) !important;
    border-left-color: var(--ps-brand-primary) !important;
    box-shadow: 0 12px 30px rgba(237, 139, 0, 0.15) !important;
    transform: translateY(-3px) !important;
    z-index: 5 !important;
}

/* Make sure the wrap container can render the lifted card's full extent */
html body .ps-next-step-wrap,
html body .ps-section .ps-next-step-wrap,
html body .ps-next-step-bar,
html body .ps-section .ps-next-step-bar {
    overflow: visible !important;
}


/* ═════════════════════════════════════════════════════════════════════════
   PHASE 4b-3 — HUB PAGE STYLES (Series Grid, By Scripture, By Speaker)
   ═════════════════════════════════════════════════════════════════════════ */


/* ─── SERIES GRID HUB ────────────────────────────────────────────────── */

.ps-series-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
}

@media (max-width: 968px) {
    .ps-series-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .ps-series-grid { grid-template-columns: 1fr; }
}

.ps-series-card {
    position: relative;
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    overflow: hidden;
    box-shadow: var(--ps-shadow-card);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

.ps-series-card:hover {
    transform: translateY(-4px);
    border-color: var(--ps-brand-primary);
    box-shadow: 0 14px 32px rgba(11, 16, 32, 0.1);
}

.ps-series-card-link {
    display: block;
    color: inherit;
    text-decoration: none !important;
}

.ps-series-card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-color: var(--ps-dark-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ps-series-card-initial {
    font-family: var(--ps-font-accent);
    font-size: 5rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.18);
}

.ps-series-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.65));
    z-index: 2;
}

.ps-series-card-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    padding: 5px 12px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    color: #fff;
    font-family: var(--ps-font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ps-series-card-body {
    padding: 20px 22px 22px;
}

.ps-series-card-title {
    font-family: var(--ps-font-accent);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--ps-text);
    margin: 0 0 8px;
    line-height: 1.15;
    letter-spacing: -0.005em;
}

.ps-series-card-excerpt {
    font-family: var(--ps-font-body);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ps-text-dim);
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ps-series-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--ps-font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ps-brand-primary);
    transition: gap 0.2s;
}

.ps-series-card:hover .ps-series-card-cta {
    gap: 10px;
}


/* ─── BY SCRIPTURE HUB ───────────────────────────────────────────────── */

.ps-scripture-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 32px;
}

@media (max-width: 768px) {
    .ps-scripture-columns { grid-template-columns: 1fr; gap: 22px; }
}

.ps-scripture-column {
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    padding: 28px 28px 18px;
    box-shadow: var(--ps-shadow-card);
}

.ps-scripture-column-title {
    font-family: var(--ps-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ps-brand-primary);
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ps-border-soft);
}

.ps-scripture-book-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 2px;
}

@media (max-width: 500px) {
    .ps-scripture-book-list { grid-template-columns: 1fr; }
}

.ps-scripture-book-list li {
    margin: 0;
}

html body .ps-section .ps-scripture-book-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 4px;
    border-bottom: 1px solid transparent !important;
    color: var(--ps-text) !important;
    text-decoration: none !important;
    font-family: var(--ps-font-body);
    font-size: 0.94rem;
    transition: color 0.2s, padding-left 0.2s;
}

html body .ps-section .ps-scripture-book-link:hover {
    color: var(--ps-brand-primary) !important;
    padding-left: 6px;
}

.ps-scripture-book-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ps-scripture-book-count {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ps-brand-primary);
    background: var(--ps-brand-primary-soft);
    border-radius: 999px;
    padding: 2px 9px;
    min-width: 26px;
    text-align: center;
}

.ps-scripture-empty {
    font-family: var(--ps-font-body);
    font-size: 0.88rem;
    color: var(--ps-text-muted);
    margin: 0;
    padding: 12px 0;
}


/* ─── BY SPEAKER HUB ─────────────────────────────────────────────────── */

.ps-speaker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 32px;
}

@media (max-width: 1050px) {
    .ps-speaker-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .ps-speaker-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .ps-speaker-grid { grid-template-columns: 1fr; max-width: 320px; margin-left: auto; margin-right: auto; }
}

.ps-speaker-card {
    background: var(--ps-card-bg);
    border: 1px solid var(--ps-border-soft);
    border-radius: var(--ps-radius);
    overflow: hidden;
    box-shadow: var(--ps-shadow-card);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

.ps-speaker-card:hover {
    transform: translateY(-4px);
    border-color: var(--ps-brand-primary);
    box-shadow: 0 14px 32px rgba(11, 16, 32, 0.1);
}

.ps-speaker-card-link {
    display: block;
    color: inherit;
    text-decoration: none !important;
}

.ps-speaker-card-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--ps-glass);
    overflow: hidden;
}

.ps-speaker-card-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ps-speaker-card:hover .ps-speaker-card-photo img {
    transform: scale(1.04);
}

.ps-speaker-card-photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ps-dark-2), var(--ps-dark-3));
}

.ps-speaker-card-photo--placeholder span {
    font-family: var(--ps-font-accent);
    font-size: 4rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.22);
}

.ps-speaker-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    background: var(--ps-brand-primary);
    color: var(--ps-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(237, 139, 0, 0.4);
}

.ps-speaker-card-body {
    padding: 16px 18px 18px;
    text-align: center;
}

.ps-speaker-card-name {
    font-family: var(--ps-font-body);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ps-text);
    margin: 0 0 4px;
    line-height: 1.25;
}

.ps-speaker-card-title {
    font-family: var(--ps-font-body);
    font-size: 0.78rem;
    color: var(--ps-text-dim);
    margin: 0 0 10px;
    line-height: 1.4;
    min-height: 1.4em;
}

.ps-speaker-card-count {
    display: inline-block;
    font-family: var(--ps-font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ps-brand-primary);
    background: var(--ps-brand-primary-soft);
    padding: 4px 12px;
    border-radius: 999px;
}


/* ─── SHARED HUB PAGE ADJUSTMENTS ────────────────────────────────────── */

.ps-hub-section .ps-quick-nav {
    margin-bottom: 24px;
}


/* ═════════════════════════════════════════════════════════════════════════
   PHASE 5 — SCRIPTURE LINKER (subtle hover-only underline)
   ═════════════════════════════════════════════════════════════════════════
   Scripture passages in the sermon meta are clickable when the linker
   setting is enabled. Style stays invisible at rest (matches surrounding
   meta text) and reveals on hover with a thin underline + brand color.
   ═════════════════════════════════════════════════════════════════════════ */

html body .ps-section a.ps-scripture-link,
html body a.ps-scripture-link {
    color: inherit !important;
    text-decoration: none !important;
    background-image: none !important;
    border-bottom: 1px solid transparent !important;
    transition: color 0.15s ease, border-color 0.15s ease !important;
    padding-bottom: 1px !important;
    box-shadow: none !important;
}

html body .ps-section a.ps-scripture-link:hover,
html body a.ps-scripture-link:hover,
html body .ps-section a.ps-scripture-link:focus-visible,
html body a.ps-scripture-link:focus-visible {
    color: var(--ps-brand-primary) !important;
    border-bottom-color: var(--ps-brand-primary) !important;
    text-decoration: none !important;
}


/* ═════════════════════════════════════════════════════════════════════════
   PHASE 6 — DESIGN POLISH
   ═════════════════════════════════════════════════════════════════════════
   1. Two-color hash-based variant gradients (warm / cool) for cards
   2. Sermon card meta-pill hierarchy (speaker/book neutral; scripture filled)
   3. Series card count-badge contrast fix
   4. Cinematic featured-hero lockup visibility safeguards
   ═════════════════════════════════════════════════════════════════════════ */


/* ─── 1. CARD COLOR VARIATION (warm / cool) ──────────────────────────── */
/* Applied to .ps-card-image, .ps-listening-art, .ps-cinematic-hero.
   The pseudo-element layers a tinted wash over the artwork (or solid
   color when no artwork is present). z-index sits between the bg image
   (0) and the overlay scrim (2) so the existing dark-fade-to-bottom
   gradient still does its job. */

/* Make sure the artwork containers can host the ::before tint without
   clipping the play button or initials. */
.ps-card-image,
.ps-listening-art {
    position: relative;
    isolation: isolate;
}

.ps-card--warm .ps-card-image,
.ps-listening-card--warm .ps-listening-art {
    background-color: #1a1a25;
}

.ps-card--warm .ps-card-image::before,
.ps-listening-card--warm .ps-listening-art::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top left,
            rgba(237, 139, 0, 0.32) 0%,
            rgba(237, 139, 0, 0.12) 35%,
            transparent 70%),
        linear-gradient(165deg,
            rgba(237, 139, 0, 0.16) 0%,
            transparent 55%);
    z-index: 1;
    pointer-events: none;
}

.ps-card--cool .ps-card-image,
.ps-listening-card--cool .ps-listening-art {
    background-color: #0e1620;
}

.ps-card--cool .ps-card-image::before,
.ps-listening-card--cool .ps-listening-art::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top left,
            rgba(0, 116, 166, 0.42) 0%,
            rgba(0, 79, 113, 0.18) 35%,
            transparent 70%),
        linear-gradient(165deg,
            rgba(0, 79, 113, 0.22) 0%,
            transparent 55%);
    z-index: 1;
    pointer-events: none;
}

/* Make sure the initial letter and play button still sit above the tint */
.ps-card-initial,
.ps-listening-initial {
    z-index: 2;
}

.ps-card-image-overlay {
    z-index: 3;
}

.ps-card-play,
.ps-card-badges,
.ps-listening-art-shade,
.ps-listening-badges {
    z-index: 4;
}


/* ─── Cinematic hero variants (featured sermon) ──────────────────────── */
/* Mirror the same warm/cool wash on the big hero so a sermon's color
   identity carries from grid card → archive featured → single-page hero
   (when a single-page hero exists). The hero already has scrim +
   vignette layers; this tint sits beneath both. */

.ps-cinematic-hero--warm.no-art {
    background:
        radial-gradient(ellipse at 20% 30%,
            rgba(237, 139, 0, 0.28) 0%,
            transparent 55%),
        linear-gradient(135deg, #161824 0%, #0b1020 100%);
}

.ps-cinematic-hero--cool.no-art {
    background:
        radial-gradient(ellipse at 20% 30%,
            rgba(0, 116, 166, 0.32) 0%,
            transparent 55%),
        linear-gradient(135deg, #0f1828 0%, #07111e 100%);
}

.ps-cinematic-hero--warm.has-art::before,
.ps-cinematic-hero--cool.has-art::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.ps-cinematic-hero--warm.has-art::before {
    background: radial-gradient(ellipse at top left,
        rgba(237, 139, 0, 0.35) 0%,
        transparent 60%);
}

.ps-cinematic-hero--cool.has-art::before {
    background: radial-gradient(ellipse at top left,
        rgba(0, 116, 166, 0.4) 0%,
        transparent 60%);
}


/* ─── 2. SERMON CARD META PILLS ──────────────────────────────────────── */
/* Replace the flat-text meta items with pill hierarchy: speaker + book
   render as neutral light pills; scripture renders as a filled brand-
   colored pill (the most specific reference earns the eye). */

.ps-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    font-size: 0.78rem;
    color: var(--ps-text-dim);
    margin-bottom: 14px;
    min-height: 1.5em;
}

/* Neutral pill — speaker & book */
.ps-card-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    font-family: var(--ps-font-body);
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.4;
    background: #f3f4f5;
    border: 1px solid rgba(11, 16, 32, 0.07);
    color: var(--ps-text-dim);
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease,
                border-color 0.18s ease;
}

.ps-card-pill--speaker,
.ps-card-pill--book {
    background: #f3f4f5;
    color: var(--ps-text-dim);
}

.ps-card:hover .ps-card-pill--speaker,
.ps-card:hover .ps-card-pill--book {
    background: #ebecee;
}

/* Filled scripture pill — most specific reference, brand-tinted */
.ps-card-pill--scripture {
    background: rgba(237, 139, 0, 0.12);
    border-color: rgba(237, 139, 0, 0.3);
    color: var(--ps-brand-primary-dark);
    font-weight: 700;
}

.ps-card:hover .ps-card-pill--scripture {
    background: rgba(237, 139, 0, 0.18);
    border-color: rgba(237, 139, 0, 0.45);
}


/* ─── 3. SERIES CARD COUNT BADGE — contrast fix ──────────────────────── */
/* Old build's badge was rgba(0,0,0,0.45) with white text — text disappeared
   into the dark navy backdrop. New treatment: solid dark navy fill with
   a brand-orange hairline border so the count pill earns the eye and
   reads cleanly against any artwork. */

.ps-series-card-badge {
    background: rgba(11, 16, 32, 0.88);
    border: 1px solid rgba(237, 139, 0, 0.4);
    backdrop-filter: blur(8px);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}


/* ─── 4. CINEMATIC LOCKUP — visibility safeguards ────────────────────── */
/* Belt-and-suspenders for the featured-hero content. The OLD plugin
   showed NOW PLAYING + title lockup + BROWSE ALL MESSAGES inside the
   dark cinematic stage. If the Astra theme (or any future override)
   tries to hide ps-cinematic-content, these reassertions defeat that.
   The full-link anchor stays clickable underneath because its z-index
   is unchanged. */

.ps-cinematic-hero .ps-cinematic-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto;
    z-index: 5 !important;
}

.ps-cinematic-hero .ps-cinematic-now-playing,
.ps-cinematic-hero .ps-cinematic-lockup-title,
.ps-cinematic-hero .ps-cinematic-actions {
    position: relative;
    z-index: 5;
}

/* Lockup title — defeat any theme-injected text-transform/font overrides */
html body .ps-cinematic-hero .ps-cinematic-lockup-title span {
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

html body .ps-cinematic-hero .ps-cinematic-lockup-title span:last-child:not(:only-child) {
    color: var(--ps-brand-primary);
}

/* BROWSE ALL MESSAGES button — make sure it can receive clicks even
   though the full-link sibling covers the hero. The actions wrapper
   gets pointer-events:auto and a higher z-index than the full-link. */
.ps-cinematic-hero .ps-cinematic-actions {
    pointer-events: auto;
    z-index: 6 !important;
}

.ps-cinematic-hero .ps-cinematic-secondary {
    pointer-events: auto;
}


/* ═════════════════════════════════════════════════════════════════════════
   PHASE 6 — REVISION 2 (test-feedback fixes)
   ═════════════════════════════════════════════════════════════════════════
   1. Featured hero — scale down lockup font when using sermon-title fallback
      (longer than typical series names like "Cornerstone")
   2. Series card count pill — bolder, brand-orange filled treatment
      that pops against the dark navy backdrop
   3. Sermon card play-on-hover — move from dead-center to right-of-center
      so it doesn't dominate the artwork
   ═════════════════════════════════════════════════════════════════════════ */


/* ─── 1. CINEMATIC LOCKUP — fallback (sermon title) sizing ───────────── */
/* When the hero falls back to using the sermon title because no series
   is assigned, the text is significantly longer than a typical series
   name. Cap the font size and let it wrap more gracefully so it doesn't
   bury the orbital play button or burst past the BROWSE ALL MESSAGES
   button below. */

.ps-cinematic-content--fallback-title .ps-cinematic-lockup-title span {
    font-size: clamp(1.5rem, 3.2vw, 2.4rem) !important;
    line-height: 1.05;
    letter-spacing: -0.005em;
}

/* Tighter padding when the title is longer — gives the wrapped text room
   to breathe without pushing the BROWSE button off the bottom edge */
.ps-cinematic-content--fallback-title {
    gap: 10px !important;
    padding-right: 28% !important; /* keep clear of the orbital play */
}

@media (max-width: 768px) {
    .ps-cinematic-content--fallback-title {
        padding-right: 24px !important;
    }
    .ps-cinematic-content--fallback-title .ps-cinematic-lockup-title span {
        font-size: clamp(1.3rem, 5.5vw, 1.9rem) !important;
    }
}


/* ─── 2. SERIES CARD COUNT BADGE — brand-orange fill ─────────────────── */
/* Previous revision used dark fill with orange hairline border — still
   read as low-contrast against the dark navy artwork backdrop. Switching
   to a solid brand-orange fill makes the count read as a deliberate
   "this many sermons live here" signal that earns the eye. */

.ps-series-card-badge {
    background: var(--ps-brand-primary);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    box-shadow:
        0 4px 14px rgba(237, 139, 0, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.2);
    backdrop-filter: none; /* solid fill — no blur needed */
}


/* ─── 3. SERMON CARD PLAY BUTTON — right-of-center placement ─────────── */
/* Old plugin positioned the play affordance toward the right side of the
   artwork — kept the giant series-initial visible to the left and made
   the play button feel like an active "call" rather than a centered logo.
   Restore that placement: shift to ~72% horizontal, vertical center. */

.ps-card-play {
    top: 65%;
    left: auto;
    right: 14%;
    transform: translate(50%, -50%) scale(0.7);
}

.ps-card:hover .ps-card-play {
    transform: translate(50%, -50%) scale(1);
}

/* On very narrow mobile cards, pull it back toward center so it doesn't
   crowd the right edge */
@media (max-width: 480px) {
    .ps-card-play {
        right: 22%;
    }
}