/* 2026-08-11 batch — ported in full from the approved mockup
   (SBN-Radio-handover-Peter/webradio-retning-c-galaksekort.html) per the
   "100% follow the documentation" directive. Every rule below traces to
   that file's own embedded <style> block; scrim/live-pill/footer-credit/
   connect-row base styling already lives in
   webradio-base.css and is reused as-is (this file only adds what's
   home-page-specific or needs a home-page-scoped override). CSS pulled
   out into this external file rather than inline, per explicit
   instruction, so it stays easy to tweak later. */

/* --- No-scroll desktop layout (mockup: "the whole page fits in one
   viewport height", punkt 18) ---
   2026-09-09 batch, brugerønske (odd/short-screen pass, e.g. car head
   units — wide enough to hit this breakpoint but often only 480-600px
   TALL): this was `height:100vh; overflow-y:hidden` with
   `.hero{overflow:hidden}`, the exact same "silently CLIPS/overlaps
   content on shorter screens" bug webradio-station.css's own
   body.no-scroll-hero already got fixed for on 2026-08-25 (see that
   file's own comment) — home.html just never received the same port.
   `min-height` + no overflow lock keeps the same "starts full-height"
   feel on normal desktop monitors, but now lets the page grow and scroll
   naturally instead of squeezing the header/hero/ticket-band/footer into
   each other the instant they don't all fit in one short viewport.

   Threshold widened 901px->1301px in this same batch, together with the
   header-stacking breakpoint further down. The 3-column header's
   un-wrapping brand/alliance labels have a combined natural minimum width
   around ~1580px; below that, down to ~1250px, the header elements visually
   collide. Kept as one
   shared threshold so "3-column header" and "one-viewport-height hero"
   always turn on/off together — a stacked header inside a rigid no-
   scroll-hero box was never a combination this page was designed for. */
@media (min-width:1301px){
  /* height:auto overrides webradio-base.css's own unconditional
     `body{height:100%}` — left in place, that explicit height would keep
     winning over min-height below (an explicit height and a min-height of
     the same computed value don't "add up," the explicit one still wins),
     silently re-introducing the exact flex-shrink-everything-to-fit
     collapse this whole rule exists to prevent. auto lets the box size to
     its actual content (at least 100vh, taller if content needs more). */
  body.no-scroll-hero{height:auto; min-height:100vh; display:flex; flex-direction:column;}
  body.no-scroll-hero #page-main{display:flex; flex-direction:column; flex:1; min-height:0;}
  body.no-scroll-hero .hero{flex:1; min-height:0;}
  body.no-scroll-hero .bottom-safe{flex:none; height:96px;}
}
@media (min-width:1500px) and (min-height:850px){
  body.no-scroll-hero .hero-main{transform:translateY(-50px);}
}
@media (max-width:1300px){
  body.no-scroll-hero{background-attachment:scroll; padding-bottom:130px;}
}

/* Homepage identity only: keep the existing station band and global player
   geometry; the shared base and individual station pages remain unchanged. */
body.no-scroll-hero .scrim{
  background:linear-gradient(to bottom,rgba(2,7,14,.12) 0%,rgba(2,7,14,.2) 35%,rgba(2,7,14,.38) 70%,rgba(2,7,14,.9) 100%);
}

.micro-line{
  position:relative; z-index:5; text-align:center; margin-bottom:4px;
  font-size:10px; letter-spacing:.35em; color:var(--ink-dim); text-transform:uppercase;
}
.micro-line span{color:var(--gold); margin:0 10px;}

