/* ==========================================================================
   Layout — Grid + Containers
   ========================================================================== */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-l);
}

.section {
  padding: var(--space-4xl) 0;
}

.section--subtle {
  background: var(--bg);
}

.grid {
  display: grid;
  gap: var(--space-xl);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.flex { display: flex; }
.flex--center { align-items: center; justify-content: center; }
.flex--gap-m { gap: var(--space-m); }

/* Sitets eneste vandrette-overflow-guard: forhindrer side-scroll fra dekorative
   overflow-elementer (fx forsidens hpl-pulse-ring/burst-partikler der ekspanderer
   ud over viewport). `clip` er sticky-sikker (etablerer ingen scroll-container, så
   descendant position:sticky bevares) og klipper ved main's kant = viewport-bredden.
   Konsolideret hertil fra en tidligere phone-only body-overflow-regel i base-laget
   (loop-review: én strategi, ét sted). */
#main { overflow-x: clip; }

/* ===== Tablet (768px) ===== */
@media (max-width: 768px) {
  .container { padding: 0 var(--space-m); }
  .section { padding: var(--space-2xl) 0; }

  /* wa-page giver <main> en fast padding hele vejen rundt og reducerer den aldrig
     på mobil: smal kolonne, korte tekstlinjer, for meget luft over. Skær den ned. */
  #main { padding: var(--space-2xl) var(--space-xl); }

  /* 2-col grids stack on tablet for pricing/blog/contact */
  .grid--2 { grid-template-columns: 1fr; }

  /* 3-col grid becomes 2 cols on tablet */
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  /* 4-col footer becomes 2x2 on tablet */
}

/* ===== Phone (480px) ===== */
@media (max-width: 480px) {
  .container { padding: 0 var(--space-s); }
  .section { padding: var(--space-xl) 0; }

  /* Telefon: endnu mindre gutter så indhold og tekstlinjer får plads. */
  #main { padding: var(--space-xl) var(--space-m); }

  /* All grids stack to single column on phone */
  .grid--3 { grid-template-columns: 1fr; }
  .grid { gap: var(--space-l); }
}