/* ==========================================================================
   11-news.css — Hírek: kategória archívum és egy bejegyzés

   A designnyelv a kezdőlapról öröklődik: csontszín háttér, erősen lekerekített
   kártyák, halvány ecsetvonás-dekorációk. A kártyák a kezdőlapi `.news-card`
   komponenst használják (09-home.css) — itt csak az archívum kerete, a
   kiemelt hír és a bejegyzés-oldal jön hozzá.
   ========================================================================== */

@layer components {

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

  .news-archive,
  .post-single {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg);
  }

  .news-archive .container,
  .post-single .container {
    position: relative;
    z-index: var(--z-base);
  }

  .news-archive__deco,
  .post-single__deco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  /* Kategória leírás a címsor alatt — csak ha a WP-ben ki van töltve */
  .news-archive__intro {
    max-inline-size: 62ch;
    margin-block-start: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-lead);
  }

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

  /* ========================================================================
     KIEMELT HÍR — a lista első eleme, csak az első oldalon
     ======================================================================== */

  .news-featured {
    display: grid;
    gap: var(--space-6);
    align-items: center;

    margin-block-end: var(--space-12);
    padding: var(--space-6);
    border-radius: var(--radius-card);
    background-color: var(--color-bg-alt);
    box-shadow: var(--shadow-card);
  }

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

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

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

  .news-featured__title {
    font-size: var(--text-h3);
    line-height: var(--lh-snug);
    text-wrap: balance;

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

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

  .news-featured__excerpt {
    max-width: none;
    margin: 0;
    color: var(--color-text-muted);
  }

  /* ========================================================================
     META SOR — dátum (és kategória a bejegyzés-oldalon)

     A kártyák `dl`-t használnak (news-card__meta), itt egyszerű sor kell,
     mert a dátum önmagában áll.
     ======================================================================== */

  .news-meta {
    max-width: none;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-eyebrow);
  }

  /* ========================================================================
     EGY BEJEGYZÉS
     ======================================================================== */

  .post-single__back {
    max-width: none;
    margin-block-end: var(--space-8);

    & a {
      color: var(--color-text-muted);
      font-size: var(--text-nav);
      text-decoration: none;
    }

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

  .post-single__head {
    margin-block-end: var(--space-8);
  }

  /* A `ch` a cím SAJÁT betűméretére vonatkozik (54px). 22ch-nál a hosszabb
     esemény- és hírcímek HÁROM sorba törtek, amit az ügyfél 2026-09-16-án
     jelzett — 32ch-nál ugyanez kettő. Szélesebbre nem érdemes: a címsor
     így is a szűkített kártyán belül marad. */
  .post-single__title {
    max-inline-size: 32ch;
    margin-block: var(--space-2) var(--space-4);
    font-size: var(--text-section-title);
    text-wrap: balance;
  }

  .post-single__media {
    overflow: hidden;
    margin-block-end: var(--space-10);
    border-radius: var(--radius-card);
    background-color: var(--color-bg-invert);

    & img {
      display: block;
      inline-size: 100%;
      block-size: auto;
    }
  }

  /* A hír- és esemény-oldal egésze SZŰKEBB hasábot kap, mint a konténer.
     Mérve egy esemény-oldalon: az 1366px-es kártyában a 809px-es szöveg
     mellett 461px maradt üresen — az ügyfél 2026-09-16-án ezt jelezte.
     A cím, a meta-kártya, a kép és a törzs egyaránt erre a szélességre
     igazodik, így a bal élük is egy vonalban van (korábban a címsor 48
     pixellel kintebb kezdődött, mint a szöveg). */
  /* A szűkítés a CIKKEN van, nem elemenként. Elemenként próbálva a
     `.post-single__media` `margin-inline: auto`-ja alulmaradt egy layeren
     KÍVÜLI `figure` szabállyal szemben (mérve: a kép a konténer bal szélén
     maradt, a kártya viszont középen — 187 pixellel arrébb). A cikk
     szűkítésével minden gyereke egyszerre, versengés nélkül igazodik. */
  .post-single > .container > :is(article, .post-single__back, .post-related) {
    inline-size: 100%;
    max-inline-size: var(--post-measure, 62rem);
    margin-inline: auto;
  }

  .post-single__body {
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-card);
    background-color: var(--color-bg-alt);
    box-shadow: var(--shadow-card);
  }

  /* Olvasható sorhossz — a kártya szélesebb, mint amennyi folyószövegnek jó.
     A táblázat, a kép és a beágyazás KIVÉTEL: azok a teljes szélességet
     megkapják, különben a jegyár- és programtáblázatok fölöslegesen
     görgethetők lennének. */
  .post-single__body .flow > :is(p, ul, ol, dl, h2, h3, h4, h5, h6, blockquote) {
    max-inline-size: none;
  }

  /* A térközt a `.flow` utility adja (margin-block-start: var(--flow-space)),
     és az utilities layer erősebb ennél a fájlnál — ezért NEM a margót írjuk
     felül, hanem a változót, amit a .flow beolvas. */
  .post-single__body :is(h2, h3, h4) {
    --flow-space: var(--space-8);
  }

  .post-single__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    max-width: none;
    margin-block-start: var(--space-10);
  }

  /* ========================================================================
     KAPCSOLÓDÓ HÍREK
     ======================================================================== */

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

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

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

  /* Az archívum egy oldalán fix 12 hír van, tehát a szekció magassága
     kiszámítható — ezért itt elég három, százalékosan elhelyezett dekoráció
     (a coach listánál azért kellett szórt minta, mert ott 198 elem van
     egy oldalon). */
  .brush--news-archive-top    { inset-block-start: 3%;  inset-inline-end: -3%;   inline-size: 240px; }
  .brush--news-archive-mid    { inset-block-start: 42%; inset-inline-start: -6%; inline-size: 320px; }
  .brush--news-archive-bottom { inset-block-end: 4%;    inset-inline-end: -4%;   inline-size: 280px; }

  .brush--post-sparkle { inset-block-start: 5%;  inset-inline-end: 2%;    inline-size: 200px; }
  .brush--post-wave    { inset-block-end: 6%;    inset-inline-start: -7%; inline-size: 320px; }

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

  @media (min-width: 768px) {
    .news-featured {
      gap: var(--space-8);
      padding: var(--space-8);
    }

    .post-single__body {
      padding: var(--space-10) var(--space-12);
    }
  }

  @media (min-width: 1024px) {
    .news-featured {
      grid-template-columns: 1.15fr 1fr;
      gap: var(--space-12);
    }

    .news-featured__title {
      font-size: var(--text-h2);
    }
  }

}