/* ══════════════════════════════════════════════════
   LOCALE LOUNGE — page-specific CSS
   ══════════════════════════════════════════════════
   Loaded BEFORE global.css so any selectors that
   collide (e.g. .hero base styles) lose the cascade.

   The :root color tokens, #main-nav, footer, crumbs,
   and base .btn rules in this file are intentionally
   left in place — they're harmless duplicates of
   global.css and were extracted verbatim from the
   standalone /new_localelounge.php mockup. global.css wins
   the cascade because it's enqueued AFTER this file.
   ══════════════════════════════════════════════════ */

:root{--spotify:#1DB954;--apple:#fc3c44;--amazon:#FF9900;--youtube:#FF0000;}
*{margin:0;padding:0;box-sizing:border-box;}html{scroll-behavior:smooth;}
body{font-family:var(--font);background:var(--obsidian);color:var(--text);overflow-x:clip;font-size:18px;line-height:1.65;}
.container{max-width:1360px;margin:0 auto;padding:0 2.5rem;}
.hero-wrap{position:relative;background:var(--hero-photo,var(--team-photo)) center 62%/cover no-repeat;}.hero-wrap::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,11,18,0.92),rgba(5,11,18,0.8),rgba(5,11,18,0.95));z-index:1;}.hero-wrap::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 60%,rgba(22,192,183,0.05),transparent 60%);z-index:2;}.hero-wrap>*{position:relative;z-index:3;}
.crumbs{padding:110px 0 20px;font-size:13px;color:var(--muted);}.crumbs a{color:var(--muted);text-decoration:none;}.crumbs a:hover{color:var(--teal);}.crumbs i{font-size:9px;margin:0 8px;opacity:0.5;}.crumbs span{color:var(--teal);}

/* Hero */
/* 30px of top padding against a 118px fixed nav meant the top third
   of the hero — and of its background image — sat behind the nav,
   which is what "the hero image gets cut off" was. 140px clears it,
   matching the other interior heroes. */
.hero{padding:140px 0 80px;}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.hero-text h1{font-size:clamp(38px,4.5vw,60px);font-weight:900;letter-spacing:-2px;line-height:1.0;margin-bottom:20px;}
.hero-text h1 em{font-style:normal;color:var(--teal);}
.hero-text .sub{font-size:20px;color:var(--muted);line-height:1.7;margin-bottom:28px;max-width:480px;}
.hero-hosts{display:flex;align-items:center;gap:12px;margin-bottom:28px;}
/* The pair, in one shot. */
.hero-hosts-photo{
  width:112px;
  aspect-ratio:3 / 2;
  object-fit:cover;
  object-position:center 22%;
  border-radius:10px;
  border:1px solid rgba(22,192,183,0.35);
  flex-shrink:0;
}
.hero-hosts-text{font-size:14px;font-weight:700;color:var(--muted);}
.hero-hosts-text strong{color:var(--text);}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font);font-weight:800;font-size:15px;border:none;cursor:pointer;text-decoration:none;transition:all 0.25s;border-radius:50px;padding:14px 28px;}
.btn-primary{background:var(--teal);color:#050b12;}.btn-primary:hover{background:#1ad4ca;box-shadow:0 0 26px var(--teal-glow);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--text);border:2px solid rgba(248,250,252,0.2);}.btn-ghost:hover{border-color:var(--teal);color:var(--teal);}
.btn-spotify{background:var(--spotify);color:#fff;}.btn-spotify:hover{box-shadow:0 0 20px rgba(29,185,84,0.4);transform:translateY(-2px);}

/* Embedded players
   ─────────────────
   Replaces a mockup of a player: a CSS cover, a JS-generated waveform
   and a play button that swapped its own icon and played nothing. The
   frames below are the real Spotify, Apple and YouTube players.

   Every embed is sized by its wrapper, never by the iframe's own
   width/height attributes — those are the platforms' defaults and are
   kept only so the frame has an intrinsic ratio before CSS loads. */
/* width:100% is load-bearing, not decoration. The hero wrapper takes
   margin:0 auto below 960px to centre it, and an auto margin stops a
   grid item stretching — so it shrink-to-fits, the iframe's width:100%
   has no definite parent to resolve against, and both collapse to an
   iframe's 300px intrinsic default. On a 390px screen that is a player
   50px narrower than everything around it. */
.pod-embed{width:100%;border-radius:16px;overflow:hidden;background:#111118;box-shadow:0 30px 80px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.05);}
.pod-embed iframe{display:block;width:100%;border:0;}

/* Spotify's video embed is 624x351 — a hair wider than 16:9. Matching
   it exactly avoids the letterbox bars a flat 16/9 would introduce. */
.pod-embed-hero iframe{aspect-ratio:624 / 351;height:auto;}

/* Apple's box player is a scrolling episode list, not a video, so it
   gets a fixed height rather than a ratio. 450px is the height Apple's
   own embed code ships with and the shortest that shows more than one
   episode. */
.pod-embed-apple iframe{height:450px;}

.pod-embed-video iframe{aspect-ratio:16 / 9;height:auto;}

/* Full-episode band */
.pods{padding:80px 0;}
.pods-head{text-align:center;margin-bottom:40px;}
.pods-head h2{font-size:clamp(30px,3.5vw,48px);font-weight:900;letter-spacing:-1px;margin-top:10px;}
.pods-head h2 em{font-style:normal;color:var(--teal);}
.pods-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;}
.pods-item h3{font-size:16px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:10px;}
.pods-item h3 .fa-apple{color:var(--apple);}
.pods-item h3 .fa-youtube{color:var(--youtube);}
.pods-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:700;color:var(--teal);text-decoration:none;}
.pods-link:hover{text-decoration:underline;}
.pods-link i{font-size:11px;}

/* Stats strip */
.stats{padding:60px 0;border-top:1px solid rgba(22,192,183,0.06);border-bottom:1px solid rgba(22,192,183,0.06);}
.stats-inner{display:flex;justify-content:center;gap:50px;flex-wrap:wrap;}
.stat{text-align:center;}.stat-val{font-family:var(--mono);font-size:40px;font-weight:800;color:var(--accent);line-height:1;}.stat-label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:6px;}

