/* ==========================================================================
   MEDIA CENTRE COMPONENTS
   Prepared ahead of the future Media Centre page (no such page exists
   yet). These consume the shared API once AI 1 publishes the relevant
   endpoints — none are invented here. See COMPONENT-LIBRARY.md §12 for
   per-component status (in-use today vs. prepared for later) and
   API-INTEGRATION.md for the (currently unpublished) endpoints these
   are expected to eventually read from.
   ========================================================================== */

/* --- Sermon Card (IN USE — pages/ministries.html) --- */
.sermon-card { display: flex; flex-direction: column; gap: var(--space-1); }
.sermon-card .video-player { margin-bottom: var(--space-1); }
.sermon-card .sermon-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Broadcast Status Badge (IN USE — pages/radio.html) --- */
.broadcast-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3em 0.7em;
  border-radius: var(--radius-pill);
}
.broadcast-status.is-live { background: var(--color-warm-orange); color: var(--color-white); }
.broadcast-status.is-upcoming { background: var(--color-gold); color: var(--color-charcoal); }
.broadcast-status.is-replay { background: var(--surface-alt); color: var(--color-text-muted); border: 1px solid var(--border-subtle); }
.broadcast-status.is-offline { background: var(--border-subtle); color: var(--color-text-muted); }

/* --- Broadcast Schedule (IN USE — pages/radio.html, extends .schedule-table) --- */
.broadcast-schedule .schedule-table td:first-child { font-weight: 600; }

/* --- Media Library grid (PREPARED — no Media Centre page yet) --- */
.media-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}
.media-library-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
}
.media-library-item .media-thumb {
  aspect-ratio: 16/9;
  background: var(--surface-alt);
  overflow: hidden;
}
.media-library-item .media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-library-item .media-info { padding: var(--space-2); }
.media-library-item .media-type-badge {
  font-size: var(--text-xs);
  color: var(--color-wine);
  font-weight: 700;
  text-transform: uppercase;
}

/* --- Audio Player (PREPARED — extends .audio-player from inner.css) --- */
.audio-player .audio-progress {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.audio-player .audio-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-gold);
}
.audio-player .audio-time {
  font-size: var(--text-xs);
  color: #CFCFCF;
  font-variant-numeric: tabular-nums;
}

/* --- Campaign Card (PREPARED) --- */
.campaign-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.campaign-card .campaign-progress {
  height: 8px;
  background: var(--surface-alt);
}
.campaign-card .campaign-progress-fill {
  height: 100%;
  background: var(--color-wine);
}
.campaign-card .campaign-body { padding: var(--space-3); }
.campaign-card .campaign-stats {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* --- Media Metadata Card (PREPARED) --- */
.media-metadata-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}
.media-metadata-card dt { color: var(--color-text-muted); font-weight: 600; }
.media-metadata-card dd { margin: 0; color: var(--color-charcoal); }

/* --- Podcast Card (PREPARED) --- */
.podcast-card {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-2);
}
.podcast-card .podcast-artwork {
  width: 64px; height: 64px;
  border-radius: var(--radius-sm);
  background: var(--color-royal-blue);
  flex-shrink: 0;
}
.podcast-card .podcast-episode-num {
  font-size: var(--text-xs);
  color: var(--color-wine);
  font-weight: 700;
  text-transform: uppercase;
}

