/* =========================================================================
   ZTE FC 2026/27 – arculati frontend
   Minden érték a "uj-design.png" tervből és a "26-27 Visual Handbook" PDF-ből
   származik (1:1 kimérés, 1320px-es konténer).
   ========================================================================= */

/* -------------------------------------------------------------------------
   2. Design tokenek
   ------------------------------------------------------------------------- */
:root {
  /* Arculati színpaletta – Visual Handbook 4. oldal */
  --c-blue: #002f6c;        /* Blue Vortex   PANTONE 294 C */
  --c-gold: #C6AA76;
  --c-gold-dark2: #8C703B;
  /*--c-gold: #c6aa76;         Legacy Gold   PANTONE 466 C */
  --c-white: #fff;       /* White White                 */
  --c-agility: #1E22AA;     /* Agility Blue  PANTONE 2736 C */

  /* Származtatott tónusok (csak felületkezeléshez, nem új arculati szín) */
  --c-blue-900: #001f47;
  --c-gold-dark: #b0945f;
  --c-border: #dedede;
  --c-graphite: #444444;    /* folyó szöveg – a tervből kimért grafitszürke */
  --c-body: var(--c-graphite);

  /* Layout */
  --container-max: 1320px;  /* tervből kimérve: 1319px */
  --nav-h: 109px;           /* tervből kimérve */
  --nav-h-md: 84px;
  --nav-h-scrolled: 84px;   /* görgetés utáni kompakt fejléc */
  --hero-h: 793px;          /* tervből kimérve */

  /* Tipográfia – tervből kimért méretek */
  --fs-nav: 1rem;        /* 20px */
  --fs-h1: 3.375rem;        /* 54px */
  --fs-h2: 2.875rem;        /* 46px – szekciócímek */
  --fs-card-title: 1.5rem;  /* 24px */
  --fs-body: 1.125rem;      /* 18px */
  --fs-meta: 1.0625rem;     /* 17px – dátum */
  --fs-label: 0.875rem;     /* 14px – kiskapitális címkék */
  --lh-body: 1.5;           /* 27px sortávolság 18px-en */

  /* Térközök – ügyfélelv: content-blokkok között max 3rem */
  --space-section: 3rem;
  --space-section-sm: 2rem;
  --space-block: 1.5rem;
  --gutter-news: 0px;       /* vízszintes: a terv szerint a kártyák hézag nélkül érnek össze */
  --gutter-news-row: 2.5rem;/* 40px – függőleges térköz, amikor mobilon egymás alá kerülnek */
  --card-inset: 1.5rem;     /* 24px – szövegbehúzás a kártya széléhez képest */
  --hero-bullet-gap: 2rem;  /* 32px – térköz a hero progress vonal és a felirat között */
}

/* -------------------------------------------------------------------------
   3. Alapok
   ------------------------------------------------------------------------- */
* { box-sizing: border-box; }

.c-graphite {color: var(--c-graphite);}
.c-gold, .color-2 {color: var(--c-gold);}
.c-blue, .color-1 {color: var(--c-blue);}
.c-blue a:hover {color: var(--c-gold);}
.c-white {color: var(--c-white);}
.c-white a {color: var(--c-white);}
.c-white a:hover {color: var(--c-white);}
.hover-gold:hover {color: var(--c-gold);}

.s-font {font-size: 1.5rem!important;}
.l-font {font-size: 2rem!important;}
.xl-font {font-size: 3.5rem!important;}

.panel-title a {border: 2px solid var(--c-gold);padding: .5rem;display: inline-block;margin-bottom: 1rem;}

img[src="/img/"] {
  display: none;
}

.fit-cover {object-fit: cover;width: 100%;height: 100%;}

.cookie-image-button {border-radius: 50%;border: none;aspect-ratio: 1/1;}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-body);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.15; }

:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: 2px;
}

.container-zte {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1rem;
}
.empty:empty {display:none}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1200;
  background: var(--c-gold-dark2);
  color: #fff;
  padding: .75rem 1.25rem;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   4. Gomb (terv: 179×46 / 201×41 px, éles sarkok, arany alap, fehér szöveg)
   ------------------------------------------------------------------------- */
   .btn {border-radius: 0;}
