/* ==========================================================================
   Layout - Grid System & Container
   ========================================================================== */

/* Container */
.container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

/* Grid System */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}

/* Full-Height Sections */
.section {
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Desktop: genau 100vh für korrektes Pinning */
@media (min-width: 1025px) {
  .section {
    height: 100vh;
    max-height: 100vh;
  }
}

/* Flex Utilities */
.flex {
  display: flex;
}

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

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

.flex-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

/* Position Utilities */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

/* Full-bleed background */
.full-bleed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Responsive Breakpoints */
@media (max-width: 1440px) {
  :root {
    --grid-columns: 8;
  }
}

@media (max-width: 1024px) {
  :root {
    --grid-columns: 6;
    --grid-gutter: 20px;
  }
}

@media (max-width: 768px) {
  :root {
    --grid-columns: 4;
    --grid-gutter: 16px;
    --grid-margin: 16px;
  }
}

@media (max-width: 480px) {
  :root {
    --grid-columns: 4;
    --grid-gutter: 12px;
    --grid-margin: 12px;
  }
}

/* ==========================================================================
   GSAP Pin-Spacer Fix
   ScrollTrigger creates wrapper elements that can limit width
   ========================================================================== */

.pin-spacer {
  width: 100% !important;
  max-width: 100% !important;
}