/* Platforms */
.platforms{padding:70px 0;background:var(--surface);}
.platforms-head{text-align:center;margin-bottom:40px;}.platforms-head h2{font-size:clamp(30px,3.5vw,48px);font-weight:900;letter-spacing:-1px;margin-bottom:10px;}.platforms-head h2 em{font-style:normal;color:var(--teal);}
.platform-cards{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;max-width:900px;margin:0 auto;}
.platform-card{flex:1;min-width:180px;max-width:200px;padding:28px 20px;border-radius:16px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);text-align:center;text-decoration:none;color:var(--text);transition:all 0.3s;display:flex;flex-direction:column;align-items:center;gap:10px;}
.platform-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.3);}
.platform-card i{font-size:32px;transition:color 0.3s;}
.platform-card span{font-size:14px;font-weight:800;}
.platform-card:hover i.fa-spotify{color:var(--spotify);}.platform-card:hover i.fa-apple{color:var(--apple);}
.platform-card:hover i.fa-amazon{color:var(--amazon);}.platform-card:hover i.fa-youtube{color:var(--youtube);}
.platform-card:hover{border-color:rgba(255,255,255,0.1);}
/* No URL for this platform, so no hover lift and no pointer — the card
   states that the show is there without promising a click. */
.platform-card-flat{cursor:default;color:var(--muted);}
.platform-card-flat:hover{transform:none;box-shadow:none;border-color:rgba(255,255,255,0.04);}

