/* ============================================================
   Lantern Landing — hero ring, Home: the YouTube tab

   The ring, desktop and phones. Two tabs sit in the still frame's strip (article and
   YouTube); body.hero-yt lays a YouTube watch page over the live window's
   page. lantern-hero-yt.js.
   ============================================================ */
.car-tabs,
#hero .hh-yt { display: none; }

#hero .car-frame .car-tabs {
  position: absolute; left: 62px; right: 12px; top: 4px;
  /* ends on the page's top edge, not over the article's photo */
  height: calc(var(--car-strip-h, 27px) - 5px);
  display: flex; align-items: flex-end; gap: 2px;
  opacity: 0; transition: opacity .3s ease;
}
body.hero-yt-ready #hero .car-frame .car-tabs { opacity: 1; }
#hero .car-tab {
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; gap: 6px; height: 100%;
  padding: 0 12px 0 8px; max-width: 42%;
  border-radius: 7px 7px 0 0; background: transparent;
  font: 500 11px/1 var(--sans); color: var(--ink-45);
  transition: background .2s ease, color .2s ease;
}
#hero .car-tab:hover { color: var(--ink-70); }
#hero .car-tab.on { background: #fff; color: var(--ink-70); }
#hero .car-tab-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hero .car-tab-fav {
  width: 12px; height: 12px; border-radius: 3px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font: 700 7px var(--sans); color: #fff;
  background: linear-gradient(155deg, #e0453a, #b3271d);
}
#hero .car-tab-fav.yt { background: #f00; font-size: 6px; }

#hero .hh-yt {
  display: grid; grid-template-columns: minmax(0, 1fr) 21%; grid-template-rows: minmax(0, 1fr); gap: 16px;
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--car-strip-h, 27px) - 1px);
  z-index: 5; background: #fff; padding: 14px 18px; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;
}
body.hero-yt .hw-popup { visibility: hidden !important; }
body.hero-yt #hero .hh-yt { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }

/* a short window flattens the player instead of pushing the comment out */
#hero .hh-yt-main { display: flex; flex-direction: column; min-height: 0; }
#hero .hh-yt-main > * { flex: none; }
#hero .hh-yt-main > .hh-yt-player { flex: 0 1 auto; min-height: 0; }
#hero .hh-yt-player {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: #141216 url("/hero-yt-podcast.jpg") center / cover no-repeat;
}
#hero .hh-yt-dim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.45) 100%); }
#hero .hh-yt-line {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 3;
  white-space: nowrap; padding: .15em .5em; border-radius: 4px;
  background: rgba(23,23,23,.78); color: #fff;
  font: 400 13.5px/1.5 Roboto, Arial, sans-serif;
}
#hero .hh-yt-w { position: relative; display: inline-block; border-radius: 2px; cursor: default; transition: background .2s ease, color .2s ease; }
#hero .hh-yt-w.saved { color: #8ab4ff; }
#hero .hh-yt-w.on { background: #78350f; color: #fff; }
#hero .hh-yt-tip {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) translateY(4px);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  background: #232323; border: 1px solid #333; border-radius: 8px; padding: 5px 5px 5px 11px;
  box-shadow: 0 8px 32px rgba(23,23,23,.3), 0 2px 8px rgba(23,23,23,.15);
  opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
