/*
 * layout.css
 * Layout Utilities — Bnood Industrial V1
 *
 * Source of truth: docs/02_UX_UI/DESIGN_SYSTEM.md, docs/02_UX_UI/UI_TOKENS.md
 * Task: B02-T02 — Create Base CSS And Layout CSS
 * Batch: B02 — UI Foundation & Shared Layouts
 *
 * Rules:
 * - All values must reference tokens from tokens.css.
 * - No Tailwind, Bootstrap, Sass, or CSS framework.
 * - No page-specific styles here — layout primitives only.
 * - No fake content.
 */

/* =========================
   Container
========================= */

.container {
  width: min(100% - 32px, 1180px);
  margin-inline: auto;
}

.container-narrow {
  width: min(100% - 32px, 920px);
  margin-inline: auto;
}

.container-form {
  width: min(100% - 32px, 900px);
  margin-inline: auto;
}

/* Maintain backwards compatibility if referenced */
.container--narrow {
  width: min(100% - 32px, 920px);
  margin-inline: auto;
}

.container--wide {
  width: min(100% - 32px, 1280px);
  margin-inline: auto;
}

@media (max-width: 1023px) {
  .container,
  .container-narrow,
  .container-form,
  .container--narrow,
  .container--wide {
    width: min(100% - 32px, 1180px);
  }
}

@media (max-width: 767px) {
  .container,
  .container-narrow,
  .container-form,
  .container--narrow,
  .container--wide {
    width: min(100% - 32px, 1180px);
  }
}

@media (max-width: 380px) {
  .container,
  .container-narrow,
  .container-form,
  .container--narrow,
  .container--wide {
    width: min(100% - 32px, 1180px);
  }
}

/* =========================
   Section Wrappers
========================= */

.section {
  padding-block: 88px;
}

.section--compact {
  padding-block: 56px;
}

.hero-section {
  padding-block: 88px;
}

@media (max-width: 1023px) {
  .section {
    padding-block: 56px;
  }

  .hero-section {
    padding-block: 56px;
  }
}

@media (max-width: 767px) {
  .section {
    padding-block: 56px;
  }

  .section--compact {
    padding-block: 40px;
  }

  .hero-section {
    padding-block: 56px;
  }
}

/* =========================
   Section Header (title + body)
========================= */

.section-header {
  margin-bottom: var(--space-48);
}

.section-header--center {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-48);
}

@media (max-width: 767px) {
  .section-header {
    margin-bottom: var(--space-32);
  }

  .section-header--center {
    margin-bottom: var(--space-32);
  }
}

/* =========================
   12-Column Grid System
========================= */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-24);
  row-gap: var(--space-24);
}

.grid-8 {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: var(--space-20);
  row-gap: var(--space-20);
}

@media (max-width: 1023px) {
  .grid-12 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--space-20);
    row-gap: var(--space-20);
  }
}

@media (max-width: 767px) {
  .grid-12,
  .grid-8 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-16);
    row-gap: var(--space-16);
  }
}

/* =========================
   Flex Helpers
========================= */

.flex {
  display: flex;
}

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

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

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

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

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

.items-center { align-items: center;     }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end;   }

.justify-center  { justify-content: center;        }
.justify-between { justify-content: space-between; }
.justify-start   { justify-content: flex-start;    }
.justify-end     { justify-content: flex-end;      }

/* =========================
   Gap Utilities
========================= */

.gap-8  { gap: var(--space-8);  }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }
.gap-20 { gap: var(--space-20); }
.gap-24 { gap: var(--space-24); }
.gap-32 { gap: var(--space-32); }
.gap-40 { gap: var(--space-40); }
.gap-48 { gap: var(--space-48); }

/* =========================
   Display Utilities
========================= */

.block          { display: block;        }
.inline-block   { display: inline-block; }
.inline         { display: inline;       }
.hidden         { display: none;         }

@media (max-width: 767px) {
  .hidden-mobile { display: none; }
}

@media (min-width: 768px) {
  .hidden-desktop { display: none; }
}

/* =========================
   Width / Height
========================= */

.w-full { width: 100%;  }
.h-full { height: 100%; }

/* =========================
   Text Alignment
========================= */

.text-start  { text-align: start;  }
.text-end    { text-align: end;    }
.text-center { text-align: center; }

/* =========================
   Stack (vertical flex)
========================= */

.stack-8  { display: flex; flex-direction: column; gap: var(--space-8);  }
.stack-12 { display: flex; flex-direction: column; gap: var(--space-12); }
.stack-16 { display: flex; flex-direction: column; gap: var(--space-16); }
.stack-24 { display: flex; flex-direction: column; gap: var(--space-24); }
.stack-32 { display: flex; flex-direction: column; gap: var(--space-32); }
.stack-40 { display: flex; flex-direction: column; gap: var(--space-40); }

/* =========================
   Visually Hidden (accessibility)
========================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* =========================
   Overflow
========================= */

.overflow-hidden { overflow: hidden;   }
.overflow-auto   { overflow: auto;     }
.overflow-x-auto { overflow-x: auto;  }