header{
  padding:6px 50px; gap:20px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
header .brand{display:flex; align-items:center; gap:20px; font-weight:normal; justify-self:start;}
header .brand img{height:104px; filter:drop-shadow(0 0 22px rgba(230,184,102,.35));}
header .brand .word b{display:block; letter-spacing:.1em; font-size:26px; color:#cbb58c; font-weight:800; line-height:1.05; white-space:nowrap;}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  header .brand .word b{
    background:linear-gradient(175deg,#eee0bf 0%,#c5a573 48%,#dec89b 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
}
header .brand .word small{display:block; letter-spacing:.2em; font-size:10px; color:var(--ink-dim); margin-top:6px; text-transform:uppercase;}
header .alliance{display:flex; align-items:center; gap:14px; text-align:right; justify-self:end;}
header .alliance img{height:86px;}
header .alliance .word b{display:block; font-size:12px; letter-spacing:.14em; color:var(--ink); text-transform:uppercase; white-space:nowrap;}
header .alliance .word small{display:block; font-size:9px; letter-spacing:.1em; color:var(--ink-dim); margin-top:4px; white-space:nowrap;}

.header-center{
  flex:1; display:flex; flex-direction:column; align-items:center; text-align:center;
  align-self:start; padding-top:6px;
}

.features{
  position:relative; z-index:5; display:flex; justify-content:center; gap:28px;
  padding:4px 20px 0; font-size:11px; letter-spacing:.08em; color:var(--ink-dim); text-transform:uppercase;
}
.features span{color:var(--gold); margin-right:6px;}

.hero{
  position:relative; z-index:5; min-height:auto;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:8px 20px 24px;
}
.hero-main{
  flex:1; min-height:0; width:100%; padding-top:30px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.hero-main .eyebrow{font-size:12px; letter-spacing:.4em; color:var(--gold); text-transform:uppercase; margin-bottom:10px;}
.hero-main h1{
  font-size:clamp(32px, 6vw, 68px); font-weight:900; letter-spacing:-.01em; line-height:.98;
  text-transform:uppercase; margin-bottom:8px; color:#fff;
  text-shadow:0 0 50px rgba(230,184,102,.25);
}
.hero-main p{color:var(--ink-dim); font-size:14px; max-width:620px; margin:0 auto 18px;}
.hero-main .network-signature{
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:500;
  font-size:clamp(24px,2vw,38px); line-height:38px; color:var(--gold);
  max-width:min(100%,620px); text-shadow:0 2px 18px rgba(0,0,0,.5);
}
.site-footer{width:100%; flex:none;}
@media (max-width:1300px){
  .site-footer{padding-bottom:78px;}
}

/* --- Station ticket band --- */
/* 2026-08-12 batch, brugerrapporteret: needs more breathing room from the
   heading/intro text above it — was relying entirely on .hero p's own
   margin-bottom, with nothing of its own. Kept modest to stay inside the
   single-viewport-height constraint on desktop (body.no-scroll-hero
   above). */
.band{
  position:relative; z-index:5; width:100%; max-width:1320px; margin:26px auto 14px;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
}
.ticket{
  --ticket-rgb:230,184,102;
  position:relative; isolation:isolate; min-width:0; min-height:174px;
  display:grid; grid-template-columns:104px minmax(0,1fr); align-items:center; gap:15px;
  padding:15px; text-align:left; text-decoration:none; color:var(--ink);
  border:1px solid rgba(var(--ticket-rgb),.3); border-radius:15px; overflow:hidden;
  background:
    radial-gradient(circle at 5% 20%,rgba(var(--ticket-rgb),.16),transparent 48%),
    linear-gradient(145deg,rgba(10,20,31,.93),rgba(3,8,15,.88));
  box-shadow:0 14px 38px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.035);
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,background .24s ease;
}
.ticket::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.42;
  background:linear-gradient(110deg,transparent 42%,rgba(var(--ticket-rgb),.12) 72%,transparent 100%);
  transform:translateX(-42%); transition:transform .55s ease,opacity .3s ease;
}
.ticket:hover,.ticket:focus-visible{
  transform:translateY(-4px); border-color:rgba(var(--ticket-rgb),.66);
  box-shadow:0 20px 46px rgba(0,0,0,.34),0 0 26px rgba(var(--ticket-rgb),.12),inset 0 1px 0 rgba(255,255,255,.06);
  outline:none;
}
.ticket:hover::before,.ticket:focus-visible::before{transform:translateX(38%); opacity:.8;}
.ticket.stellar{--ticket-rgb:197,140,255;}
.ticket.quantum{--ticket-rgb:74,204,247;}
.ticket.pulse{--ticket-rgb:255,77,177;}
.ticket.redneck{--ticket-rgb:220,154,76;}
.ticket .orb{
  position:relative; width:100px; height:100px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.13),transparent 60%),#07090d;
  transition:transform .24s ease,filter .24s ease;
}
.ticket .orb img{width:100%; height:100%; object-fit:contain; border-radius:50%;}
.ticket .orb{box-shadow:0 0 24px 2px rgba(var(--ticket-rgb),.36);}
.ticket:hover .orb,.ticket:focus-visible .orb{transform:scale(1.035); filter:brightness(1.08);}
.ticket.is-playing .orb{outline:2px solid var(--gold); outline-offset:4px;}