.btn-zte, .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .5rem 2rem;
  background: var(--c-gold-dark2);
  color: #fff;
  font-size: var(--fs-nav);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 0;
  border-radius: 0;
  transition: background-color .2s ease, transform .2s ease;
}
.btn-zte:hover,
.btn-secondary:hover,
.btn-zte:focus-visible { background: var(--c-gold-dark); color: #fff; }

.btn-zte--sm { min-height: 41px; font-size: 1.0625rem; padding: .375rem 1.75rem; }

.btn-zte--outline, .btn-primary {
  background: transparent;
  border: 2px solid var(--c-gold);
  color: var(--c-gold);
}
.btn-zte--outline:hover, .btn-primary:hover { background: var(--c-gold); color: #fff; }
.btn-primary:hover {border-color: var(--c-gold);}

/* -------------------------------------------------------------------------
   5. Fejléc / navigáció
   Terv: 129px magas, #002F6C, középen a klubcímer (kilóg a sávból),
   tőle balra-jobbra 4-4 menüpont, jobb szélen arany ZTE SHOP gomb.
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--c-blue);
  transition: box-shadow .28s ease;
}
/* Görgetés után (a main.js teszi rá) kompaktabb fejléc */
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .28); }

.zte-navbar { padding: 0; }

.zte-navbar__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: var(--nav-h-md);
  transition: min-height .28s ease;
}

/* Hamburger – Bootstrap navbar-toggler, arculati fókuszgyűrűvel */
.zte-navbar .navbar-toggler {
  padding: .5rem .625rem;
  border-color: rgba(255, 255, 255, .35);
  border-radius: 0;
}
.zte-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(198, 170, 118, .55); }

/* Klubcímer – mobilon a sáv közepén, a hamburger fölött átnyúlva */
.zte-brand { display: flex; align-items: center; padding: 0; }
.zte-brand img { width: auto; height: 46px; }
.zte-brand--mobile {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
}

/* -------------------------------------------------------------------------
   CMS-menü. A struktúra a CMS kimenete:
     <div id="menu-fo-bal"><ul><li><a>…</a><ul>…</ul></li></ul></div>
   A main.js enhancer NEM a nav-item/nav-link osztályokra épít, hanem a
   DOM-szerkezetre (li > beágyazott ul), ezért mindegy, hogy a CMS
   osztályozó scriptje előbb vagy utóbb fut le.
   ------------------------------------------------------------------------- */
.zte-menu {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.zte-menu > .zte-menu__item { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.zte-menu__item { position: relative; list-style: none; }

.zte-menu__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .875rem 1rem;
  color: #fff;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .045em;
  background: transparent;
  border: 0;
  text-align: left;
  transition: color .2s ease;
}
.zte-menu__link[role="button"] { cursor: pointer; }
.zte-menu__link:hover,
.zte-menu__link:focus-visible { color: var(--c-gold); }

/* Nyíl jelölő az almenüs pontokon */
.zte-caret {
  flex: 0 0 auto;
  width: .45em;
  height: .45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.12em) rotate(45deg);
  transition: transform .25s ease;
}
.zte-menu__item.is-open > .zte-menu__link .zte-caret {
  transform: translateY(.1em) rotate(-135deg);
}

/* Almenü – mobilon beljebb húzott akkordeon.
   A magasság-animációt a Bootstrap Collapse végzi (programozottan hívjuk,
   nem data-attribútummal), így a beágyazott szintek is helyesen nyílnak. */
