/* ==========================================================================
   06-layout.css — Layout primitívek (Every Layout alapján)

   Újrahasznosítható layout komponensek. Minden primitív "self-governing" —
   nincs szüksége tudásra a kontextusáról.

   Minden primitív paraméterezhető komponens-szintű CSS változókkal
   (--section-padding, --stack-space, --cluster-gap, stb.). A default értékek
   közvetlenül primitív tokeneken (--space-*) keresztül érkeznek.
   ========================================================================== */

@layer layout {

  /* ========================================================================
     CONTAINER — vízszintes középre, max szélességgel

     Használat:
     <div class="container">                    → default (1200px)
     <div class="container container--narrow">  → 720px
     <div class="container container--prose">   → 65ch

     Felülírás inline-ban:
     <div class="container" style="--container: 900px;">
     ======================================================================== */

  /* EGY SORBAN kell maradnia: az élő oldal LiteSpeed CSS-minifikálója a
     sortörés előtti vesszőt „)"-re cserélte, a width érvénytelen lett, és
     minden szekció margó nélkül a képernyő széléig futott (2026-10-06). */
  .container {
    width: min(100% - var(--container-gutter, var(--space-4)) * 2, var(--container, var(--container-default)));
    margin-inline: auto;
  }

  .container--narrow { --container: var(--container-narrow); }
  .container--prose  { --container: var(--container-prose); }
  .container--wide   { --container: var(--container-wide); }
  .container--full   { --container: var(--container-full); }

  /* ========================================================================
     SECTION — szekció wrapper, padding-block alapból

     A --section-padding komponens-szintű override-olható:
     <section class="section" style="--section-padding: var(--space-12);">
     ======================================================================== */

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

  .section--compact  { --section-padding: var(--space-12); }
  .section--spacious { --section-padding: var(--space-24); }
  .section--mega     { --section-padding: var(--space-32); }

  /* ========================================================================
     STACK — függőleges ritmus

     Minden közvetlen gyerek elem közé térközt tesz.

     Használat:
     <div class="stack">          → default gap (--space-4)
     <div class="stack" style="--stack-space: var(--space-6);">
     ======================================================================== */

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

  .stack--tight    { --stack-space: var(--space-3); }
  .stack--loose    { --stack-space: var(--space-6); }
  .stack--spacious { --stack-space: var(--space-8); }

  /* ========================================================================
     CLUSTER — vízszintes flex wrap-pel (button group, nav, tag lista)
     ======================================================================== */

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--space-4));
    align-items: var(--cluster-align, center);
    justify-content: var(--cluster-justify, flex-start);
  }

  .cluster--tight   { --cluster-gap: var(--space-3); }
  .cluster--loose   { --cluster-gap: var(--space-6); }
  .cluster--center  { --cluster-justify: center; }
  .cluster--end     { --cluster-justify: flex-end; }
  .cluster--between { --cluster-justify: space-between; }

  /* ========================================================================
     GRID — egyszerű, paraméterezhető grid

     Használat:
     <div class="grid">             → 1 oszlop (override-olható)
     <div class="grid grid--3">     → 3 oszlop md+, 1 oszlop mobilon
     <div class="grid grid--2">     → 2 oszlop md+
     <div class="grid grid--4">     → 4 oszlop md+
     ======================================================================== */

  .grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 1), 1fr);
    gap: var(--grid-gap, var(--space-4));
  }

  @media (min-width: 768px) {
    .grid--2 { --grid-cols: 2; }
    .grid--3 { --grid-cols: 3; }
    .grid--4 { --grid-cols: 4; }
    .grid--5 { --grid-cols: 5; }
    .grid--6 { --grid-cols: 6; }
  }

  .grid--loose { --grid-gap: var(--space-6); }
  .grid--tight { --grid-gap: var(--space-3); }

  /* ========================================================================
     GRID-AUTO — automatikusan responsive grid, NINCS media query

     A grid automatikusan annyi oszlopot rak, ahány elfér.
     A min szélesség alatt egyetlen oszlopra esik.

     Használat:
     <div class="grid-auto">                            → 280px min
     <div class="grid-auto" style="--grid-min: 320px;"> → 320px min
     ======================================================================== */

  .grid-auto {
    display: grid;
    grid-template-columns:
      repeat(auto-fit, minmax(min(var(--grid-min, 280px), 100%), 1fr));
    gap: var(--grid-gap, var(--space-4));
  }

  /* ========================================================================
     SIDEBAR — sidebar + main content, mobilbarát

     Az első gyerek a sidebar (fix szélesség próbálva),
     a második a main content (kitölti a maradékot).
     Szűk helyen automatikusan egymás alá tördelődnek.
     ======================================================================== */

  .sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sidebar-gap, var(--space-4));
  }

  .sidebar > :first-child {
    flex-basis: var(--sidebar-width, 250px);
    flex-grow: 1;
  }

  .sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--sidebar-content-min, 50%);
  }

  /* ========================================================================
     SWITCHER — automatikusan stack-elődik szűk helyen

     Adott küszöb felett vízszintesen (egyenlő szélességgel),
     küszöb alatt függőlegesen.
     ======================================================================== */

  .switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--switcher-gap, var(--space-4));
  }

  .switcher > * {
    flex-grow: 1;
    flex-basis: calc((var(--switcher-threshold, 500px) - 100%) * 999);
  }

  /* ========================================================================
     CENTER — vízszintes + függőleges középre (grid place-items)
     ======================================================================== */

  .center {
    display: grid;
    place-items: center;
    min-height: var(--center-min-height, auto);
  }

  /* ========================================================================
     COVER — full viewport magasság, központosított tartalom

     Hero szekcióhoz ideális.
     ======================================================================== */

  .cover {
    display: flex;
    flex-direction: column;
    min-height: var(--cover-min-height, 100vh);
    min-height: var(--cover-min-height, 100dvh);
    padding-block: var(--cover-padding, var(--space-8));
  }

  .cover > * {
    margin-block: auto;
  }

  /* ========================================================================
     FRAME — fix arányú elem (kép, videó, embed)
     ======================================================================== */

  .frame {
    aspect-ratio: var(--frame-ratio, 16 / 9);
    overflow: hidden;
    border-radius: var(--frame-radius, var(--radius-md));
  }

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

  .frame--square    { --frame-ratio: 1 / 1; }
  .frame--portrait  { --frame-ratio: 4 / 5; }
  .frame--landscape { --frame-ratio: 16 / 9; }
  .frame--wide      { --frame-ratio: 21 / 9; }

}