/* ============================================================
   GAMOS-SITE — layout.css
   Containers, sections, grid + flex primitives.
   RTL-aware (logical properties only).
   ============================================================ */

@layer base, layout, utilities, sections;

@layer layout {

  /* ----- Container ----- */

  .container {
    inline-size: 100%;
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container--narrow {
    max-inline-size: var(--container-narrow);
  }

  .container--wide {
    max-inline-size: var(--container-wide);
  }

  .container--flush {
    padding-inline: 0;
  }

  /* ----- Section ----- */

  .section {
    padding-block: var(--section-pad);   /* shared section rhythm token */
    position: relative;
  }

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

  .section--loose {
    padding-block: calc(var(--section-pad) + var(--space-16));
  }

  .section--flush {
    padding-block: 0;
  }

  .section--dark {
    background: var(--bg-dark);
    color: var(--fg-on-dark);
  }

  .section--alt {
    background: var(--bg-alt);
  }

  /* ----- Stack (vertical rhythm) ----- */

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

  .stack--sm > * + * { margin-block-start: var(--space-2); }
  .stack--md > * + * { margin-block-start: var(--space-6); }
  .stack--lg > * + * { margin-block-start: var(--space-8); }
  .stack--xl > * + * { margin-block-start: var(--space-12); }

  /* ----- Grid ----- */

  .grid {
    display: grid;
    gap: var(--space-6);
  }

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

  .grid--auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  }

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

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

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

  /* Responsive collapses (mobile-first) */
  @media (max-width: 900px) {
    .grid--3,
    .grid--4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 600px) {
    .grid--2,
    .grid--3,
    .grid--4 {
      grid-template-columns: 1fr;
    }
  }

  /* Span helpers */
  .col-span-2 { grid-column: span 2; }
  .col-span-3 { grid-column: span 3; }
  .col-span-full { grid-column: 1 / -1; }

  /* ----- Flex ----- */

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

  .flex--inline {
    display: inline-flex;
  }

  .flex--column {
    flex-direction: column;
  }

  .flex--wrap {
    flex-wrap: wrap;
  }

  .flex--center {
    align-items: center;
    justify-content: center;
  }

  .flex--center-y {
    align-items: center;
  }

  .flex--center-x {
    justify-content: center;
  }

  .flex--between {
    align-items: center;
    justify-content: space-between;
  }

  .flex--around {
    align-items: center;
    justify-content: space-around;
  }

  .flex--start {
    justify-content: flex-start;
  }

  .flex--end {
    justify-content: flex-end;
  }

  .flex--baseline {
    align-items: baseline;
  }

  .flex--stretch {
    align-items: stretch;
  }

  .flex--1 { flex: 1 1 0%; }
  .flex--auto { flex: 1 1 auto; }
  .flex--none { flex: none; }

  /* ----- Gap utilities (logical, work for grid + flex) ----- */

  .gap-0  { gap: 0; }
  .gap-1  { gap: var(--space-1); }
  .gap-2  { gap: var(--space-2); }
  .gap-3  { gap: var(--space-3); }
  .gap-4  { gap: var(--space-4); }
  .gap-6  { gap: var(--space-6); }
  .gap-8  { gap: var(--space-8); }
  .gap-12 { gap: var(--space-12); }
  .gap-16 { gap: var(--space-16); }

  .gap-x-2 { column-gap: var(--space-2); }
  .gap-x-4 { column-gap: var(--space-4); }
  .gap-x-6 { column-gap: var(--space-6); }
  .gap-x-8 { column-gap: var(--space-8); }

  .gap-y-2 { row-gap: var(--space-2); }
  .gap-y-4 { row-gap: var(--space-4); }
  .gap-y-6 { row-gap: var(--space-6); }
  .gap-y-8 { row-gap: var(--space-8); }

  /* ----- Aspect ratio holders (CLS prevention) ----- */

  .aspect-square  { aspect-ratio: 1 / 1; }
  .aspect-video   { aspect-ratio: 16 / 9; }
  .aspect-portrait { aspect-ratio: 3 / 4; }
  .aspect-cinema  { aspect-ratio: 21 / 9; }

  /* ----- Cluster (wraps inline items with gap) ----- */

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

  /* ----- Center (horizontal centering helper) ----- */

  .center {
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: var(--container-narrow);
  }

  /* ----- Cover (full-bleed media) ----- */

  .cover {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
  }

  .cover > img,
  .cover > video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* ----- Section rails (Agent 20 — weblove-motion side-aligned text) -----
     Pushes text content into the outer 40% of the viewport while leaving
     the opposing 55% empty. Creates the off-center rhythm that defines the
     weblove-motion aesthetic. Mobile collapses to a centered single-column.
     RTL-aware via logical properties (`-start` = right in RTL). */

  .section-rail--start {
    padding-inline-start: 5vw;
    padding-inline-end: 55vw;
  }

  .section-rail--end {
    padding-inline-start: 55vw;
    padding-inline-end: 5vw;
  }

  .section-rail--start > *,
  .section-rail--end > * {
    max-inline-size: 40vw;
  }

  /* ----- Contact override (un-crush the page's last section) -----
     #contact previously inherited .section-rail--end's lopsided
     padding-inline-start:55vw + max-inline-size:40vw, shoving the form
     into a narrow off-center column ("weird angle" look). The contact
     section is a centered, full-width container like every other static
     section. .section-rail--end stays intact for #about. */
  .contact .section-rail--end {
    padding-inline-start: var(--gutter);
    padding-inline-end: var(--gutter);
    inline-size: 100%;
    max-inline-size: var(--container-max);
    margin-inline: auto;
  }

  .contact .section-rail--end > * {
    max-inline-size: 100%;
  }

  @media (max-width: 767px) {
    .section-rail--start,
    .section-rail--end {
      padding-inline-start: 5vw;
      padding-inline-end: 5vw;
    }

    .section-rail--start > *,
    .section-rail--end > * {
      max-inline-size: 100%;
    }
  }

}