/* ============================================================
   Channel ↔ News integration  (related news under TV schedule)
   ============================================================ */
.channel-news {
  padding: 50px 5% 70px;
  background: #0c0c0c;
}

.channel-news .cn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

.channel-news .cn-head h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.9em;
  font-weight: 700;
  margin: 0;
  color: #fff;
}

.channel-news .cn-accent {
  display: inline-block;
  width: 5px;
  height: 30px;
  background: #c19114;
  border-radius: 3px;
}

.channel-news .cn-all {
  color: #c19114;
  text-decoration: none;
  font-size: .95em;
  font-weight: 600;
  transition: opacity .2s ease;
}
.channel-news .cn-all:hover { opacity: .7; }

/* Grid of cards */
.channel-news .cn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* Card */
.channel-news .cn-card {
  display: flex;
  flex-direction: column;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.channel-news .cn-card:hover {
  transform: translateY(-6px);
  border-color: rgba(193, 145, 20, 0.5);
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.9);
}

.channel-news .cn-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #222;
}

.channel-news .cn-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(12, 12, 12, 0.85);
  color: #c19114;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}

.channel-news .cn-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.channel-news .cn-title {
  font-size: 1.08em;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 10px;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s ease;
}
.channel-news .cn-card:hover .cn-title { color: #c19114; }

.channel-news .cn-excerpt {
  font-size: .9em;
  line-height: 1.55;
  color: #aaa;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.channel-news .cn-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82em;
  color: #888;
}

.channel-news .cn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c62307;
}

/* ── Tablet ── */
@media screen and (max-width: 1024px) {
  .channel-news .cn-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile ── */
@media screen and (max-width: 768px) {
  .channel-news { padding: 36px 5% 50px; }
  .channel-news .cn-head h2 { font-size: 1.5em; }
  .channel-news .cn-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
   LIVE STAGE — the player at the top of a channel page
   ------------------------------------------------------------
   The plain iframe this page used to carry has been replaced by a stage the
   YouTube IFrame API builds its player inside (js/live-channel.js), because a
   URL-parameter autoplay is ignored on phones. The stage owns the size the
   iframe used to own, and whatever is dropped inside it fills it.
   ============================================================ */
.live .livestream .live-stage {
  position: relative;
  width: 100%;
  height: 90vh;
  background: #000;
  overflow: hidden;
}

.live .livestream .live-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* css/mobile.css gives `.live .livestream iframe` a min-height of 300px,
     from when the iframe WAS the player and had to be told a size. Inside the
     stage that rule cut the bottom off the picture: min-height always beats
     height, so the frame stayed 300px tall inside a 197px 16:9 box with
     overflow hidden. The stage owns the size now. */
  min-height: 0;
  max-height: none;
  border: 0;
}

/* The poster, in two layers: the picture shown whole and centred, over a
   blurred, over-scaled copy of itself that fills the frame to its corners.
   A landscape poster fills the frame exactly and the wash never shows; the
   wash earns its keep on the portrait channel plate, which is fitted whole
   rather than cropped through the top of someone's head. */
.live .livestream .live-stage .live-stage-back {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  filter: blur(26px) brightness(.5) saturate(1.1);
  transform: scale(1.06);
}

.live .livestream .live-stage .live-stage-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.live .livestream .live-stage.playing .live-stage-back,
.live .livestream .live-stage.playing .live-stage-thumb {
  display: none;
}

.live .livestream .live-stage .live-stage-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(0, 0, 0, .28);
  cursor: pointer;
}

.live .livestream .live-stage .live-stage-play-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #c19114;
  box-shadow: 0 14px 36px -10px rgba(0, 0, 0, .8);
  transition: transform .2s ease;
}

.live .livestream .live-stage .live-stage-play:hover .live-stage-play-dot {
  transform: scale(1.07);
}

.live .livestream .live-stage .live-stage-play-dot svg {
  width: 40px;
  height: 40px;
  fill: #101010;
  margin-left: 4px;
}

/* Sound. The automatic start has to be silent, so this is the one tap that
   turns it on. Under the frame rather than over it, so it can never cover the
   picture or fight with YouTube's own controls. */
.live .livestream .live-stage-sound {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 0;
  padding: 11px 22px;
  border: 1px solid rgba(193, 145, 20, .65);
  border-radius: 8px;
  background: rgba(193, 145, 20, .12);
  color: #dbbc6c;
  font-family: inherit;
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.live .livestream .live-stage-sound:hover {
  background: rgba(193, 145, 20, .24);
  border-color: #c19114;
  color: #f0d488;
}

.live .livestream .live-stage-sound[hidden] {
  display: none;
}

.live .livestream .live-stage-sound svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* ── Mobile ──
   A phone gets the stream at its natural shape rather than 90% of the screen
   height, so the schedule underneath is reachable without a long scroll. */
@media screen and (max-width: 768px) {
  .live .livestream .live-stage {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .live .livestream .live-stage .live-stage-play-dot {
    width: 62px;
    height: 62px;
  }

  .live .livestream .live-stage .live-stage-play-dot svg {
    width: 30px;
    height: 30px;
  }

  .live .livestream .live-stage-sound {
    width: 90%;
  }
}