/* =============================================================================
   zene.ro theme – main.css  v2.1
   Barlow Condensed tipográfia, animált logo bars, nyíl section fejlécek
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:wght@300;400;500;600;700&display=swap');

/* ---------- 1. Design tokens ---------- */
:root {
  --z-red:        #e11d2c;
  --z-red-dark:   #b7121f;
  --z-ink:        #0a0e1a;
  --z-ink-2:      #121826;
  --z-ink-3:      #1b2232;
  --z-bg:         #eef0f2;
  --z-surface:    #ffffff;
  --z-surface-2:  #f7f8fa;
  --z-border:     #e3e6ea;
  --z-border-dk:  #2a3347;
  --z-text:        #1a1f2b;
  --z-text-soft:   #4a5264;
  --z-text-dim:    #8a92a1;
  --z-text-invert: #ffffff;
  --z-text-invert-soft: #b8bfce;
  --z-chart-red:    #c2202c;
  --z-chart-green:  #0e6c3b;
  --z-chart-yellow: #b8860b;
  --z-chart-blue:   #1e3a8a;
  --z-rating-ok:    #2a9d4a;
  --z-radio-1: #d6338a;
  --z-radio-2: #e63a6e;
  --z-radio-3: #e58917;
  --z-radio-4: #1a1a1a;
  --z-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --z-font-alt:     'Barlow Condensed', 'Arial Narrow', sans-serif;
  --z-font-sans:    'Barlow', 'DM Sans', system-ui, sans-serif;
  --z-fs-xs: .8125rem;
  --z-fs-sm: .9375rem;
  --z-fs-md: 1.0625rem;
  --z-fs-lg: 1.1875rem;
  --z-fs-xl: 1.5rem;
  --z-fs-2xl: 1.875rem;
  --z-fs-3xl: 2.375rem;
  --z-fs-4xl: clamp(2rem, 1.2rem + 3vw, 3rem);
  --z-fs-hero: clamp(2rem, 1.1rem + 4vw, 3.75rem);
  --z-container: 1280px;
  --z-gutter: clamp(16px, 2vw, 28px);
  --z-radius-sm: 3px;
  --z-radius:    6px;
  --z-radius-lg: 10px;
  --z-shadow-sm: 0 1px 2px rgba(10,14,26,.08);
  --z-shadow:    0 6px 18px rgba(10,14,26,.08);
  --z-s-1:4px; --z-s-2:8px; --z-s-3:12px; --z-s-4:16px;
  --z-s-5:24px; --z-s-6:32px; --z-s-7:48px; --z-s-8:64px;
  --z-transition: 160ms ease;
  --z-topbar-h: 34px;
  --z-header-h: 110px;
  --z-nav-h: 54px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; font-family:var(--z-font-sans); font-size:var(--z-fs-md); line-height:1.55; color:var(--z-text); background:var(--z-bg); -webkit-font-smoothing:antialiased; }
img, svg, video { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; transition:color var(--z-transition); }
a:hover { color:var(--z-red); }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul, ol { padding-left:1.1em; }
.z-footer ul,.z-nav ul,.z-topbar ul,.z-social { list-style:none; padding:0; margin:0; }
.screen-reader-text { clip:rect(1px,1px,1px,1px); position:absolute!important; height:1px; width:1px; overflow:hidden; white-space:nowrap; }

/* ---------- 3. Layout ---------- */
.z-container { width:100%; max-width:var(--z-container); margin:0 auto; padding:0 var(--z-gutter); }
.z-section   { padding-block:var(--z-s-6); }
.z-section + .z-section { padding-top:0; }
.z-adwrap    { margin-block:var(--z-s-5); }

