/* ==========================================================================
   07-components.css — Komponensek
   
   Itt jönnek a projekt-specifikus komponensek.
   
   Naming convention: BEM-lite
     .component         — root
     .component__part   — gyerek elem
     .component--variant — variáns
   
   Konvenciók:
   - Tokeneket használj, ne hardcode-olj értéket
   - Komponens-szintű változókat használj a könnyű felülírhatóság miatt:
     .card { --card-padding: var(--space-6); padding: var(--card-padding); }
   - Modifier osztály csak a változót írja át:
     .card--compact { --card-padding: var(--space-4); }

   Példa skeleton:

   .button {
     --button-bg: var(--color-primary);
     --button-color: var(--color-text-invert);

     display: inline-flex;
     padding: var(--space-3) var(--space-4);
     background: var(--button-bg);
     color: var(--button-color);
     border-radius: var(--radius-md);

     &:hover {
       --button-bg: var(--color-primary-hover);
     }
   }

   .button--ghost {
     --button-bg: transparent;
     --button-color: var(--color-text);
     border: 1px solid var(--color-border);
   }
   ========================================================================== */

@layer components {

  /* ========================================================================
     EYEBROW — szekció fölötti kiskapitális címke

     Design: 13px, +0.14em tracking, uppercase, világoskék.
     ======================================================================== */

  .eyebrow {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-eyebrow);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-eyebrow);
    line-height: var(--lh-snug);
    text-transform: uppercase;
    color: var(--color-secondary);
  }

  /* ========================================================================
     BUTTON — pill gomb

     Alap: sárga CTA sötétkék szöveggel (a design elsődleges gombja).
     ======================================================================== */

  .btn {
    --btn-bg:     var(--color-accent);
    --btn-bg-hover: var(--color-accent-hover);
    --btn-color:  var(--icf-deep-blue);
    --btn-border: transparent;
    --btn-border-width: 1px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    padding: var(--space-3) var(--space-8);
    border: var(--btn-border-width) solid var(--btn-border);
    border-radius: var(--radius-pill);

    background-color: var(--btn-bg);
    color: var(--btn-color);

    font-family: var(--font-display);
    font-size: var(--text-lead);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;

    cursor: pointer;
    transition:
      background-color var(--duration-base) var(--ease),
      color var(--duration-base) var(--ease),
      transform var(--duration-fast) var(--ease);

    &:hover {
      --btn-bg: var(--btn-bg-hover);
      color: var(--btn-color);
      transform: translateY(-1px);
    }

    &:active {
      transform: translateY(0);
    }

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

  /* Sötétkék pill — másodlagos akció, badge-szerű elem */
  .btn--dark {
    --btn-bg:       var(--icf-deep-blue);
    --btn-bg-hover: var(--icf-blue);
    --btn-color:    var(--color-text-invert);
  }

  /* Kék pill */
  .btn--primary {
    --btn-bg:       var(--color-primary);
    --btn-bg-hover: var(--color-primary-hover);
    --btn-color:    var(--color-text-invert);
  }

  /* Körvonalas — világos háttéren. A designban tömör sötétkék, 2px keret. */
  .btn--outline {
    --btn-bg:       transparent;
    --btn-bg-hover: var(--icf-deep-blue);
    --btn-color:    var(--icf-deep-blue);
    --btn-border:   var(--icf-deep-blue);
    --btn-border-width: 2px;

    &:hover {
      --btn-color: var(--color-text-invert);
    }
  }

  /* Körvonalas — sötét háttéren (header "Belépés") */
  .btn--outline-invert {
    --btn-bg:       transparent;
    --btn-bg-hover: var(--icf-white);
    --btn-color:    var(--color-text-invert);
    --btn-border:   var(--icf-white);
    --btn-border-width: 2px;

    &:hover {
      --btn-color: var(--icf-deep-blue);
    }
  }

  .btn--sm {
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-nav);
  }

  /* ========================================================================
     CARD — nagy lekerekítésű kártya

     Design: 32px radius, lágy, mélyre eső árnyék.
     ======================================================================== */

  .card {
    --card-padding: var(--space-8);
    --card-bg: var(--color-bg-alt);

    padding: var(--card-padding);
    background-color: var(--card-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
  }

  /* Kép-kártya — a padding a képnél nem kell, csak a levágás */
  .card--media {
    --card-padding: 0;
    overflow: hidden;
  }

  .card--flat {
    box-shadow: none;
    border: 1px solid var(--color-border);
  }

  /* Sötét kártya — a statisztika sáv jellegű blokkokhoz */
  .card--invert {
    --card-bg: var(--color-bg-invert);
    color: var(--color-text-invert);
    box-shadow: none;

    & :is(h1, h2, h3, h4, h5, h6) {
      color: var(--color-text-invert);
    }
  }

  /* ========================================================================
     SECTION — szekció alap ritmus
     ======================================================================== */

  .section {
    padding-block: var(--section-padding-block);
  }

  .section--tight {
    padding-block: var(--space-16);
  }

  .section--invert {
    background-color: var(--color-bg-invert);
    color: var(--color-text-invert);

    & :is(h1, h2, h3, h4, h5, h6) {
      color: var(--color-text-invert);
    }
  }

  /* ========================================================================
     STAT — nagy szám + felirat (sárga szám sötét háttéren)
     ======================================================================== */

  .stat__value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-6xl);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-none);
    letter-spacing: var(--tracking-display);
    color: var(--color-accent);
  }

  .stat__label {
    display: block;
    margin-block-start: var(--space-3);
    font-size: var(--text-lead);
    color: var(--color-text-invert);
  }

  /* ========================================================================
     TARTALOM BLOKK — szerkesztőből jövő HTML

     A hír- és esemény-oldal törzse (.post-single__body). A szabályok a
     NATÍV HTML-re szólnak: címsor, bekezdés, lista, táblázat, kép. Az
     Elementorral épített bejegyzéseknél most a plugin saját markupja és
     (layer nélküli, tehát erősebb) CSS-e nyer — de a post_content minden
     bejegyzésnél ki van töltve tiszta HTML-lel, így az Elementor
     kikapcsolása után ez a készlet veszi át a megjelenítést.
     ======================================================================== */

  /* A belső oldalak törzse (.page-body__inner) UGYANEZT a készletet kapja —
     ott is a szerkesztőből jövő natív HTML-t kell megjelenítenünk. Csak a
     selectort bővítjük, hogy a két helyen ne csússzon szét a tipográfia;
     az oldalak saját LAYOUTja a 14-page.css-ben van. */
  .post-single__body,
  .page-body__inner {

    & :is(h2, h3, h4, h5, h6) {
      color: var(--color-primary);
    }

    & h2 { font-size: var(--text-h3); }
    & h3 { font-size: var(--text-h4); }
    & :is(h4, h5, h6) { font-size: var(--text-h5); }

    & :is(p, li) {
      font-size: var(--text-lead);
      line-height: var(--lh-body);
    }

    & a:not(.btn) {
      color: var(--color-primary);
      text-underline-offset: 0.2em;
    }

    & img {
      border-radius: var(--radius-2xl);
    }

    /* Önállóan álló link = gomb (lásd inc/content.php), illetve a Gutenberg
       gomb blokk. Mindkettő kap levegőt, hogy kiemelt akciónak látsszon,
       ne szövegsornak. */
    & :is(.content-cta, .wp-block-buttons) {
      --flow-space: var(--space-8);

      max-width: none;
      margin-block-end: var(--space-8);
    }

    /* Táblázat — a jegyár- és programtáblák kártyaként. A körbevágáshoz
       `separate` kell: `collapse` mellett a böngésző nem vágja le a
       sarkokat. Szűk kijelzőn a figure görgethető, hogy a tábla ne
       feszítse szét a layoutot.

       A keret és a bőséges térköz azért kell, mert egy oldalon több tábla
       is állhat egymás után (program, majd jegyárak) — enélkül a második
       az első folytatásának látszik. */
    & figure:has(table) {
      overflow-x: auto;
    }

    & :is(figure, table) {
      --flow-space: var(--space-10);
    }

    /* Címsor UTÁN viszont szorosabban követi a tábla — oda tartozik */
    & :is(h2, h3, h4, h5, h6) + :is(figure, table) {
      --flow-space: var(--space-5);
    }

    /* A táblát követő elem se tapadjon rá */
    & :is(figure, table) + * {
      --flow-space: var(--space-10);
    }

    /* MEGJEGYZÉS: a táblázat VIZUÁLIS szabályai a 99-wp-overrides.css-ben
       vannak, mert a Gutenberg blokk-könyvtár (wp-block-library) layer
       nélküli CSS-e cellakeretet rajzol a .wp-block-table-re, és azt csak
       layeren kívülről lehet felülírni. Ide ne duplikáld. */
  }

  /* ========================================================================
     PAGINATION — lapozó

     A WordPress the_posts_pagination() kimenetére van szabva:
     nav.pagination > .nav-links > a.page-numbers / span.page-numbers.current.
     Ezért a WP osztályneveit használjuk, nem sajátot — így a search.php és
     minden későbbi archívum ingyen megkapja.
     ======================================================================== */

  .pagination {
    margin-block-start: var(--space-16);
  }

  .pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
  }

  .pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-inline-size: 44px;
    block-size: 44px;
    padding-inline: var(--space-3);

    border: 2px solid transparent;
    border-radius: var(--radius-full);

    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: var(--text-nav);
    font-weight: var(--fw-semibold);
    line-height: 1;
    text-decoration: none;

    transition:
      background-color var(--duration-base) var(--ease),
      border-color var(--duration-base) var(--ease),
      color var(--duration-base) var(--ease);
  }

  .pagination a.page-numbers:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  .pagination a.page-numbers:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 3px;
  }

  .pagination .page-numbers.current {
    background-color: var(--color-primary);
    color: var(--color-text-invert);
  }

  /* A "…" nem kattintható, ne is nézzen ki gombnak */
  .pagination .page-numbers.dots {
    min-inline-size: var(--space-6);
    padding-inline: 0;
    color: var(--color-text-subtle);
  }

  .pagination :is(.prev, .next) {
    border-color: var(--color-border);
  }

  .pagination :is(.prev, .next) .icon {
    inline-size: 18px;
    block-size: 18px;
  }

}