.zte-submenu {
  margin: 0;
  padding: 0;
  list-style: none;
  background: rgba(0, 0, 0, .18);
  border-left: 3px solid var(--c-gold);
}
.zte-submenu .zte-menu__link {
  padding: .75rem 1rem .75rem 1.5rem;
  font-size: .9375rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.zte-submenu--l2 { border-left-color: rgba(198, 170, 118, .45); }
.zte-submenu--l2 .zte-menu__link { padding-left: 2.5rem; }

/* -------------------------------------------------------------------------
   Reszponzív offcanvas: xl alatt kicsúszó panel (backdrop, ESC, fókuszcsapda
   a Bootstraptől), xl felett viszont sima sáv – EGY markup, nincs klónozás
   és nincs resize-kori DOM-mozgatás.
   ------------------------------------------------------------------------- */
.zte-nav {
  --bs-offcanvas-width: min(88vw, 380px);
  background: var(--c-blue);
  color: #fff;
}
.zte-nav ul { margin: 0; padding: 0; list-style: none; }
.zte-nav ul ul:not(.zte-submenu) { display: none; }
.zte-nav .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, .15); }
.zte-nav .offcanvas-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-gold);
}
.zte-nav .offcanvas-body { padding: 0; }
.zte-nav__cta { margin: 1.25rem 1rem; width: calc(100% - 2rem); }

/* -------------------------------------------------------------------------
   Desktop (?1200px) – 3 hasábos grid: bal menü | címer | jobb menü + CTA
   ------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .zte-navbar__inner { min-height: var(--nav-h); gap: 0; }
  .zte-navbar .navbar-toggler { display: none; }

  .zte-nav { flex: 1 1 auto; }
  /* A BS a breakpoint felett flexre állítja az offcanvas-body-t – gridre írjuk
     át, hogy a címer pontosan a konténer közepén legyen (1fr auto 1fr). */
  .zte-nav .offcanvas-body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    flex-grow: 1;
    padding: 0;
    overflow: visible;
  }

  .zte-nav__col { display: flex; align-items: center; }
  /* Bal oldal: a menü a félsávon belül középen (terv: x414–879) */
  /* .zte-nav__col--left { justify-content: center; } */
  /* Jobb oldal: a menü és a ZTE SHOP gomb együtt jobbra zárva */
  .zte-nav__col--right { justify-content: flex-end; gap: 2rem; }
  /* Ha a CMS wrapper mégis kifeszülne, a menü akkor is jobbra zárjon */
  .zte-nav__col--right > * { flex: 0 1 auto; }
  .zte-nav__col--right .zte-menu { justify-content: flex-end; }
  .zte-nav__cta { margin: 0; width: auto; }

  .zte-menu { flex-direction: row; align-items: center; gap: 2rem; }
  .zte-menu > .zte-menu__item { border-bottom: 0; }
  .zte-menu__link {
    padding: .5rem 0;
    font-size: var(--fs-nav);
    /* white-space: nowrap; */
  }

  /* Arany aláhúzás a felső szinten */
  .zte-menu > .zte-menu__item > .zte-menu__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--c-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  .zte-menu > .zte-menu__item > .zte-menu__link:hover::after,
  .zte-menu > .zte-menu__item > .zte-menu__link:focus-visible::after,
  .zte-menu > .zte-menu__item.is-open > .zte-menu__link::after,
  .zte-menu > .zte-menu__item > .zte-menu__link[aria-current="page"]::after {
    transform: scaleX(1);
  }

  /* A címer a terv szerint kilóg a kék sávból a hero-ra, de csak a nyitólapon! */
  .zte-brand--desktop { align-self: flex-start; transition: margin-top .28s ease; }
  .nyitolap .zte-brand--desktop img {
    height: 110px;
    margin-bottom: -25px;
    transition: height .28s ease, margin-bottom .28s ease;
  }

  /* Görgetés után: kompakt sáv, a címer mobil méretre kicsinyedik és nem lóg ki.
     A 19px-es felső margó a 84px-es sávban középre teszi a 46px-es logót. */
  .site-header.is-scrolled .zte-navbar__inner { min-height: var(--nav-h-scrolled); }
  .site-header.is-scrolled .zte-brand--desktop { }
  .site-header.is-scrolled .zte-brand--desktop img { height: 46px; margin-bottom: 0; }

  /* Almenü desktopon: absolute panel, halkuló-emelkedő animációval.
     A Bootstrap .collapse:not(.show){display:none} szabályát itt kivezetjük,
     mert a láthatóságot az opacity/visibility oldja meg. */
  .zte-submenu.collapse:not(.show),
  .zte-submenu.collapsing { display: block; height: auto; }

  .zte-submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 20;
    min-width: 268px;
    max-width: 280px;
    padding: .5rem 0;
    background: var(--c-blue);
    border: 0;
    border-top: 3px solid var(--c-gold);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(.625rem);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .zte-menu__item.is-open > .zte-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .zte-submenu .zte-menu__link { padding: .625rem 1.5rem; }
  .zte-submenu .zte-menu__link:hover,
  .zte-submenu .zte-menu__link:focus-visible { background: rgba(255, 255, 255, .1); }

  /* 2. szint: oldalra nyíló flyout, jobbra álló nyíllal */
  .zte-submenu .zte-caret { transform: rotate(-45deg); }
  .zte-submenu .zte-menu__item.is-open > .zte-menu__link .zte-caret { transform: rotate(135deg); }

  .zte-submenu .zte-submenu {
    top: -.5rem;
    left: 100%;
    border-top: 0;
    border-left: 3px solid var(--c-gold);
    transform: translateX(.625rem);
  }
  .zte-submenu .zte-menu__item.is-open > .zte-submenu { transform: translateX(0); }
  .zte-submenu--l2 .zte-menu__link { padding-left: 1.5rem; }
}

