/**
 * Public Website — Sermons section (Phase 5)
 * Scoped `.pub-srm-*` (listing) / `.pub-srmd-*` (detail page).
 */

.pub-srm-header {
    background: var(--nkst-color-surface-alt, #f0f2f5);
    padding: 1.75rem 1rem;
    text-align: center;
}
.pub-srm-header h1 { font-size: var(--nkst-font-xl, 22px); font-weight: 800; margin: 0 0 .5rem; color: var(--nkst-color-text, #1f2937); }
.pub-srm-header p { font-size: var(--nkst-font-sm, 14px); color: var(--nkst-color-text-muted, #6b7280); margin: 0; }

.pub-srm-section { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1rem; }
.pub-srm-section + .pub-srm-section { padding-top: 0; }

/* Search + filters */
.pub-srm-search-wrap { position: relative; margin-bottom: .85rem; }
.pub-srm-search-icon { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--nkst-color-text-muted, #6b7280); font-size: .9rem; }
.pub-srm-search-input {
    width: 100%; padding: .7rem .9rem .7rem 2.35rem; border-radius: var(--nkst-radius-md, 12px);
    border: 1px solid var(--nkst-color-border, #e5e7eb); font-size: var(--nkst-font-sm, 14px); box-sizing: border-box;
}
.pub-srm-filters {
    display: flex; flex-wrap: wrap; gap: .55rem; align-items: center;
}
.pub-srm-filters select {
    padding: .5rem .7rem; border-radius: var(--nkst-radius-sm, 8px); border: 1px solid var(--nkst-color-border, #e5e7eb);
    font-size: var(--nkst-font-xs, 13px); background: #fff; color: var(--nkst-color-text, #1f2937); min-height: 40px;
}
.pub-srm-filter-check {
    display: inline-flex; align-items: center; gap: .35rem; font-size: var(--nkst-font-xs, 13px);
    color: var(--nkst-color-text, #1f2937); min-height: 40px; padding: 0 .3rem;
}
.pub-srm-filter-check input { width: 16px; height: 16px; }
.pub-srm-filters .pub-btn { min-height: 40px; padding: 0 .9rem; font-size: var(--nkst-font-xs, 13px); display: inline-flex; align-items: center; }
.pub-srm-clear { font-size: var(--nkst-font-xs, 13px); color: var(--nkst-color-text-muted, #6b7280); text-decoration: none; }

.pub-srm-count { font-size: var(--nkst-font-2xs, 12px); color: var(--nkst-color-text-muted, #6b7280); margin: .75rem 0 0; }

/* Cards grid */
.pub-srm-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; margin-top: 1rem; }
@media (min-width: 640px) { .pub-srm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pub-srm-grid { grid-template-columns: repeat(3, 1fr); } }

.pub-srm-card { background: #fff; border: 1px solid var(--nkst-color-border, #e5e7eb); border-radius: var(--nkst-radius-md, 12px); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; }
.pub-srm-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: linear-gradient(135deg,#0b3d2e,#166534); }
.pub-srm-thumb-fallback {
    width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#0b3d2e,#166534); color: rgba(255,255,255,.85); font-size: 1.75rem; position: relative;
}
.pub-srm-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.pub-srm-media-badge {
    position: absolute; top: .5rem; right: .5rem; background: rgba(0,0,0,.6); color: #fff;
    font-size: var(--nkst-font-2xs, 12px); font-weight: 700; padding: .15rem .5rem; border-radius: 4px;
}
.pub-srm-body { padding: .85rem .9rem 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.pub-srm-title { font-size: var(--nkst-font-sm, 14px); font-weight: 800; color: var(--nkst-color-text, #1f2937); margin: 0; line-height: 1.35; }
.pub-srm-meta { font-size: var(--nkst-font-2xs, 12px); color: var(--nkst-color-text-muted, #6b7280); display: flex; flex-wrap: wrap; gap: .15rem .6rem; }
.pub-srm-cta { margin-top: auto; padding-top: .5rem; font-size: var(--nkst-font-xs, 13px); font-weight: 700; color: var(--nkst-color-primary, #1e3a8a); }

.pub-srm-empty { background: #fff; border: 1px dashed var(--nkst-color-border, #e5e7eb); border-radius: var(--nkst-radius-md, 12px); padding: 2rem 1.25rem; text-align: center; color: var(--nkst-color-text-muted, #6b7280); }
.pub-srm-empty i { font-size: 1.5rem; margin-bottom: .5rem; display: block; color: var(--nkst-color-border, #d1d5db); }
.pub-srm-empty p { font-size: var(--nkst-font-sm, 14px); margin: 0; }

.pub-srm-pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
.pub-srm-pagination a, .pub-srm-pagination span {
    padding: .5rem .9rem; border-radius: var(--nkst-radius-sm, 8px); font-size: var(--nkst-font-xs, 13px); font-weight: 700; text-decoration: none;
    border: 1px solid var(--nkst-color-border, #e5e7eb); color: var(--nkst-color-text, #1f2937);
}
.pub-srm-pagination a:hover { background: var(--nkst-color-surface-alt, #f0f2f5); }
.pub-srm-pagination .is-current { background: var(--nkst-color-primary, #1e3a8a); color: #fff; border-color: var(--nkst-color-primary, #1e3a8a); }

/* ══════════════════════════════════
   SERMON DETAIL PAGE
══════════════════════════════════ */
.pub-srmd-section { max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem 2.5rem; }
.pub-srmd-back { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--nkst-font-xs, 13px); font-weight: 700; color: var(--nkst-color-primary, #1e3a8a); text-decoration: none; margin-bottom: 1rem; }

.pub-srmd-media { width: 100%; border-radius: var(--nkst-radius-md, 12px); overflow: hidden; margin-bottom: 1rem; background: #000; }
.pub-srmd-media video, .pub-srmd-media iframe { width: 100%; aspect-ratio: 16/9; display: block; border: none; }
.pub-srmd-media-fallback {
    width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#0b3d2e,#166534); color: rgba(255,255,255,.85); font-size: 2.5rem; border-radius: var(--nkst-radius-md, 12px);
}
.pub-srmd-external {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
    aspect-ratio: 16/9; background: linear-gradient(135deg,#0b3d2e,#166534); color: #fff; border-radius: var(--nkst-radius-md, 12px);
}

.pub-srmd-title { font-size: var(--nkst-font-xl, 22px); font-weight: 800; color: var(--nkst-color-text, #1f2937); margin: 0 0 .5rem; line-height: 1.35; }
.pub-srmd-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: var(--nkst-font-sm, 14px); color: var(--nkst-color-text-muted, #6b7280); margin-bottom: 1.1rem; }
.pub-srmd-meta span { display: inline-flex; align-items: center; gap: .35rem; }

.pub-srmd-block { background: #fff; border: 1px solid var(--nkst-color-border, #e5e7eb); border-radius: var(--nkst-radius-md, 12px); padding: 1.1rem; margin-bottom: 1.25rem; }
.pub-srmd-block-title { font-size: var(--nkst-font-md, 16px); font-weight: 800; margin: 0 0 .6rem; color: var(--nkst-color-text, #1f2937); }
.pub-srmd-block-text { font-size: var(--nkst-font-sm, 14px); line-height: 1.7; color: var(--nkst-color-text, #1f2937); margin: 0; white-space: pre-line; }

.pub-srmd-related-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 640px) { .pub-srmd-related-grid { grid-template-columns: repeat(3, 1fr); } }