/* ==========================================================================
   Grid Layout Component
   Reusable two-column layouts for text + image patterns
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base Grid Layout
   Two-column layout for text alongside media
   -------------------------------------------------------------------------- */
.grid-layout {
  display: grid;
  gap: clamp(3rem, 8vw, 6rem);
  align-items: center;
}

/* --------------------------------------------------------------------------
   Column Configurations
   -------------------------------------------------------------------------- */

/* Content left, media right (content takes ~60%) */
.grid-layout--content-left {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.65fr);
}

/* Media left, content right */
.grid-layout--media-left {
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
}

/* Larger media on left */
.grid-layout--media-left-lg {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

/* Equal columns */
.grid-layout--equal {
  grid-template-columns: 1fr 1fr;
}

/* 12-column grid for more complex layouts */
.grid-layout--12col {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* --------------------------------------------------------------------------
   Gap Modifiers
   -------------------------------------------------------------------------- */
.grid-layout--gap-sm {
  gap: clamp(2rem, 5vw, 3rem);
}

.grid-layout--gap-lg {
  gap: clamp(4rem, 10vw, 7rem);
}

/* --------------------------------------------------------------------------
   Alignment Modifiers
   -------------------------------------------------------------------------- */
.grid-layout--align-start {
  align-items: flex-start;
}

.grid-layout--align-end {
  align-items: flex-end;
}

/* --------------------------------------------------------------------------
   Grid Children Utilities
   For use within .grid-layout--12col
   -------------------------------------------------------------------------- */
.grid-span-5 {
  grid-column: span 5;
}

.grid-span-6 {
  grid-column: span 6;
}

.grid-span-7 {
  grid-column: span 7;
}

.grid-start-2 {
  grid-column-start: 2;
}

.grid-start-7 {
  grid-column-start: 7;
}

/* --------------------------------------------------------------------------
   Responsive Behavior
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .grid-layout--content-left,
  .grid-layout--media-left,
  .grid-layout--media-left-lg,
  .grid-layout--equal {
    grid-template-columns: 1fr;
  }

  /* Optionally reverse order on mobile for media-left layouts */
  .grid-layout--media-left > :first-child {
    order: 2;
  }

  .grid-layout--media-left > :last-child {
    order: 1;
  }
}

@media (max-width: 768px) {
  .grid-layout--12col {
    grid-template-columns: 1fr;
  }

  .grid-span-5,
  .grid-span-6,
  .grid-span-7 {
    grid-column: span 1;
  }

  .grid-start-2,
  .grid-start-7 {
    grid-column-start: 1;
  }
}