/* -------------------------------------------------------------------------
   6. Hero – kiemelt hír + 3 lapozó fül
   (informaciok.pdf: az AC Milan Store hero logikája)
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  aspect-ratio: 198 / 79!important;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-blue);
}

/* Swiper felület – teljes hero-t kitölti, a szövegblokk fölé rétegződik */
.hero__swiper { position: absolute; inset: 0; z-index: 0; }
.hero__swiper,
.hero__swiper .swiper-wrapper { height: 100%; }
.hero__swiper .swiper-slide { position: relative; overflow: hidden;}

/* Ken Burns: a slide képe lassan visszazoomol 1.08 ? 1.
   A hosszú transition miatt a kifelé tűnő slide is finoman mozog. */
.hero__img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transform: scale(1.08);
  transition: transform 8.5s linear;
  will-change: transform;
}
.hero__swiper .swiper-slide-active .hero__img { transform: scale(1); }
.hero__img img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Hero-átmenet: a tervhez kapott hero-shadow.png (812 KB) helyett CSS-gradiens.
   A megállók a PNG-ből kimért alfa- és színgörbét követik: fent átlátszó,
   lefelé Blue Vortex, az alján az Agility Blue felé hajló #0C2A85.
   A második réteg a terv enyhe bal oldali sötétítését adja vissza – ott ül a
   KIEMELT címke és a H1. */
.hero__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(0, 47, 108, .20) 0%, rgba(0, 47, 108, 0) 65%),
    linear-gradient(
      to bottom,
      rgba(0, 47, 108, 0)     0%,
      rgba(0, 47, 108, 0)    12%,
      rgba(0, 47, 108, .02)  20%,
      rgba(0, 47, 108, .06)  30%,
      rgba(0, 47, 108, .18)  40%,
      rgba(0, 47, 108, .38)  50%,
      rgba(0, 47, 108, .65)  60%,
      rgba(1, 46, 110, .86)  70%,
      rgba(3, 46, 114, .97)  80%,
      rgba(6, 44, 121, .99)  90%,
      rgba(12, 42, 133, 1)  100%
    );
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 1rem 0.5rem;
}

.hero__label {
  margin: 0 0 .75rem;
  color: #fff;
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
}

/* A három cím egymásra rétegezve (grid stack) – így nincs magasságugrás
   váltáskor, és mindig csak az aktív látszik. */
.hero__title {
  display: grid;
  max-width: 20ch;
  margin: 0;
  color: #fff;
  font-size: clamp(.7rem, 5vw, var(--fs-h1));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.05;
}
.hero__title-item {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;   /* fókuszból is kiesik, amíg nem aktív */
  transition: opacity .5s ease, visibility .5s;
}
.hero__title-item:hover { color: var(--c-gold); }

/* JS nélkül (vagy amíg el nem indul) az első cím látszik. A .is-ready
   osztályt a main.js teszi a h1-re; onnantól kizárólag az .is-active dönt. */
