/* =========================================================
   PHUE LAYOUT
   ---------------------------------------------------------
   RULES FOR EXPANSION:
   1. Purpose: Macro layout, positioning, and white space management.
   2. Scope: Containers, Grids, Stacks, Sections.
   3. Constraints: Avoid cosmetic styles (shadows, specific borders) 
      unless defining a high-level theme surface (e.g. -surface).
   4. Spacing: Use logical properties (padding-block, margin-inline).
   5. Responsiveness: Mobile-first. Use @media for tablet/desktop overrides.
   ========================================================= */

/* =========================
   Layout primitives
========================= */

/* Top-level application wrapper */
.phue-frame {
    /* Use % inherited from body to avoid viewport unit scrollbars */
    min-height: 100%;
    
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family);
    /* Enable sticky footer structure */
    display: flex;
    flex-direction: column;
    
}

/* Base reset for all children */
/* REMOVED: Moved to global reset in phue-base.css for better consistency */

/* -------------------------
   Sections
   High-level page blocks
-------------------------- */
.phue-section {
    display: block;
}

/* Default section spacing and theme */
.phue-section-default {
    background-color: var(--color-bg);
    padding-block: 6rem;
}

/* Alternate surface color section */
.phue-section-surface {
    background-color: var(--color-surface);
    padding-block: 6rem;
}

/* Full viewport height section (e.g. Hero) */
.phue-section-height-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 8vh, 6rem);
}

/* Resets height if needed */
.phue-section-height-auto {
    min-height: auto;
}

/* One-page anchors + sticky header */
.phue-section[id] {
  scroll-margin-top: 6rem;
}

/* -------------------------
   Container
   Constrains width and centers content
-------------------------- */
.phue-container {
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* -------------------------
   Stack
   Vertical flow layout
-------------------------- */
.phue-stack {
    display: flex;
    flex-direction: column;
}

/* modifiers */
.phue-stack-full {
    height: 100%;
}
/* spacing variants */
.phue-stack-sm { gap: 0.5rem; }
.phue-stack-md { gap: 1rem; }   /* default */
.phue-stack-lg { gap: 1.5rem; }
.phue-stack-xl { gap: 2rem; }


/* -------------------------
   Clusters
   Horizontal wrapping layout
-------------------------- */

.phue-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* spacing + alignment variants */
.phue-cluster-sm {
  gap: 0.5rem;
  justify-content: flex-start;
}

.phue-cluster-md {
  gap: 1rem;
  justify-content: center; /* default */
}

.phue-cluster-lg {
  gap: 1.5rem;
  justify-content: space-between;
}

/* =========================
   Grid
   Responsive grid system
-------------------------- */

.phue-grid {
  display: grid;
  grid-template-columns: 1fr;
}
/* 2-column grid starting at tablet */
@media (min-width: 640px) {
  .phue-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3-column grid (2 at tablet, 3 at desktop) */
@media (min-width: 640px) {
  .phue-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .phue-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 4-column grid (2 at tablet, 4 at desktop) */
@media (min-width: 640px) {
  .phue-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .phue-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Grid gap utilities */
.phue-grid-gap-sm { gap: 0.5rem; }
.phue-grid-gap-md { gap: 1rem; }   /* default */
.phue-grid-gap-lg { gap: 1.5rem; }
.phue-grid-gap-xl { gap: 2rem; }