/* bridges the 6px gap so the tip stays open on the way to its bookmark */
#hero .hh-yt-tip::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
#hero .hh-yt-w.on .hh-yt-tip { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
#hero .hh-yt-tip .tr { font: 500 12.5px/1.3 Inter, var(--sans); color: #fff; }
#hero .hh-yt-tip .bm {
  width: 22px; height: 22px; border: 0; padding: 0; border-radius: 6px; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: #a3a3a3; cursor: pointer;
}
#hero .hh-yt-tip .bm:hover { background: rgba(255,255,255,.08); color: #fff; }
#hero .hh-yt-tip .bm svg { width: 13px; height: 13px; }
#hero .hh-yt-tip .bm.saved { color: var(--amber, #f59e0b); cursor: default; }
#hero .hh-yt-tip .bm.saved svg { fill: currentColor; }
#hero .hh-yt-tip .bm.pulse { color: var(--amber, #f59e0b); animation: hh-yt-pulse 1.4s ease-out infinite; }
@keyframes hh-yt-pulse {
  0% { box-shadow: 0 0 0 0 rgba(245,158,11,.7); }
  70% { box-shadow: 0 0 0 9px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
@media (prefers-reduced-motion: reduce) { #hero .hh-yt-tip .bm.pulse { animation: none; box-shadow: 0 0 0 2px var(--amber, #f59e0b); } }

#hero .hh-yt-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 10px 8px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55)); }
#hero .hh-yt-prog { position: relative; height: 3px; background: rgba(255,255,255,.28); margin-bottom: 7px; }
#hero .hh-yt-prog::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: #f00; }
#hero .hh-yt-prog::after { content: ""; position: absolute; left: 38%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: #f00; transform: translate(-50%, -50%); }
#hero .hh-yt-ctl { display: flex; align-items: center; gap: 10px; color: #fff; font: 10px var(--sans); }
#hero .hh-yt-ctl .play { width: 0; height: 0; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
#hero .hh-yt-ctl .time { opacity: .85; font-variant-numeric: tabular-nums; }
#hero .hh-yt-ctl .cc { margin-left: auto; font-weight: 700; font-size: 9px; letter-spacing: .04em; border: 1.5px solid #fff; border-radius: 3px; padding: 0 3px; box-shadow: 0 2px 0 #f00; }

#hero .hh-yt-title { margin: 8px 0 6px; font: 700 13.5px/1.3 'General Sans', var(--sans); color: var(--ink); }
#hero .hh-yt-ch { display: flex; align-items: center; gap: 8px; font: 600 11.5px/1.2 var(--sans); color: var(--ink-70); }
#hero .hh-yt-ch i { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(150deg, #e7a14a, #8a4b12); flex: none; }
#hero .hh-yt-ch s { text-decoration: none; display: block; font-weight: 400; font-size: 10px; color: var(--ink-45); margin-top: 2px; }
#hero .hh-yt-ch b { margin-left: auto; background: var(--ink); color: #fff; font: 600 10.5px/1 var(--sans); padding: 6px 10px; border-radius: 999px; }

#hero .hh-yt-cm {
  display: flex; gap: 8px; margin-top: 9px; padding-top: 8px; border-top: 1px solid #efeae0;
  opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease;
}
#hero .hh-yt-cm.show { opacity: 1; transform: none; }
#hero .hh-yt-cm i { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(150deg, #9fb7d9, #4d6a96); flex: none; }
#hero .hh-yt-cm p { margin: 0; font: 400 13px/1.4 var(--sans); color: var(--ink); }
#hero .hh-yt-cm s { text-decoration: none; display: block; font-weight: 600; font-size: 11px; color: var(--ink-70); margin-bottom: 2px; }
#hero .hh-yt-cw { border-radius: 3px; padding: 0 2px; margin: 0 -2px; transition: color .3s ease, background .3s ease; }
#hero .hh-yt-cw.saved { color: #1f5bc4; font-weight: 600; background: rgba(47,111,214,.14); animation: hh-yt-glow 1.1s ease-out 3; }
@keyframes hh-yt-glow {
  0% { box-shadow: 0 0 0 0 rgba(47,111,214,.55); }
  100% { box-shadow: 0 0 0 8px rgba(47,111,214,0); }
}
#hero .hh-yt-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; }
#hero .hh-yt-rec u { display: block; aspect-ratio: 16 / 9; border-radius: 8px; background: linear-gradient(140deg, #ece6da, #d9d1c2); }
#hero .hh-yt-rec:nth-child(2) u { background: linear-gradient(140deg, #dfe5ea, #c4ccd4); }
#hero .hh-yt-rec:nth-child(3) u { background: linear-gradient(140deg, #eadfd8, #d4c2b6); }
#hero .hh-yt-rec em { display: block; height: 7px; border-radius: 4px; background: #ebe6dc; margin-top: 7px; width: 92%; }
#hero .hh-yt-rec em + em { width: 58%; margin-top: 5px; }

/* the subtitle breaks before "showing up" on phones only, so its tip opens
   inside the player instead of past its right edge */
#hero .hh-yt-br { display: none; }

/* ── phones: one column — the recommendations go, the player takes the width ── */
@media (max-width: 920px) {
  /* clear of the window dots (they end ~53px in), as on desktop */
  #hero .car-frame .car-tabs { left: 62px; right: 8px; }
  #hero .car-tab { padding: 0 9px 0 7px; font-size: 10.5px; max-width: 46%; }
  #hero .hh-yt { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  #hero .hh-yt-side { display: none; }
  /* the player keeps 16:9 — a short phone window drops the page's extras
     instead (desktop flattens it, which on a phone left a strip under the
     subtitle and the controls) */
  #hero .hh-yt-main > .hh-yt-player { flex: none; }
  #hero .hh-yt-ch { display: none; }
  #hero .hh-yt-title { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* slimmer controls; the subtitle sits clear above them */
  #hero .hh-yt-bar { padding: 0 8px 5px; }
  #hero .hh-yt-prog { margin-bottom: 5px; }
  #hero .hh-yt-ctl { font-size: 9px; }
  #hero .hh-yt-br { display: inline; }
  #hero .hh-yt-line { bottom: 30px; text-align: center; font-size: 11.5px; line-height: 1.45; }
  /* the tip scales with the smaller subtitle (desktop: 12.5px over 13.5px) */
  #hero .hh-yt-tip { gap: 5px; padding: 3px 3px 3px 8px; border-radius: 6px; bottom: calc(100% + 4px); }
  #hero .hh-yt-tip .tr { font-size: 10.5px; }
  #hero .hh-yt-tip .bm { width: 18px; height: 18px; border-radius: 4px; }
  #hero .hh-yt-tip .bm svg { width: 11px; height: 11px; }
}
/* a short window gives up the page's extras step by step, so the video keeps
   16:9 and the comment (the payoff: "showed up" turning blue) always fits */
@media (max-width: 920px) {
  @container hero-win (max-height: 330px) {
    #hero .hh-yt-title { display: none; }
    #hero .hh-yt-cm { margin-top: 8px; }
  }
  @container hero-win (max-height: 300px) {
    #hero .hh-yt-cm-lead { display: none; }
    #hero .hh-yt-cm p { font-size: 12px; }
  }
  @container hero-win (max-height: 260px) {
    #hero .hh-yt-cm { margin-top: 6px; padding-top: 6px; }
    #hero .hh-yt-cm i,
    #hero .hh-yt-cm s { display: none; }
  }
}