/* 2026-08-12 batch: now has its own click handler (home.html) that starts
   playback in the global now-bar without navigating — the rest of the
   card still navigates to the station page as before. */
.play-badge{
  position:absolute; right:-3px; bottom:2px; z-index:2;
  width:34px; height:34px; border-radius:50%; border:3px solid #050910;
  background:var(--gold); color:#1a1204; font-size:11px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.55); transition:transform .15s ease,box-shadow .15s ease;
  cursor:pointer;
}
.ticket:hover .play-badge{transform:scale(1.1); box-shadow:0 5px 18px rgba(var(--ticket-rgb),.3);}
.ticket .copy{min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-start; padding-top:2px;}
.ticket .name{font-size:15px; font-weight:800; letter-spacing:.025em; line-height:1.05;}
.ticket .tag{font-size:10px; letter-spacing:.06em; text-transform:uppercase; margin:2px 0 6px; font-weight:700; color:var(--gold);}
.ticket.stellar .tag{color:#ff8fd9;}
.ticket.quantum .tag{color:#7fd6f5;}
.ticket.pulse .tag{color:#ff5cb8;}
.ticket.redneck .tag{color:#d8a05c;}
.ticket .blurb{min-height:47px; font-size:11px; color:var(--ink-dim); line-height:1.4;}
.ticket .live-pill{font-size:9px; margin:7px 0 0;}
.ticket .explore{
  display:flex; align-items:center; gap:6px; margin-top:8px;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  color:var(--gold); opacity:.7; transition:opacity .2s ease;
}
.ticket .explore .arrow{display:inline-block; transition:transform .2s ease;}
.ticket:hover .explore, .ticket:focus-visible .explore{opacity:1;}
.ticket:hover .explore .arrow, .ticket:focus-visible .explore .arrow{transform:translateX(4px);}

.ribbon{
  position:relative; z-index:5; display:flex; align-items:center; gap:16px;
  width:100%; max-width:760px; margin:0 auto 12px;
}
.ribbon .line{flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(230,184,102,.5), transparent);}
.ribbon .txt{font-size:11px; letter-spacing:.3em; color:var(--gold); text-transform:uppercase; white-space:nowrap;}

.cta-row{position:relative; z-index:5; display:flex; gap:16px; margin-bottom:14px;}
.cta{padding:12px 30px; border-radius:3px; text-decoration:none; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;}
.cta.primary{background:var(--gold); color:#1a1204;}
/* 2026-08-16 batch — second CTA added alongside the existing primary one
   (see the Weekly Schedule page link) — an outline variant, not a second
   competing gold-filled button. */
.cta.secondary{border:1px solid rgba(230,184,102,.4); color:var(--gold); background:transparent;}
.cta.secondary:hover{border-color:var(--gold); background:rgba(230,184,102,.08);}

@media (prefers-reduced-motion:reduce){
  .ticket{transition:none;}
}

.hero .footer-credit, .hero .connect-row{margin-left:auto; margin-right:auto;}
.creative-process-note{
  position:relative; z-index:5; max-width:720px; margin:6px auto 0; padding:0 16px;
  color:rgba(207,200,190,.58); font-size:9px; line-height:1.45; letter-spacing:.025em;
  text-align:center;
}

/* Editorial doorway into the public Hosts & Shows universe. */
.hosts-badge{display:none;}
.hosts-mobile-link{display:none;}
@media (min-width:1301px){
  .hosts-badge{
    display:block; position:fixed; z-index:6; right:5%; top:calc(18% - 55px);
    width:165px; padding:13px 13px 16px; border-radius:16px;
    background:rgba(2,1,3,.58); border:1.5px solid rgba(230,184,102,.5);
    backdrop-filter:blur(7px); text-decoration:none; color:var(--ink);
    text-align:center; transform:rotate(6deg);
    animation:hosts-pulse 3.4s ease-in-out infinite;
    transition:transform .25s ease;
  }
  .hosts-badge:hover{transform:rotate(6deg) scale(1.08);}
}
.hosts-badge img{
  /* The broad microphone is intentionally larger than the card. Its natural
     proportions stay intact while the artwork breaks through the top and
     both side edges. */
  position:relative; z-index:1;
  width:148%; max-width:none; height:auto; aspect-ratio:auto; object-fit:contain; display:block;
  margin:-58px -24% -48px;
  border-radius:50%; filter:drop-shadow(0 4px 10px rgba(0,0,0,.7));
  -webkit-mask-image:radial-gradient(circle,black 54%,transparent 72%);
  mask-image:radial-gradient(circle,black 54%,transparent 72%);
}
.hosts-badge .hosts-tag,.hosts-badge .hosts-title,.hosts-badge .hosts-sub{position:relative; z-index:2;}
.hosts-badge .hosts-tag{display:block; font-size:9px; letter-spacing:.2em; color:#66e7f2; text-transform:uppercase; font-weight:800;}
.hosts-badge .hosts-title{display:block; margin:4px 0; color:#fff; font-size:15px; font-weight:900; letter-spacing:.02em; text-transform:uppercase;}
.hosts-badge .hosts-sub{display:block; color:var(--ink-dim); font-size:9px; line-height:1.3;}
@keyframes hosts-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(74,218,238,.26);}
  50%{box-shadow:0 0 0 12px rgba(74,218,238,0);}
}
@media (prefers-reduced-motion:reduce){.hosts-badge{animation:none;}}
@media (max-width:1300px){.hosts-mobile-link{display:inline-flex; align-items:center; justify-content:center;}}
@media (max-width:620px){.cta-row{flex-direction:column; width:min(100%,360px);}.cta-row .cta{width:100%;}}

.bottom-safe{flex:none; height:0;}

/* now-bar + bio/lyrics modal CSS moved to webradio-base.css (2026-08-11
   batch) — the now-bar is now a single global component in base.html,
   shared across all pages instead of duplicated per page. */

/* --- Mobile ---
   2026-09-09 batch: threshold widened 900px->1300px, see the
   no-scroll-hero rule's own comment up top for the measured reason. */
@media (max-width:1300px){
  header{grid-template-columns:1fr; justify-items:center; gap:18px; padding:18px 20px 0; text-align:center;}
  header .brand{flex-direction:column; gap:10px; justify-self:center;}
  header .brand .word{text-align:center;}
  header .brand img{height:64px;}
  header .brand .word b{font-size:18px; white-space:normal;}
  header .alliance{align-self:center; flex-direction:column-reverse; gap:10px; text-align:center; justify-self:center;}
  header .alliance .word{text-align:center;}
  header .alliance .word small{margin-top:2px;}
  .features{flex-wrap:wrap; gap:10px 18px; font-size:9px;}
  .band{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:820px;}
  .ticket{
    width:100%;
  }
  .hero .footer-credit{margin-bottom:20px; flex-direction:column; gap:6px; text-align:center;}
}
@media (max-width:720px){
  .band{grid-template-columns:1fr; width:min(100%,430px); gap:10px;}
  .ticket{min-height:154px; grid-template-columns:92px minmax(0,1fr); padding:13px;}
  .ticket .orb{width:88px; height:88px;}
  .ticket .blurb{min-height:0;}
}
@media (max-width:600px){
  .micro-line{font-size:8px; letter-spacing:.2em;}
  header .brand img{height:52px;}
  header .brand .word b{font-size:14px;}
  header .alliance img{height:44px;}
  header .alliance .word b{font-size:10px;}
  .hero p{font-size:14px;}
  .cta{padding:13px 24px; font-size:11px;}
  .cta-row{flex-wrap:wrap; justify-content:center;}
  /* 2026-09-09 batch, brugerønske (odd/uncommon-size pass) — found via a
     real horizontal-overflow sweep (document.documentElement.scrollWidth
     > clientWidth), not just eyeballing: white-space:nowrap on a flex
     item with no width cap forces the whole .ribbon row to overflow
     rather than shrink once the (already-compact) text is still wider
     than very narrow viewports (~320px kiosk displays). Letting it wrap
     removes that floor entirely — the two flanking .line gradients are
     flex:1 with no content of their own, so they happily shrink to
     whatever's left, same visual "text between two fading lines" look,
     just on two lines when it truly doesn't fit one. */
  .ribbon .txt{font-size:9px; letter-spacing:.2em; white-space:normal; text-align:center;}
}