/**
 * @file
 * Grid styles for The Reach custom layouts.
 *
 * Attached via `library` key in the_reach.layouts.yml so these styles
 * load in both the frontend theme and the admin (Claro) theme.
 */

/* Two column */
.layout--twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* Three column */
.layout--threecol {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
}

/* Six column */
.layout--sixcol {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

/* Prevent region content from overflowing grid columns */
.layout__region {
  min-width: 0;
}

/* Responsive: stack on small screens */
@media (max-width: 768px) {
  .layout--twocol,
  .layout--threecol {
    grid-template-columns: 1fr;
  }

  .layout--sixcol {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .layout--sixcol {
    grid-template-columns: repeat(3, 1fr);
  }
}