/* Bootstrap max-width override: az onki design 1200px-es containert használ
   (Bootstrap alapból 1140/1320px breakpointoktól függően). */
.container{max-width:1200px;}

/* Bootstrap col-md-* alapból 768px-en lép be, az onki design 880px-et
   használ töréspontként — ezért a 768-880px közötti sávban a col-md
   értékeket visszaállítjuk 100%-ra (mobil viselkedés), és csak 881px
   felett érvényesítjük a Bootstrap md-értékeit. */
@media (min-width:768px) and (max-width:880px){
  .col-md-4,.col-md-6,.col-md-8{flex:0 0 100%;max-width:100%;}
}

  @font-face{
    font-family:'Macklin';
    font-weight:900;
    font-display:swap;
    src:url('../inc/fonts/macklin/macklin-black.woff') format('woff');
  }
  @font-face{
    font-family:'Macklin';
    font-weight:800;
    font-display:swap;
    src:url('../inc/fonts/macklin/macklin-extrabold.woff') format('woff');
  }
  @font-face{
    font-family:'Macklin';
    font-weight:500;
    font-display:swap;
    src:url('../inc/fonts/macklin/macklin-medium.woff') format('woff');
  }
  @font-face{
    font-family:'Macklin';
    font-weight:400;
    font-display:swap;
    src:url('../inc/fonts/macklin/macklin-regular.woff') format('woff');
  }

  :root{
    --bg-deep:#0a0d0d;
    --bg-petrol:#0f2027;
    --bg-card:#15191a;
    --bg-card-2:#1b2022;
    --gold:#e8a33d;
    --gold-deep:#c97f1f;
    --teal:#4890a4;
    --white:#f3f1ea;
    --grey:#8c9295;
    --grey-line:#2a2f30;
    --bg-apoc-img:url('../inc/img/hero-apocalypse-bg.jpg');
    --agi-cutout-img:url('../inc/img/host-agi-cutout.png');
  }

  *{box-sizing:border-box;}
  /* Bootstrap a h1-h6 elemekre saját --bs-heading-color-t ad, ami
     felülírja az öröklött fehér/világos színt — itt globálisan
     visszaállítjuk az öröklésre, hogy semelyik kártya-cím se legyen
     véletlenül fekete/sötétszürke. */
  h1,h2,h3,h4,h5,h6{color:inherit;}
  html,body{margin:0;padding:0;overflow-x:hidden;}
  body{
    background:var(--bg-deep);
    color:var(--white);
    font-family:'Macklin',sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  button{font-family:'Macklin',sans-serif;}

  .display{
    font-family:'Macklin',sans-serif;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.3px;
  }
  .eyebrow{
    font-family:'Macklin',sans-serif;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:2.5px;
    font-size:12.5px;
    color:var(--gold);
  }

  /* ---------- header ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:#000;
    transform:translateY(0);
    transition:transform .25s ease;
  }
  header.nav-hidden{
    transform:translateY(-100%);
  }
  /* body padding-top hogy a fixed header ne takarjon el tartalmat */
  body{
    padding-top:75px; /* header magassága: ~75px (14px padding * 2 + 46px elem) */
  }
  .header-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 0;
  }
  .brand{display:flex;align-items:center;gap:14px;cursor:pointer;}
  .nav-temp-tag span{text-transform:lowercase;opacity:0.75;}
  .brand-mark{
    width:46px;height:46px;
    margin-left:10px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .brand-mark img{width:100%;height:100%;object-fit:contain;}
  .brand-name{
    font-family:'Macklin',sans-serif;
    font-weight:900;
    line-height:1.08;
    text-transform:uppercase;
  }
  .brand-name div{font-size:18px;letter-spacing:0.5px;color:var(--white);}

  nav.main-nav{display:flex;gap:26px;}
  /* wp_nav_menu() ul+li struktúrát generál — reset */
  nav.main-nav ul,
  .mobile-menu ul{
    list-style:none;
    margin:0;padding:0;
    display:contents; /* li-k közvetlenül a flex/block layoutba kerülnek */
  }
  nav.main-nav li{display:contents;}
  .mobile-menu li{display:block;}
  nav.main-nav a{
    font-family:'Macklin',sans-serif;
    font-size:13.5px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--grey);
    transition:color .15s ease;
    white-space:nowrap;
  }
  nav.main-nav a:hover{color:var(--white);}

  /* hamburger: no border, ~2.5x bigger than typical 18px icon */
  .nav-toggle{
    display:none;
    width:46px;height:46px;
    align-items:center;justify-content:center;
    color:var(--grey);
    cursor:pointer;
    background:none;
    border:0;
  }
  .nav-toggle svg{width:44px;height:44px;}

  /* mobile dropdown menu panel — a header alatt, NEM tolja le a tartalmat */
  .mobile-menu{
    display:none;
    position:fixed;
    top:74px; /* 1px-szel feljebb a header border-bottom és a menü közötti rés miatt */
    left:0;right:0;
    z-index:99;
    background:#000;
    overflow:hidden;
    max-height:0;
    transition:max-height .28s ease;
  }
  .mobile-menu.open{max-height:calc(100vh - 74px);}
  .mobile-menu-inner{padding:8px 16px 18px;} /* bal padding a menüpontoknak */

  /* full-page click/hover catcher while the mobile menu is open — sits
     below the menu but above everything else, so the "click outside to
     close" gesture never doubles as a click on whatever's underneath,
     and hover states on page buttons can't trigger through it either */
  .mobile-menu-overlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:45;
    background:transparent;
  }
  .mobile-menu-overlay.open{display:block;}
  .mobile-menu a{
    display:block;
    font-family:'Macklin',sans-serif;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
    font-size:15px;
    color:var(--grey);
    padding:12px 0;
    border-bottom:1px solid var(--grey-line);
  }
  .mobile-menu a:last-child{border-bottom:0;}
  .mobile-menu a:hover{color:var(--white);}

  @media (max-width:880px){
    nav.main-nav{display:none;}
    .nav-toggle{display:flex;}
    .mobile-menu{display:block;}
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    overflow:hidden;
    background:
      linear-gradient(115deg, rgba(10,13,13,0.45) 0%, rgba(15,32,39,0.25) 55%, rgba(10,13,13,0.7) 100%),
      var(--bg-apoc-img);
    background-size:cover;
    background-position:center 30%;
  }
  .hero::after{
    content:"";
    position:absolute;inset:0;
    background:radial-gradient(ellipse at 70% 15%, rgba(28,58,66,0.35) 0%, rgba(10,13,13,0.45) 55%, rgba(10,13,13,0.65) 100%);
    pointer-events:none;
  }

  /* reusable teal radial — same recipe as the hero's overlay, used standalone
     (no apocalypse photo) behind portrait cutouts: host blocks, host hero */
  .teal-bg{
    background:radial-gradient(ellipse at 70% 15%, #1c3a42 0%, #0f2027 50%, var(--bg-deep) 88%);
  }

  /* ÉLŐBEN ribbon: rotated 37deg, bleeding under the header on the left,
     running off the viewport on the right; text stays centered & readable
     within the visible hero area. Positioned relative to .hero (not .wrap)
     so it can bleed to the true edges regardless of container padding. */
  .hero-live-wrap{
    position:relative;
    width:100%;
    height:0;
    margin-bottom:0;
    z-index:5;
    overflow:visible;
    pointer-events:none;
  }
  .hero-live{
    position:absolute;
    top:12px;
    right:-155px;
    width:393px;
    transform:rotate(37deg);
    transform-origin:center center;
    background:var(--gold);
    color:#1a1200;
    font-family:'Macklin',sans-serif;
    font-weight:800;
    font-size:20px;
    letter-spacing:2px;
    text-align:center;
    padding:9px 0;
    box-shadow:0 4px 14px rgba(0,0,0,0.35);
  }

  .hero-grid{
    position:relative;z-index:2;
    display:flex;
    align-items:center;
    min-height:480px;
  }
  .hero-col-left{flex:1.05;min-width:0;}
  .hero-col-right{flex:0.95;min-width:0;}

  .hero-left{padding:60px 0 60px 0;position:relative;z-index:3;}
  .hero-eyebrow{margin-bottom:18px;display:flex;align-items:center;gap:10px;}
  .live-dot{
    position:relative;
    width:8px;height:8px;border-radius:50%;
    background:var(--gold);
    flex-shrink:0;
    animation:liveDotCore 2s ease-in-out infinite;
  }
  .live-dot::before,
  .live-dot::after{
    content:"";
    position:absolute;
    top:50%;left:50%;
    width:8px;height:8px;
    border-radius:50%;
    background:var(--gold);
    transform:translate(-50%,-50%);
    animation:liveDotRing 2s ease-out infinite;
  }
  .live-dot::after{animation-delay:1s;}
  @keyframes liveDotCore{
    0%,100%{opacity:1;}
    50%{opacity:0.65;}
  }
  @keyframes liveDotRing{
    0%{transform:translate(-50%,-50%) scale(1);opacity:0.5;}
    100%{transform:translate(-50%,-50%) scale(3.2);opacity:0;}
  }
  .hero h1{
    font-size:52px;
    line-height:1.04;
    margin:0 0 22px;
    max-width:560px;
  }
  .hl{
    background:var(--gold);
    color:#1a1200;
    padding:2px 10px;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
  }
  .hero p{
    font-family:'Macklin',sans-serif;
    font-weight:500;
    color:var(--grey);
    font-size:15.5px;
    line-height:1.6;
    max-width:460px;
    margin:0 0 30px;
    text-shadow: 1px 2px 2px rgb(0,0,0,0.25)
  }
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
  .btn-onki{
    font-family:'Macklin',sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:13.5px;
    padding:13px 26px;
    border-radius:3px;
    display:inline-flex;align-items:center;gap:8px;
    transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
    border:0;
    cursor:pointer;
  }
  .btn-onki-primary{background:var(--gold);color:#1a1200;}
  .btn-onki-primary:hover{background:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(232,163,61,0.3);color:#1a1200;}

  /* secondary: teal outline, fills teal on hover, text stays white */
  .btn-onki-secondary{
    background:transparent;
    color:#fff;
    border:2px solid var(--teal);
  }
  .btn-onki-secondary:hover{
    background:var(--teal);
    color:#fff;
    transform:translateY(-2px);
  }

  .hero-right{
    position:relative;
    height:100%;
    min-height:560px;
    overflow:visible; /* engedjük túlnyúlni a portrékat, ha az animáció megnöveli őket */
  }
  /* A portré-csoport most ABSZOLÚT pozícióval "kilóg" a .hero-right
     dobozból — ez szándékos: így a 3 ember tényleges (akár 750px+)
     szélessége SOHA nem hat a flex-oszlopok méretére (nem tördeli a
     szöveget), és a bal/jobb szélső karja/válla is szabadon kifuthat,
     csak a .hero szekció saját overflow:hidden-je a végső határ.
     z-index:1 — EZ a réteg a hero-left szöveg (z-index:3) ALATT van,
     tehát "alattuk terpeszkedik", ahogy kérted. */
  .hero-portraits{
    position:absolute;
    right:-30px;
    bottom:0;
    z-index:1;
    display:flex;align-items:flex-end;justify-content:flex-end;
    filter:grayscale(1) contrast(1.1);
    /* a maszk most enyhébb (90%-ig teljes opacitás), hogy a megnövelt
       fejek/vállak ne legyenek idő előtt levágva */
    -webkit-mask-image:linear-gradient(to bottom, black 90%, transparent 100%);
    mask-image:linear-gradient(to bottom, black 90%, transparent 100%);
  }
  /* alapméret +70% a korábbihoz képest (150x230 -> 255x391), JS állítja
     át a width/height-et inline style-lal a scroll-pozíció alapján,
     ez itt csak a kiinduló (scroll=0) állapot */
  .portrait{
    height:391px;
    aspect-ratio:800/575; /* az újragenerált headshot-PNG-k egységes vászonmérete — a width ebből számolódik automatikusan, torzítás nélkül */
    width:auto;
    border-radius:6px 6px 0 0;
    margin:0 -95px; /* még közelebb — asztalin még mindig túl messze voltak */
    position:relative;
    color:#555;font-size:11px;font-family:'Macklin',sans-serif;font-weight:500;text-align:center;
    text-decoration:none; /* most <a> tag, ne legyen alulvonás/szín-öröklés gond */
    overflow:visible;
    /* a JS transform:scale()-t ír (lásd site.js HERO PORTRAIT SCROLL
       ANIMÁCIÓ blokk) — a box layout-mérete sosem változik, így a
       flex-szülő nem reflowol és nem tördeli a hero szöveget. */
    transform-origin:bottom center;
    will-change:transform;
    /* NINCS CSS transition itt — a JS minden scroll-frame-ben explicit
       transform-et ír, a sima lineáris skálázáshoz nem kell external
       easing, a scroll maga adja a "simaságot" */
  }
  /* Az img most EGYSZERŰ, a doboz teljes terét kitölti — mivel a
     .portrait aspect-ratio PONTOSAN a kép vászonarányát követi
     (800:575), a kép SOHA nem vágódik (sem oldalt, sem fent/lent),
     csak egységesen, torzítás nélkül skálázódik. object-fit:contain
     csak biztonsági háló, ha valamiért mégsem pontos az arány. */
  .portrait-img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:bottom center;
  }
  /* a fotó nélküli statikus fallback szöveg (csak akkor fut, ha egyáltalán
     nincs headshot-adat — dev/edge-case) középre van igazítva a dobozban */
  .portrait:not(:has(img)){
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(160deg,#3a3a3a,#111);
  }
  /* Statikus rétegsorrend balról jobbra (NEM cserélődik növéskor):
     a bal szélső van legházul, a jobb szélső legelöl. A JS csak egyszer
     állítja be induláskor, lásd onkiInitPortraitZIndex(). */
  .hero-portraits .portrait:nth-child(1){z-index:1;}
  .hero-portraits .portrait:nth-child(2){z-index:2;}
  .hero-portraits .portrait:nth-child(3){z-index:3;}

  @media (max-width:880px){
    .portrait{height:230px;}
  }

  /* inline "player" shown after clicking Lejátszás: replaces description/buttons/heads.
     Negative margin-top compensates for the h1's own margin-bottom so the gap
     above the player ends up at roughly one and a half text lines, matching
     the description-state spacing instead of stacking both margins. */
  .hero-player{
    width:100%;
    aspect-ratio:16/9;
    background:linear-gradient(135deg,#13262b,#06080a);
    border:1px solid var(--grey-line);
    border-radius:8px;
    margin:-8px 0 46px;
    display:flex;align-items:center;justify-content:center;
  }
  .hero-player-inner{
    display:flex;flex-direction:column;align-items:center;gap:14px;
    text-align:center;padding:0 24px;
  }
  .hero-player-inner span{
    font-family:'Macklin',sans-serif;font-weight:500;
    font-size:13px;color:var(--grey);max-width:480px;line-height:1.5;
  }

  @media (max-width:880px){
    .hero-grid{flex-direction:column;min-height:auto;align-items:stretch;}
    .hero-left{padding:48px 16px 0;}
    .hero h1{font-size:36px;max-width:100%;}
    .hero-right{min-height:280px;margin-top:10px;padding-top:30px;width:100%;}
    /* középre igazítva (nem jobbra-fixálva) — így bármilyen mobil
       szélességnél konzisztensen jól helyezkedik el, nem a viewport
       szélességétől függ, hogy "jó" pozícióban van-e */
    .hero-portraits{right:auto;left:50%;transform:translateX(-50%);}
    .portrait{height:190px;}
  }

  /* ---------- promo strip (Donably + YouTube) — sits right after hero ---------- */
  .promo-section{
    background:var(--bg-deep);
    padding:34px 0 12px;
  }
  .promo-card{
    display:flex;align-items:center;gap:14px;
    background:var(--bg-card);
    border:1.5px solid var(--teal);
    border-radius:8px;
    padding:16px 18px;
    height:100%;
    transition:background-color .18s ease, border-color .18s ease, transform .15s ease;
  }
  .promo-card:hover{
    background:var(--teal);
    border-color:var(--teal);
    transform:translateY(-2px);
  }
  .promo-icon{
    width:42px;height:42px;border-radius:50%;
    background:rgba(232,163,61,0.12);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    transition:background-color .18s ease;
  }
  .promo-card:hover .promo-icon{background:rgba(255,255,255,0.22);}
  .promo-icon svg{width:22px;height:22px;}
  .promo-icon i{font-size:19px;line-height:1;color:#1a1200;}
  .promo-card:hover .promo-icon svg path,
  .promo-card:hover .promo-icon svg rect{stroke:#fff;}
  .promo-card:hover .promo-icon svg path[fill]{fill:#fff;}
  .promo-card:hover .promo-icon i{color:#fff;}
  .promo-text strong{
    display:block;
    font-family:'Macklin',sans-serif;font-weight:800;
    font-size:14.5px;margin-bottom:3px;
    transition:color .18s ease;
  }
  .promo-text span{
    font-family:'Macklin',sans-serif;font-weight:500;
    font-size:12.5px;color:var(--grey);
    line-height:1.4;
    transition:color .18s ease;
  }
  .promo-card:hover .promo-text strong{color:#fff;}
  .promo-card:hover .promo-text span{color:rgba(255,255,255,0.85);}

  /* primary variant (e.g. Donably support box): solid gold by default,
     turns white on hover; text/icon stay dark in both states */
  .promo-card-primary{
    background:var(--gold);
    border-color:var(--gold);
  }
  .promo-card-primary .promo-text strong,
  .promo-card-primary .promo-text span{color:#1a1200;}
  .promo-card-primary .promo-text span{color:#4a3a16;}
  .promo-card-primary .promo-icon{background:rgba(26,18,0,0.14);}
  .promo-card-primary .promo-icon svg path,
  .promo-card-primary .promo-icon svg rect{stroke:#1a1200;}
  .promo-card-primary .promo-icon svg path[fill]{fill:#1a1200;}
  .promo-card-primary .promo-icon i{color:#1a1200;}
  .promo-card-primary:hover{background:#fff;border-color:#fff;}
  /* explicit hover-felülírás — a generikus .promo-card:hover (fehér
     szöveg) később jön a fájlban és magasabb specificitású lenne,
     ezért itt, UGYANAZZAL a :hover-es szelektor-szerkezettel kell
     visszaállítani a sötét színt, különben a primary is fehér lenne hoveren */
  .promo-card-primary:hover .promo-text strong,
  .promo-card-primary:hover .promo-text span{color:#1a1200;}
  .promo-card-primary:hover .promo-icon{background:rgba(26,18,0,0.18);}
  .promo-card-primary:hover .promo-icon svg path,
  .promo-card-primary:hover .promo-icon svg rect{stroke:#1a1200;}
  .promo-card-primary:hover .promo-icon svg path[fill]{fill:#1a1200;}
  .promo-card-primary:hover .promo-icon i{color:#1a1200;}

  /* secondary variant (e.g. YouTube subscribe box): YouTube red by default,
     turns white on hover; text/icon white normally, dark on hover */
  .promo-card-secondary{
    background:#c4302b;
    border-color:#c4302b;
  }
  .promo-card-secondary .promo-text strong,
  .promo-card-secondary .promo-text span{color:#fff;}
  .promo-card-secondary .promo-text span{color:rgba(255,255,255,0.8);}
  .promo-card-secondary .promo-icon{background:rgba(255,255,255,0.16);}
  .promo-card-secondary .promo-icon svg path,
  .promo-card-secondary .promo-icon svg rect{stroke:#fff;}
  .promo-card-secondary .promo-icon svg path[fill]{fill:#fff;}
  .promo-card-secondary .promo-icon i{color:#fff;}
  .promo-card-secondary:hover{background:#fff;border-color:#fff;}
  .promo-card-secondary:hover .promo-text strong,
  .promo-card-secondary:hover .promo-text span{color:#1a1200;}
  .promo-card-secondary:hover .promo-icon{background:rgba(26,18,0,0.1);}
  .promo-card-secondary:hover .promo-icon svg path,
  .promo-card-secondary:hover .promo-icon svg rect{stroke:#1a1200;}
  .promo-card-secondary:hover .promo-icon svg path[fill]{fill:#1a1200;}
  .promo-card-secondary:hover .promo-icon i{color:#1a1200;}

  /* ---------- section heading ---------- */
  .section{padding:56px 0;}
  .section-head{
    display:flex;align-items:baseline;justify-content:space-between;
    margin-bottom:30px;
    border-bottom:1px solid var(--grey-line);
    padding-bottom:18px;
    flex-wrap:wrap;gap:14px;
  }
  .section-head h2{
    font-size:27px;margin:6px 0 0;
  }
  .section-head .more{
    font-family:'Macklin',sans-serif;
    font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
    color:var(--gold);
    display:flex;align-items:center;gap:6px;
  }
  .section-head .more:hover{color:var(--white);}
  .section-head-row{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:14px;width:100%;
  }
  .refresh-btn{
    display:inline-flex;align-items:center;gap:8px;
    background:transparent;
    border:1px solid var(--grey-line);
    color:var(--gold);
    font-weight:700;
    font-size:12.5px;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:10px 18px;
    border-radius:3px;
    cursor:pointer;
    transition:border-color .15s ease, transform .15s ease;
  }
  .refresh-btn:hover{border-color:var(--gold);}
  .refresh-btn:active{transform:scale(0.97);}
  .refresh-btn svg{width:15px;height:15px;transition:transform .4s ease;}
  .refresh-btn.spinning svg{transform:rotate(360deg);}

  /* ---------- video cards ---------- */
  .video-card{
    background:var(--bg-card);
    border:1px solid var(--grey-line);
    border-radius:8px;
    overflow:hidden;
    transition:transform .18s ease, border-color .18s ease;
    height:100%;
    display:flex;
    flex-direction:column;
  }
  .video-card:hover{transform:translateY(-4px);border-color:var(--gold);}
  .video-thumb{
    aspect-ratio:16/9;
    background:linear-gradient(135deg,#1c3a42,#0a0d0d);
    position:relative;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    overflow:hidden;
  }
  .video-thumb[data-yt-id]{cursor:pointer;}
  .video-thumb img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
  }
  .play-btn{
    position:relative;z-index:1;
    width:52px;height:52px;border-radius:50%;
    background:rgba(232,163,61,0.92);
    display:flex;align-items:center;justify-content:center;
    transition:background-color .15s ease, transform .15s ease;
  }
  .video-thumb:hover .play-btn{background:var(--gold);transform:scale(1.08);}
  .play-btn svg{display:block;margin-left:2px;}
  .video-card h3{
    font-family:'Macklin',sans-serif;
    font-weight:700;
    font-size:15px;
    margin:0;
    padding:16px 18px;
    line-height:1.4;
    color:var(--grey);
    background:var(--bg-card);
    flex:1;
  }
  .video-col-3{display:block;}
  @media (max-width:880px){
    .video-col-3{display:none;}
    .video-card h3{font-size:13.5px;padding:12px 14px;}
  }

  /* ---------- topic grid (generated HTML art, no photos) ---------- */
  .topic-card{
    position:relative;
    border-radius:10px;
    overflow:hidden;
    min-height:152px;
    padding:18px;
    display:flex;flex-direction:column;justify-content:flex-end;
    background:
      radial-gradient(circle at 85% 12%, rgba(232,163,61,0.16) 0%, transparent 45%),
      linear-gradient(155deg,var(--bg-card-2) 0%, var(--bg-deep) 100%);
    border:1px solid var(--grey-line);
    transition:transform .18s ease, border-color .18s ease, opacity .32s ease;
  }
  .topic-card:hover{transform:translateY(-3px);border-color:var(--gold);}
  .topic-card.fade-out{opacity:0;transform:scale(0.96);}
  .topic-card.fade-in-start{opacity:0;transform:scale(0.96);}
  .topic-card .ep-tag{
    position:absolute;top:13px;left:13px;
    background:rgba(232,163,61,0.14);
    border:1px solid var(--gold);
    color:var(--gold);
    font-family:'Macklin',sans-serif;font-weight:800;
    font-size:11px;letter-spacing:1px;
    padding:4px 10px;border-radius:20px;
  }
  .fav-btn{
    position:absolute;top:10px;right:10px;
    width:30px;height:30px;
    background:none;border:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    padding:0;
  }
  .fav-btn svg{width:19px;height:19px;transition:transform .15s ease;}
  .fav-btn path{
    stroke:var(--gold);
    stroke-width:1.6;
    fill:none;
    transition:fill .15s ease;
  }
  .fav-btn.is-fav path{fill:var(--gold);}
  .fav-btn:active svg{transform:scale(1.25);}
  .topic-card .topic-title{
    font-family:'Macklin',sans-serif;
    font-weight:800;
    font-size:17px;
    line-height:1.25;
    text-transform:uppercase;
    margin:0;
    color:var(--white);
  }
  @media (max-width:600px){
    /* mobilon a hosszú cím (pl. 4+ sor) rálóg a kártya alatti UI-ra —
       itt korlátozzuk "..."-tal, desktopon nem volt rá szükség */
    .topic-card .topic-title{
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:3;
      line-clamp:3;
      overflow:hidden;
    }
  }
  .topic-card .topic-title a{color:inherit;}
  .topic-card .topic-meta{
    font-family:'Macklin',sans-serif;
    font-weight:500;
    font-size:12px;
    color:var(--grey);
    margin-top:7px;
  }

  /* ---------- "A nap műsorvezetője" host spotlight block ----------
     The cutout PNG floats directly on the teal-bg gradient (no separate
     boxed background of its own) — same visual idea as the hero portraits.
     Desktop: photo anchored right, content fills the left side.
     Mobile: photo bleeds off the left edge, only its right ~60% is visible. */
  .host-block{
    position:relative;
    border-radius:12px;
    overflow:hidden;
    min-height:300px;
    /* FIX magasság: a tartalom (label+name+2 sor téma+cta) mindig
       ugyanannyi helyet foglal, függetlenül a témák darabszámától —
       ez biztosítja, hogy minden host-card (és benne a PNG) egyforma
       magasságú legyen. */
    height:300px;
    display:flex;
    align-items:flex-end;
  }
  .host-photo-col{
    position:absolute;
    right:18px;
    bottom:0;
    /* nincs fix width — az img saját aránya adja, hogy a szélesebb
       képek (pl. kitárt karok) NE vágódjanak le oldalt; csak felül
       vágódhat, ha a 106%-os magasság miatt túlnő a dobozon */
    height:106%;
    top:-6%;
    z-index:1;
    pointer-events:none;
  }
  .host-photo-img{
    display:block;
    position:absolute;
    right:0;
    bottom:0;
    height:100%;
    width:auto;
    max-width:none;
  }
  .host-info-col{
    position:relative;
    z-index:3; /* biztosan a fotó (z-index:1) FÖLÖTT — sosem tördel/vágódik */
    flex:1;
    padding:28px 30px;
    display:flex;flex-direction:column;
    max-width:62%;
  }
  .host-label{
    color:var(--gold);
    font-family:'Macklin',sans-serif;font-weight:800;
    font-size:11.5px;letter-spacing:2px;text-transform:uppercase;
    margin-bottom:8px;
  }
  .host-name{
    font-family:'Macklin',sans-serif;font-weight:900;
    font-size:28px;text-transform:uppercase;
    margin-bottom:18px;
  }
  /* Témalista: FIX 2 sornyi hely (a 3. sor és utána overflow:hidden-nel
     levágva) — a PHP-oldali truncate (50 karakter, egész szóra) a
     leghosszabb cím-eseteket kezeli, ez itt a sor-számot korlátozza. */
  .host-topic-list{
    display:flex;flex-wrap:wrap;gap:10px;
    margin-bottom:22px;
    max-height:106px; /* +10px, a 2. sor alja korábban levágódott */
    overflow:hidden;
  }
  .host-topic-list a{
    display:flex;flex-direction:column;
    font-family:'Macklin',sans-serif;
    background:rgba(10,13,13,0.55);
    border:1px solid var(--grey-line);
    border-radius:8px;
    padding:7px 14px;
    transition:border-color .15s ease;
    line-height:1.35;
  }
  .host-topic-list a .ht-ep{
    font-weight:700;font-size:10.5px;letter-spacing:0.5px;
    color:var(--gold);
  }
  .host-topic-list a .ht-name{
    font-weight:600;font-size:13px;color:var(--white);
  }
  .host-topic-list a:hover{border-color:var(--gold);}
  .host-cta{
    margin-top:auto;
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  }
  .host-cta a:not(.host-social-icon){
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Macklin',sans-serif;font-weight:700;
    font-size:13px;letter-spacing:0.5px;text-transform:uppercase;
    color:#1a1200;background:var(--gold);
    padding:11px 22px;border-radius:3px;
    transition:background-color .15s ease;
  }
  .host-cta a:not(.host-social-icon):hover{background:#fff;}
  .host-social-links{
    display:inline-flex;align-items:center;gap:6px;
  }
  .host-social-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:26px;
    color:#fff;
    font-size:32px;
    opacity:0.85;
    transition:opacity .15s ease, transform .15s ease;
  }
  .host-social-icon:hover{opacity:1;transform:translateY(-1px);}
  @media (max-width:600px){
    .host-block{height:auto;min-height:260px;}
    .host-info-col{max-width:100%;padding:24px 22px 22px;}
    /* a fotó tovább jobbra tolva (kb a szélessége negyedével), hogy
       inkább "alatta" terpeszkedjen — a szöveg (z-index:3) garantáltan
       fölötte van, nyugodtan ráloghat */
    .host-photo-col{
      right:-20vw;
      top:auto;
      height:220px;
    }
    .host-topic-list{max-height:50px;}
  }

  /* ---------- host roster (Adás single: multiple hosts/guests) ----------
     Featured host (with photo) on top; co-hosts without a photo (Robi, Oszi)
     render as collapsed rows below, each expandable via a chevron toggle.
     Gap between rows matches the random-topics grid gap (Bootstrap g-3 = 12px). */
  .host-roster{
    display:flex;flex-direction:column;gap:12px;
  }

  /* ---------- tags ---------- */
  .tagcloud{margin-top:18px;}
  .tagcloud a{
    font-family:'Macklin',sans-serif;font-weight:500;
    font-size:13px;color:var(--grey);
    border-bottom:1px solid transparent;
    margin:0 14px 10px 0;
    display:inline-block;
  }
  .tagcloud a:hover{color:var(--gold);border-color:var(--gold);}

  /* ---------- search ---------- */
  .search-box{
    display:flex;gap:0;max-width:480px;
    border:1px solid var(--grey-line);
    border-radius:4px;overflow:hidden;
  }
  .search-box input{
    flex:1;background:var(--bg-card);border:0;
    color:var(--white);font-family:'Macklin',sans-serif;font-weight:500;
    font-size:14px;padding:14px 16px;
  }
  .search-box input::placeholder{color:var(--grey);}
  .search-box input:focus{outline:2px solid var(--gold);outline-offset:-2px;box-shadow:none;}
  .search-box button{
    background:var(--gold);border:0;color:#1a1200;
    font-family:'Macklin',sans-serif;font-weight:800;
    padding:0 22px;cursor:pointer;
    text-transform:uppercase;letter-spacing:1px;font-size:13px;
    transition:background-color .15s ease;
  }
  .search-box button:hover{background:#fff;}

  /* ---------- page / generic single hero ---------- */
  .page-hero{
    padding:60px 0 48px;
    border-bottom:1px solid var(--grey-line);
    position:relative;
  }
  .page-hero-img{
    background-size:cover;
    background-position:center 30%;
  }
  .page-hero-img::before{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(10,13,13,0.55) 0%, rgba(10,13,13,0.82) 100%);
    pointer-events:none;
  }
  .page-hero .container{position:relative;z-index:1;}

  /* ---------- tag archívum hero (teljes szélességű teal bg) ---------- */
  .tag-archive-hero{
    padding:40px 0 36px;
    border-bottom:1px solid var(--grey-line);
  }
  .tag-archive-hero .archive-title{margin-top:6px;}

  /* téma single kiegészítők */
  .tema-adas-link{margin-top:22px;}
  .tema-lead{
    font-size:17px;line-height:1.7;
    color:var(--grey);
    max-width:720px;
    margin-bottom:24px;
  }

  /* ============================================================
     SZAVAZÁSOK (POLL CARD)
     2 vizuális variáns class-szal váltható:
       .poll-card                → halvány-fehér radial (alapértelmezett)
       .poll-card.poll-teal      → teal háttér, sárga csíkok (vezető opció
                                    teli sárga, a többi HALVÁNYABB sárga)
     ÚJ UX: minden opció sávja MINDIG látható + "Ezt választom" gomb a
     sor végén — nincs külön "Szavazok!" trigger gomb, nincs gomb-mód.
     A sávok rövidebbek (nem 100% széles a track), hogy a gombnak
     elférjen a hely a sor végén ugyanazon a vízszintes vonalon.
  ============================================================ */
  .polls-section{
    margin:36px 0;
  }
  /* .polls-grid korábban CSS grid volt (display:grid), de a polls-grid
     elemen most a Bootstrap .row.g-3 fut (lásd archive-160.php és
     front-page.php) — innen csak a kártya-share-link spacing marad. */

  .poll-card{
    display:block;
    color:inherit;text-decoration:none;
    background:radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 60%, transparent 100%);
    border-radius:10px;
    padding:20px 22px 18px;
    display:flex;
    flex-direction:column;
  }
  .poll-card.poll-teal{
    background:#0f2027;
  }

  .poll-eyebrow{
    font-family:'Macklin',sans-serif;font-weight:700;
    font-size:11px;letter-spacing:0.5px;text-transform:uppercase;
    color:var(--gold);margin-bottom:6px;
  }
  .poll-card.poll-teal .poll-eyebrow{color:#7fd9de;}

  .poll-question{
    font-family:'Macklin',sans-serif;font-weight:700;
    font-size:16px;line-height:1.4;color:var(--white);
    margin-bottom:16px;
  }

  .poll-options-results{
    flex:1;
    display:flex;flex-direction:column;
    justify-content:flex-end;
    gap:9px;
  }

  .poll-option-row{position:relative;}
  .poll-option-label-row{
    display:flex;justify-content:space-between;align-items:baseline;
    margin-bottom:3px;font-size:13px;
  }
  .poll-option-label{color:#ddd;flex:1;padding-right:10px;}
  /* a % egy FIX szélességű jobb-oldali oszlopba esik, ugyanabba mint a
     gomb a bar-row-ban — ezért mindkettő pontosan 64px széles és jobbra
     igazított, így "2 sorban" egymás alatt landolnak */
  .poll-option-pct{
    color:var(--grey);flex-shrink:0;font-weight:700;
    width:64px;
    text-align:right;
  }
  .poll-card.poll-teal .poll-option-pct{color:#e8a33d;}

  /* sáv + gomb egy sorban, a gomb ugyanolyan széles mint a % oszlop fölötte */
  .poll-option-bar-row{
    display:flex;align-items:center;gap:10px;
  }
  .poll-option-track{
    flex:1;
    height:6px;border-radius:3px;
    background:rgba(255,255,255,0.07);
    overflow:hidden;
  }
  .poll-option-fill{
    height:100%;border-radius:3px;
    background:rgba(255,255,255,0.18);
    transition:width .4s ease;
  }
  /* teal variáns: a NEM vezető opciók halványabb sárgát kapnak (nem
     szürkét), a vezető opció teli sárga — lásd data-leader JS-attribútum */
  .poll-card.poll-teal .poll-option-fill{background:rgba(232,163,61,0.28);}
  .poll-option-row[data-leader="true"] .poll-option-fill{background:#5fd1d6;}
  .poll-card.poll-teal .poll-option-row[data-leader="true"] .poll-option-fill{background:#e8a33d;}
  .poll-option-row[data-leader="true"] .poll-option-label{color:#fff;font-weight:600;}

  /* "Ez!" gomb — pontosan ugyanolyan szélességű, mint a % oszlop fölötte */
  .poll-option-vote-btn{
    flex-shrink:0;
    width:64px;
    padding:5px 6px;
    border:1px solid rgba(255,255,255,0.18);
    border-radius:5px;
    background:transparent;
    color:#ccc;
    font-family:'Macklin',sans-serif;font-weight:600;font-size:11px;
    white-space:nowrap;
    text-align:center;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease, color .15s ease;
  }
  .poll-option-vote-btn:hover{
    border-color:var(--gold);background:rgba(232,163,61,0.08);color:var(--gold);
  }
  .poll-option-vote-btn:disabled{opacity:0.4;cursor:default;}

  /* ha NEM lehet szavazni (már szavazott / lezárva), a track teljes
     szélességet kap, nincs ott a gomb-oszlop helye sem — a % ekkor
     visszaáll rugalmas (nem fix) szélességre */
  .poll-card[data-has-voted="true"] .poll-option-pct,
  .poll-card[data-closed="true"] .poll-option-pct{
    width:auto;
  }

  /* Saját válasz sor — ugyanaz a bar-row elrendezés, de input a track helyén */
  .poll-custom-answer-bar-row{
    border-top:1px solid rgba(255,255,255,0.08);
    padding-top:13px;
  }
  .poll-custom-answer-input{
    flex:1;
    background:transparent;
    border:0;border-bottom:1px solid rgba(255,255,255,0.18);
    color:var(--white);
    font-family:'Macklin',sans-serif;font-size:13px;
    padding:6px 2px;
    outline:none;
  }
  .poll-custom-answer-input::placeholder{color:var(--grey);}
  .poll-custom-answer-input:focus{border-color:var(--gold);}

  .poll-footer-row{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
    margin-top:14px;font-size:11px;color:var(--grey);
  }
  .poll-footer-row .poll-status,
  .poll-footer-row .poll-vote-count{display:inline-flex;}
  .poll-footer-row .poll-vote-count{grid-column:1;}
  .poll-footer-row .poll-status{grid-column:3;justify-self:end;}
  .poll-footer-row .poll-show-more-btn{grid-column:2;justify-self:center;width:auto;margin-top:0;padding:0;}
  .poll-card.poll-teal .poll-footer-row{color:#6f9296;}
  .poll-status-voted{color:#5fd1d6;font-weight:600;}
  .poll-card.poll-teal .poll-status-voted{color:#e8a33d;}
  .poll-status-closed{color:var(--grey);}

  /* "Megosztás »" — apró, halvány, nem gomb, csak szöveges link a
     poll-card alatt (csak az archívum-nézetben, lásd archive-160.php) */
  .poll-share-link{
    margin-top:8px;
    text-align:right;
  }
  .poll-share-link a{
    font-family:'Macklin',sans-serif;font-weight:500;font-size:11px;
    color:var(--grey);text-decoration:none;
    border-bottom:1px solid transparent;
    transition:color .15s ease, border-color .15s ease;
  }
  .poll-share-link a:hover{color:var(--gold);border-color:var(--gold);}

  @media (max-width:880px){
    .poll-card{padding:16px 18px 14px;}
    .poll-question{font-size:14.5px;}
    .poll-option-vote-btn{font-size:10.5px;padding:5px 9px;}
    .host-social-icon { width:26px;height:26px; }
    .host-social-icon i { width:16px;height:16px; }
  }

  /* ---------- footer ---------- */
  footer{
    border-top:1px solid var(--grey-line);
    padding:44px 0 30px;
    background:var(--bg-petrol);
    position:relative;
  }
  /* A WP menüszerkesztő a custom class-t (pl. "fa-brands fa-tiktok") a
     <li>-re rakja, nem egy belső <span>-re — ezt itt kezeljük CSS-ben,
     mert a html-forrást nem tudjuk megváltoztatni. A bullet mindenképp
     megy; ha van fa-* class a li-n, a FontAwesome ::before pszeudo-elem
     IS a li-n jelenik meg — ezt balra fixáljuk, hogy a szöveg (az <a>)
     mindig ugyanott kezdődjön, akár van ikon, akár nincs. */
  .footer-links ul{list-style:none;margin:0;padding:0;}
  .footer-links li{
    display:block !important; /* felülírja a .fa class display:inline-block-jét */
    position:relative;
    padding-left:0;
  }
  /* CSAK akkor van bal padding (ikonnak hely), ha a li-n tényleg van
     fa-* class — sima menüpontoknál a szöveg a bal szélen kezdődik */
  .footer-links li[class*="fa-"]{
    padding-left:22px;
  }
  .footer-links li::before{
    position:absolute;
    left:0;
    top:1px;
    width:16px;
    font-size:13px;
    line-height:1.5;
    color:var(--grey);
    text-align:left;
  }
  .footer-links li:hover::before{color:var(--gold);}
  .footer-links a{
    display:block;
    font-family:'Macklin',sans-serif;font-weight:500;
    font-size:13.5px;color:var(--grey);
    margin-bottom:2px;
    padding-top:6px;padding-bottom:6px; /* érintési célterület: min 24px (Google) */
  }
  .footer-links a:hover{color:var(--gold);}
  .footer-logos img{height:58px;width:auto;max-width:100%;display:block;}
  @media (max-width:420px){
    .footer-logos img{height:42px;}
  }
  .copyright{
    margin-top:30px;padding-top:20px;
    border-top:1px solid var(--grey-line);
    font-size:12.5px;color:var(--grey);
    font-family:'Macklin',sans-serif;font-weight:500;
  }

  /* dev note: kept minimal, only where it materially affects the WP rebuild */
  .build-note{
    font-family:'Macklin',sans-serif;font-weight:500;
    font-size:11px;color:#5f7378;
    margin-top:10px;
  }

  /* NOTE: .onki-view / .active a statikus artifaktban a JS-router váltotta
     "lapokat" jelölte egy fájlon belül. A valódi WP build-ben minden view
     külön template (front-page.php, single-2.php, page-musorvezeto.php,
     stb.), ezért ez a szabály itt szándékosan nincs átemelve. */

  /* ---------- Adás single ---------- */
  .adas-hero{
    background:
      linear-gradient(115deg, rgba(10,13,13,0.65) 0%, rgba(15,32,39,0.4) 55%, rgba(10,13,13,0.85) 100%),
      var(--bg-apoc-img);
    background-size:cover;
    background-position:center 30%;
    border-bottom:1px solid var(--grey-line);
    padding:30px 0 50px;
  }
  .adas-breadcrumb{
    font-family:'Macklin',sans-serif;font-weight:500;
    font-size:12.5px;color:var(--grey);
    margin-bottom:22px;
  }
  .adas-breadcrumb a{color:var(--grey);}
  .adas-breadcrumb a:hover{color:var(--gold);}
  .adas-breadcrumb .current{color:var(--gold);}
  .adas-breadcrumb span{margin:0 6px;}
  .adas-meta-row{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    margin-bottom:16px;
  }
  .ep-tag-lg{
    background:rgba(232,163,61,0.14);
    border:1px solid var(--gold);
    color:var(--gold);
    font-family:'Macklin',sans-serif;font-weight:800;
    font-size:12.5px;letter-spacing:1px;
    padding:6px 14px;border-radius:20px;
  }
  .adas-date{
    font-family:'Macklin',sans-serif;font-weight:500;
    font-size:13px;color:var(--grey);
    text-transform:uppercase;
  }
  .adas-title{
    font-size:52px;line-height:1.04;
    max-width:840px;
    margin-bottom:30px;
  }
  .adas-video{
    width:100%;
    max-width:900px;
    background:linear-gradient(135deg,#13262b,#06080a);
    border:1px solid var(--grey-line);
    border-radius:8px;
    overflow:hidden;
    margin-bottom:26px;
    aspect-ratio:16/9;
    position:relative;
  }
  /* WP oembed iframe kitöltje az egész .adas-video-t */
  .adas-video iframe,
  .adas-video .wp-block-embed__wrapper,
  .adas-video > iframe{
    position:absolute;inset:0;
    width:100% !important;height:100% !important;
    border:0;
  }
  .adas-video-inner{
    position:absolute;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;text-align:center;padding:0 24px;
  }
  .adas-video-inner span{
    font-family:'Macklin',sans-serif;font-weight:500;
    font-size:13px;color:var(--grey);max-width:480px;line-height:1.5;
  }
  .adas-actions{display:flex;gap:14px;flex-wrap:wrap;}

  /* desktop: breadcrumb + title stay left-aligned (block-width), but the
     video + action buttons center themselves within the hero */
  @media (min-width:881px){
    .adas-video{margin-left:auto;margin-right:auto;}
    .adas-actions{justify-content:center;}
  }

  .adas-topic-card{
    height:100%;
    position:relative;
    border-radius:10px;
    padding:20px;
    background:
      radial-gradient(circle at 85% 12%, rgba(232,163,61,0.16) 0%, transparent 45%),
      linear-gradient(155deg,var(--bg-card-2) 0%, var(--bg-deep) 100%);
    border:1px solid var(--grey-line);
  }
  .adas-topic-card .ep-tag{
    position:relative;display:inline-block;margin-bottom:14px;
    background:rgba(232,163,61,0.14);
    border:1px solid var(--gold);
    color:var(--gold);
    font-family:'Macklin',sans-serif;font-weight:800;
    font-size:11px;letter-spacing:1px;
    padding:4px 10px;border-radius:20px;
  }
  .adas-topic-card .topic-title{
    font-family:'Macklin',sans-serif;font-weight:800;
    font-size:17px;line-height:1.25;text-transform:uppercase;
    margin:0 0 10px;
  }
  .adas-topic-desc{
    font-family:'Macklin',sans-serif;font-weight:500;
    font-size:13px;color:var(--grey);line-height:1.55;
    margin:0 0 10px;
  }

  .adas-nav-card{
    display:flex;flex-direction:column;gap:6px;
    background:var(--bg-card);
    border:1px solid var(--grey-line);
    border-radius:8px;
    padding:18px 20px;
    transition:border-color .15s ease, transform .15s ease;
  }
  .adas-nav-card:hover{border-color:var(--gold);transform:translateY(-2px);}
  .adas-nav-card-right{text-align:right;align-items:flex-end;}
  .adas-nav-label{
    font-family:'Macklin',sans-serif;font-weight:700;
    font-size:11.5px;letter-spacing:1px;text-transform:uppercase;
    color:var(--gold);
  }
  .adas-nav-title{
    font-family:'Macklin',sans-serif;font-weight:600;
    font-size:14px;color:var(--white);
  }
  .adas-nav-title-lg{
    font-family:'Macklin',sans-serif;font-weight:800;
    font-size:27px;color:var(--white);
    text-transform:uppercase;
  }
  .adas-content{
    max-width:100%; /* nincs felesleges oldalsáv-hely, a content kitölti a containert */
  }
  .adas-content p{
    font-family:'Macklin',sans-serif;font-weight:500;
    font-size:17px;line-height:1.5;color:var(--white);
    max-width:100%;
    margin:0 0 16px;
  }
  .adas-content p:last-child{margin-bottom:0;}

  /* Bullet-listák a post_content-ben: nagyobb, négyzet alakú, sárga
     (vagy sötét teal — itt sárgát választottam, mert jobban kiugrik a
     sötét háttéren, de a --bg-petrol var is elérhető alternatívaként) */
  .adas-content ul{
    list-style:none;
    margin:0 0 16px;
    padding:0;
  }
  .adas-content ul li{
    position:relative;
    padding-left:25px;
    margin-bottom:10px;
    font-family:'Macklin',sans-serif;font-weight:500;
    font-size:17px;line-height:1.5;color:var(--white);
  }
  .adas-content ul li::before{
    content:"";
    position:absolute;
    left:0;top:7px;
    width:12px;height:12px;
    background:var(--gold);
  }

  /* Minden post_content-beli link (témalista timecode-ok ÉS sima linkek)
     egységesen: vékony, világos teal — NEM bold. A :not(.btn-onki)
     kizárja a folyó szövegbe ágyazott gombokat (pl. egy szerkesztő által
     post_content-be illesztett "Lejátszás"-szerű gomb), hogy azok saját
     (sárga/teal) szövegszínüket tartsák meg, ne a link-stílust örököljék. */
  .adas-content a:not(.btn-onki),
  .adas-tema-link{
    color:#5fd1d6; /* világos teal, közel a kékhez */
    font-weight:400;
    text-decoration:none;
    border-bottom:1px solid rgba(95,209,214,0.35);
    transition:color .15s ease, border-color .15s ease;
  }
  .adas-content a:not(.btn-onki):hover,
  .adas-tema-link:hover{
    color:#8de4e8;
    border-color:rgba(141,228,232,0.6);
  }

  /* Blockquote (sima "Idézet" szerkesztő-formátum): hero-cím méretű,
     de NEM allcaps, sima szedés — Bootstrap h1 méretarány.
     clamp() max-határral, hogy ultraszéles képernyőn ne "túlzoomoljon". */
  .adas-content blockquote{
    font-family:'Macklin',sans-serif;font-weight:800;
    font-size:clamp(17px, 0.846rem + 0.923vw, 30px) !important; /* korábbi clamp(28px,...,48px) × 8/13 — !important, mert a WP global-styles (.wp-block-quote.is-layout-flow, 2 class) magasabb specificitással felülírta */
    line-height:1.25;
    text-transform:none;
    color:var(--white);
    margin:24px 0;
    padding:0;
    border:0;
  }
  /* A Gutenberg-blockquote a szöveget mindig egy belső <p>-be csomagolja,
     amire a generikus ".adas-content p{font-size:17px}" szabály külön
     rátelepedett (azonos specificitás, de direkt a p-t célozza) — emiatt
     a blockquote mérete soha nem látszott meg. Itt explicit felülírjuk. */
  .adas-content blockquote p{
    font-size:inherit !important;
    line-height:inherit;
    color:inherit;
    margin:0;
  }

  /* Pullquote ("Kiemelt idézet" szerkesztő-formátum): teljes
     viewport-szélességig kifutó sáv (nem csak a container szélességéig),
     a "Korábbi adások" gomb teal border/hover-színével.
     A WP core style.min.css alapból 4em 0 padding-et ad a figure-nek —
     ezt 0-ra visszük, mert a vizuális "doboz" most a belső blockquote,
     nem a figure (aminek külön padding-je csak felesleges üres helyet
     adna a teljes-szélességű sáv felett/alatt). */
  .adas-content .wp-block-pullquote{
    margin:24px 0;
    padding:0;
    width:100vw;
    max-width:100vw;
    position:relative;
    left:50%;
    transform:translateX(-50%);
  }
  .adas-content .wp-block-pullquote blockquote{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:var(--teal) !important;
    border-top:1px solid var(--teal);
    border-bottom:1px solid var(--teal);
    border-radius:0;
    padding:1em 1.4em;
    margin:0;
    font-size:19px;
    font-weight:600;
    line-height:1.45;
    color:var(--white);
  }
  .adas-content .wp-block-pullquote blockquote p{
    margin:0;
    font-size:inherit;
    line-height:inherit;
    color:inherit;
  }

  /* ---------- Műsorvezető single ---------- */
  .mv-hero{
    position:relative;
    overflow:hidden;
    border-bottom:1px solid var(--grey-line);
    min-height:340px;
    display:flex;align-items:center;
  }
  .mv-hero-photo{
    position:absolute;
    right:18px; /* beljebb, mint a host-card photo-col mintája */
    bottom:0;
    height:106%;
    top:-6%;
    z-index:1;
    pointer-events:none;
  }
  .mv-hero-photo-img{
    display:block;
    position:absolute;
    right:0;
    bottom:0;
    height:100%;
    width:auto;
    max-width:none;
  }
  .mv-hero-inner{
    position:relative;z-index:2;
    padding:50px 16px;
  }
  .mv-name{font-size:42px;margin:6px 0 14px;}
  .mv-tagline{
    font-family:'Macklin',sans-serif;font-weight:500;
    font-size:15.5px;color:var(--grey);line-height:1.6;
    max-width:480px;margin:0 0 26px;
  }
  .mv-stats{display:flex;gap:30px;}
  .mv-stat{display:flex;flex-direction:column;}
  .mv-stat strong{
    font-family:'Macklin',sans-serif;font-weight:900;
    font-size:26px;color:var(--gold);line-height:1;
  }
  .mv-stat span{
    font-family:'Macklin',sans-serif;font-weight:500;
    font-size:12px;color:var(--grey);margin-top:4px;
  }

  .mv-adas-loadmore-wrap{
    display:flex;justify-content:center;
    margin-top:28px;
  }

  .mv-adas-card{
    display:block;
    background:var(--bg-card);
    border:1px solid var(--grey-line);
    border-radius:8px;
    padding:16px 18px;
    transition:border-color .15s ease, transform .15s ease;
  }
  .mv-adas-card:hover{border-color:var(--gold);transform:translateY(-2px);}
  .mv-adas-card-top{
    display:flex;align-items:center;gap:10px;
    margin-bottom:8px;
  }
  .mv-adas-card .ep-tag{
    background:rgba(232,163,61,0.14);
    border:1px solid var(--gold);
    color:var(--gold);
    font-family:'Macklin',sans-serif;font-weight:800;
    font-size:10.5px;letter-spacing:1px;
    padding:3px 9px;border-radius:20px;
  }
  .mv-adas-card-date{
    font-family:'Macklin',sans-serif;font-weight:500;
    font-size:11.5px;color:var(--grey);
  }
  .mv-adas-card-title{
    font-family:'Macklin',sans-serif;font-weight:700;
    font-size:14.5px;color:var(--white);
    line-height:1.35;margin-bottom:6px;
  }
  .mv-adas-card-topics{
    font-family:'Macklin',sans-serif;font-weight:500;
    font-size:11.5px;color:var(--grey);
  }

  @media (max-width:600px){
    .mv-hero{min-height:300px;}
    .mv-hero-photo{
      right:-10vw;
    }
    .mv-hero-inner{
      padding:36px 16px;
      max-width:100%;
      /* enough right padding that running text wraps before reaching the photo */
      padding-right:20vw;
    }
    .mv-name{font-size:30px;}
  }

  .build-note code{
    background:rgba(255,255,255,0.06);
    padding:2px 6px;border-radius:3px;
    font-size:10.5px;
  }

  @media (max-width:600px){
    .adas-title{font-size:24px;}
  }

  /* ---------- Témák / Adások / Műsorvezetők archive shell ---------- */
  .archive-hero{
    background:var(--bg-petrol);
    border-bottom:1px solid var(--grey-line);
    padding:30px 0 26px;
  }
  .archive-head-row{
    display:flex;align-items:flex-end;justify-content:space-between;
    flex-wrap:wrap;gap:16px;
    margin-top:8px;
  }
  .archive-title{font-size:32px;margin:6px 0 0;}
  .archive-count-line{
    font-family:'Macklin',sans-serif;font-weight:500;
    font-size:12.5px;color:var(--grey);
    margin:0 0 14px;
  }
  .archive-count-line strong{color:var(--white);font-weight:700;}
  .archive-count-line-bottom{
    text-align:center;
    margin:14px 0 0;
  }
  .archive-pagination{
    display:flex;justify-content:center;align-items:center;
    gap:8px;flex-wrap:wrap;
    margin-top:36px;
  }
  /* WP paginate_links() .page-numbers osztályokat be kell kötni az
     .archive-page-btn stílusba (a WP nem .archive-page-btn osztályokat
     generál, hanem .page-numbers-eket) */
  .archive-pagination .page-numbers{
    min-width:38px;height:38px;
    display:inline-flex;align-items:center;justify-content:center;
    font-family:'Macklin',sans-serif;font-weight:700;
    font-size:13px;color:var(--grey);
    background:var(--bg-card);
    border:1px solid var(--grey-line);
    border-radius:6px;
    cursor:pointer;
    padding:0 10px;
    text-decoration:none;
    transition:border-color .15s ease, color .15s ease;
  }
  .archive-pagination .page-numbers:hover{border-color:var(--gold);color:var(--gold);}
  .archive-pagination .page-numbers.current{
    background:var(--gold);border-color:var(--gold);color:#1a1200;
  }
  .archive-pagination .page-numbers.dots{
    background:none;border:0;cursor:default;
  }

  .archive-page-btn{
    min-width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    font-family:'Macklin',sans-serif;font-weight:700;
    font-size:13px;color:var(--grey);
    background:var(--bg-card);
    border:1px solid var(--grey-line);
    border-radius:6px;
    cursor:pointer;
    padding:0 10px;
    transition:border-color .15s ease, color .15s ease;
  }
  .archive-page-btn:hover{border-color:var(--gold);color:var(--gold);}
  .archive-page-btn.active{
    background:var(--gold);border-color:var(--gold);color:#1a1200;
  }
  .archive-page-btn[disabled]{opacity:0.35;cursor:default;}

  .temak-category-switch{display:flex;gap:10px;flex-wrap:wrap;}
  .temak-cat-btn{
    font-family:'Macklin',sans-serif;font-weight:700;
    font-size:13px;letter-spacing:0.5px;text-transform:uppercase;
    background:transparent;
    border:2px solid var(--teal);
    color:#fff;
    padding:11px 20px;border-radius:3px;
    cursor:pointer;
    transition:background-color .15s ease;
  }
  .temak-cat-btn.active{background:var(--teal);}

  /* Kedvencek szívecske gomb — a filo/politika váltó bal oldalán,
     kb. 40px magas, fehér outline, var(--teal) teli ha aktív (cat=162-n) */
  .temak-fav-btn{
    width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;
    border:2px solid #fff;
    border-radius:3px;
    background:transparent;
    flex-shrink:0;
    transition:background-color .15s ease, border-color .15s ease;
  }
  .temak-fav-btn svg{
    width:18px;height:18px;
    fill:none;stroke:#fff;stroke-width:2;
    transition:fill .15s ease, stroke .15s ease;
  }
  .temak-fav-btn:hover{border-color:var(--teal);}
  .temak-fav-btn.active{
    background:var(--teal);
    border-color:var(--teal);
  }
  .temak-fav-btn.active svg{fill:#fff;stroke:#fff;}

  /* ---------- Adások archive cards (echoes Adás single hero look) ---------- */
  .adasok-card{
    display:block;height:100%;
    padding:18px;
    border-radius:10px;
    background:
      radial-gradient(circle at 85% 12%, rgba(72,144,164,0.22) 0%, transparent 45%),
      linear-gradient(155deg,var(--bg-card-2) 0%, var(--bg-deep) 100%);
    border:1px solid var(--grey-line);
    transition:transform .18s ease, border-color .18s ease;
  }
  .adasok-card:hover{transform:translateY(-3px);border-color:var(--gold);}
  .adasok-card-meta{
    display:flex;align-items:center;gap:10px;
    margin-bottom:12px;flex-wrap:wrap;
  }
  .adasok-card-title{
    font-family:'Macklin',sans-serif;font-weight:800;
    font-size:16px;color:var(--white);line-height:1.3;
    margin-bottom:10px;
  }
  .adasok-card-hosts{
    font-family:'Macklin',sans-serif;font-weight:500;
    font-size:13px;color:var(--grey);
  }

  /* ---------- Műsorvezetők archive ----------
     Reuses the .host-block look from the home page / Adás single, but
     each entry can be collapsed to just a name+count row with a chevron.
     This collapse/expand behavior is intentionally scoped to archive and
     single pages only — the Home page's own host-block always stays
     fully open (handled by simply never adding [data-mv-collapsible]
     there). In the WP build this becomes one shared "content-part"
     template used by Home, Adás, Téma and Műsorvezető archive alike. */
  .mv-archive-anchors{
    display:flex;flex-wrap:wrap;gap:6px;
    margin-top:18px;
  }
  .mv-archive-anchors a{
    width:30px;height:30px;
    display:flex;align-items:center;justify-content:center;
    font-family:'Macklin',sans-serif;font-weight:700;
    font-size:12px;color:var(--grey);
    border:1px solid var(--grey-line);
    border-radius:5px;
    text-transform:uppercase;
    transition:border-color .15s ease, color .15s ease;
  }
  .mv-archive-anchors a:hover{border-color:var(--gold);color:var(--gold);}

  .mv-archive-list{
    display:flex;flex-direction:column;gap:12px;
  }
  .mv-archive-letter-divider{
    font-family:'Macklin',sans-serif;font-weight:900;
    font-size:14px;color:var(--gold);
    letter-spacing:1px;
    margin:18px 0 2px;
  }
  .mv-archive-letter-divider:first-child{margin-top:0;}

  .mv-archive-card{
    border-radius:12px;overflow:hidden;
  }
  .mv-archive-card .host-block{min-height:0;}

  /* ---------- general-purpose collapsible host card ----------
     Used wherever a host/guest is shown as a spotlight block: Home
     (never collapsible — always rendered open), Adás single (each
     host collapsible, guests start open, Robi/Oszi start collapsed),
     and the Műsorvezetők archive (all collapsible, all start collapsed).
     [data-collapsed="true"]  -> show only the .host-row strip
     [data-collapsed="false"] -> show the full .host-block
     Cards without [data-collapsible] never show the row at all and
     always render the open .host-block (the Home page case). */
  .host-card[data-collapsible][data-collapsed="true"] .host-block{display:none;}
  .host-card[data-collapsible][data-collapsed="false"] .host-row{display:none;}
  .host-card:not([data-collapsible]) .host-row{display:none;}

  /* csukó gomb a nyitott host-block jobb felső sarkában */
  .host-block-close{
    position:absolute;top:12px;right:14px;
    background:none;border:0;padding:4px;
    color:var(--grey);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:color .15s ease;
    z-index:4; /* a host-info-col (z-index:3, mobilon teljes szélességű) FÖLÖTT, hogy mindig kattintható legyen */
  }
  .host-block-close:hover{color:var(--white);}
  .host-block-close svg{width:18px;height:18px;}
  /* host-block már van position:relative? ha nem, adjuk hozzá */
  .host-block{position:relative;}

  .host-row{
    display:flex;align-items:center;gap:14px;
    padding:16px 20px;
    background:var(--bg-card);
    border:1px solid var(--grey-line);
    border-radius:12px;
    cursor:pointer;
    user-select:none;
  }
  .host-row-name{
    font-family:'Macklin',sans-serif;font-weight:800;
    font-size:16px;color:var(--white);
    text-transform:uppercase;
    flex:1;
  }
  .host-row-count{
    font-family:'Macklin',sans-serif;font-weight:500;
    font-size:12.5px;color:var(--grey);
  }
  .host-row-chevron{
    width:18px;height:18px;color:var(--grey);flex-shrink:0;
    transition:transform .2s ease;
  }
  .host-card[data-collapsed="false"] .host-row-chevron{transform:rotate(180deg);}

  @media (max-width:600px){
    .archive-title{font-size:24px;}
    .archive-head-row{align-items:flex-start;}
  }


/* ============================================================
   2026-06-20 BATCH — apró finomítások (lásd chat-history)
============================================================ */

/* Mobilon a home topic-grid-ben a 7. kártyától elrejtve — PHP 12-et
   renderel (desktop), de mobilon 6 elég; ez csak vizuálisan rejt el,
   nem terheli feleslegesen a DOM-ot újra-AJAX-szal kezdéskor. */
@media (max-width:880px){
  #topic-grid .col-6:nth-child(n+7){display:none;}
}

/* Kedvencek szívecske gomb (archive-1.php): keret nélkül, csak ikon,
   40px magas — felülírja a korábbi outline-os verziót. */
.temak-fav-btn{
  width:52px;height:52px;
  border:0 !important;
  background:transparent !important;
}
.temak-fav-btn svg{width:26px;height:26px;}
.temak-fav-btn.active{background:transparent !important;}
.temak-fav-btn.active svg{fill:var(--teal);stroke:var(--teal);}
.temak-fav-btn svg{stroke:#fff;}
.temak-fav-btn:hover svg{stroke:var(--teal);}

/* Téma/Politika single breadcrumb-sor: jobbra igazított szívecske gomb */
.adas-breadcrumb{display:flex;align-items:center;flex-wrap:nowrap;}
.adas-breadcrumb .breadcrumb-fav-btn{
  margin-left:auto;
  width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;
  flex-shrink:0;
}
.adas-breadcrumb .breadcrumb-fav-btn svg{
  width:18px;height:18px;
  fill:none;stroke:var(--grey);stroke-width:2;
  transition:fill .15s ease, stroke .15s ease;
}
.adas-breadcrumb .breadcrumb-fav-btn.is-fav svg,
.adas-breadcrumb .breadcrumb-fav-btn:hover svg{fill:var(--teal);stroke:var(--teal);}

/* Poll "Megosztás »" link: kicsit beljebb (jobb pad a nyíl szélességével) */
.poll-share-link{padding-right:14px;}

/* Home hero eyebrow: pulzáló pötty + epizód-kapszula + szöveg, nincs
   allcaps/letter-spacing kiterjesztés (kérés szerint barátságosabb) */
.hero-eyebrow-row{
  display:flex;align-items:center;gap:10px;
  text-transform:none;letter-spacing:0;
  font-family:'Macklin',sans-serif;font-weight:600;
  font-size:13.5px;color:var(--gold);
  margin-bottom:10px;
}
.hero-eyebrow-row .ep-tag{
  background:rgba(232,163,61,0.14);
  border:1px solid var(--gold);
  color:var(--gold);
  font-family:'Macklin',sans-serif;font-weight:800;
  font-size:12px;letter-spacing:1px;
  padding:3px 10px;border-radius:20px;
  margin-left: 2px;
}

/* Témák archívum hero mobilon: a szívecske + 2 váltógomb egy sorban
   férjen el — kisebb padding/font, nowrap+enyhe horizontal scroll
   biztonsági hálóként, ha mégsem férne ki egy nagyon szűk képernyőn. */
@media (max-width:600px){
  .temak-category-switch{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .temak-cat-btn{
    font-size:11px;
    padding:9px 12px;
    white-space:nowrap;
    flex-shrink:0;
  }
  .temak-fav-btn{flex-shrink:0;}
}

/* ============================================================
   IKON-FALLBACK FONTAWESOME NÉLKÜL (mask-image SVG)
   A FontAwesome @font-face-alapú megjelenítés ismételten nem volt
   megbízható (gyanú: szerver/CDN cache figyelmen kívül hagyja a
   ?ver= query stringet a webfont fájloknál) — ezért a leggyakoribb
   social ikonokat itt CSS mask-image-dzsel, közvetlenül SVG-ből
   rajzoljuk ki, FÜGGETLENÜL attól, hogy a FontAwesome betűtípus
   betöltődött-e. A szín a background-color (= currentColor) adja,
   így a hover-szín-váltás (pl. promo-card hoveren sötétre vált)
   ugyanúgy működik, mint a font-ikonoknál.
   Érintett helyek: footer menü (li[class*="fa-"]), MV single/host-card
   social ikonok (.promo-icon i, .host-social-icon i).
============================================================ */
.footer-links li[class*="fa-"]::before,
.promo-icon i,
.host-social-icon i{
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
/* a FontAwesome saját ::before glyph-tartalmát kikapcsoljuk, hogy ne
   ütközzön a mask-image megoldással */
.footer-links li[class*="fa-"]::before{content:"";display:inline-block;width:16px;height:16px;}
.promo-icon i::before,
.host-social-icon i::before{content:none !important;}
.promo-icon i,
.host-social-icon i{display:inline-block;width:19px;height:19px;}
.host-social-icon i{width:32px;height:32px;}

/* Generikus fallback minden olyan FA ikonra, amihez nincs lent saját
   mask-image-ünk (pl. Visa, LinkedIn, vagy bármi más, amit még nem
   térképeztünk fel) — egy egyszerű "link" körvonal jelenik meg
   helyette, hogy legalább valami látszódjon a teli négyzet helyett.
   A specifikusabb (lentebbi) szabályok ugyanolyan specificitásúak,
   de KÉSŐBB jönnek a fájlban, így felülírják ezt. */
.footer-links li[class*="fa-"]::before,
.promo-icon i[class*="fa-"],
.host-social-icon i[class*="fa-"]{
  background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 13.5a3.5 3.5 0 0 0 5 0l3-3a3.54 3.54 0 0 0-5-5l-1.5 1.5M13.5 10.5a3.5 3.5 0 0 0-5 0l-3 3a3.54 3.54 0 0 0 5 5l1.5-1.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 13.5a3.5 3.5 0 0 0 5 0l3-3a3.54 3.54 0 0 0-5-5l-1.5 1.5M13.5 10.5a3.5 3.5 0 0 0-5 0l-3 3a3.54 3.54 0 0 0 5 5l1.5-1.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* TikTok */
.footer-links li[class*="tiktok"]::before,
.promo-icon i[class*="tiktok"],
.host-social-icon i[class*="tiktok"]{
  background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 5.82c-.7-.66-1.13-1.6-1.13-2.65H12.5v13.3c0 1.36-1.1 2.46-2.46 2.46a2.46 2.46 0 1 1 0-4.92c.26 0 .5.04.73.1V10.6a5.5 5.5 0 0 0-.73-.05A5.46 5.46 0 0 0 4.58 16a5.46 5.46 0 0 0 9.42 3.78A5.4 5.4 0 0 0 15.5 16V9.4a8 8 0 0 0 4.5 1.4V7.8a4.9 4.9 0 0 1-3.4-1.98Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.6 5.82c-.7-.66-1.13-1.6-1.13-2.65H12.5v13.3c0 1.36-1.1 2.46-2.46 2.46a2.46 2.46 0 1 1 0-4.92c.26 0 .5.04.73.1V10.6a5.5 5.5 0 0 0-.73-.05A5.46 5.46 0 0 0 4.58 16a5.46 5.46 0 0 0 9.42 3.78A5.4 5.4 0 0 0 15.5 16V9.4a8 8 0 0 0 4.5 1.4V7.8a4.9 4.9 0 0 1-3.4-1.98Z'/%3E%3C/svg%3E");
}

/* YouTube */
.footer-links li[class*="youtube"]::before,
.promo-icon i[class*="youtube"],
.host-social-icon i[class*="youtube"]{
  background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.5 7.2s-.22-1.56-.9-2.25c-.86-.9-1.83-.9-2.27-.96C16.2 3.75 12 3.75 12 3.75h-.01s-4.2 0-7.32.24c-.45.06-1.41.06-2.27.96-.68.69-.9 2.25-.9 2.25S1.25 9.02 1.25 10.84v1.7c0 1.82.25 3.64.25 3.64s.22 1.56.9 2.25c.86.9 1.98.87 2.48.97 1.8.17 7.62.23 7.62.23s4.2-.01 7.32-.25c.45-.06 1.41-.06 2.27-.96.68-.69.9-2.25.9-2.25s.25-1.82.25-3.64v-1.7c0-1.82-.25-3.64-.25-3.64Zm-12.88 7V8.9l6.02 2.66-6.02 2.64Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.5 7.2s-.22-1.56-.9-2.25c-.86-.9-1.83-.9-2.27-.96C16.2 3.75 12 3.75 12 3.75h-.01s-4.2 0-7.32.24c-.45.06-1.41.06-2.27.96-.68.69-.9 2.25-.9 2.25S1.25 9.02 1.25 10.84v1.7c0 1.82.25 3.64.25 3.64s.22 1.56.9 2.25c.86.9 1.98.87 2.48.97 1.8.17 7.62.23 7.62.23s4.2-.01 7.32-.25c.45-.06 1.41-.06 2.27-.96.68-.69.9-2.25.9-2.25s.25-1.82.25-3.64v-1.7c0-1.82-.25-3.64-.25-3.64Zm-12.88 7V8.9l6.02 2.66-6.02 2.64Z'/%3E%3C/svg%3E");
}

/* Instagram */
.footer-links li[class*="instagram"]::before,
.promo-icon i[class*="instagram"],
.host-social-icon i[class*="instagram"]{
  background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.75c2.97 0 3.32.01 4.5.07 1.17.05 1.97.24 2.43.41a4.9 4.9 0 0 1 1.77 1.15c.53.53.88 1.05 1.15 1.77.17.46.36 1.26.41 2.43.06 1.18.07 1.53.07 4.5s-.01 3.32-.07 4.5c-.05 1.17-.24 1.97-.41 2.43a4.9 4.9 0 0 1-1.15 1.77 4.9 4.9 0 0 1-1.77 1.15c-.46.17-1.26.36-2.43.41-1.18.06-1.53.07-4.5.07s-3.32-.01-4.5-.07c-1.17-.05-1.97-.24-2.43-.41a4.9 4.9 0 0 1-1.77-1.15 4.9 4.9 0 0 1-1.15-1.77c-.17-.46-.36-1.26-.41-2.43-.06-1.18-.07-1.53-.07-4.5s.01-3.32.07-4.5c.05-1.17.24-1.97.41-2.43a4.9 4.9 0 0 1 1.15-1.77A4.9 4.9 0 0 1 5.07 3.23c.46-.17 1.26-.36 2.43-.41 1.18-.06 1.53-.07 4.5-.07ZM12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0 8.25a3.25 3.25 0 1 1 0-6.5 3.25 3.25 0 0 1 0 6.5Zm5.4-9.4a1.1 1.1 0 1 1-2.2 0 1.1 1.1 0 0 1 2.2 0Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.75c2.97 0 3.32.01 4.5.07 1.17.05 1.97.24 2.43.41a4.9 4.9 0 0 1 1.77 1.15c.53.53.88 1.05 1.15 1.77.17.46.36 1.26.41 2.43.06 1.18.07 1.53.07 4.5s-.01 3.32-.07 4.5c-.05 1.17-.24 1.97-.41 2.43a4.9 4.9 0 0 1-1.15 1.77 4.9 4.9 0 0 1-1.77 1.15c-.46.17-1.26.36-2.43.41-1.18.06-1.53.07-4.5.07s-3.32-.01-4.5-.07c-1.17-.05-1.97-.24-2.43-.41a4.9 4.9 0 0 1-1.77-1.15 4.9 4.9 0 0 1-1.15-1.77c-.17-.46-.36-1.26-.41-2.43-.06-1.18-.07-1.53-.07-4.5s.01-3.32.07-4.5c.05-1.17.24-1.97.41-2.43a4.9 4.9 0 0 1 1.15-1.77A4.9 4.9 0 0 1 5.07 3.23c.46-.17 1.26-.36 2.43-.41 1.18-.06 1.53-.07 4.5-.07ZM12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0 8.25a3.25 3.25 0 1 1 0-6.5 3.25 3.25 0 0 1 0 6.5Zm5.4-9.4a1.1 1.1 0 1 1-2.2 0 1.1 1.1 0 0 1 2.2 0Z'/%3E%3C/svg%3E");
}

/* Facebook (f) */
.footer-links li[class*="facebook"]::before,
.promo-icon i[class*="facebook"],
.host-social-icon i[class*="facebook"]{
  background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.12 8.5h-2v-1.6c0-.75.5-.93.85-.93h1.1V3.3l-1.97-.01c-2.2 0-2.98 1.63-2.98 3.1V8.5H8.5v3h1.62v9h3v-9h2.27z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.12 8.5h-2v-1.6c0-.75.5-.93.85-.93h1.1V3.3l-1.97-.01c-2.2 0-2.98 1.63-2.98 3.1V8.5H8.5v3h1.62v9h3v-9h2.27z'/%3E%3C/svg%3E");
}

/* X / Twitter */
.footer-links li[class*="twitter"]::before,
.promo-icon i[class*="twitter"],
.host-social-icon i[class*="twitter"]{
  background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 3.5h4.2l4 5.3 4.5-5.3h2.3l-5.7 6.7 6.2 8.3h-4.2l-4.3-5.7-4.9 5.7H3.3l6.1-7.1Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 3.5h4.2l4 5.3 4.5-5.3h2.3l-5.7 6.7 6.2 8.3h-4.2l-4.3-5.7-4.9 5.7H3.3l6.1-7.1Z'/%3E%3C/svg%3E");
}

/* Szív / "Személyes támogatás" (donably) */
.footer-links li[class*="heart"]::before,
.promo-icon i[class*="heart"],
.host-social-icon i[class*="heart"]{
  background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.35-9.33-8.76C1.18 8.1 2.6 5 5.81 5c1.94 0 3.4 1.06 4.19 2.44C10.79 6.06 12.25 5 14.19 5 17.4 5 18.82 8.1 21.33 11.24 19 15.65 12 20 12 20Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.35-9.33-8.76C1.18 8.1 2.6 5 5.81 5c1.94 0 3.4 1.06 4.19 2.44C10.79 6.06 12.25 5 14.19 5 17.4 5 18.82 8.1 21.33 11.24 19 15.65 12 20 12 20Z'/%3E%3C/svg%3E");
}

/* ============================================================
   FEJEK — pontos pozicionálás (a user inspectorral kicentizte)
============================================================ */
#p1{left:220px;}
#p2{left:100px;}
#p3{left:0;}
.hero-portraits{padding-top:70px; padding-right:30px; } /* a fejbúb ne vágódjon a zoom-animáció közben */

@media (max-width:880px){
  .portrait{width:390px;}
  #p1{left:140px;}
  #p2{left:60px;}
  #p3{left:0;}
  .hero-portraits{left:calc(100vw / 2 - 80px);}
  .hero-right{margin-top:-30px;}
}

/* Téma/Politika single breadcrumb szívecske: ne nyújtsa meg a sort */
.breadcrumb-fav-btn{position:relative;top:0;}

/* ============================================================
   SZAVAZÁS — 0%/gomb helye nem-szavazott állapotban
   (data-has-voted="false"): a label-sor szűkebb, hogy beférjen
   mellé a gomb, a gomb pedig felhúzva ugyanabba a sorba, így a
   sorok ugyanolyan magasak, mint a már leszavazott kártyán.
============================================================ */
.poll-card:not([data-has-voted="true"]) .poll-option-label-row{width:calc(100% - 77px);}
.poll-option-vote-btn{margin-top:-22px;}
.poll-option-vote-btn.poll-custom-answer-submit{margin-top:0}
/* ============================================================
   POLL — sorbarendezés (time/votes) + "Mutass többet" (5+ opció)
============================================================ */
.poll-card-head-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
}
.poll-sort-toggle{
  flex-shrink:0;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,0.18); /* ugyanaz, mint az "Ez!" gomb kerete */
  border-radius:5px;
  background:transparent;
  color:#ccc;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.poll-sort-toggle:hover{border-color:var(--teal);color:var(--teal);}
.poll-sort-toggle svg{width:16px;height:16px;}

.poll-show-more-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;
  margin-top:6px;
  padding:8px 0;
  background:transparent;border:0;
  font-family:'Macklin',sans-serif;font-weight:600;font-size:12.5px;
  color:var(--grey);
  cursor:pointer;
  transition:color .15s ease;
}
.poll-show-more-btn:hover{color:var(--gold);}
.poll-show-more-btn svg{
  width:14px;height:14px;
  transition:transform .2s ease;
}
.poll-show-more-btn.is-expanded svg{transform:rotate(180deg);}