.hero__title-item:first-child { opacity: 1; visibility: visible; }
.hero__title.is-ready .hero__title-item:first-child:not(.is-active) {
  opacity: 0;
  visibility: hidden;
}
.hero__title-item.is-active { opacity: 1; visibility: visible; }

/* -------------------------------------------------------------------------
   Pager (Swiper pagination) – 3 FIX elem, sorrendjük soha nem változik.
   Terv: 3 × 248px oszlop, 26px hézag, 6px-es felső vonal.
   A vonal alapból tömör fehér (::before), ezen fut végig az arany
   folyamatjelző (::after) az aktív slide-on.
   ------------------------------------------------------------------------- */
.hero__pager {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  max-width: 796px;   /* 3 × 248px + 2 × 26px – tervből kimérve */
  gap: 1.625rem;
  margin: 2.5rem 0 0;
}
.hero-bullet {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: 0 !important;
  padding: calc(var(--hero-bullet-gap) + 1px) 0 0!important;   /* 6px vonal + térköz a szövegig */
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  opacity: 1;
  transition: color .2s ease;
}
.hero-bullet:hover { color: var(--c-gold); }

/* A pager felirata a CMS-ből a hír teljes címe – 2 sor után levágjuk,
   hogy a hosszú címek ne feszítsék szét a hero alját. */
.hero-bullet__label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Alapvonal – tömör fehér, mindhárom pageren */
.hero-bullet::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 6px;
  background: #fff;
}

/* Folyamatjelző – arany csík, a fehér vonalon fut végig */
.hero-bullet::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 6px;
  background: var(--c-gold);
}
.hero-bullet.is-running::after {
  animation: heroProgress var(--hero-interval, 7s) linear forwards;
}
/* Ha az autoplay megáll, a progress is álljon meg vele */
.hero.is-paused .hero-bullet::after { animation-play-state: paused; }


@keyframes heroProgress { from { width: 0; } to { width: 100%; } }

/* Mobil: a pager feliratok eltűnnek, csak a három vonal marad.
   A szöveg akadálymentesen megmarad (nem display:none), így a gombnak
   van elérhető neve képernyőolvasóval is. */
@media (max-width: 767.98px) {
  .hero__pager {
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    max-width: 100%;
    margin-top: 1rem;
  }
  .hero-bullet { padding: 0; min-height: 28px; }
  .hero-bullet__label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .hero__label {display: none;}
}

@media (min-width: 1140px) {
  /* .hero { min-height: var(--hero-h); } */
  .hero__inner { padding-block: 4rem 5rem; }
}

/* -------------------------------------------------------------------------
   7. Szekciók és szekciócím + arany vonal + gomb
      (terv: 46px cím, 1px arany vonal, 26px hézag, 201×41 gomb)
   ------------------------------------------------------------------------- */
.section { padding-block: var(--space-section-sm); }
@media (min-width: 992px) { .section { padding-block: var(--space-section); } }

