/**
 * Fluid Framework - Positioning System
 * @layer layouts
 *
 * A simple, flexible system for positioning content within containers.
 * Same HTML, different layouts - just change a data attribute.
 *
 * Philosophy:
 * - Finite options, not infinite (left/center/right, start/center/end)
 * - Data attributes for easy editor/CMS integration
 * - Works on any container (sections, cards, divs)
 * - Composable - combine alignment options as needed
 *
 * Usage:
 *   <section data-align="center">Centered text</section>
 *   <section data-layout="center">Centered content block</section>
 *   <section data-layout="split">Two columns</section>
 */

@layer layouts {

  /* ========================================
     TEXT ALIGNMENT
     Controls text-align within the element
     ======================================== */

  [data-align="start"] {
    text-align: start;
  }

  [data-align="center"] {
    text-align: center;
  }

  [data-align="end"] {
    text-align: end;
  }


  /* ========================================
     CONTENT POSITIONING
     For block-level content positioning
     Uses flexbox for vertical centering
     ======================================== */

  /* Horizontal content position within flex/grid containers */
  [data-items="start"] {
    align-items: flex-start;
  }

  [data-items="center"] {
    align-items: center;
  }

  [data-items="end"] {
    align-items: flex-end;
  }

  /* Justify content (main axis) */
  [data-justify="start"] {
    justify-content: flex-start;
  }

  [data-justify="center"] {
    justify-content: center;
  }

  [data-justify="end"] {
    justify-content: flex-end;
  }

  [data-justify="between"] {
    justify-content: space-between;
  }


  /* ========================================
     PLACE - Combined alignment (Grid shorthand)
     For simple center-center type layouts
     ======================================== */

  [data-place="center"] {
    display: grid;
    place-items: center;
  }

  [data-place="start"] {
    display: grid;
    place-items: start;
  }

  [data-place="end"] {
    display: grid;
    place-items: end;
  }


  /* ========================================
     SECTION LAYOUTS
     Common content arrangement patterns
     These turn any element into a layout container
     ======================================== */

  /*
   * LAYOUT: center
   * Content block centered horizontally
   * Good for: hero headlines, centered sections
   */
  [data-layout="center"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* min(100%, …): these layouts shrink-wrap their children, and an auto-fill
     grid (.grid, .gallery) sizes itself from its max width, not the screen,
     so without the 100% cap it ran ~1000px wide on a phone. */
  [data-layout="center"] > * {
    max-inline-size: min(100%, var(--content-width, var(--container-md)));
  }

  /*
   * LAYOUT: left
   * Content aligned to start (left in LTR)
   * Good for: standard content, articles
   */
  [data-layout="left"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
  }

  [data-layout="left"] > * {
    max-inline-size: min(100%, var(--content-width, var(--container-md)));
  }

  /*
   * LAYOUT: right
   * Content aligned to end (right in LTR)
   * Good for: alternate sections, variation
   */
  [data-layout="right"] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: start; /* Text still reads left-to-right */
  }

  [data-layout="right"] > * {
    max-inline-size: min(100%, var(--content-width, var(--container-md)));
  }

  /*
   * LAYOUT: split
   * Two-column layout: content | media (or any two children)
   * Good for: hero with image, feature sections
   */
  [data-layout="split"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--split-gap, var(--space-8));
    align-items: center;
  }

  /*
   * LAYOUT: split-reverse
   * Two-column layout: media | content (reversed)
   * Good for: alternating sections
   */
  [data-layout="split-reverse"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--split-gap, var(--space-8));
    align-items: center;
  }

  [data-layout="split-reverse"] > :first-child {
    order: 2;
  }

  [data-layout="split-reverse"] > :last-child {
    order: 1;
  }

  /*
   * LAYOUT: stack
   * Vertical stack with controlled gap
   * Good for: any vertical content flow
   */
  [data-layout="stack"] {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-5));
  }

  /*
   * LAYOUT: overlay
   * Content positioned over background (for heroes with bg images)
   * Requires a background to be set separately
   */
  [data-layout="overlay"] {
    display: grid;
    place-items: center;
    text-align: center;
    position: relative;
    isolation: isolate;
  }

  [data-layout="overlay"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-color, oklch(0% 0 0 / 0.4));
    z-index: -1;
  }


  /* ========================================
     RESPONSIVE LAYOUTS
     Split layouts stack on narrow containers
     ======================================== */

  @container (max-width: 40rem) {
    [data-layout="split"],
    [data-layout="split-reverse"] {
      grid-template-columns: 1fr;
    }

    [data-layout="split-reverse"] > :first-child {
      order: 1;
    }

    [data-layout="split-reverse"] > :last-child {
      order: 2;
    }
  }

  /* Media query fallback for when container-type is not set on ancestor */
  @media (max-width: 40rem) {
    [data-layout="split"],
    [data-layout="split-reverse"] {
      grid-template-columns: 1fr;
    }

    [data-layout="split-reverse"] > :first-child {
      order: 1;
    }

    [data-layout="split-reverse"] > :last-child {
      order: 2;
    }
  }


  /* ========================================
     CONTENT WIDTH CONTROL
     Constrain content width within layouts
     ======================================== */

  [data-width="narrow"] {
    --content-width: var(--container-sm);
  }

  [data-width="default"] {
    --content-width: var(--container-md);
  }

  [data-width="wide"] {
    --content-width: var(--container-lg);
  }

  [data-width="full"] {
    --content-width: 100%;
  }


  /* ========================================
     VERTICAL ALIGNMENT (within containers)
     For positioning content vertically
     ======================================== */

  [data-valign="start"] {
    align-content: start;
    align-items: flex-start;
  }

  [data-valign="center"] {
    align-content: center;
    align-items: center;
  }

  [data-valign="end"] {
    align-content: end;
    align-items: flex-end;
  }


  /* ========================================
     GAP CONTROL
     Override default gaps
     ======================================== */

  [data-gap="none"] {
    gap: 0;
  }

  [data-gap="sm"] {
    gap: var(--space-3);
  }

  [data-gap="md"] {
    gap: var(--space-5);
  }

  [data-gap="lg"] {
    gap: var(--space-8);
  }

  [data-gap="xl"] {
    gap: var(--space-12);
  }


  /* ========================================
     PADDING CONTROL
     Section padding variations
     ======================================== */

  [data-padding="none"] {
    padding-block: 0;
  }

  [data-padding="sm"] {
    padding-block: var(--space-8);
  }

  [data-padding="md"] {
    padding-block: var(--space-12);
  }

  [data-padding="lg"] {
    padding-block: var(--space-16);
  }

  [data-padding="xl"] {
    padding-block: var(--space-24);
  }

  /* Reduce vertical padding on mobile — large values waste screen space */
  @media (max-width: 40rem) {
    [data-padding="lg"] {
      padding-block: var(--space-10);
    }

    [data-padding="xl"] {
      padding-block: var(--space-12);
    }
  }


  /* ========================================
     INLINE PADDING CONTROL
     Horizontal padding for content spacing from edges
     ======================================== */

  [data-padding-inline="none"] {
    padding-inline: 0;
  }

  [data-padding-inline="sm"] {
    padding-inline: var(--space-4);
  }

  [data-padding-inline="md"] {
    padding-inline: var(--space-6);
  }

  [data-padding-inline="lg"] {
    padding-inline: var(--space-8);
  }

  [data-padding-inline="xl"] {
    padding-inline: var(--space-12);
  }


  /* ========================================
     FLEX UTILITIES
     Composable flex layout controls
     ======================================== */

  /* Flex direction */
  [data-flex] {
    display: flex;
  }

  [data-flex="row"] {
    display: flex;
    flex-direction: row;
  }

  [data-flex="col"] {
    display: flex;
    flex-direction: column;
  }

  [data-flex="row-reverse"] {
    display: flex;
    flex-direction: row-reverse;
  }

  [data-flex="col-reverse"] {
    display: flex;
    flex-direction: column-reverse;
  }

  /* Flex wrap */
  [data-wrap] {
    flex-wrap: wrap;
  }

  [data-wrap="nowrap"] {
    flex-wrap: nowrap;
  }

  /* Flex child: grow/shrink */
  [data-grow] {
    flex-grow: 1;
  }

  [data-shrink="0"] {
    flex-shrink: 0;
  }

  /* Flex basis shortcuts */
  [data-basis="full"] { flex-basis: 100%; }
  [data-basis="half"] { flex-basis: 50%; }
  [data-basis="third"] { flex-basis: 33.333%; }
  [data-basis="quarter"] { flex-basis: 25%; }


  /* ========================================
     GRID UTILITIES
     Composable grid layout controls
     ======================================== */

  /* Explicit column grids */
  [data-grid] {
    display: grid;
  }

  [data-grid="2"] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap, var(--space-5));
  }

  [data-grid="3"] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap, var(--space-5));
  }

  [data-grid="4"] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap, var(--space-5));
  }

  /* Auto-fit responsive grids */
  [data-grid="auto-sm"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--grid-gap, var(--space-5));
  }

  [data-grid="auto"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--grid-gap, var(--space-5));
  }

  [data-grid="auto-lg"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--grid-gap, var(--space-5));
  }

  /* Grid span */
  [data-span="2"] { grid-column: span 2; }
  [data-span="3"] { grid-column: span 3; }
  [data-span="full"] { grid-column: 1 / -1; }

  /* Responsive: multi-column grids collapse on mobile */
  @media (max-width: 40rem) {
    [data-grid="2"],
    [data-grid="3"],
    [data-grid="4"] {
      grid-template-columns: 1fr;
    }

    [data-span="2"],
    [data-span="3"],
    [data-span="full"] {
      grid-column: auto;
    }
  }

  @media (min-width: 40rem) and (max-width: 64rem) {
    [data-grid="3"],
    [data-grid="4"] {
      grid-template-columns: repeat(2, 1fr);
    }
  }


  /* ========================================
     COMMON LAYOUT PATTERNS
     Pre-built structural layouts
     ======================================== */

  /*
   * LAYOUT: sidebar
   * Content with a fixed-width sidebar
   * Sidebar is first child, content is second
   */
  [data-layout="sidebar"] {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) 1fr;
    gap: var(--space-6);
    align-items: start;
  }

  [data-layout="sidebar-right"] {
    display: grid;
    grid-template-columns: 1fr minmax(12rem, 16rem);
    gap: var(--space-6);
    align-items: start;
  }

  /* Responsive: sidebar stacks on narrow screens */
  @media (max-width: 48rem) {
    [data-layout="sidebar"],
    [data-layout="sidebar-right"] {
      grid-template-columns: 1fr;
    }
  }

  /*
   * LAYOUT: holy-grail
   * Classic 3-column layout: sidebar | content | sidebar
   */
  [data-layout="holy-grail"] {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) 1fr minmax(10rem, 14rem);
    gap: var(--space-6);
    align-items: start;
  }

  @media (max-width: 64rem) {
    [data-layout="holy-grail"] {
      grid-template-columns: 1fr;
    }
  }

  /*
   * LAYOUT: dashboard
   * Dense auto-fill grid for dashboard cards/widgets
   */
  [data-layout="dashboard"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-5);
    align-items: start;
  }


  /* ========================================
     POSITION UTILITIES
     Static positioning helpers
     ======================================== */

  [data-position="sticky"] {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
  }

  [data-position="relative"] {
    position: relative;
  }

  /* Overflow control */
  [data-overflow="hidden"] { overflow: hidden; }
  [data-overflow="auto"] { overflow: auto; }
  [data-overflow="scroll"] { overflow: scroll; }

  /* Z-index layers */
  [data-z="base"] { z-index: var(--z-base); }
  [data-z="raised"] { z-index: var(--z-raised); }
  [data-z="dropdown"] { z-index: var(--z-dropdown); }
  [data-z="overlay"] { z-index: var(--z-overlay); }


  /* ========================================
     DISPLAY UTILITIES
     ======================================== */

  [data-display="none"] { display: none; }
  [data-display="block"] { display: block; }
  [data-display="inline"] { display: inline; }
  [data-display="inline-flex"] { display: inline-flex; }
  [data-display="inline-block"] { display: inline-block; }

  /* Responsive visibility */
  @media (max-width: 40rem) {
    [data-hide="mobile"] { display: none; }
  }

  @media (min-width: 40rem) and (max-width: 64rem) {
    [data-hide="tablet"] { display: none; }
  }

  @media (min-width: 64rem) {
    [data-hide="desktop"] { display: none; }
  }
}