/* ==========================================================
ALPHASTRIKE OS
Design Engine

File        : 04_layout.css
Version     : 1.0.0
Created     : 12 August 2026
Maintainer  : ALPHASTRIKE
Description : Page-level layout primitives - container, section
              spacing, and grid utilities for composing pages out
              of components. Components keep their own internal
              layout; this is only for arranging components on a
              page.
Copyright (c) 2026 ALPHASTRIKE
    All Rights Reserved.
============================================================*/

.as-container {
    width: 100%;
    max-width: var(--alpha-container-max);
    margin-inline: auto;
    padding-inline: var(--alpha-layout-gutter);
}

/* Shared page shell. Was previously only defined in pages/index.css,
   so index.html centered correctly but the other five pages had no
   width constraint at all on this wrapper - content hugged the left
   edge with the rest of the viewport left empty. Belongs here since
   every page's <main class="alpha-os"> and its
   <section class="alpha-os__page"> wrapper need the same rule. */
.alpha-os {
    min-height: 100vh;

    background: var(--alpha-surface-page);
    color: var(--alpha-text-primary);

    font-family: var(--alpha-font-body);
}

.alpha-os__page {
    width: min(var(--alpha-container-max), calc(100% - 48px));
    margin-inline: auto;
}

@media (max-width: 600px) {
    .alpha-os__page {
        width: min(100% - 32px, var(--alpha-container-max));
    }
}

/* The hero sits before .alpha-os__page in every page except index.html
   (it's meant to allow a full-bleed background), so it needs its own
   matching centered-column treatment - otherwise its heading starts at
   the viewport's left edge while every section below it starts at the
   1200px column's left edge, two different left margins on the same
   page. Kept separate from .alpha-hero's own file since this is a
   page-composition concern, not a hero-component concern. */
.alpha-hero {
    /* width (not max-width + padding-inline) deliberately: hero.css
       (loaded after this file) sets its own "padding: Npx 0" shorthand
       for vertical spacing, which would silently zero out a
       padding-inline set here. This produces the same 48px gutter as
       .alpha-os__page without touching the padding property at all. */
    width: min(var(--alpha-container-max), calc(100% - 48px));
    margin-inline: auto;
    box-sizing: border-box;
}

.as-section {
    padding-block: var(--alpha-layout-section);
}

.as-section--tight {
    padding-block: var(--alpha-spacing-16);
}

.as-section--flush-top {
    padding-top: 0;
}

.as-section--flush-bottom {
    padding-bottom: 0;
}

.as-stack {
    display: flex;
    flex-direction: column;
    gap: var(--alpha-spacing-6);
}

.as-stack--tight {
    gap: var(--alpha-spacing-3);
}

.as-stack--loose {
    gap: var(--alpha-spacing-12);
}

.as-grid {
    display: grid;
    gap: var(--alpha-spacing-7);
}

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

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

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

.as-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--alpha-spacing-3);
}

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

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

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

    .as-section {
        padding-block: var(--alpha-spacing-16);
    }
}