/* ==========================================================================
   12-events.css — Események archívum és esemény-oldal

   A kártya (.event-card) és a rács (.events-grid) a 09-home.css-ből jön —
   ott a kezdőlapi sötét sávban él, de a színei `inherit`/`currentColor`
   alapúak, ezért a csontszín archívumon is helyesek. Itt csak az archívum
   kerete, a szűrő chipek és az esemény-oldal meta blokkja jön hozzá.
   ========================================================================== */

@layer components {

  /* ========================================================================
     ARCHÍVUM
     ======================================================================== */

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

  .event-archive .container {
    position: relative;
    z-index: var(--z-base);
  }

  .event-archive__deco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  .event-archive__intro {
    max-inline-size: 62ch;
    margin-block-start: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-lead);
  }

  /* Közelgő / korábbi blokk */
  .event-archive__group + .event-archive__group {
    margin-block-start: var(--space-20);
  }

  .event-archive__subhead {
    margin-block-end: var(--space-8);
    font-size: var(--text-h3);
  }

  .event-archive__empty {
    max-width: none;
    padding: var(--space-16) 0;
    text-align: center;
    color: var(--color-text-muted);
  }

  /* ========================================================================
     SZŰRŐ CHIPEK — az event-category taxonómia archívumaira mutatnak

     Szerver oldali szűrés: JavaScript nélkül is működik, és a szűrt nézet
     saját, megosztható URL-t kap (a coach listával szemben, ahol 198 elem
     fért egy oldalra és ezért volt értelme a kliens oldali szűrésnek).
     ======================================================================== */

  .event-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-end: var(--space-10);
  }

  .event-chips__item {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-5);

    border: 2px solid var(--color-border);
    border-radius: var(--radius-pill);

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

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

  .event-chips__item:hover {
    border-color: var(--color-primary);
  }

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

  .event-chips__item.is-active {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-text-invert);
  }

  /* ========================================================================
     ESEMÉNY OLDAL

     A keretet a .post-single blokk adja (11-news.css) — itt csak az
     esemény-specifikus részek jönnek.
     ======================================================================== */

  .event-single__cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    max-width: none;
    margin-block-start: var(--space-4);
  }

  /* Dátum / időpont / helyszín / előadó — fehér kártya a kép fölött */
  .event-single__meta {
    display: grid;
    gap: var(--space-6);
    margin-block-end: var(--space-8);
    padding: var(--space-6);
    border-radius: var(--radius-card);
    background-color: var(--color-bg-alt);
    box-shadow: var(--shadow-card);
  }

  .event-single__meta-item dt {
    margin-block-end: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-eyebrow);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .event-single__meta-item dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-h6);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
  }

  /* Lezajlott esemény jelzése — 332-ből 326 ilyen, ezért fontos, hogy
     rögtön látszódjon, mielőtt valaki jelentkezni próbál. */
  .event-single__past {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: none;
    margin-block-end: var(--space-8);
    padding: var(--space-3) var(--space-5);

    border-radius: var(--radius-pill);
    background-color: var(--color-bg-muted);
    color: var(--color-text-muted);
    font-size: var(--text-nav);
  }

  /* ========================================================================
     RESPONSIVE
     ======================================================================== */

  @media (min-width: 768px) {
    .event-single__meta {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: var(--space-8) var(--space-10);
    }
  }

  @media (min-width: 1024px) {
    .event-single__meta {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-8);
    }
  }

  /* ========================================================================
     DEKORÁCIÓK
     ======================================================================== */

  .brush--event-archive-top    { inset-block-start: 3%;  inset-inline-end: -3%;   inline-size: 240px; }
  .brush--event-archive-mid    { inset-block-start: 45%; inset-inline-start: -6%; inline-size: 320px; }
  .brush--event-archive-bottom { inset-block-end: 4%;    inset-inline-end: -4%;   inline-size: 280px; }

}

/* =============================================================================
   KÖZELGŐ ESEMÉNYEK LAPOZÓJA — az esemény aloldal alján

   Rács helyett lapozó: egyszerre KÉT kártya látszik, összesen ötből. A
   görgetés natív (`scroll-snap`), a nyilak és a pontok csak vezérlik — így
   érintésre húzható, billentyűzetről görgethető, és JavaScript nélkül is
   használható, csak a vezérlők tűnnek el.
   ============================================================================= */

@layer components {

  .event-carousel {
    --carousel-gap: var(--space-6);
    --carousel-per-view: 2;
  }

  .event-carousel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: var(--space-6);
  }

  .event-carousel__head .post-related__title {
    margin: 0;
  }

  .event-carousel__nav {
    display: flex;
    gap: var(--space-2);
  }

  .event-carousel__nav .icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  /* A sáv felülírja az `.events-grid` rácsát: itt nem tördelünk sorokba,
     hanem egyetlen vízszintes sorban görgetünk. */
  .event-carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--carousel-per-view) - 1) * var(--carousel-gap)) / var(--carousel-per-view));
    grid-template-columns: none;
    gap: var(--carousel-gap);

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

    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;

    /* ⚠️ NINCS `scroll-behavior: smooth`. Mérve ezen az elrendezésen a lágy
       görgetés egyáltalán nem mozdította a sávot — sem CSS-ből, sem
       `scrollTo()`-ból, még a snap ideiglenes kikapcsolásával sem. A lapozás
       animációját ezért a `main.js` `eventCarousel` komponense rajzolja
       (requestAnimationFrame), ami a `prefers-reduced-motion` beállítást is
       figyeli. */

    /* A görgetősáv elrejtése: a lapozást a nyilak és a pontok mutatják.
       A tartalom így is elérhető billentyűzetről és érintéssel. */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .event-carousel__track > * {
    scroll-snap-align: start;
  }

  .event-carousel__dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-block-start: var(--space-6);
  }

  .event-carousel__dot {
    inline-size: var(--space-2);
    block-size: var(--space-2);
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-border-strong);
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease),
      inline-size var(--duration-fast) var(--ease);

    &.is-active {
      inline-size: var(--space-6);
      background-color: var(--color-primary);
    }

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

  /* Szűk kijelzőn egy kártya tölti ki a sávot. */
  @media (max-width: 767px) {
    .event-carousel {
      --carousel-per-view: 1;
    }
  }
}