/* ==========================================================================
   09-home.css — Oldalspecifikus szekciók

   Site chrome (topbar, header, footer) + a kezdőlap szekciói.
   A generikus, több oldalon használt komponensek a 07-components.css-ben
   maradnak (.btn, .card, .eyebrow, .stat, .section).

   Minden érték tokenből — a Testreszabóban cserélt arculati szín
   automatikusan végigfut ezen a fájlon is.
   ========================================================================== */

@layer components {

  /* ========================================================================
     DEKORÁCIÓ — ecsetvonások

     Abszolút pozicionált, pointer-events: none, aria-hidden a markupban.
     A szülő szekció `position: relative; overflow: hidden`.
     ======================================================================== */

  .brush {
    position: absolute;
    pointer-events: none;
    user-select: none;
    max-width: none;
  }

  /* Maszkolt ecsetvonás — a forma a webp alfa-csatornájából, a szín tokenből.
     Így ugyanaz a fájl bármilyen arculati színben megjelenhet, és követi a
     Testreszabóban cserélt színt. A --brush-src-et az icf_brush_mask() adja. */
  .brush--masked {
    display: block;
    aspect-ratio: 1;
    background-color: var(--brush-color, currentColor);
    mask-image: var(--brush-src);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
  }

  .section-deco,
  .hero__deco,
  .hero__media-deco,
  .feature-section__deco,
  .events-band__deco,
  .news-section__deco,
  .cta-band__deco,
  .stats-band__deco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  /* ========================================================================
     ALÁHÚZOTT SZÓ — ecsetvonás a címsorban
     ======================================================================== */

  /* `inline-block` kell: inline elemnél a pszeudó-elem a sormagassághoz
     igazodna és fél sorral lecsúszna. A `top` a szó alapvonala alá húzza. */
  .underlined {
    position: relative;
    display: inline-block;
    white-space: nowrap;

    &::after {
      content: "";
      position: absolute;
      inset-inline: -0.03em;
      inset-block-start: calc(100% - 0.19em);
      block-size: 0.13em;
      background-color: var(--icf-blue);
      mask-image: url("../images/brush/heading-underline-mask.webp");
      mask-size: 100% 100%;
      mask-repeat: no-repeat;
    }
  }

  .underlined--gold::after {
    background-color: var(--icf-yellow);
  }

  /* ========================================================================
     SZEKCIÓ FEJLÉC
     ======================================================================== */

  .section-head {
    margin-block-end: var(--space-12);
  }

  .section-head__title {
    font-size: var(--text-section-title);
    margin-block-start: var(--space-2);
  }

  .section-head--center {
    text-align: center;

    & .eyebrow {
      text-align: center;
    }
  }

  .section-head--split {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: end;
    justify-content: space-between;
  }

  .eyebrow--invert {
    color: color-mix(in srgb, var(--icf-white) 75%, transparent);
  }

  .eyebrow--gold {
    color: var(--color-accent);
  }

  /* MEGJEGYZÉS: a sötét sávok szöveg- és linkszíneit a 99-wp-overrides.css
     LAYEREN KÍVÜLI blokkja rögzíti — csak az nyer a plugin CSS ellen. Ide ne
     duplikáld, mert layerben lévő szabály úgyis alulmaradna. */

  /* ========================================================================
     KÖR ALAKÚ NYÍL GOMB
     ======================================================================== */

  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 50px;
    block-size: 50px;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-full);
    color: var(--color-primary);
    background-color: transparent;
    transition:
      background-color var(--duration-base) var(--ease),
      color var(--duration-base) var(--ease);

    & .icon {
      inline-size: 20px;
      block-size: 20px;
    }
  }

  /* Önállóan álló kör-gomb (hírkártya "tovább" nyila): hoverre kitöltődik.
     A kártyába ágyazott változatot a szülő kártya hovere kapcsolja
     (lásd .feature-card:hover .icon-btn). */
  .icon-btn--link:hover {
    background-color: var(--color-primary);
    color: var(--color-text-invert);
  }

  .icon-btn--link:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 3px;
  }

  /* ========================================================================
     HIRDETŐSÁV
     ======================================================================== */

  /* A hirdetősáv és a fejléc SZÁNDÉKOSAN szélesebb a tartalmi szekcióknál:
     a viewport széléig futnak 24px margóval, ahogy a Figma-terven is. Ez adja
     a menünek a helyet, hogy egy sorba férjen. A szekciók ettől függetlenül a
     .container (--container-default) szélességén maradnak. */
  .topbar {
    padding-inline: var(--space-6);
    padding-block-start: var(--space-2);
    background-color: var(--color-bg);
  }

  .topbar__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    align-items: center;
    justify-content: space-between;

    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-xl);
    background-color: var(--color-primary);
    color: var(--color-text-invert);

    font-size: var(--text-eyebrow);
    line-height: var(--lh-snug);
  }

  .topbar__item {
    max-width: none;
    margin: 0;
  }

  .topbar__item--end {
    margin-inline-start: auto;
    text-align: end;
  }

  .topbar__link {
    color: inherit;
    font-weight: var(--fw-semibold);
    text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);

    &:hover {
      color: var(--icf-yellow);
    }
  }

  /* ========================================================================
     FEJLÉC — lebegő sötétkék sáv
     ======================================================================== */

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    padding: var(--space-2) var(--space-6);
    background-color: var(--color-bg);
  }

  .site-header__bar {
    display: flex;
    align-items: center;
    gap: var(--space-8);

    padding: var(--space-4) var(--space-6);
    border-radius: 22px;
    background-color: var(--color-bg-invert);
    box-shadow: var(--shadow-nav);
  }

  .site-header__brand {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-text-invert);
    text-decoration: none;

    & img {
      block-size: 48px;
      inline-size: auto;
    }
  }

  .site-header__logo {
    block-size: 48px;
    inline-size: auto;
  }

  /* Navigáció — desktop */
  .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);

    margin: 0;
    padding: 0;
    list-style: none;

    & a {
      display: block;
      padding-block: var(--space-1);
      color: var(--color-text-invert);
      font-size: var(--text-sm);
      text-decoration: none;
      opacity: 0.92;
      transition: opacity var(--duration-fast) var(--ease);
    }

    /* Az ág is jelölve van, nem csak a pontos találat: a mega menüből nyíló
       aloldalon a szekció főmenüpontja marad aláhúzva. */
    & a:hover,
    & > .current-menu-item > a,
    & > .current-menu-ancestor > a,
    & > .current-page-ancestor > a {
      opacity: 1;
      text-decoration: underline;
      text-underline-offset: 0.35em;
      text-decoration-color: var(--icf-yellow);
      text-decoration-thickness: 2px;
    }
  }

  /* Almenü — hoverre nyíló panel.
     A szelektorok KÖZVETLEN gyerekre szűkítenek: a mega panel belsejében is
     `.sub-menu` listák állnak, azokra ez a sötétkék, abszolút pozicionált
     doboz-stílus nem vonatkozhat. */
  .site-nav__list > .menu-item-has-children,
  .site-nav__list > .has-mega {
    position: relative;
  }

  /* A menüpont saját almenüje (ha egyszer lesz) még a karakteres jelzőt kapja;
     a mega menüs pontok valódi Lucide ikont, lásd `.site-nav__caret`. */
  .site-nav__list > .menu-item-has-children > a::after {
    content: "▾";
    margin-inline-start: var(--space-1);
    font-size: 0.7em;
    opacity: 0.7;
  }

  .site-nav__list > .has-mega > a {
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }

  .site-nav__caret {
    inline-size: 16px;
    block-size: 16px;
    flex-shrink: 0;
    stroke-width: 2.5;
    transition: rotate var(--duration-fast) var(--ease);
  }

  .site-nav__list > .has-mega:hover > a .site-nav__caret,
  .site-nav__list > .has-mega:focus-within > a .site-nav__caret {
    rotate: 180deg;
  }

  .site-nav__list > li > .sub-menu {
    position: absolute;
    inset-block-start: calc(100% + var(--space-3));
    inset-inline-start: 50%;
    translate: -50% 0;
    z-index: var(--z-dropdown);

    display: grid;
    gap: var(--space-1);
    min-inline-size: 240px;
    margin: 0;
    padding: var(--space-3);
    list-style: none;

    background-color: var(--color-bg-invert);
    border: 1px solid color-mix(in srgb, var(--icf-white) 12%, transparent);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-card);

    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--duration-fast) var(--ease),
      visibility var(--duration-fast) var(--ease);

    & a {
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-lg);
      text-align: start;
    }

    & a:hover {
      background-color: color-mix(in srgb, var(--icf-white) 10%, transparent);
      text-decoration: none;
    }
  }

  .site-nav__list > .menu-item-has-children:hover > .sub-menu,
  .site-nav__list > .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
  }

  /* ------------------------------------------------------------------------
     MEGA MENÜ — a szekció önálló menüje a főmenüpont alatt

     A panel KÉT dobozból áll: a külső `.mega-menu` átlátszó, és a fejléc-sáv
     és a kártya közötti RÉST is lefedi — nélküle a lefelé induló egér elhagyná
     a menüpontot, és a panel bezárulna, mielőtt elérnéd. A kártya a belső
     `.mega-menu__inner`.

     A záráskor van késleltetés (`transition-delay`), nyitáskor nincs: így a
     két menüpont közötti átlépés nem villog, a véletlen kilépés pedig nem zár
     azonnal.
     ------------------------------------------------------------------------ */

  .mega-menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: calc(-1 * var(--space-5));
    z-index: var(--z-dropdown);

    /* A híd a sáv aljáig: a fejléc padding + a menüpont alatti térköz. */
    padding-block-start: var(--space-6);

    /* A `megaPanel` Alpine komponens tolja vissza a panelt, ha kilógna a
       képernyőről (a menüpont helyzete a menü hosszától függ, CSS-ből nem
       számítható). Alapértéke 0, tehát JS nélkül is a helyén marad. */
    translate: var(--mega-shift, 0px) 0;

    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--duration-fast) var(--ease),
      visibility var(--duration-fast) var(--ease);
    transition-delay: var(--duration-fast);
  }

  /* A sor végi menüpontoknál a panel a jobb széléhez igazodik, különben
     kilógna a képernyőről. */
  .site-nav__list > .has-mega:nth-last-child(-n + 2) .mega-menu {
    inset-inline-start: auto;
    inset-inline-end: calc(-1 * var(--space-5));
  }

  .site-nav__list > .has-mega:hover > .mega-menu,
  .site-nav__list > .has-mega:focus-within > .mega-menu {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .mega-menu__inner {
    inline-size: max-content;
    max-inline-size: min(58rem, calc(100vw - var(--space-12)));
    padding: var(--space-6);

    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-card);
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: repeat(var(--mega-cols, 2), minmax(11rem, 15rem));
    gap: var(--space-6) var(--space-8);

    margin: 0;
    padding: 0;
    list-style: none;

    & .sub-menu {
      display: grid;
      gap: 2px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    /* A `05-base.css` szövegtörzsre szánt `li + li` térköze itt elcsúsztatja
       a hasábokat egymáshoz képest: a rács saját `gap`-et használ. */
    & li + li {
      margin-block-start: 0;
    }
  }

  /* Szekció-cím (a menü első szintje) — a `.site-nav__list a` alapszabályt
     kell felülírnia, ezért a `.site-nav` prefix. */
  .site-nav .mega-menu__list > li > a {
    display: block;
    padding: 0 0 var(--space-2);
    margin-block-end: var(--space-1);
    border-block-end: 1px solid var(--color-border);

    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: var(--text-eyebrow);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    opacity: 1;
  }

  .site-nav .mega-menu__list > li > a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--icf-yellow);
  }

  /* Alpontok */
  .site-nav .mega-menu__list .sub-menu a,
  .site-nav .mega-menu__list--flat > li > a {
    display: block;
    padding: var(--space-1) var(--space-2);
    margin-inline-start: calc(-1 * var(--space-2));
    border-radius: var(--radius-lg);

    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-nav);
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
    letter-spacing: normal;
    text-transform: none;
    opacity: 1;
  }

  .site-nav .mega-menu__list .sub-menu a:hover,
  .site-nav .mega-menu__list--flat > li > a:hover {
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    text-decoration: none;
  }

  /* A lapos menünél nincs szekció-cím, tehát elválasztó vonal sem kell — és a
     hasábok közti nagy sorköz sem: ott az elemek egyetlen linklistát alkotnak. */
  .site-nav .mega-menu__list--flat > li > a {
    border-block-end: 0;
    margin-block-end: 0;
  }

  .mega-menu__list--flat {
    gap: 2px var(--space-8);
  }

  /* Harmadik szint (pl. Coach minősítés → ACC / PCC / MCC) */
  .site-nav .mega-menu__list .sub-menu .sub-menu {
    margin-inline-start: var(--space-2);
    padding-inline-start: var(--space-2);
    border-inline-start: 1px solid var(--color-border);

    & a {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
    }
  }

  /* Az aktuális oldal a panelben */
  .site-nav .mega-menu .current-menu-item > a,
  .site-nav .mega-menu .current-menu-ancestor > a {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
  }

  /* A nyitó gomb csak mobilon látszik — asztali gépen hover/fókusz nyit. */
  .site-nav__sub-toggle {
    display: none;
  }

  .site-nav {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  /* A háttér-elsötétítés csak a beúszó menühöz kell (1280px alatt) */
  .site-nav__backdrop {
    display: none;
  }

  /* Mobilon a menüpanelben jelennek meg a gombok, desktopon a sávban */
  .site-nav__actions {
    display: none;
  }

  .site-header__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-3);
  }

  .site-header__toggle {
    display: none;
    padding: var(--space-2);
    border: 0;
    background: transparent;
    color: var(--color-text-invert);
    cursor: pointer;
  }

  /* ========================================================================
     HERO
     ======================================================================== */

  .hero {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-16) var(--space-24);
    background-color: var(--color-bg);
  }

  .hero__grid {
    position: relative;
    z-index: var(--z-base);
    display: grid;
    gap: var(--space-16);
    align-items: center;
  }

  .hero__content > * + * {
    margin-block-start: var(--space-4);
  }

  /*
   * A címsor a szlogen: nagy „Coaching", alatta a mondat. A 15ch korlát és a
   * h1 alapmérete a korábbi, négysoros mondat-címsorhoz készült — egy szóra
   * az kevés lenne, és a hero elveszítené a súlyát. Ezért a szó a TW-skála
   * 72px-es fokát kapja, a szlogen a 36px-eset — böngészőben mérve így a
   * címsor-blokk 182px magas, vagyis nagyjából annyi, mint a régi négysoros
   * címsor volt. (A 60/30-as fokozat 155px-et adott, az érezhetően
   * könnyebb volt.)
   *
   * A 72px-hez a TW-skála `--text-7xl` tokenje kell, NEM a
   * `--text-page-title`: az a belső oldalak címsorára van fenntartva.
   */
  .hero__title {
    max-width: none;
    font-size: var(--text-7xl);
    line-height: var(--lh-none);
    letter-spacing: var(--tracking-display);
  }

  /* A szlogen EGY sorban álljon: 36px-en 485px kell neki, a hero szövegoszlopa
     651px — elfér. Szűkebb kijelzőn természetesen tördelődik. */
  .hero__slogan {
    display: block;
    max-width: none;
    margin-block-start: var(--space-5);

    font-size: var(--text-4xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-normal);
  }

  .hero__lead {
    max-width: 54ch;
    color: var(--color-text-muted);
  }

  .hero__actions {
    max-width: none;
    margin-block-start: var(--space-8);
  }

  .hero__media {
    position: relative;
    margin: 0;
  }

  .hero__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 5 / 6;
    object-fit: cover;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
  }

  .hero__badge {
    position: absolute;
    inset-block-end: var(--space-12);
    inset-inline-end: calc(-1 * var(--space-5));

    padding: var(--space-3) var(--space-7);
    border-radius: var(--radius-pill);

    background-color: var(--color-bg-invert);
    color: var(--color-text-invert);
    box-shadow: var(--shadow-badge);

    font-family: var(--font-display);
    font-size: var(--text-lead);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
  }

  /* Hero dekorációk */
  .brush--hero-sparkle { inset-block-start: 12%;  inset-inline-start: -3%;  inline-size: 240px; }
  .brush--hero-wave    { inset-block-start: 2%;   inset-inline-end: 0;      inline-size: 460px; }
  .brush--hero-asterisk{ inset-block-end: -8%;    inset-inline-start: 2%;   inline-size: 320px; }
  .brush--hero-star    { inset-block-start: -10%; inset-inline-start: -12%; inline-size: 180px; }
  .brush--hero-arrow   { inset-block-end: -8%;    inset-inline-end: -6%;    inline-size: 200px; }

  .hero__media-deco {
    inset: 0;
    overflow: visible;
  }

  /* ========================================================================
     STATISZTIKA SÁV
     ======================================================================== */

  /* A statisztika sáv — a fejléchez hasonlóan a viewport széléig fut 24px
     margóval (a tervben: x=24, szélesség=1872 egy 1920-as kereten), ezért
     nem .container-ben van, hanem saját, azonos szélességű wrapperben. */
  .stats-band {
    padding: var(--space-6);
  }

  .stats-band__wrap {
    inline-size: 100%;
  }

  .stats-band__inner {
    position: relative;
    overflow: hidden;
    padding: var(--space-24) var(--space-8);
    border-radius: var(--radius-card);
    background-color: var(--color-bg-invert);
    color: var(--color-text-invert);
  }

  .stats-band__grid {
    position: relative;
    z-index: var(--z-base);
    display: grid;
    gap: var(--space-10);
    margin: 0;
    text-align: center;
  }

  .stats-band__grid dd {
    margin: 0;
  }

  /* Dekorációk — a tervbeli arányok szerint (a sáv 1872×316-os kerete alapján
     százalékban, hogy bármilyen szélességen ugyanoda essenek). */
  /* Tervből visszamérve: #292F6A a #212251-en ≈ 15% világoskék. */
  .stats-band__deco .brush {
    --brush-color: var(--icf-light-blue);
    opacity: 0.15;
  }

  .brush--stats-asterisk {
    inset-block-start: 14%;
    inset-inline-start: 5%;
    inline-size: 13%;
    min-inline-size: 120px;
  }

  .brush--stats-line {
    inset-block-start: 8%;
    inset-inline-start: 84.5%;
    inline-size: 17%;
    min-inline-size: 160px;
    aspect-ratio: 320 / 102;
  }

  .brush--stats-sparkle {
    inset-block-start: 48%;
    inset-inline-start: 82%;
    inline-size: 11%;
    min-inline-size: 100px;
  }

  /* ========================================================================
     "FEDEZD FEL A TAGOZATOT" KÁRTYÁK
     ======================================================================== */

  .feature-section {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg);
  }

  .feature-section .container {
    position: relative;
    z-index: var(--z-base);
  }

  .feature-grid {
    display: grid;
    gap: var(--space-7);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .feature-card {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    overflow: hidden;

    border-radius: 28px;
    background-color: var(--color-bg-alt);
    color: var(--color-text);
    text-decoration: none;

    transition:
      transform var(--duration-base) var(--ease),
      box-shadow var(--duration-base) var(--ease);

    &:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-card);
      color: var(--color-text);
    }

    &:hover .icon-btn {
      background-color: var(--color-primary);
      color: var(--color-text-invert);
    }

    &:focus-visible {
      outline: 2px solid var(--color-border-focus);
      outline-offset: 3px;
    }
  }

  .feature-card__media {
    display: block;
    overflow: hidden;

    & img {
      display: block;
      inline-size: 100%;
      block-size: 290px;
      object-fit: cover;
      /* A képek (840×594) arcai a felső harmadban ülnek, a széles kártya
         viszont fent-lent vág: középre igazítva levágta a fejeket. */
      object-position: center top;
      transition: scale var(--duration-slow) var(--ease);
    }
  }

  .feature-card:hover .feature-card__media img {
    scale: 1.03;
  }

  .feature-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    padding: var(--space-7) var(--space-7) var(--space-8);
  }

  .feature-card__title {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-display);
  }

  .feature-card__meta {
    margin-block: var(--space-2) var(--space-5);
    font-size: var(--text-nav);
    color: var(--color-text-muted);
  }

  .feature-card__body .icon-btn {
    margin-block-start: auto;
  }

  /* Feature dekorációk */
  .brush--feature-arrow    { inset-block-start: -2%;  inset-inline-end: 2%;    inline-size: 320px; }
  .brush--feature-line     { inset-block-start: 46%;  inset-inline-end: -2%;   inline-size: 380px; }
  .brush--feature-asterisk { inset-block-end: 4%;     inset-inline-start: -6%; inline-size: 360px; }

  /* ========================================================================
     ESEMÉNYEK — "Találkozzunk"
     ======================================================================== */

  /* Az események sáv — a fejléchez és a statisztika sávhoz hasonlóan a
     viewport széléig fut 24px margóval (tervben: x=24, szélesség=1872).
     Függőleges paddingja nincs: a szomszédos szekciók sajátja adja a teret. */
  .events-section {
    padding-block: 0;
    padding-inline: var(--space-6);
  }

  .events-section__wrap {
    inline-size: 100%;
  }

  .events-band {
    position: relative;
    overflow: hidden;
    padding: var(--space-16) var(--space-8);
    border-radius: var(--radius-card);
    background-color: var(--color-primary);
    color: var(--color-text-invert);
  }

  /* A sáv teljes szélességű, de a TARTALMA a konténer szélességén marad és
     középre igazodik — a tervben a kártyacsoport 1280px a 1872px-es sávban,
     nem húzódik szét a sáv széléig. */
  .events-band > *:not(.events-band__deco) {
    position: relative;
    z-index: var(--z-base);
    max-inline-size: var(--container-default);
    margin-inline: auto;
  }

  .events-band .section-head__title {
    color: var(--color-text-invert);
  }

  .events-grid {
    display: grid;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .event-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .event-card__media,
  .news-card__media {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    background-color: var(--color-bg-invert);
    aspect-ratio: 16 / 7;

    & img {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  .media-card__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 100%;
    color: var(--color-text-invert);

    & svg {
      inline-size: 45%;
      block-size: auto;
    }
  }

  .event-card__title,
  .news-card__title {
    font-size: var(--text-lead);
    line-height: var(--lh-snug);
    letter-spacing: 0;

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

    & a:hover {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }

  /* MEGJEGYZÉS: a hírkártya-címek aláhúzását (hover) a 99-wp-overrides.css
     rögzíti — a plugin CSS-ek layer nélküliek, ezért egy itteni, layerezett
     text-decoration alulmaradna velük szemben. Ide ne duplikáld. */

  .event-card__meta,
  .news-card__meta {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    margin: 0;
    font-size: var(--text-xs);

    & dt {
      color: color-mix(in srgb, currentColor 70%, transparent);
    }

    & dd {
      margin: 0;
      font-size: var(--text-eyebrow);
    }
  }

  .event-card__excerpt,
  .news-card__excerpt {
    max-width: none;
    margin: 0;
    font-size: var(--text-eyebrow);
    line-height: var(--lh-normal);
    color: color-mix(in srgb, currentColor 85%, transparent);
  }

  .event-card .btn {
    margin-block-start: auto;
  }

  .btn--block {
    display: flex;
    inline-size: 100%;
  }

  .events-band__more {
    max-width: none;
    margin-block-start: var(--space-12);
    text-align: center;
  }

  /* Dekorációk — a tervbeli arányok szerint (1872×1033-as sávkeretre
     vetítve), sötétkéken a zafírkék háttéren. */
  /* Az átlátszatlanság a tervből visszamérve: a dekoráció ott alig sötétebb
     a sávnál (#29328B a #2B379B-en ≈ 22%), nem tömör sötétkék. */
  .events-band__deco .brush {
    --brush-color: var(--icf-deep-blue);
    opacity: 0.22;
  }

  .brush--events-sparkle {
    inset-block-start: 4.6%;
    inset-inline-start: 3.5%;
    inline-size: 13%;
    min-inline-size: 140px;
  }

  .brush--events-wave {
    inset-block-start: 43%;
    inset-inline-start: 82.4%;
    inline-size: 19%;
    min-inline-size: 200px;
    aspect-ratio: 360 / 136;
  }

  .brush--events-arrow {
    inset-block-start: 76.5%;
    inset-inline-start: 81.6%;
    inline-size: 15%;
    min-inline-size: 160px;
  }

  /* ========================================================================
     HÍREK
     ======================================================================== */

  .news-section {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg);
  }

  .news-section .container {
    position: relative;
    z-index: var(--z-base);
  }

  .news-grid {
    display: grid;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .news-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
  }

  .news-card__media {
    inline-size: 100%;
  }

  /* Subgrid: a kártyák belső sorai (kép, cím, meta, gomb, kivonat) oszloponként
     egy vonalban maradnak akkor is, ha a címek eltérő hosszúak. Fallback: a
     flex elrendezés fent — subgrid nélküli böngészőben egyszerűen nem igazít. */
  @supports (grid-template-rows: subgrid) {
    @media (min-width: 640px) {
      .events-grid,
      .news-grid {
        grid-template-rows: repeat(5, auto);
      }

      .event-card,
      .news-card {
        display: grid;
        grid-row: span 5;
        grid-template-rows: subgrid;
        gap: var(--space-4);
      }
    }
  }

  .brush--news-sparkle { inset-block-start: 6%; inset-inline-end: 3%; inline-size: 220px; }

  /* A tervben a szekció bal alsó sarkából egy széles fehér ecsetvonás lóg ki */
  .brush--news-wave {
    inset-block-end: -4%;
    inset-inline-start: -8%;
    inline-size: 420px;
    rotate: -8deg;
  }

  /* ========================================================================
     CTA SÁV — "Csatlakozz hozzánk!"
     ======================================================================== */

  .cta-band {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-20);
    background-color: var(--color-bg-invert);
    color: var(--color-text-invert);
  }

  .cta-band__grid {
    position: relative;
    z-index: var(--z-base);
    display: grid;
    gap: var(--space-12);
    align-items: center;
  }

  .cta-band .section-head__title {
    color: var(--color-text-invert);
    margin-block: var(--space-2) var(--space-4);
  }

  .cta-band__lead {
    max-width: 44ch;
    margin-block-end: var(--space-8);
    color: color-mix(in srgb, var(--icf-white) 80%, transparent);
  }

  /* Szlogen doboz — a tervben csontszín (nem fehér), erősen lekerekített */
  .cta-band__slogan {
    max-width: 20ch;
    margin-block: 0;
    margin-inline: 80px 0;
    justify-self: start;
    padding: var(--space-8) var(--space-12);
    border-radius: 2.75rem;
    text-wrap: balance;

    background-color: var(--icf-bone);
    color: var(--color-text);

    /*
     * NEM csupa nagybetű és nem ritkított: az ügyfél jelezte (2026-09-16),
     * hogy „a betűk sem brand helyesek". A szlogen két sorban áll —
     * „Coaching", alatta a mondat —, ahogy az arculatban szerepel.
     */
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    text-align: center;
    letter-spacing: var(--tracking-normal);
  }

  .cta-band__slogan-lead {
    display: block;
    margin-block-end: var(--space-1);
    font-size: var(--text-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
  }

  /* CTA dekorációk — a tervben: sárga négyágú csillag és kék nyolcágú csillag
     felül, sárga kacskaringó és kék sarok-nyíl alul, a szlogen köré rendezve. */
  .brush--cta-sparkle {
    --brush-color: var(--icf-yellow);
    inset-block-start: 16%;
    inset-inline-start: 58%;
    inline-size: 110px;
  }

  .brush--cta-asterisk {
    --brush-color: var(--icf-light-blue);
    inset-block-start: 17%;
    inset-inline-start: 76%;
    inline-size: 76px;
  }

  .brush--cta-curl {
    --brush-color: var(--icf-yellow);
    inset-block-end: 18%;
    inset-inline-start: 57%;
    inline-size: 100px;
  }

  .brush--cta-arrow {
    inset-block-end: 8%;
    inset-inline-start: 70%;
    inline-size: 190px;
  }

  /* ========================================================================
     LÁBLÉC
     ======================================================================== */

  .site-footer {
    padding-block: var(--space-16) var(--space-8);
    background-color: var(--color-bg-invert);
    color: color-mix(in srgb, var(--icf-white) 80%, transparent);
    font-size: var(--text-nav);
  }

  .site-footer__top {
    display: grid;
    gap: var(--space-12);
    padding-block-end: var(--space-12);
  }

  .site-footer__logo {
    block-size: 44px;
    inline-size: auto;
    color: var(--color-text-invert);
  }

  .site-footer__desc {
    max-width: 34ch;
    margin-block: var(--space-5) 0;
    font-size: var(--text-eyebrow);
    line-height: var(--lh-normal);
  }

  /* ------------------------------------------------------------------------
     A LÁBLÉC LISTÁIBAN A RITMUST A `gap` ADJA, NEM A MARGÓ

     A `05-base.css` folyó szövegre szánt `li + li { margin-block-start }`
     szabálya ezekre a listákra is hat, és a `gap` mellé adódik. Vízszintes
     listában ez látványos: az alsó sávban az „Adatkezelési tájékoztató" és a
     „Made by The PALM Creative Agency" 4 pixellel eltérő magasságban ült,
     mert a margó CSAK a másodikra vonatkozik.

     Ugyanaz a csapda, amit a mega menü hasábjainál már megfizettünk — ott is
     ki kellett nullázni. Ez a fájl a `components` layerben van, a base pedig
     korábbi, tehát a nullázás nyer.
     ------------------------------------------------------------------------ */
  :is(.site-footer__social, .site-footer__list, .site-footer__legal-list) li + li {
    margin-block-start: 0;
  }

  .site-footer__social {
    display: flex;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
    padding: 0;
    list-style: none;

    & a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: 36px;
      block-size: 36px;
      border-radius: var(--radius-full);
      background-color: color-mix(in srgb, var(--icf-white) 12%, transparent);
      color: var(--color-text-invert);
      text-decoration: none;
      transition: background-color var(--duration-fast) var(--ease);
    }

    & a:hover {
      background-color: var(--color-accent);
      color: var(--icf-deep-blue);
    }
  }

  /* Oszlopcím — a tervtől eltérően nem kék, hanem fehér, Nunitóval és a
     "Csatlakozz" szóéval azonos sárga ecsetvonás-aláhúzással. A linkektől
     nagy térköz választja el. */
  .site-footer__col-title {
    position: relative;
    display: inline-block;
    margin-block-end: var(--space-10);

    color: var(--color-text-invert);
    font-family: var(--font-display);
    font-size: var(--text-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;

    &::after {
      content: "";
      position: absolute;
      inset-inline: -0.1em;
      inset-block-start: calc(100% + 0.5em);
      block-size: 0.5em;
      background-color: var(--icf-yellow);
      mask-image: url("../images/brush/heading-underline-mask.webp");
      mask-size: 100% 100%;
      mask-repeat: no-repeat;
    }
  }

  .site-footer__list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;

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

    & a:hover {
      color: var(--color-text-invert);
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
    align-items: center;
    justify-content: space-between;

    padding-block-start: var(--space-6);
    border-block-start: 1px solid color-mix(in srgb, var(--icf-white) 12%, transparent);
    font-size: var(--text-xs);
  }

  .site-footer__legal-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;

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

    & a:hover {
      color: var(--color-text-invert);
      text-decoration: underline;
    }
  }

  /* ========================================================================
     RESPONSIVE — mobile first, itt jönnek a nagyobb breakpointok
     ======================================================================== */

  @media (min-width: 640px) {
    .feature-grid,
    .events-grid,
    .news-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats-band__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .hero__grid {
      grid-template-columns: 1fr 1fr;
    }

    .feature-grid,
    .events-grid,
    .news-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cta-band__grid {
      grid-template-columns: 1.35fr 1fr;
    }

    .site-footer__top {
      grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
      gap: var(--space-16);
    }

    .events-band,
    .stats-band__inner {
      padding-inline: var(--space-16);
    }
  }

  /* ------------------------------------------------------------------------
     SZŰKÍTETT SÁV — 1281px és 1460px között

     Mérve (2026-08-18, kezdőlap): a logó + a nyolc menüpont + a két gomb
     alapméretben 1390px-es ablaktól fér ki egy sorba. Alatta a menü két-három
     sorba tördelt, ami a lebegő sávot szétfeszíti. Ezen a szakaszon ezért
     kisebb betű és szűkebb térköz megy — így egy sorban marad —, 1280px alatt
     pedig hamburgerre váltunk.

     2026-09-30: a kereső ikonja (19-search.css) ~50px-t vett el a sávból, és
     a határ 1390-ről 1456px-re tolódott (mérve, iframe-ben szélességenként).
     A felső határ ezért 1460.
     ------------------------------------------------------------------------ */

  @media (min-width: 1281px) and (max-width: 1460px) {
    .site-nav__list {
      gap: var(--space-3);

      & a {
        font-size: var(--text-xs);
      }
    }

    .site-header__bar {
      gap: var(--space-4);
      padding-inline: var(--space-4);
    }

    .site-header__actions {
      gap: var(--space-2);
    }

    .site-nav__caret {
      inline-size: 14px;
      block-size: 14px;
    }
  }

  /* ------------------------------------------------------------------------
     MOBIL / TABLET NAVIGÁCIÓ — 1280px alatt

     A panel jobbról beúszó drawer: tableten és kis laptopon jobban néz ki,
     mint egy teljes képernyős lap, és a mögötte lévő oldal is látszik.
     ------------------------------------------------------------------------ */

  @media (max-width: 1280px) {

    .site-nav {
      position: fixed;
      inset-block: 0;
      inset-inline-end: 0;
      z-index: var(--z-modal);

      display: grid;
      align-content: start;
      gap: var(--space-8);

      inline-size: min(420px, 100%);
      max-block-size: 100dvh;
      padding: calc(var(--space-24) + var(--space-2)) var(--space-8) var(--space-12);
      overflow-y: auto;
      overscroll-behavior: contain;

      background-color: var(--color-bg-invert);
      box-shadow: -24px 0 60px -20px color-mix(in srgb, var(--icf-deep-blue) 60%, transparent);

      visibility: hidden;
      translate: 100% 0;
      transition:
        translate var(--duration-base) var(--ease),
        visibility var(--duration-base) var(--ease);
    }

    .site-nav.is-open {
      visibility: visible;
      translate: 0 0;
    }

    /* Elsötétített háttér — kattintásra zár */
    .site-nav__backdrop {
      display: block;
      position: fixed;
      inset: 0;
      z-index: calc(var(--z-modal) - 1);

      background-color: color-mix(in srgb, var(--icf-deep-blue) 55%, transparent);
      backdrop-filter: blur(3px);

      opacity: 0;
      visibility: hidden;
      transition:
        opacity var(--duration-base) var(--ease),
        visibility var(--duration-base) var(--ease);
    }

    .site-nav__backdrop.is-open {
      opacity: 1;
      visibility: visible;
    }

    .site-nav__list {
      flex-direction: column;
      align-items: stretch;
      gap: 0;

      & > li + li {
        border-block-start: 1px solid color-mix(in srgb, var(--icf-white) 10%, transparent);
      }

      & > li > a {
        padding-block: var(--space-4);
        font-size: var(--text-lg);
        text-align: start;
      }

      /* A lenyíló jelző a sor végére kerül, nem a szöveg mellé */
      & .menu-item-has-children > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      & .menu-item-has-children > a::after {
        margin-inline-start: var(--space-3);
        font-size: 0.85em;
      }
    }

    .site-nav__list > li > .sub-menu {
      position: static;
      translate: none;
      opacity: 1;
      visibility: visible;
      min-inline-size: 0;
      gap: 0;
      padding: 0 0 var(--space-3) var(--space-4);
      background: transparent;
      border: 0;
      box-shadow: none;

      & a {
        padding-block: var(--space-2);
        font-size: var(--text-nav);
        opacity: 0.75;
      }
    }

    /* --------------------------------------------------------------------
       MEGA MENÜ MOBILON — harmonika a beúszó panelen belül

       A hover itt értelmetlen (és érintésre csapdába ejtené a menüpontot),
       ezért a nyitást a sor végi gomb végzi, az Alpine `sub` állapoton át.
       A menüpont linkje így kattintható marad: a gomb csak az almenüt nyitja.
       -------------------------------------------------------------------- */

    .site-nav__list > .has-mega {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
    }

    /* A sor végi gomb már hordozza a chevront — a linkben lévő elmarad */
    .site-nav__caret {
      display: none;
    }

    .site-nav__sub-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      padding: var(--space-3);
      border: 0;
      background: transparent;
      color: var(--color-text-invert);
      cursor: pointer;

      & .icon {
        transition: rotate var(--duration-fast) var(--ease);
      }

      &[aria-expanded="true"] .icon {
        rotate: 180deg;
      }
    }

    .mega-menu {
      position: static;
      grid-column: 1 / -1;
      inset: auto;
      padding: 0 0 var(--space-3) var(--space-4);

      display: none;
      opacity: 1;
      visibility: visible;
      transition: none;
    }

    .mega-menu.is-open {
      display: block;
    }

    .mega-menu__inner {
      inline-size: auto;
      max-inline-size: none;
      padding: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .mega-menu__list {
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }

    .site-nav .mega-menu__list > li > a {
      border-block-end-color: color-mix(in srgb, var(--icf-white) 15%, transparent);
      color: var(--color-text-invert);
      opacity: 0.6;
    }

    .site-nav .mega-menu__list .sub-menu a,
    .site-nav .mega-menu__list--flat > li > a {
      padding-block: var(--space-2);
      color: var(--color-text-invert);
      opacity: 0.8;
    }

    .site-nav .mega-menu__list .sub-menu a:hover,
    .site-nav .mega-menu__list--flat > li > a:hover {
      background-color: color-mix(in srgb, var(--icf-white) 10%, transparent);
      color: var(--color-text-invert);
    }

    .site-nav .mega-menu__list .sub-menu .sub-menu {
      border-inline-start-color: color-mix(in srgb, var(--icf-white) 15%, transparent);

      & a {
        color: var(--color-text-invert);
        opacity: 0.65;
      }
    }

    .site-nav .mega-menu .current-menu-item > a,
    .site-nav .mega-menu .current-menu-ancestor > a {
      color: var(--icf-yellow);
      opacity: 1;
    }

    .site-nav__actions {
      display: grid;
      gap: var(--space-3);
      padding-block-start: var(--space-4);
      border-block-start: 1px solid color-mix(in srgb, var(--icf-white) 10%, transparent);

      & .btn {
        inline-size: 100%;
      }
    }

    .site-header__actions {
      display: none;
    }

    .site-header__toggle {
      display: inline-flex;
      margin-inline-start: auto;
      position: relative;
      z-index: calc(var(--z-modal) + 1);
    }

    .site-header__bar {
      gap: var(--space-4);
    }
  }

  /* Layout töréspontok — ezek a nav töréspontjától függetlenek */
  @media (max-width: 1023px) {
    .topbar__item--end {
      display: none;
    }

    .hero__badge {
      inset-inline-end: var(--space-4);
    }

    /* Egy hasábos elrendezésnél a 80px behúzás már furán nézne ki */
    .cta-band__slogan {
      justify-self: start;
      margin-inline-start: 0;
    }
  }

  /* A dekorációk kis kijelzőn csak zajt csinálnának */
  @media (max-width: 767px) {
    .brush {
      display: none;
    }
  }
}