/* About section */
.about{padding:100px 0;}
.about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center;}
.about-label{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--teal);margin-bottom:12px;}
.about h2{font-size:clamp(34px,4vw,54px);font-weight:900;letter-spacing:-1.5px;line-height:1.0;margin-bottom:22px;}
.about h2 em{font-style:normal;color:var(--teal);}
.about p{font-size:17px;color:var(--muted);line-height:1.8;margin-bottom:16px;}
.about-topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.about-topic{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:700;background:rgba(22,192,183,0.06);border:1px solid rgba(22,192,183,0.1);color:var(--teal);transition:all 0.2s;}.about-topic:hover{background:rgba(22,192,183,0.12);border-color:rgba(22,192,183,0.25);}
/* Equalizer visual */
.eq-visual{background:#111118;border-radius:20px;padding:40px;display:flex;flex-direction:column;align-items:center;gap:24px;border:1px solid rgba(255,255,255,0.04);}
.eq-bars{display:flex;align-items:end;gap:4px;height:120px;}
.eq-bar{width:8px;border-radius:4px;background:var(--teal);animation:eqPulse 1.5s ease-in-out infinite;}.eq-bar:nth-child(1){animation-delay:0s;height:40%;}.eq-bar:nth-child(2){animation-delay:0.15s;height:70%;}.eq-bar:nth-child(3){animation-delay:0.3s;height:50%;}.eq-bar:nth-child(4){animation-delay:0.1s;height:90%;}.eq-bar:nth-child(5){animation-delay:0.25s;height:60%;}.eq-bar:nth-child(6){animation-delay:0.4s;height:80%;}.eq-bar:nth-child(7){animation-delay:0.05s;height:45%;}.eq-bar:nth-child(8){animation-delay:0.35s;height:75%;}.eq-bar:nth-child(9){animation-delay:0.2s;height:55%;}.eq-bar:nth-child(10){animation-delay:0.15s;height:85%;}.eq-bar:nth-child(11){animation-delay:0.3s;height:40%;}.eq-bar:nth-child(12){animation-delay:0.45s;height:65%;}
@keyframes eqPulse{0%,100%{transform:scaleY(0.4);opacity:0.4;}50%{transform:scaleY(1);opacity:0.9;}}
.eq-label{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--teal);}
.eq-hosts{display:flex;gap:20px;}
.eq-host{text-align:center;}
.eq-host img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid rgba(22,192,183,0.2);margin-bottom:6px;display:block;}
.eq-host span{font-size:12px;font-weight:800;display:block;}
.eq-host small{font-size:10px;color:var(--muted);font-weight:600;}

/* Guest CTA */
.guest{padding:100px 0;background:var(--surface);}
.guest-inner{max-width:700px;margin:0 auto;text-align:center;}
.guest h2{font-size:clamp(34px,4vw,54px);font-weight:900;letter-spacing:-1.5px;line-height:1.05;margin-bottom:18px;}.guest h2 em{font-style:normal;color:var(--teal);}
.guest p{font-size:18px;color:var(--muted);line-height:1.75;margin-bottom:12px;max-width:560px;margin-left:auto;margin-right:auto;}
.guest-checks{display:flex;flex-direction:column;gap:10px;align-items:center;margin:24px 0 32px;}
.guest-check{font-size:15px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;}.guest-check i{color:var(--teal);font-size:13px;}

/* SEO content */
.seo-content{padding:80px 0;}
.seo-inner{max-width:860px;margin:0 auto;}
.seo-inner h2{font-size:clamp(28px,3vw,42px);font-weight:900;letter-spacing:-1px;margin-bottom:18px;}.seo-inner h2 em{font-style:normal;color:var(--teal);}
.seo-inner p{font-size:17px;color:var(--muted);line-height:1.8;margin-bottom:18px;}
.seo-inner h3{font-size:22px;font-weight:900;margin:32px 0 12px;}

.cta{padding:100px 0;position:relative;overflow:hidden;background:linear-gradient(135deg,#0d1f2d,#0a1a26,#0d2535);}.cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 50% 50%,rgba(22,192,183,0.08),transparent 60%);}.cta-inner{position:relative;z-index:1;text-align:center;max-width:700px;margin:0 auto;}.cta h2{font-size:clamp(34px,4vw,54px);font-weight:900;letter-spacing:-1px;line-height:1.08;margin-bottom:18px;}.cta h2 em{font-style:normal;color:var(--teal);}.cta p{font-size:18px;color:rgba(248,250,252,0.6);line-height:1.7;margin-bottom:36px;}.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
@media(max-width:960px){.hero-grid,.about-grid,.pods-grid{grid-template-columns:1fr;}
/* min() rather than a flat 400px: on a 390px screen the fixed width
 * overflowed the viewport. */
.pod-embed-hero{max-width:min(560px,100%);margin:0 auto;}}
@media(max-width:600px){.platform-cards{flex-direction:column;align-items:center;}.platform-card{max-width:100%;min-width:0;width:100%;flex-direction:row;padding:16px 20px;}.stats-inner{gap:28px;}.stat-val{font-size:30px;}.eq-bars{height:80px;}}