/*
 * @file
 * Provides the layout styles for two-column layout section.
 */

.layout--carey-twocol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Mobile responsive - stack on small screens */
@media screen and (max-width: 767px) {
  .layout--carey-twocol {
    grid-template-columns: 1fr;
  }
}

/* Desktop responsive design */
@media screen and (min-width: 768px) {
  .layout--carey-twocol {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  /* 50/50 Equal columns */
  .layout--carey-twocol--50-50 > .layout__region--first,
  .layout--carey-twocol--50-50 > .layout__region--second {
    grid-column: auto / span 6;
  }

  /* 60/40 Wide left */
  .layout--carey-twocol--60-40 > .layout__region--first {
    grid-column: auto / span 7;
  }
  .layout--carey-twocol--60-40 > .layout__region--second {
    grid-column: auto / span 5;
  }

  /* 40/60 Wide right */
  .layout--carey-twocol--40-60 > .layout__region--first {
    grid-column: auto / span 5;
  }
  .layout--carey-twocol--40-60 > .layout__region--second {
    grid-column: auto / span 7;
  }

  /* 70/30 Very wide left */
  .layout--carey-twocol--70-30 > .layout__region--first {
    grid-column: auto / span 8;
  }
  .layout--carey-twocol--70-30 > .layout__region--second {
    grid-column: auto / span 4;
  }

  /* 30/70 Very wide right */
  .layout--carey-twocol--30-70 > .layout__region--first {
    grid-column: auto / span 4;
  }
  .layout--carey-twocol--30-70 > .layout__region--second {
    grid-column: auto / span 8;
  }

  /* 75/25 Extra wide left */
  .layout--carey-twocol--75-25 > .layout__region--first {
    grid-column: auto / span 9;
  }
  .layout--carey-twocol--75-25 > .layout__region--second {
    grid-column: auto / span 3;
  }

  /* 25/75 Extra wide right */
  .layout--carey-twocol--25-75 > .layout__region--first {
    grid-column: auto / span 3;
  }
  .layout--carey-twocol--25-75 > .layout__region--second {
    grid-column: auto / span 9;
  }
}