.section--blue { background: var(--c-blue); color: #fff; }

.section-head {
  display: flex;
  align-items: center;
  gap: 1.625rem;
  margin-bottom: var(--space-block);
  flex-wrap: wrap;
}
.section-head__title {
  margin: 0;
  font-size: clamp(1.75rem, 4.5vw, var(--fs-h2))!important;
  font-weight: 700;
  color: var(--c-blue);
  letter-spacing: -.01em;
}
.section--blue .section-head__title { color: #fff; }
.section-head__title h2 {font-size: clamp(1.75rem, 4.5vw, var(--fs-h2));}
.section-head__rule {
  flex: 1 1 60px;
  height: 2px;
  background: var(--c-gold);
  border: 0;
  margin: 0;
  opacity: 1;
}
.section-head .btn-zte { flex: 0 0 auto; }

/* -------------------------------------------------------------------------
   8. Hírek kártyák – 3 egyenlő oszlop, hézag nélkül, 24px szövegbehúzás
   ------------------------------------------------------------------------- */
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* sor-térköz | oszlop-térköz: egymás alatt 40px, egymás mellett hézag nélkül */
  gap: var(--gutter-news-row) var(--gutter-news);
}
@media (min-width: 576px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
/* Desktopon egy sorba kerülnek, ott már nem kell sor-térköz */
@media (min-width: 992px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }

.news-card { display: flex; flex-direction: column; background: transparent; }
.news-card__media { overflow: hidden; }
.news-card__media img {
  width: 100%;
  /* aspect-ratio: 440 / 231;  */
  /* object-fit: cover; */
  transition: transform .5s ease;
}
.news-card:hover .news-card__media img { transform: scale(1.04); }

.news-card__body { padding: 1.5rem var(--card-inset) 0; }
.news-card__title {
  margin: 0 0 .75rem;
  font-size: var(--fs-card-title);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.28;
  letter-spacing: .005em;
  color: var(--c-blue);
}
.news-card:hover .news-card__title { color: var(--c-agility); }
.news-card__date {
  margin: 0 0 .5rem;
  color: var(--c-gold-dark2);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: .02em;
}
.news-card__lead { margin: 0; font-size: var(--fs-body); }

.card {border: 3px solid var(--c-blue);border-radius: 0;}
/* -------------------------------------------------------------------------
   9. Eredmény / következő mérkőzés sáv (terv: 3px kék keret, 156px magas)
   ------------------------------------------------------------------------- */
.fixture {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1.5rem;
  background: #fff;
  border: 3px solid var(--c-blue);
}
.fixture + .fixture { margin-top: 1rem; }

.fixture__meta { text-align: center; }
.fixture__comp {
  margin: 0;
  font-size: var(--fs-card-title);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-blue);
}
/* A mérkőzés dátuma a tervben kék, nem grafit */
.fixture__date { margin: .375rem 0 0; font-size: 1.0625rem; font-weight: 500; color: var(--c-blue); }

.fixture__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  justify-items: center;
}
.fixture__crest { height: 84px; width: auto; object-fit: contain; }
.fixture__score { text-align: center; }
.fixture__score strong {
  display: block;
  font-size: 2.375rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--c-blue);
}
.fixture__score span { font-size: 1.25rem; font-weight: 400; }
.fixture__cta { justify-self: center; }

@media (min-width: 992px) {
  .fixture {
    grid-template-columns: minmax(240px, 1fr) minmax(360px, 2fr) minmax(200px, 1fr);
    min-height: 156px;
    padding-inline: 3rem;
  }
  .fixture__meta { text-align: left; }
  .fixture__cta { justify-self: end; }
}

.section-foot { margin-top: var(--space-block); }

/* -------------------------------------------------------------------------
   10. Tabella komponens
   A főoldalon nem szerepel – a Tabella ALOLDALRA készül, ott váltja ki a
   jelenlegi beágyazott (iframe) megoldást. A stílus itt marad készen.
   ------------------------------------------------------------------------- */
