/* ============================================================
   LAW FM 103.9 — OUR CONTENTS PAGE
   File: assets/css/contents.css

   HOW TO USE:
   1. Save this file to assets/css/contents.css
   2. In your <head>, AFTER your style.css link, add:
        <link rel="stylesheet" href="/LAW FM103/assets/css/contents.css">
   3. Save our-contents.php to your site root (or wherever your
      other top-level pages like oaps.php live).

   DESIGN NOTE:
   The page is split into two halves that read as two different
   "temperatures" of content — warm broadcast red for what plays
   on 103.9FM right now, cool signal blue for what lives on
   screens. The toggle switch at the top is built to look like a
   physical console selector, tying the whole page back to the
   station's identity instead of using a generic pill nav.
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

   .content-hub-page {
     --ch-ink:        #14161C;
     --ch-paper:       #FAF8F5;
     --ch-line:        #E6E1D6;
     --ch-muted:       #6B6F76;
     --ch-onair:       #D6272C;
     --ch-onair-dim:   #F6D9D8;
     --ch-digital:     #2455D9;
     --ch-digital-dim: #D9E2F9;
     --ch-radius:      14px;
     --ch-font-display: 'Oswald', 'Segoe UI', sans-serif;
     --ch-font-body:    'Inter', 'Segoe UI', sans-serif;
   
     background: var(--ch-paper);
     color: var(--ch-ink);
     font-family: var(--ch-font-body);
   }
   
   .content-hub-page * { box-sizing: border-box; }
   
   .content-hub-page a { text-decoration: none; }
   
   .content-hub-page :focus-visible {
     outline: 2px solid var(--ch-ink);
     outline-offset: 3px;
   }
   
   /* ---------- Page intro ---------- */
   
   .ch-intro {
     padding: 96px 24px 48px;
     max-width: 780px;
     margin: 0 auto;
     text-align: center;
   }
   
   .ch-eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-family: var(--ch-font-display);
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     color: var(--ch-muted);
     margin-bottom: 18px;
   }
   
   .ch-eyebrow::before {
     content: '';
     width: 22px;
     height: 2px;
     background: var(--ch-onair);
   }
   
   .ch-title {
     font-family: var(--ch-font-display);
     font-weight: 700;
     font-size: clamp(2.2rem, 5vw, 3.4rem);
     line-height: 1.05;
     letter-spacing: -0.01em;
     margin: 0 0 16px;
   }
   
   .ch-sub {
     font-size: 1.05rem;
     line-height: 1.6;
     color: var(--ch-muted);
     margin: 0;
   }
   
   /* ---------- Broadcast switch (signature element) ---------- */
   
   .ch-switch-wrap {
     display: flex;
     justify-content: center;
     padding: 8px 24px 72px;
   }
   
   .ch-switch {
     position: relative;
     display: inline-flex;
     align-items: center;
     background: var(--ch-ink);
     border-radius: 999px;
     padding: 6px;
     gap: 4px;
     box-shadow: 0 14px 34px -18px rgba(20, 22, 28, 0.55);
   }
   
   .ch-switch-btn {
     position: relative;
     z-index: 2;
     display: flex;
     align-items: center;
     gap: 9px;
     border: none;
     background: transparent;
     cursor: pointer;
     padding: 12px 22px;
     border-radius: 999px;
     font-family: var(--ch-font-display);
     font-size: 13px;
     font-weight: 600;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: rgba(250, 248, 245, 0.55);
     transition: color 0.25s ease;
   }
   
   .ch-switch-led {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: rgba(250, 248, 245, 0.35);
     transition: background 0.25s ease, box-shadow 0.25s ease;
   }
   
   .ch-switch-btn[data-target="onair"].is-active .ch-switch-led {
     background: var(--ch-onair);
     box-shadow: 0 0 0 4px rgba(214, 39, 44, 0.25);
     animation: ch-pulse 1.8s ease-in-out infinite;
   }
   
   .ch-switch-btn[data-target="digital"].is-active .ch-switch-led {
     background: var(--ch-digital);
     box-shadow: 0 0 0 4px rgba(36, 85, 217, 0.25);
   }
   
   .ch-switch-btn.is-active { color: var(--ch-paper); }
   
   .ch-switch-thumb {
     position: absolute;
     z-index: 1;
     top: 6px;
     left: 6px;
     height: calc(100% - 12px);
     border-radius: 999px;
     background: rgba(250, 248, 245, 0.1);
     transition: transform 0.32s cubic-bezier(0.65, 0, 0.35, 1), width 0.32s ease;
   }
   
   @keyframes ch-pulse {
     0%, 100% { box-shadow: 0 0 0 4px rgba(214, 39, 44, 0.25); }
     50%      { box-shadow: 0 0 0 7px rgba(214, 39, 44, 0.12); }
   }
   
   /* ---------- Shared section chrome ---------- */
   
   .ch-section {
     padding: 76px 24px;
     border-top: 1px solid var(--ch-line);
   }
   
   .ch-section-inner {
     max-width: 1180px;
     margin: 0 auto;
   }
   
   .ch-section[data-mode="onair"] {
     background:
       linear-gradient(180deg, rgba(214, 39, 44, 0.05) 0%, rgba(214, 39, 44, 0) 220px),
       var(--ch-paper);
   }
   
   .ch-section[data-mode="digital"] {
     background:
       linear-gradient(180deg, rgba(36, 85, 217, 0.05) 0%, rgba(36, 85, 217, 0) 220px),
       var(--ch-paper);
   }
   
   .ch-section-head {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 24px;
     flex-wrap: wrap;
     margin-bottom: 40px;
   }
   
   .ch-tag {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-family: var(--ch-font-display);
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     padding: 6px 12px;
     border-radius: 999px;
     margin-bottom: 14px;
   }
   
   .ch-section[data-mode="onair"] .ch-tag {
     background: var(--ch-onair-dim);
     color: var(--ch-onair);
   }
   
   .ch-section[data-mode="digital"] .ch-tag {
     background: var(--ch-digital-dim);
     color: var(--ch-digital);
   }
   
   .ch-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
   
   .ch-section-title {
     font-family: var(--ch-font-display);
     font-weight: 700;
     font-size: clamp(1.6rem, 3vw, 2.1rem);
     margin: 0 0 8px;
   }
   
   .ch-section-desc {
     color: var(--ch-muted);
     max-width: 480px;
     margin: 0;
     line-height: 1.55;
   }
   
   .ch-section-link {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-family: var(--ch-font-display);
     font-size: 13px;
     font-weight: 600;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     color: var(--ch-ink);
     padding-bottom: 4px;
     border-bottom: 2px solid var(--ch-ink);
     white-space: nowrap;
   }
   
   .ch-section-link i { font-size: 12px; transition: transform 0.2s ease; }
   .ch-section-link:hover i { transform: translateX(3px); }
   
   /* ---------- On Air: live strip ---------- */
   
   .ch-live-strip {
     display: flex;
     align-items: center;
     gap: 18px;
     background: var(--ch-ink);
     color: var(--ch-paper);
     border-radius: var(--ch-radius);
     padding: 20px 24px;
     margin-bottom: 28px;
     flex-wrap: wrap;
   }
   
   .ch-live-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-family: var(--ch-font-display);
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     background: var(--ch-onair);
     padding: 8px 14px;
     border-radius: 999px;
     flex-shrink: 0;
   }
   
   .ch-live-dot {
     width: 7px; height: 7px; border-radius: 50%;
     background: #fff;
     animation: ch-pulse 1.6s ease-in-out infinite;
   }
   
   .ch-live-text { flex: 1; min-width: 220px; }
   .ch-live-text strong { display: block; font-size: 1rem; }
   .ch-live-text span { font-size: 0.85rem; color: rgba(250, 248, 245, 0.6); }
   
   .ch-live-cta {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--ch-paper);
     color: var(--ch-ink);
     font-family: var(--ch-font-display);
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     padding: 11px 18px;
     border-radius: 999px;
   }
   
   /* ---------- Card grids (shared skeleton) ---------- */
   
   .ch-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 22px;
   }
   
   .ch-card {
     background: #fff;
     border: 1px solid var(--ch-line);
     border-radius: var(--ch-radius);
     overflow: hidden;
     display: flex;
     flex-direction: column;
     transition: transform 0.25s ease, box-shadow 0.25s ease;
   }
   
   .ch-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 20px 40px -26px rgba(20, 22, 28, 0.35);
   }
   
   .ch-card-media {
     position: relative;
     aspect-ratio: 4 / 3;
     overflow: hidden;
     background: var(--ch-line);
   }
   
   .ch-card-media img {
     width: 100%; height: 100%; object-fit: cover;
     transition: transform 0.4s ease;
   }
   
   .ch-card:hover .ch-card-media img { transform: scale(1.05); }
   
   .ch-card-pill {
     position: absolute;
     top: 12px; left: 12px;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-family: var(--ch-font-display);
     font-size: 10px;
     font-weight: 600;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     padding: 5px 10px;
     border-radius: 999px;
     background: rgba(20, 22, 28, 0.78);
     color: #fff;
     backdrop-filter: blur(3px);
   }
   
   .ch-card-play {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(20, 22, 28, 0);
     transition: background 0.25s ease;
   }
   
   .ch-card:hover .ch-card-play { background: rgba(20, 22, 28, 0.22); }
   
   .ch-card-play-circle {
     width: 44px; height: 44px;
     border-radius: 50%;
     background: #fff;
     display: flex; align-items: center; justify-content: center;
     color: var(--ch-ink);
     font-size: 13px;
     opacity: 0;
     transform: scale(0.8);
     transition: opacity 0.25s ease, transform 0.25s ease;
   }
   
   .ch-card:hover .ch-card-play-circle { opacity: 1; transform: scale(1); }
   
   .ch-card-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; }
   
   .ch-card-meta {
     display: flex; align-items: center; gap: 6px;
     font-size: 12px; color: var(--ch-muted);
     margin-bottom: 8px;
   }
   
   .ch-card-title {
     font-family: var(--ch-font-display);
     font-size: 1.02rem;
     font-weight: 600;
     line-height: 1.3;
     margin: 0 0 8px;
     color: var(--ch-ink);
   }
   
   .ch-card-desc {
     font-size: 0.9rem;
     line-height: 1.5;
     color: var(--ch-muted);
     margin: 0 0 14px;
   }
   
   .ch-card-foot {
     margin-top: auto;
     display: flex; align-items: center; justify-content: space-between;
     font-size: 12px;
     font-weight: 600;
     padding-top: 12px;
     border-top: 1px solid var(--ch-line);
   }
   
   .ch-section[data-mode="onair"] .ch-card-foot { color: var(--ch-onair); }
   .ch-section[data-mode="digital"] .ch-card-foot { color: var(--ch-digital); }
   
   /* ---------- On Air: replay list ---------- */
   
   .ch-replay-list { display: flex; flex-direction: column; gap: 1px; background: var(--ch-line); border-radius: var(--ch-radius); overflow: hidden; margin-top: 32px; }
   
   .ch-replay-row {
     display: flex; align-items: center; gap: 16px;
     background: #fff;
     padding: 16px 20px;
   }
   
   .ch-replay-icon {
     width: 40px; height: 40px; border-radius: 50%;
     background: var(--ch-onair-dim); color: var(--ch-onair);
     display: flex; align-items: center; justify-content: center;
     flex-shrink: 0; font-size: 13px;
   }
   
   .ch-replay-body { flex: 1; min-width: 0; }
   .ch-replay-body strong { display: block; font-size: 0.95rem; }
   .ch-replay-body span { font-size: 0.82rem; color: var(--ch-muted); }
   
   .ch-replay-dur {
     font-family: var(--ch-font-display);
     font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
     color: var(--ch-muted);
     flex-shrink: 0;
   }
   
   /* ---------- Digital: filter chips ---------- */
   
   .ch-filters {
     display: flex; gap: 8px; flex-wrap: wrap;
     margin-bottom: 28px;
   }
   
   .ch-filter-btn {
     border: 1px solid var(--ch-line);
     background: #fff;
     padding: 9px 16px;
     border-radius: 999px;
     font-size: 13px;
     font-weight: 600;
     color: var(--ch-muted);
     cursor: pointer;
     transition: all 0.2s ease;
   }
   
   .ch-filter-btn.is-active,
   .ch-filter-btn:hover {
     border-color: var(--ch-digital);
     color: var(--ch-digital);
     background: var(--ch-digital-dim);
   }
   
   .ch-hide { display: none !important; }
   
   /* ---------- Digital: social strip ---------- */
   
   .ch-social-strip {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 14px;
     margin-top: 36px;
   }
   
   .ch-social-card {
     border: 1px solid var(--ch-line);
     border-radius: var(--ch-radius);
     padding: 18px;
     background: #fff;
     display: flex; flex-direction: column; gap: 10px;
   }
   
   .ch-social-top { display: flex; align-items: center; justify-content: space-between; }
   
   .ch-social-icon {
     width: 34px; height: 34px; border-radius: 9px;
     display: flex; align-items: center; justify-content: center;
     color: #fff; font-size: 14px;
   }
   
   .ch-social-count { font-family: var(--ch-font-display); font-size: 1.15rem; font-weight: 700; }
   .ch-social-label { font-size: 12px; color: var(--ch-muted); }
   
   /* ---------- Closing CTA ---------- */
   
   .ch-closing {
     padding: 80px 24px;
     text-align: center;
   }
   
   .ch-closing-inner {
     max-width: 560px;
     margin: 0 auto;
   }
   
   .ch-closing h3 {
     font-family: var(--ch-font-display);
     font-size: clamp(1.5rem, 3vw, 2rem);
     margin: 0 0 12px;
   }
   
   .ch-closing p { color: var(--ch-muted); margin: 0 0 26px; }
   
   .ch-closing-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
   
   .ch-btn {
     display: inline-flex; align-items: center; gap: 9px;
     font-family: var(--ch-font-display);
     font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
     padding: 13px 24px;
     border-radius: 999px;
   }
   
   .ch-btn-solid { background: var(--ch-ink); color: var(--ch-paper); }
   .ch-btn-outline { border: 1px solid var(--ch-line); color: var(--ch-ink); }
   
   /* ---------- Responsive ---------- */
   
   @media (max-width: 992px) {
     .ch-grid { grid-template-columns: repeat(2, 1fr); }
     .ch-social-strip { grid-template-columns: repeat(2, 1fr); }
   }
   
   @media (max-width: 640px) {
     .ch-intro { padding: 64px 20px 36px; }
     .ch-section { padding: 56px 20px; }
     .ch-grid { grid-template-columns: 1fr; }
     .ch-switch { flex-direction: column; width: 100%; max-width: 300px; }
     .ch-switch-btn { width: 100%; justify-content: center; }
     .ch-switch-thumb { display: none; }
     .ch-social-strip { grid-template-columns: 1fr; }
     .ch-live-strip { flex-direction: column; align-items: flex-start; }
   }
   
   @media (prefers-reduced-motion: reduce) {
     .content-hub-page * { animation: none !important; transition: none !important; }
   }