/* backend/src/main/resources/static/modules_styles/starter_standard/layout.css */

/* gabion-export: Starter layout utilities — container variants, grid helpers, legacy wrapper */

/* ==============================================
   LAYOUT SYSTEM — starter-standard

   Container, grid utilities, responsive helpers.

   Breakpoints (framework standard):
     sm   480px   small phone -> large phone
     md   768px   phone -> tablet portrait
     lg  1024px   tablet -> desktop
     xl  1440px   desktop -> wide desktop
     2xl 1920px   wide desktop -> ultrawide
     3xl 2560px   QHD / 4K at 150% scaling
   ============================================== */

/* ==============================================
   CONTAINER
   ============================================== */

.container {
  width: 100%;
  max-width: var(--gb-content-max-width);
  margin: 0 auto;
  padding: 0 var(--gb-spacing-md);
}

.container--narrow {
  max-width: var(--gb-content-narrow);
}

.container--wide {
  max-width: var(--gb-content-wide);
}

@media (min-width: 2560px) {
  .container--ultrawide {
    max-width: var(--gb-content-ultrawide);
  }
}

/* ==============================================
   GRID UTILITIES
   ============================================== */

.grid {
  display: grid;
  gap: var(--gb-spacing-lg);
}

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

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ==============================================
   WRAPPER (legacy compat)
   ============================================== */

.wrapper {
  margin: 0 var(--gb-spacing-lg);
  /* clip, not hidden: hidden makes the wrapper a scroll container
     (overflow-y computes to auto), and an anchor target inside a scroll
     container is positioned relative to it, not to the viewport — the
     target lands underneath the fixed header. clip clips the same
     overflow without creating a scroll container. */
  overflow-x: clip;
}

@media (min-width: 768px) {
  .wrapper {
    margin: 0 var(--gb-spacing-2xl);
  }
}

@media (min-width: 1024px) {
  .wrapper {
    margin: 0 var(--gb-spacing-3xl);
  }
}