/* Baseballový podcast — frontend
   Paleta a typografia vychádzajú priamo z klientových log (gold/red na čiernej,
   športovo-vysielačská estetika), nie z generického defaultu. */
:root{
  --bg:#0b0b0d; --bg-2:#151519; --card:#16161a;
  --red:#c22a2e; --red-dim:#7c1c1e;
  --gold:#c9a227; --gold-dim:#8a7020;
  --text:#f5f1e8; --muted:#9a978f; --border:#2a2a2f;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',sans-serif; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Inter',sans-serif; font-weight:700; letter-spacing:0.16px; line-height:1.1}
.hero h1{font-family:'Anton',sans-serif; font-weight:400; letter-spacing:0.08px; line-height:.92; text-transform:uppercase;}
h1{font-size:51px}

.hero h1{font-size:76px}
h2{font-size:32px; margin-bottom:16px}
.hero h2{font-size:46px}

a{color:inherit}
.container{max-width:1100px; margin:0 auto; padding:0 24px}

/* ── Header ─────────────────────────────────────────── */
header.site{
  position:sticky; top:0; z-index:20;
  background:rgba(11,11,13,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}

header.site .bar{display:flex; align-items:center; justify-content:space-between; padding:18px 24px; max-width:1100px; margin:0 auto;}

.site-header-bar{display:flex; align-items:center; gap:20px; flex:1;}
.mobilhide{display:inline-flex; align-items:center; gap:8px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{height:44px; width:auto;}
nav#main-nav ul{display:flex; gap:8px; list-style:none;}
nav#main-nav a{
  text-decoration:none; font-family:'Inter',sans-serif; font-weight:600;
  font-size:14px; letter-spacing:0.8px; text-transform:uppercase; color:var(--text);
  padding:8px 14px; border-radius:6px; transition:background .15s,color .15s;
}
nav#main-nav a:hover, nav#main-nav a.active{background:rgba(255,255,255,.06); color:var(--gold);}
.spotify-badge{ margin-left:50px; display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-size:13px; font-weight:600; letter-spacing:0.48px; text-transform:uppercase;}
.spotify-badge img{height:34px;}
.nav-hamburger{display:none; background:none; border:0; cursor:pointer;}
.nav-hamburger span{display:block; width:22px; height:2px; background:var(--text); margin:5px 0;}

/* ── Hero ───────────────────────────────────────────── */
.hero{
  position:relative; min-height:82vh; display:flex; align-items:center;
  background:
    linear-gradient(90deg, rgba(11,11,13,.97) 0%, rgba(11,11,13,.88) 30%, rgba(11,11,13,.45) 55%, rgba(11,11,13,.08) 72%),
    linear-gradient(180deg, rgba(11,11,13,.15) 0%, rgba(11,11,13,.1) 70%, var(--bg) 100%),
    url('../images/hero-bg.jpg') center/cover no-repeat;
}
.hero-inner{max-width:1100px; padding:24px; margin:0 0 0 120px;}
.hero-rule{width:350px; height:3px; background:var(--red); margin-bottom:22px;}



.hero h1{margin-bottom:18px;}
.hero p.lead{color:var(--muted); font-size:17px; max-width:440px; margin-bottom:30px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:24px;}

/* ── Buttons ────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; font-size:14px; font-weight:700; letter-spacing:0.64px; text-transform:uppercase;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer; font-family:'Inter',sans-serif;
  border-radius:5px; transition:transform .12s, background .15s, border-color .15s;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--red); color:#fff;}
.btn-primary:hover{background:#d6363a;}
.btn-outline{background:#000; color:var(--text); border-color:rgba(255,255,255,.35);}
.btn-outline:hover{border-color:#fff;}

/* ── Spotify v hero (len domovská stránka, pod tlačidlami) ──*/
.hero-spotify{display:inline-flex; align-items:center; gap:14px; text-decoration:none; margin-top:8px;}
.hero-spotify-label{color:var(--text); font-size:13px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase;}
.hero-spotify img{height:42px; width:auto; transition:transform .15s;}
.hero-spotify:hover img{transform:scale(1.04);}

/* ── Sections / cards ──────────────────────────────────*/
section{padding:72px 0;}
#najnovsia{border-top:1px solid var(--border);}
section.alt{background:var(--bg-2);}
.card{
  background:var(--card); border:1px solid var(--border); border-left:3px solid var(--gold);
  padding:24px; border-radius:5px;
}
.about-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:start;}
.about-grid p{color:var(--muted); margin-bottom:16px; max-width:60ch;}
.format-cards{display:flex; flex-direction:column; gap:16px;}
.format-card{display:flex; gap:14px; align-items:center;}
.format-card img{width:76px; height:76px; object-fit:cover; border-radius:50%; border:2px solid var(--gold);}
.format-card h3{font-size:16px; margin-bottom:4px;}
.format-card p{color:var(--muted); font-size:14px;}

/* ── Episode list ──────────────────────────────────────*/
.ep-filters{display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap;}
.ep-filters a{
  padding:8px 16px; border:1px solid var(--border); text-decoration:none; font-size:13px;
  letter-spacing:0.64px; text-transform:uppercase; color:var(--muted); font-family:'Inter',sans-serif; font-weight:600;
}
.ep-filters a.active{border-color:var(--red); color:var(--text); background:var(--red-dim);}
.episode{
  display:flex; align-items:center; gap:16px; padding:16px; margin-bottom:10px;
  background:var(--card); border:1px solid var(--border); border-radius:5px;
}
.episode img{width:52px; height:52px; object-fit:cover; border-radius:50%; flex-shrink:0;}
.episode .meta{flex:1; min-width:0;}
.episode h3{font-size:16px; font-weight:600; font-family:'Inter',sans-serif; margin-bottom:3px;}


.episode .desc{color:var(--muted); font-size:14px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}


.episode .date{color:var(--gold); font-size:12px; letter-spacing:0.64px; white-space:nowrap;}
/* ── Vlastný audio player ──────────────────────────────*/
.episode-player{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.ep-play{
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .15s;
}
.ep-play:hover{background:#d6363a;}
.ep-progress{
  width:160px; height:4px; background:var(--border); border-radius:2px;
  cursor:pointer; position:relative; flex-shrink:0;
}
.ep-bar{height:100%; width:0%; background:var(--red); border-radius:2px; transition:width .1s linear;}
.ep-time{font-size:12px; color:var(--muted); white-space:nowrap; min-width:80px;}

/* ── Guests ─────────────────────────────────────────── */
.guests-list{list-style:none; max-width:520px;}
.guests-list li{padding:12px 0; border-bottom:1px solid var(--border); color:var(--muted);}

/* ── Footer ─────────────────────────────────────────── */
footer{border-top:1px solid var(--border); padding:32px 0; color:var(--muted); font-size:13px;}
footer .row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width:760px){
  nav#main-nav{display:none;}
  .nav-hamburger{display:block;}
  .about-grid{grid-template-columns:1fr;}
  .ep-progress{width:80px;}
  .ep-time{min-width:60px;}
  .hero-inner{ padding:16px; margin:0!important;}
  .hero h1{font-size:51px}
  .hero h2{font-size:31px}
  .hero-rule{width:250px; height:2px;}
  .mobilhide{display:none;}
 
    .episode-player{grid-column:1 / -1; grid-row:4; width:100%;}
  .episode{display:grid; grid-template-columns:52px 1fr; grid-template-rows:auto auto auto; gap:10px 12px; align-items:start;}
  .episode img{grid-column:1; grid-row:1;}
  .episode .meta{grid-column:2; grid-row:1;}
  .episode .desc{grid-column:1 / -1; grid-row:2;}
  
  
  .episode .desc{-webkit-line-clamp:unset; overflow:visible;word-break: break-word; padding:3px}

  .episode .date{grid-column:1 / -1; grid-row:3;}

.ep-progress{flex:1;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;} }

/* ── Mobile menu drawer (markup/JS z includes/nav.php, štýl per projekt) ── */
.mobile-menu{
  position:fixed; top:0; right:-320px; width:300px; height:100vh; z-index:50;
  background:var(--bg-2); border-left:1px solid var(--border);
  padding:20px; transition:right .25s ease; overflow-y:auto;
}
.mobile-menu.open{right:0;}
.mobile-menu-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;}
.mobile-menu-header img{height:28px;}
.mobile-menu-close{background:none; border:0; color:var(--text); font-size:21px; cursor:pointer;}
.mobile-menu nav ul{list-style:none; display:flex; flex-direction:column; gap:4px;}
.mobile-menu nav a{display:block; padding:12px 4px; text-decoration:none; color:var(--muted); border-bottom:1px solid var(--border); text-transform:uppercase; font-size:14px; letter-spacing:0.64px;}
.mobile-menu nav a.active{color:var(--gold);}
.mobile-menu-cta{margin-top:20px; display:flex; flex-direction:column; gap:10px;}
.mobile-menu-cta .btn{width:100%; justify-content:center;}
.mobile-overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:40; opacity:0; pointer-events:none; transition:opacity .2s;}
.mobile-overlay.open{opacity:1; pointer-events:auto;}
body.menu-open{overflow:hidden;}
.dropdown{display:none; position:absolute; background:var(--bg-2); border:1px solid var(--border); list-style:none; padding:6px; min-width:160px;}
.has-drop{position:relative;}
.dropdown li a{display:block; padding:8px 12px; text-decoration:none; color:var(--muted); font-size:13px; text-transform:none;}

/* ── Footer (markup z includes/footer.php) ─────────────────*/
footer .footer{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
footer .footer-nav{display:flex; gap:18px; list-style:none;}
footer .footer-nav a{text-decoration:none; color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:0.48px;}
footer .footer-nav a:hover{color:var(--gold);}

/* ── Projektová hlavička (logo + menu + Spotify odkaz) ─────*/
.site-header-bar{display:flex; align-items:center; justify-content:space-between; gap:2px; flex:1;}