/* --- Broadcast History List (PREPARED) --- */
.broadcast-history-list { list-style: none; margin: 0; padding: 0; }
.broadcast-history-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.broadcast-history-list .broadcast-date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Focused public radio / webcast experience */
.broadcast-public{background:#f5f7fb;color:#13213a}
.broadcast-public .top-strip,.broadcast-public .main-nav,.broadcast-public .nav-toggle,.broadcast-public .breadcrumb{display:none!important}
.broadcast-public .site-header{background:#fff;border-bottom:1px solid #e5eaf2;box-shadow:none}
.broadcast-public .header-inner{justify-content:center;min-height:78px}
.broadcast-public .brand{margin-inline:auto}
.broadcast-public-main{min-height:calc(100vh - 150px);display:grid;place-items:center;padding:clamp(1.2rem,4vw,3rem) 1rem}
.broadcast-public-shell{width:min(100%,760px);display:grid;gap:1rem}
.broadcast-public-brand{text-align:center}.broadcast-public-brand img{width:76px;height:76px;object-fit:contain}.broadcast-public-brand p{margin:.45rem 0 0;font-weight:800;letter-spacing:.04em;color:#183b77}.broadcast-public-brand span{display:block;margin-top:.15rem;color:#69778a;font-size:.94rem}
.broadcast-public-card{background:#fff;border:1px solid #e2e8f1;border-radius:24px;box-shadow:0 18px 50px rgba(19,45,84,.09);padding:clamp(1.2rem,4vw,2.4rem);text-align:center}
.broadcast-public-card h1{margin:.5rem 0 .3rem;font-size:clamp(2rem,6vw,3.2rem)}.broadcast-public-card [data-programme-title]{font-weight:700;color:#31445f;margin:.35rem auto 1rem}
.broadcast-live-label{display:inline-flex;align-items:center;gap:.35rem;padding:.38rem .7rem;border-radius:999px;background:#fff0f3;color:#9b1839;font-size:.78rem;font-weight:900;letter-spacing:.08em}
.broadcast-playback-controls{display:flex;justify-content:center;margin:1.1rem 0 .7rem}
.broadcast-toggle-button{appearance:none;border:0;border-radius:999px;min-width:190px;min-height:58px;padding:.9rem 1.5rem;background:linear-gradient(135deg,#173f7e,#6e1737);color:#fff;font:800 1.02rem/1 "Source Sans 3",sans-serif;letter-spacing:.07em;box-shadow:0 12px 28px rgba(23,63,126,.24);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.broadcast-toggle-button:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(23,63,126,.28)}.broadcast-toggle-button:active{transform:translateY(0)}.broadcast-toggle-button[aria-pressed=true]{background:linear-gradient(135deg,#781b3c,#a61d45)}
.broadcast-public-card [data-player-status]{min-height:1.5em;color:#6b7788;font-size:.92rem;margin:.55rem 0 0}
.broadcast-radio-card audio{display:none}.broadcast-radio-card video{position:absolute!important;width:1px!important;height:1px!important;opacity:.001!important;pointer-events:none!important}
.broadcast-video-card video{display:block;width:100%;aspect-ratio:16/9;background:#07101d;border-radius:16px;object-fit:contain;margin:.75rem 0 1rem}
.broadcast-video-card .ministry-youtube-player{width:100%;aspect-ratio:16/9;border:0;border-radius:16px;margin:.75rem 0 1rem}
.broadcast-public-footer{text-align:center;padding:0 1rem 1.4rem}.broadcast-public-footer a{color:#173f7e;font-weight:700;text-decoration:none}
@media(max-width:560px){.broadcast-public .header-inner{min-height:68px}.broadcast-public .brand img{width:46px;height:46px}.broadcast-public .brand-name{font-size:.9rem}.broadcast-public-card{border-radius:18px}.broadcast-toggle-button{width:100%;min-width:0}}

/* Audio-on-webcast visual: CSS only, no extra media download */
.broadcast-audio-visual{position:relative;display:grid;place-items:center;overflow:hidden;min-height:clamp(220px,44vw,380px);aspect-ratio:16/9;border-radius:18px;margin:.75rem 0 1rem;background:
radial-gradient(circle at 20% 20%,rgba(255,210,70,.22),transparent 24%),
radial-gradient(circle at 80% 30%,rgba(118,27,60,.32),transparent 28%),
linear-gradient(135deg,#0f2f66 0%,#173f7e 44%,#6e1737 100%);color:#fff;text-align:center;padding:1.2rem;isolation:isolate}
.broadcast-audio-visual[hidden]{display:none!important}
.broadcast-audio-visual:before,.broadcast-audio-visual:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.16);border-radius:50%;width:52%;aspect-ratio:1;animation:broadcastPulse 8s linear infinite;z-index:-1}
.broadcast-audio-visual:after{width:78%;animation-duration:12s;animation-direction:reverse}
.broadcast-audio-orbit{position:absolute;inset:12%;border:1px dashed rgba(255,218,90,.35);border-radius:50%;animation:broadcastSpin 18s linear infinite}
.broadcast-audio-visual img{width:82px;height:82px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.2))}
.broadcast-audio-visual span{font-weight:900;letter-spacing:.09em;font-size:.82rem;color:#ffe477;margin-top:.45rem}
.broadcast-audio-visual strong{font-size:clamp(1.3rem,4vw,2.1rem);margin-top:.15rem}
.broadcast-audio-visual p{max-width:90%;margin:.25rem auto 0;font-weight:800;color:#fff!important}
.broadcast-audio-visual small{margin-top:.2rem;color:#e9eef7}
.broadcast-audio-only-element{position:absolute!important;width:1px!important;height:1px!important;opacity:.001!important;pointer-events:none!important}
@keyframes broadcastPulse{0%{transform:scale(.82);opacity:.35}50%{transform:scale(1.08);opacity:.8}100%{transform:scale(.82);opacity:.35}}
@keyframes broadcastSpin{to{transform:rotate(360deg)}}

.broadcast-assistant{background:#fff;border:1px solid #e2e8f1;border-radius:18px;padding:1rem 1.1rem;box-shadow:0 10px 28px rgba(19,45,84,.06);text-align:left}
.broadcast-assistant-badge{display:inline-flex;padding:.28rem .55rem;border-radius:999px;background:#eef4ff;color:#173f7e;font-size:.72rem;font-weight:900;letter-spacing:.07em}
.broadcast-assistant h2{font-size:1.12rem;margin:.65rem 0 .25rem}.broadcast-assistant p{margin:0 0 .75rem;color:#627087;font-size:.93rem}
.broadcast-assistant-actions{display:flex;flex-wrap:wrap;gap:.5rem}.broadcast-assistant-actions a{display:inline-flex;align-items:center;min-height:40px;padding:.55rem .78rem;border:1px solid #dce3ee;border-radius:999px;text-decoration:none;color:#173f7e;background:#f9fbff;font-weight:700;font-size:.88rem}
.broadcast-assistant-actions a:hover{background:#eef4ff}
@media (prefers-reduced-motion:reduce){.broadcast-audio-visual:before,.broadcast-audio-visual:after,.broadcast-audio-orbit{animation:none}}