/* ============================================================
   LAYOUT.CSS — Containers · Grids · Sections · Responsive
   Arioun AI v2
   ============================================================ */

/* ── Containers ───────────────────────────────────────────── */
.container      { max-width: 1200px; margin: 0 auto; }
.container-wide { max-width: 1400px; margin: 0 auto; }
.container-text { max-width: 680px; }

/* ── Section ──────────────────────────────────────────────── */
.section      { padding: var(--sp-11) 5%; }
.section-sm   { padding: var(--sp-9)  5%; }
.bg-alt       { background: var(--bg-2); }

/* ── Standard grids ───────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
}

/* ── Bento Grid (Services) ────────────────────────────────── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: auto;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
}
.bento-span-3  { grid-column: span 3; }
.bento-span-2  { grid-column: span 2; }
.bento-span-6  { grid-column: span 6; }
.bento-span-4  { grid-column: span 4; }

/* ── Feature row (alternating) ───────────────────────────── */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
  padding: var(--sp-8) 0;
  border-bottom: var(--border-subtle);
}
.feature-row:last-child { border-bottom: none; }
.feature-row.reverse .feature-visual { order: -1; }

/* ── Timeline (process) ───────────────────────────────────── */
.timeline {
  position: relative;
  padding-left: 3rem;
  margin-top: var(--sp-7);
}
.timeline::before {
  content: '';
  position: absolute;
  left: 0.6rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--accent-border) 10%,
    var(--accent-border) 90%,
    transparent
  );
}
.timeline-item {
  position: relative;
  padding-bottom: var(--sp-7);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: -2.4rem;
  top: 0.25rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--bg-3);
  border: 2px solid var(--accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.timeline-dot::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-vivid);
}
.timeline-item.active .timeline-dot {
  border-color: var(--accent);
  background: var(--accent-subtle);
  box-shadow: 0 0 16px var(--accent-glow);
}

/* ── Stats row ────────────────────────────────────────────── */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--accent-border);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-top: var(--sp-7);
}
.stats-strip > * {
  background: var(--bg-2);
}

/* ── 2-col split (process / about) ───────────────────────── */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}

/* ── Contact grid ─────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--sp-7);
  align-items: start;
  margin-top: var(--sp-7);
}

/* ── Flex helpers ─────────────────────────────────────────── */
.flex           { display: flex; }
.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-col       { display: flex; flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.gap-1          { gap: var(--sp-1); }
.gap-2          { gap: var(--sp-2); }
.gap-3          { gap: var(--sp-3); }
.gap-4          { gap: var(--sp-4); }
.gap-5          { gap: var(--sp-5); }

/* ── Spacing utils ────────────────────────────────────────── */
.mt-4  { margin-top: var(--sp-4); }
.mt-5  { margin-top: var(--sp-5); }
.mt-6  { margin-top: var(--sp-6); }
.mt-7  { margin-top: var(--sp-7); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-5  { margin-bottom: var(--sp-5); }
.mb-6  { margin-bottom: var(--sp-6); }

/* ── Full height ──────────────────────────────────────────── */
.full-h { min-height: 100dvh; }

/* ── Page intro ───────────────────────────────────────────── */
.page-intro {
  padding-top: 160px;
  padding-bottom: 80px;
  padding-left: 5%;
  padding-right: 5%;
  position: relative;
  overflow: hidden;
}
.page-intro-content { position: relative; z-index: 2; max-width: 760px; }

/* ── ============================================================
      RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
  .bento-span-3 { grid-column: span 3; }
}

@media (max-width: 960px) {
  .section    { padding: var(--sp-9) 5%; }
  .section-sm { padding: var(--sp-7) 5%; }

  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento-span-3,
  .bento-span-2,
  .bento-span-4 { grid-column: span 2; }
  .bento-span-6 { grid-column: span 2; }

  .grid-3,
  .grid-4       { grid-template-columns: repeat(2, 1fr); }
  .grid-2,
  .feature-row,
  .split-grid,
  .contact-grid { grid-template-columns: 1fr; }

  .feature-row { gap: var(--sp-5); padding: var(--sp-7) 0; }
  .feature-row.reverse .feature-visual { order: 0; }

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

  .nav-links { display: none; }
  .hamburger { display: flex; }
}

@media (max-width: 640px) {
  .section    { padding: var(--sp-8) 5%; }
  .section-sm { padding: var(--sp-6) 5%; }

  .bento-grid { grid-template-columns: 1fr; }
  .bento-span-3,
  .bento-span-2,
  .bento-span-4,
  .bento-span-6 { grid-column: span 1; }

  .grid-3,
  .grid-4,
  .grid-2 { grid-template-columns: 1fr; }

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

  .page-intro { padding-top: 120px; }
}

@media (max-width: 480px) {
  .stats-strip { grid-template-columns: 1fr; }
}