.table-zte { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
.table-zte caption { text-align: left; padding-bottom: .5rem; color: var(--c-gold); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .12em; }
.table-zte th,
.table-zte td { padding: .75rem 1rem; text-align: center; white-space: nowrap; }
.table-zte thead th {
  background: var(--c-blue);
  color: #fff;
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.table-zte th:nth-child(2),
.table-zte td:nth-child(2) { text-align: left; white-space: normal; }
.table-zte tbody tr { border-bottom: 1px solid var(--c-border); }
.table-zte tbody tr:nth-child(even) { background: #f6f8fb; }
.table-zte tbody tr.is-zte { background: var(--c-blue); color: #fff; font-weight: 700; }
.table-zte td:last-child { font-weight: 700; }
.table-scroll { overflow-x: auto; }

.table-scroll-wrap {
  position: relative;
}

.table-scroll-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 88px;
  pointer-events: none;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

@media (min-width: 768px) {
  .table-scroll-wrap::after {
    display: none;
  }
}



/* -------------------------------------------------------------------------
   11. Jegy CTA sáv (terv: 367px magas, jegyvasarlas-hatter.png)
   ------------------------------------------------------------------------- */
.ticket-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  padding-block: 3rem;
  text-align: center;
  /* background: linear-gradient(180deg, rgba(30, 34, 170, .82), rgba(0, 47, 108, .82)); */
}
.ticket-bg {
  padding: 3rem;
  background-repeat: no-repeat;
  background-size: cover;
}
.ticket-cta__title {
  margin: 0 0 1.5rem;
  color: #fff;
  font-size: clamp(1.1rem, 4.5vw, var(--fs-h1));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  background-color:rgba(0,0,0,.1)
}
@media (min-width: 992px) { .ticket-cta { min-height: 367px; } }

/* -------------------------------------------------------------------------
   12. Kiemelt ZTE Shop banner hely
       (rework-igény: "kerüljön kialakításra egy kiemelt hely az új
       ZTE Shop banner számára")
   ------------------------------------------------------------------------- */
.shop-highlight { display: block; position: relative; border: 3px solid var(--c-gold); overflow: hidden; }
.shop-highlight img { width: 100%; aspect-ratio: 1320 / 300; object-fit: cover; transition: transform .5s ease; }
.shop-highlight:hover img { transform: scale(1.03); }
.shop-highlight__tag {
  position: absolute;
  top: 0; left: 0;
  padding: .5rem 1.25rem;
  background: var(--c-gold);
  color: #fff;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* -------------------------------------------------------------------------
   13. Instagram – 4 oszlop, 1px szürke keret, összeérő szegélyek
   ------------------------------------------------------------------------- */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (min-width: 992px) { .ig-grid { grid-template-columns: repeat(4, 1fr); } }

.ig-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  margin-left: -1px;
  margin-top: -1px;
  background: #fff;
  min-height: 380px;
  padding: 1rem;
}
.ig-card__head { display: flex; align-items: center; gap: .625rem; }
.ig-card__avatar { width: 34px; height: 34px; border-radius: 50%; background: #eee; flex: 0 0 auto; }
.ig-card__bar { height: 10px; border-radius: 2px; background: #eee; }
.ig-card__bar--w60 { width: 60%; }
.ig-card__bar--w40 { width: 40%; }
.ig-card__bar--w80 { width: 80%; }
.ig-card__center { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .875rem; padding: 1.5rem 0; }
.ig-card__center svg { width: 44px; height: 44px; }
.ig-card__link { color: #3897f0; font-size: .8125rem; text-align: center; }
.ig-card__link:hover { text-decoration: underline; }
.ig-card__foot { display: flex; flex-direction: column; gap: .5rem; }
.ig-card__caption { font-size: .75rem; color: #9b9b9b; }

@media (min-width: 992px) { .ig-card { min-height: 490px; } }

/* -------------------------------------------------------------------------
   14. Banner sáv – 3 oszlop, hézag nélkül (terv: 440×294)
   ------------------------------------------------------------------------- */
.banner-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 768px) { .banner-grid { grid-template-columns: repeat(3, 1fr); } }
.banner-grid a { display: block; overflow: hidden; }
.banner-grid img { width: 100%; aspect-ratio: 440 / 294; object-fit: cover; transition: transform .5s ease; }
.banner-grid a:hover img { transform: scale(1.04); }

/* -------------------------------------------------------------------------
   15. Arany social sáv (terv: 148px magas, #C6AA76)
       Rework-igény: minden platform, friss linkek, helyes X ikon.
   ------------------------------------------------------------------------- */
.social-bar { background: var(--c-gold-dark2); padding-block: 1rem; }
.social-bar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2.5rem;
  margin: 0; padding: 0;
  list-style: none;
}
.social-bar a {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 500;
}
.social-bar a:hover { color: var(--c-blue); }
.social-bar svg { width: 26px; height: 26px; fill: currentColor; flex: 0 0 auto; }
@media (min-width: 992px) { .social-bar { min-height: 128px; display: flex; align-items: center; } .social-bar__list { gap: 1rem 3.5rem; } }

/* -------------------------------------------------------------------------
   16. Lábléc – szponzor lépcső (1/2/5/7), arany vonal, jogi linkek
       Rework-igény: Támogatók + Társadalmi felelősségvállalás + TAO +
       éves beszámolók a láblécben.
   ------------------------------------------------------------------------- */
.site-footer {
  background: linear-gradient(175deg, var(--c-blue) 0%, #0b2b7f 55%, var(--c-agility) 100%);
  color: #fff;
  padding-block: 3rem 2rem;
}

.sponsors { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; }
.sponsors__tier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2.5rem;
  margin: 0; padding: 0;
  list-style: none;
}
.sponsors__tier img { opacity: .95; transition: opacity .2s ease, transform .2s ease; }
.sponsors__tier a:hover img { opacity: 1; transform: translateY(-2px); }
.sponsors__tier--1 img { height: 46px; width: auto; }
.sponsors__tier--2 img { height: 40px; width: auto; }
.sponsors__tier--3 img { height: 34px; width: auto; }
.sponsors__tier--4 img { height: 30px; width: auto; }

.footer-rule { height: 3px; background: var(--c-gold); border: 0; margin: 2.5rem 0 2rem; opacity: 1; }

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  justify-content: space-between;
}
/* A lábléc menü a CMS-ből jön (#bottom-menu) – az enhancer adja rá ezt az
   osztályt. Fallbackként a #bottom-menu ul is stílust kap, ha nem fut a JS. */
.footer-nav,
#bottom-menu ul { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 0; padding: 0; list-style: none; }
.footer-nav li, #bottom-menu li { list-style: none; }
.footer-nav a { font-size: var(--fs-body); font-weight: 500; }
#bottom-menu a { font-size: var(--fs-body); font-weight: 500; color: #fff; }
.footer-nav a:hover { color: var(--c-gold); }
.footer-copy { margin: 1.5rem 0 0; font-size: .875rem; color: rgba(255, 255, 255, .72); }
.footer-marks { display: flex; align-items: center; gap: 2rem; }
.footer-marks img { width: auto; }
.footer-marks .mark-crest { height: 76px; }
.footer-marks .mark-100 { height: 76px; }
.footer-marks .mark-arena { height: 54px; }

@media (min-width: 992px) {
  .footer-bottom { flex-direction: row; align-items: flex-end; }
}

/* -------------------------------------------------------------------------
   17. Mozgásérzékenység
   ------------------------------------------------------------------------- */
/* Ha az AOS nincs inicializálva (csökkentett mozgás vagy JS-hiba), a
   data-aos elemek nem maradhatnak láthatatlanul – az aos.css opacity:0-t ad. */
.no-aos [data-aos],
html.no-js [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__img { transition: none; transform: none; }
  /* Animáció nélkül a tömör arany vonal jelzi az aktív slide-ot */
  .hero-bullet::after { animation: none; width: 0; }
  .hero-bullet.is-active::after { width: 100%; }
  .hero__title-item { transition: none; }
}

.article-text img {height: auto!important;}
.article-text a:not(.social-bar a) {font-weight: bold;color: var(--c-blue);}
/* 2) Maga az iframe: reszponzív 16:9, attribútum-méretek felülírása */
#main-contents iframe[src*="youtube"],
#main-contents iframe[src*="youtu.be"] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}
.card-pic img {width: 100%;}

.downloadLink .cikklink {display: flex;align-items: center;flex-wrap: nowrap;gap: 1rem;}

/* -------------------------------------------------------------------------
   18. Animált aláhúzás - általános class, minden A tag alatta
   ------------------------------------------------------------------------- */
.link-underline a {
  position: relative;
  display: inline-block;
}
.link-underline a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.link-underline a:hover::after,
.link-underline a:focus-visible::after {
  transform: scaleX(1);
}

/*Lábléc menü optimalizálás*/
#bottom-menu-simple .nav-item {padding-right: 2rem;padding-bottom: 1rem;}
#bottom-menu-simple .nav-link {padding: 0;}

/*shopicon*/
.shopicon a {border: 1px solid var(--c-gold-dark);width: 52px;height: 52px;display: flex;align-items: center;justify-content: center;font-size: 1.33rem;color: white;background-color: var(--c-gold-dark);}

/*shop items*/
.shop-card {border:3px solid var(--c-blue);}
.shop-image {height: 300px;}
.shop-image img {max-height: 300px;width: auto!important;}
.shop-title {color: var(--c-blue);}
.shop-subtitle {color: var(--c-gold-dark2)}