/* ---------- 4. Topbar ---------- */
.z-topbar { background:var(--z-ink); color:var(--z-text-invert-soft); font-size:var(--z-fs-xs); min-height:var(--z-topbar-h); border-bottom:1px solid rgba(255,255,255,.04); }
.z-topbar__inner { display:flex; align-items:center; gap:var(--z-s-4); min-height:var(--z-topbar-h); flex-wrap:wrap; }
.z-topbar__left,.z-topbar__right { display:inline-flex; align-items:center; gap:var(--z-s-4); }
.z-topbar__right { margin-left:auto; }
.z-topbar__meta { display:inline-flex; align-items:center; gap:var(--z-s-2); color:#fff; font-weight:600; }
.z-topbar__day { background:var(--z-red); color:#fff; padding:2px 8px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:10px; font-family:var(--z-font-display); }
.z-topbar__tag { color:var(--z-text-invert-soft); text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-family:var(--z-font-display); }
.z-topbar a { color:inherit; }
.z-topbar a:hover { color:#fff; }
.z-topbar__live { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:2px; background:var(--z-red); color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:10px; font-family:var(--z-font-display); }
.z-topbar__live::before { content:""; width:8px; height:8px; border-radius:999px; background:#fff; animation:z-pulse 1.2s ease-in-out infinite; }
@keyframes z-pulse { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ---------- 5. Header ---------- */
.z-header-wrap { background:var(--z-surface); border-bottom:1px solid var(--z-border); position:sticky; top:0; z-index:40; transition:box-shadow var(--z-transition); }
.z-header-wrap.is-scrolled { box-shadow:0 6px 16px rgba(10,14,26,.08); }
.z-header { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--z-s-5); min-height:var(--z-header-h); }
.z-logo { display:inline-flex; align-items:center; line-height:1; }
.z-logo__img { display:block; height:auto; width:clamp(180px,22vw,260px); max-width:100%; }
.z-logo--footer .z-logo__img { width:220px; }
.z-header__banner { display:flex; justify-content:center; align-items:center; min-height:60px; }
.z-header__actions { display:inline-flex; align-items:center; gap:var(--z-s-3); }
.z-iconbtn { width:42px; height:42px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; color:var(--z-ink); transition:color var(--z-transition),background var(--z-transition); }
.z-iconbtn:hover { color:var(--z-red); background:var(--z-surface-2); }
.z-header__toggle { display:none; width:42px; height:42px; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.z-header__toggle-bar { width:22px; height:2px; background:var(--z-ink); border-radius:2px; }

/* ---------- 6. Nav ---------- */
.z-nav-wrap { background:var(--z-ink); border-bottom:3px solid var(--z-red); }
.z-nav { min-height:var(--z-nav-h); }
.z-nav__list { display:flex; flex-wrap:wrap; align-items:stretch; font-family:var(--z-font-display); font-size:15px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.z-nav__list > li { position:relative; }
.z-nav__list > li + li::before { content:""; position:absolute; left:-3px; top:50%; width:5px; height:5px; border-radius:999px; background:var(--z-red); transform:translateY(-50%); pointer-events:none; }
.z-nav__list > li > a { display:inline-flex; align-items:center; height:var(--z-nav-h); padding:0 20px; color:#fff; position:relative; }
.z-nav__list > li > a::after { content:""; position:absolute; left:50%; right:50%; bottom:0; height:3px; background:var(--z-red); transition:left var(--z-transition),right var(--z-transition); }
.z-nav__list > li > a:hover::after,.z-nav__list > li.current-menu-item > a::after,.z-nav__list > li.current-menu-parent > a::after { left:0; right:0; }
.z-nav__list > li.current-menu-item > a,.z-nav__list > li > a:hover { color:#fff; }
/* Főoldal aktív piros háttér */
.z-nav__list > li.current-menu-item > a,.z-nav__list > li.menu-home > a { background:var(--z-red); }
.z-nav__list > li.menu-home > a::after { display:none; }
/* Dropdown */
.z-nav__list li ul { display:none; position:absolute; top:100%; left:0; background:var(--z-ink-2); min-width:200px; z-index:100; flex-direction:column; border-top:2px solid var(--z-red); }
.z-nav__list li:hover > ul { display:flex; }
.z-nav__list li ul li a { display:block; padding:10px 20px; color:rgba(255,255,255,.75); font-size:13px; border-bottom:1px solid rgba(255,255,255,.05); }
.z-nav__list li ul li a:hover { color:#fff; background:rgba(255,255,255,.04); }
/* Searchbar */
.z-searchbar { padding:var(--z-s-4) 0; background:var(--z-ink-2); border-top:1px solid rgba(255,255,255,.06); }
.z-searchbar[hidden] { display:none; }

/* ---------- 7. Section ribbon — ARROW SHAPE ---------- */
.z-ribbon { display:flex; align-items:center; gap:var(--z-s-4); margin-bottom:var(--z-s-5); }
.z-ribbon__title {
  font-family:var(--z-font-display);
  font-size:20px; font-weight:900;
  letter-spacing:.08em; text-transform:uppercase;
  color:#fff;
  padding:10px 28px 10px 18px;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  background:var(--z-ink);
  margin:0;
  white-space:nowrap;
}
.z-ribbon--red    .z-ribbon__title { background:var(--z-red); }
.z-ribbon--green  .z-ribbon__title { background:var(--z-chart-green); }
.z-ribbon--orange .z-ribbon__title { background:#e58917; }
.z-ribbon--dark   .z-ribbon__title { background:var(--z-ink); }
.z-ribbon__rule { flex:1; height:1px; background:var(--z-border); }
.z-ribbon__more { font-family:var(--z-font-display); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--z-text-dim); white-space:nowrap; }
.z-ribbon__more:hover { color:var(--z-red); }

/* ---------- 8. Subtabs (Magyarország / Erdély / Nagyvilág) ---------- */
.z-subtabs { display:flex; align-items:center; gap:0; margin-bottom:var(--z-s-5); border-bottom:2px solid var(--z-border); }
.z-subtabs__item { font-family:var(--z-font-display); font-size:15px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--z-text-dim); padding:0 20px; line-height:44px; border-bottom:3px solid transparent; margin-bottom:-2px; transition:color var(--z-transition),border-color var(--z-transition); }
.z-subtabs__item.is-active,.z-subtabs__item:hover { color:var(--z-red); border-bottom-color:var(--z-red); }

/* ---------- 9. Grid ---------- */
.z-grid { display:grid; gap:var(--z-s-4); }
.z-grid--2 { grid-template-columns:repeat(2,1fr); }
.z-grid--3 { grid-template-columns:repeat(3,1fr); }
.z-grid--4 { grid-template-columns:repeat(4,1fr); }
.z-grid--5 { grid-template-columns:repeat(5,1fr); }

/* ---------- 10. Magazine Hero ---------- */
.z-mhero { display:grid; grid-template-columns:460px 1fr; min-height:500px; background:var(--z-surface); }
.z-mhero__list { padding:36px 32px; display:flex; flex-direction:column; border-right:1px solid var(--z-border); }
.z-mhero__lead { flex:1; }
.z-mhero__leadTitle { font-family:var(--z-font-display); font-size:clamp(32px,4vw,52px); font-weight:900; line-height:1.0; letter-spacing:-.01em; text-transform:uppercase; color:var(--z-text); margin:0 0 14px; }
.z-mhero__leadTitle a { color:inherit; }
.z-mhero__leadTitle a:hover { color:var(--z-red); }
.z-mhero__leadExcerpt { font-size:var(--z-fs-sm); color:var(--z-text-soft); line-height:1.7; margin-bottom:var(--z-s-5); }
.z-mhero__leadMeta { font-family:var(--z-font-display); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--z-text-dim); display:flex; align-items:center; gap:var(--z-s-3); flex-wrap:wrap; }
.z-mhero__leadMeta span + span::before { content:"·"; margin-right:var(--z-s-3); opacity:.5; }

/* Numbered list */
.z-mhero__rank { list-style:none; padding:0; margin:var(--z-s-5) 0 0; border-top:1px solid var(--z-border); }
.z-mhero__rankItem { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--z-border); }
.z-mhero__rankItem:last-child { border-bottom:none; padding-bottom:0; }
.z-mhero__rankNum { font-family:var(--z-font-display); font-size:18px; font-weight:900; color:var(--z-text-dim); min-width:26px; line-height:1; }
.z-mhero__rankBar { width:3px; height:32px; flex-shrink:0; background:var(--z-red); }
.z-mhero__rankItem:nth-child(2) .z-mhero__rankBar { background:var(--z-ink); }
.z-mhero__rankItem:nth-child(3) .z-mhero__rankBar { background:var(--z-chart-green); }
.z-mhero__rankTitle { font-family:var(--z-font-display); font-size:14px; font-weight:800; text-transform:uppercase; color:var(--z-text); line-height:1.3; transition:color var(--z-transition); }
.z-mhero__rankTitle:hover { color:var(--z-red); }

/* Hero right feature */
.z-mhero__feature { position:relative; overflow:hidden; cursor:pointer; display:block; background:#111; }
.z-mhero__feature:hover .z-mhero__featureImg { transform:scale(1.04); filter:brightness(.4); }
.z-mhero__featureImg { width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.5); transition:transform .5s,filter .4s; }
.z-mhero__featureOverlay { position:absolute; bottom:0; left:0; right:0; padding:20px 24px; background:linear-gradient(transparent,rgba(0,0,0,.85)); }
.z-mhero__featureTitle { font-family:var(--z-font-display); font-size:clamp(22px,3vw,34px); font-weight:900; text-transform:uppercase; color:#fff; line-height:1.1; margin:8px 0 0; }

/* ---------- 11. Category flag / badge ---------- */
.z-flag { display:inline-block; font-family:var(--z-font-display); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; padding:4px 10px; background:var(--z-red); margin-bottom:var(--z-s-3); }
.z-flag--green  { background:var(--z-chart-green); }
.z-flag--orange { background:#e58917; }
.z-flag--dark   { background:var(--z-ink); }
.z-flag--purple { background:#6a1b9a; }

/* ---------- 12. Cards ---------- */
/* News card */
.z-card { background:var(--z-surface); overflow:hidden; transition:box-shadow var(--z-transition); }
.z-card:hover { box-shadow:var(--z-shadow); }
.z-card__img-wrap { position:relative; overflow:hidden; }
.z-card__img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:transform .45s; }
.z-card:hover .z-card__img { transform:scale(1.04); }
.z-card__badge { position:absolute; top:10px; left:10px; }
.z-card__readtime { position:absolute; top:10px; right:10px; font-family:var(--z-font-display); font-size:11px; font-weight:700; letter-spacing:.06em; background:rgba(0,0,0,.7); color:#fff; padding:4px 8px; }
.z-card__body { padding:var(--z-s-4); }
.z-card__title { font-family:var(--z-font-display); font-size:18px; font-weight:900; text-transform:uppercase; line-height:1.2; color:var(--z-text); margin:0 0 var(--z-s-2); transition:color var(--z-transition); }
.z-card__title a { color:inherit; }
.z-card:hover .z-card__title { color:var(--z-red); }
.z-card__meta { font-family:var(--z-font-display); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--z-text-dim); margin-top:var(--z-s-2); }
.z-card__excerpt { font-size:var(--z-fs-xs); color:var(--z-text-soft); line-height:1.6; margin-top:var(--z-s-2); }

/* Video card */
.z-vcard { cursor:pointer; }
.z-vcard:hover .z-vcard__title { color:var(--z-red); }
.z-vcard__thumb { position:relative; overflow:hidden; aspect-ratio:16/9; background:#111; margin-bottom:var(--z-s-3); }
.z-vcard__img { width:100%; height:100%; object-fit:cover; display:block; transition:opacity .3s; }
.z-vcard:hover .z-vcard__img { opacity:.7; }
.z-vcard__play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; background:var(--z-red); display:flex; align-items:center; justify-content:center; transition:transform .2s; }
.z-vcard:hover .z-vcard__play { transform:translate(-50%,-50%) scale(1.1); }
.z-vcard__play-icon { width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:18px solid #fff; margin-left:4px; }
.z-vcard__duration { position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.75); color:#fff; font-family:var(--z-font-display); font-size:12px; font-weight:700; padding:2px 7px; }
.z-vcard__artist { font-family:var(--z-font-display); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--z-red); margin-bottom:var(--z-s-1); }
.z-vcard__title { font-family:var(--z-font-display); font-size:14px; font-weight:800; text-transform:uppercase; color:var(--z-text); line-height:1.25; transition:color var(--z-transition); }
.z-vcard__title a { color:inherit; }

/* Festival card */
.z-fcard { position:relative; overflow:hidden; cursor:pointer; aspect-ratio:16/9; background:#111; display:block; }
.z-fcard:hover .z-fcard__img { transform:scale(1.06); filter:brightness(.25); }
.z-fcard__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.42); transition:transform .5s,filter .4s; }
.z-fcard__month { position:absolute; top:12px; left:12px; font-family:var(--z-font-display); font-size:13px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:#fff; padding:5px 14px; background:#e58917; }
.z-fcard__month--jun { background:var(--z-red); }
.z-fcard__month--jul { background:#6a1b9a; }
.z-fcard__month--aug { background:#e58917; }
.z-fcard__month--maj { background:var(--z-chart-green); }
.z-fcard__body { position:absolute; bottom:0; left:0; right:0; padding:16px; background:linear-gradient(transparent,rgba(0,0,0,.88)); }
.z-fcard__name { font-family:var(--z-font-display); font-size:22px; font-weight:900; color:#fff; line-height:1; text-transform:uppercase; margin-bottom:4px; }
.z-fcard__loc { font-size:12px; color:rgba(255,255,255,.55); }

/* Album card */
.z-acard { background:var(--z-surface); border:1px solid var(--z-border); overflow:hidden; cursor:pointer; transition:box-shadow var(--z-transition); }
.z-acard:hover { box-shadow:var(--z-shadow); }
.z-acard:hover .z-acard__title { color:var(--z-red); }
.z-acard__img-wrap { position:relative; overflow:hidden; }
.z-acard__img { width:100%; height:240px; object-fit:cover; display:block; filter:brightness(.85); transition:filter .4s; }
.z-acard:hover .z-acard__img { filter:brightness(.7); }
.z-acard__badge { position:absolute; top:10px; left:10px; font-family:var(--z-font-display); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; padding:4px 10px; background:var(--z-red); }
.z-acard__score-overlay { position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,.75); display:flex; align-items:center; gap:6px; padding:5px 10px; }
.z-score-dots { display:flex; gap:2px; }
.z-score-dot { width:10px; height:10px; border-radius:1px; }
.z-score-dot--on  { background:var(--z-red); }
.z-score-dot--off { background:rgba(255,255,255,.25); }
.z-score-num { font-family:var(--z-font-display); font-size:16px; font-weight:900; color:var(--z-red); }
.z-acard__body { padding:16px 18px 20px; }
.z-acard__artist { font-family:var(--z-font-display); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--z-text-dim); margin-bottom:5px; }
.z-acard__title { font-family:var(--z-font-display); font-size:26px; font-weight:900; text-transform:uppercase; color:var(--z-text); line-height:1.1; margin-bottom:10px; transition:color var(--z-transition); }
.z-acard__title a { color:inherit; }
.z-acard__excerpt { font-size:var(--z-fs-xs); color:var(--z-text-soft); line-height:1.65; margin-bottom:12px; }
.z-rating-bar { display:flex; gap:3px; }
.z-rating-bar__dot { flex:1; height:5px; }
.z-rating-bar__dot--on  { background:var(--z-rating-ok); }
.z-rating-bar__dot--off { background:var(--z-border); }

/* Interview card */
.z-icard { background:var(--z-surface); border:1px solid var(--z-border); overflow:hidden; cursor:pointer; transition:box-shadow var(--z-transition); }
.z-icard:hover { box-shadow:var(--z-shadow); }
.z-icard:hover .z-icard__title { color:var(--z-red); }
.z-icard__img-wrap { position:relative; overflow:hidden; }
.z-icard__img { width:100%; height:220px; object-fit:cover; display:block; filter:brightness(.8); }
.z-icard__cat { position:absolute; bottom:10px; left:12px; font-family:var(--z-font-display); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.65); }
.z-icard__body { padding:16px 18px 20px; }
.z-icard__title { font-family:var(--z-font-display); font-size:18px; font-weight:900; text-transform:uppercase; color:var(--z-text); line-height:1.2; margin-bottom:10px; transition:color var(--z-transition); }
.z-icard__title a { color:inherit; }
.z-icard__quote { font-size:13px; color:var(--z-text-soft); font-style:italic; line-height:1.6; border-left:3px solid var(--z-border); padding-left:10px; margin-bottom:12px; }
.z-icard__meta { font-family:var(--z-font-display); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--z-text-dim); }

/* ---------- 13. Slágerlisták – colored blocks ---------- */
.z-chart { padding:28px; }
.z-chart--red    { background:var(--z-chart-red); }
.z-chart--green  { background:var(--z-chart-green); }
.z-chart--yellow { background:var(--z-chart-yellow); }
.z-chart--blue   { background:var(--z-chart-blue); }
.z-chart__title { font-family:var(--z-font-display); font-size:24px; font-weight:900; color:#fff; text-transform:uppercase; margin:0 0 4px; letter-spacing:.04em; }
.z-chart__sub { font-size:13px; color:rgba(255,255,255,.55); margin-bottom:16px; }
.z-chart__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,.2); padding-top:12px; }
.z-chart__item { display:flex; align-items:baseline; gap:10px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.12); cursor:pointer; transition:opacity .15s; }
.z-chart__item:last-child { border-bottom:none; }
.z-chart__item:hover { opacity:.75; }
.z-chart__num { font-family:var(--z-font-display); font-size:18px; font-weight:900; color:rgba(255,255,255,.9); min-width:22px; line-height:1; }
.z-chart__artist { font-family:var(--z-font-display); font-size:15px; font-weight:900; color:#fff; }
.z-chart__sep { color:rgba(255,255,255,.5); margin:0 4px; }
.z-chart__song { font-size:14px; color:rgba(255,255,255,.7); }
.z-chart__more { display:inline-block; margin-top:18px; font-family:var(--z-font-display); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; border:2px solid rgba(255,255,255,.4); padding:8px 20px; transition:border-color .2s; }
.z-chart__more:hover { border-color:#fff; color:#fff; }

/* ---------- 14. Artist scroller ---------- */
.z-section--dark { background:var(--z-ink); }
.z-section--dark .z-ribbon__title { background:rgba(255,255,255,.1); }
.z-section--dark .z-ribbon__more { color:rgba(255,255,255,.4); }
.z-section--dark .z-ribbon__rule { background:rgba(255,255,255,.1); }
.z-scroller { display:flex; gap:var(--z-s-3); overflow-x:auto; padding-bottom:var(--z-s-3); scrollbar-width:thin; scrollbar-color:var(--z-red) rgba(255,255,255,.1); }
.z-scroller::-webkit-scrollbar { height:4px; }
.z-scroller::-webkit-scrollbar-track { background:rgba(255,255,255,.1); }
.z-scroller::-webkit-scrollbar-thumb { background:var(--z-red); }
.z-artist { flex-shrink:0; width:200px; cursor:pointer; position:relative; overflow:hidden; background:#111; display:block; }
.z-artist:hover .z-artist__img { filter:brightness(.35); transform:scale(1.04); }
.z-artist__img { width:200px; height:220px; object-fit:cover; display:block; filter:brightness(.65); transition:filter .4s,transform .4s; }
.z-artist__body { position:absolute; bottom:0; left:0; right:0; padding:12px; background:linear-gradient(transparent,rgba(0,0,0,.85)); }
.z-artist__name { font-family:var(--z-font-display); font-size:17px; font-weight:900; text-transform:uppercase; color:#fff; line-height:1.2; margin-bottom:4px; }
.z-artist__genre { font-family:var(--z-font-display); font-size:12px; font-weight:700; text-transform:uppercase; color:var(--z-red); letter-spacing:.08em; }

/* ---------- 15. Rádió tiles ---------- */
.z-videos-wrap { background:var(--z-ink-2); }
.z-radio { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 20px; cursor:pointer; position:relative; min-height:160px; transition:opacity .2s; text-decoration:none; }
.z-radio:hover { opacity:.9; }
.z-radio--1 { background:var(--z-radio-1); }
.z-radio--2 { background:var(--z-radio-2); }
.z-radio--3 { background:var(--z-radio-3); }
.z-radio--4 { background:var(--z-radio-4); }
.z-radio__live { position:absolute; top:10px; right:10px; width:8px; height:8px; border-radius:50%; background:#fff; opacity:.5; }
.z-radio__logo { width:80px; height:80px; border-radius:50%; object-fit:contain; margin-bottom:14px; }
.z-radio__name { font-family:var(--z-font-display); font-size:18px; font-weight:900; color:#fff; text-transform:uppercase; text-align:center; margin:0 0 4px; }
.z-radio__freq { font-size:12px; color:rgba(255,255,255,.65); text-align:center; letter-spacing:.06em; }

/* ---------- 16. Ad slots ---------- */
.z-ad { display:flex; align-items:center; justify-content:center; background:var(--z-surface-2); border:1px solid var(--z-border); min-height:90px; font-size:11px; color:var(--z-text-dim); letter-spacing:.08em; text-transform:uppercase; }

/* ---------- 17. Search ---------- */
.z-search__form { display:flex; }
.z-search__input { flex:1; background:var(--z-ink-3); border:none; outline:none; font-family:var(--z-font-display); font-size:20px; font-weight:700; padding:14px 20px; color:#fff; }
.z-search__input::placeholder { color:rgba(255,255,255,.35); }
.z-search__btn { background:var(--z-red); color:#fff; border:none; font-family:var(--z-font-display); font-size:14px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:14px 24px; cursor:pointer; }

/* ---------- 18. Single post ---------- */
.z-single__hero { position:relative; height:520px; overflow:hidden; background:#111; }
.z-single__hero-img { width:100%; height:100%; object-fit:cover; filter:brightness(.4); display:block; }
.z-single__hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.9) 0%,transparent 60%); }
.z-single__body { max-width:820px; margin:0 auto; padding:36px var(--z-gutter); }
.z-single__cat { font-family:var(--z-font-display); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:var(--z-red); color:#fff; padding:4px 10px; display:inline-block; margin-bottom:18px; }
.z-single__title { font-family:var(--z-font-display); font-size:clamp(28px,5vw,44px); font-weight:900; text-transform:uppercase; line-height:1.05; color:var(--z-text); margin-bottom:16px; }
.z-single__meta { font-family:var(--z-font-display); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--z-text-dim); margin-bottom:24px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.z-single__meta span + span::before { content:"·"; margin-right:10px; opacity:.5; }
.z-entry p { font-size:16px; color:var(--z-text-soft); line-height:1.85; margin-bottom:20px; }
.z-entry h2 { font-family:var(--z-font-display); font-size:26px; font-weight:800; text-transform:uppercase; color:var(--z-text); margin:30px 0 14px; }
.z-entry img { max-width:100%; height:auto; margin:20px 0; }

/* ---------- 19. Pagination ---------- */
.nav-links { display:flex; gap:4px; justify-content:center; margin:24px 0; flex-wrap:wrap; }
.nav-links a,.nav-links span { font-family:var(--z-font-display); font-size:14px; font-weight:700; letter-spacing:.06em; padding:8px 14px; background:var(--z-surface); color:var(--z-text); border:1px solid var(--z-border); transition:background var(--z-transition),color var(--z-transition); }
.nav-links a:hover { background:var(--z-red); color:#fff; border-color:var(--z-red); }
.nav-links .current { background:var(--z-red); color:#fff; border-color:var(--z-red); }

/* ---------- 20. Footer ---------- */
.z-footer { background:var(--z-ink); border-top:3px solid var(--z-red); padding:var(--z-s-7) 0 var(--z-s-5); }
.z-footer__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--z-s-7); margin-bottom:var(--z-s-7); }
.z-footer__brand .z-logo__img { margin-bottom:var(--z-s-4); }
.z-footer__desc { font-size:var(--z-fs-xs); color:var(--z-text-invert-soft); line-height:1.75; opacity:.6; }
.z-footer__heading { font-family:var(--z-font-display); font-size:14px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:var(--z-s-4); }
.z-footer__links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.z-footer__links a { font-size:13px; color:rgba(255,255,255,.45); transition:color var(--z-transition); display:flex; align-items:center; gap:6px; }
.z-footer__links a::before { content:'›'; color:var(--z-red); font-size:16px; line-height:1; font-family:var(--z-font-display); }
.z-footer__links a:hover { color:#fff; }
.z-footer__nl-label { font-family:var(--z-font-display); font-size:14px; font-weight:700; color:#fff; margin-bottom:8px; }
.z-footer__nl-desc { font-size:12px; color:rgba(255,255,255,.38); line-height:1.6; margin-bottom:14px; }
.z-footer__nl-form { display:flex; flex-direction:column; gap:8px; }
.z-footer__nl-input { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#fff; font-family:var(--z-font-sans); font-size:13px; padding:10px 14px; outline:none; }
.z-footer__nl-input::placeholder { color:rgba(255,255,255,.3); }
.z-footer__nl-btn { background:var(--z-red); color:#fff; border:none; font-family:var(--z-font-display); font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:10px 20px; cursor:pointer; }
.z-footer__bottom { border-top:1px solid rgba(255,255,255,.07); padding-top:18px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.z-footer__copy { font-size:11px; color:rgba(255,255,255,.2); letter-spacing:.04em; }
.z-footer__copy a { color:inherit; }

/* ---------- 21. Responsive ---------- */
@media(max-width:1100px) {
  .z-grid--4 { grid-template-columns:repeat(2,1fr); }
  .z-footer__grid { grid-template-columns:1fr 1fr; gap:var(--z-s-5); }
  .z-mhero { grid-template-columns:1fr; }
  .z-mhero__feature { min-height:320px; }
}
@media(max-width:900px) {
  .z-grid--3 { grid-template-columns:1fr 1fr; }
  .z-grid--2 { grid-template-columns:1fr; }
  .z-header { grid-template-columns:auto auto; }
  .z-header__banner { display:none; }
  .z-header__toggle { display:flex; }
  .z-nav-wrap { display:none; }
  .z-nav-wrap.is-open { display:block; }
  .z-nav__list { flex-direction:column; }
  .z-nav__list > li + li::before { display:none; }
  .z-nav__list > li > a { height:auto; padding:12px 20px; border-bottom:1px solid rgba(255,255,255,.06); }
}
@media(max-width:640px) {
  .z-grid--3 { grid-template-columns:1fr; }
  .z-grid--4 { grid-template-columns:1fr; }
  .z-footer__grid { grid-template-columns:1fr; }
  .z-mhero__list { padding:24px 16px; }
  .z-topbar { display:none; }
  .z-footer__bottom { flex-direction:column; text-align:center; }
}