/* ============================================================
   CITANT.AI — layout.css v1.1
   Container, section wrapper, .citant-block, grid utilities.
   Depends on: reset.css, tokens.css, base.css
   Load order: reset → tokens → base → THIS FILE → components
   Source: file 10 Component 1 + file 01 §5
   ============================================================ */

/*
 * BREAKPOINTS (reference — media queries use min-width mobile-first):
 *   640px  — large phones and small tablets
 *   900px  — tablets and small laptops
 *  1100px  — standard desktops
 */

/* ============================================================
   SECTION WRAPPER
   Outer wrapper for every designed section on every page.
   Full-width background. Inner .container controls max-width.
   ============================================================ */

.citant-section {
  display:    block;
  width:      100%;
  padding:    var(--section-py) 0;
  background: var(--color-bg);
  box-sizing: border-box;
}

/* Modifier: dark background (#0D1226) */
.citant-section--dark  { background: var(--color-bg-dark); }

/* Modifier: light gray background (#F2F4FA) */
.citant-section--muted { background: var(--color-bg-muted); }

/* Modifier: brand-tinted background (#F5F6FF) */
.citant-section--alt   { background: var(--color-bg-alt); }

/* Modifier: reduced vertical padding (64px vs 96px) */
.citant-section--compact { padding: var(--section-py-sm) 0; }

/* Mobile: reduce section padding */
@media (max-width: 640px) {
  .citant-section         { padding: 56px 0; }
  .citant-section--compact{ padding: 40px 0; }
}

/* ============================================================
   CONTAINER
   Max-width centering wrapper inside .citant-section.
   Three widths available via modifier.
   ============================================================ */

.container {
  max-width:      var(--container-max);  /* 1200px default */
  margin-inline:  auto;
  padding-inline: var(--space-8);        /* 32px each side desktop */
}

/* Narrower containers for text-heavy or form content */
.container--md { max-width: var(--container-md); }  /* 860px — blog, about */
.container--sm { max-width: var(--container-sm); }  /* 640px — forms, narrow CTAs */

@media (max-width: 900px) {
  .container { padding-inline: var(--space-6); }     /* 24px each side tablet */
}

@media (max-width: 640px) {
  .container { padding-inline: var(--space-5); }     /* 20px each side mobile */
}

/* ============================================================
   .CITANT-BLOCK WRAPPER
   Required on every Custom HTML block pasted into Gutenberg.
   Provides one level of specificity advantage over Gutenberg's
   block-library CSS, solving conflicts without !important.
   Source: file 01 §8.1
   ============================================================ */

.citant-block {
  display:    block;
  width:      100%;
  box-sizing: border-box;
}

/* Dark background modifier — used with .citant-section--dark */
.citant-block--dark  {}

/* Muted background modifier — used with .citant-section--muted */
.citant-block--muted {}

/* ============================================================
   GRID UTILITIES
   Generic column grids used across multiple page sections.
   ============================================================ */

/* Auto-fit grid: columns shrink below 280px before wrapping */
.grid-auto {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:                   var(--space-8);
}

/* Explicit 2-column grid */
.grid-2 {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--space-8);
}

/* Explicit 3-column grid */
.grid-3 {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-8);
}

/* Explicit 4-column grid */
.grid-4 {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-6);
}

/* Responsive collapse: 2-col → 1-col at 640px */
@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Responsive collapse: 3-col → 2-col at 900px, 1-col at 640px */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   FLEX UTILITIES
   ============================================================ */

.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;
  gap:         var(--space-4);
}