/*
 * @file
 * Provides the layout styles for layout--fourcol-33-67-split.
 */

 .layout--fourcol-33-67-split {
  display: flex;
  flex-direction: column;
}

.layout--fourcol-33-67-split > .layout__region {
  margin-bottom: 1rem;
}

/* Main container that wraps left (first) and right (second1-3) regions */
.layout--fourcol-33-67-split .layout__main {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* Left column defaults to full width */
.layout--fourcol-33-67-split .layout__region--first {
  flex: 0 0 100%;
}

/* Right side container for 3 columns inside 67% */
.layout--fourcol-33-67-split .layout__region-group--67 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* Each sub-column full width by default */
.layout--fourcol-33-67-split .layout__region--second1,
.layout--fourcol-33-67-split .layout__region--second2,
.layout--fourcol-33-67-split .layout__region--second3 {
  flex: 0 0 100%;
  text-align: left;
}

/* Tablet layout: two columns, third centered */
.layout--fourcol-33-67-split .layout__region--first {
  flex: 0 0 100%;
}

.layout--fourcol-33-67-split .layout__region-group--67 {
  justify-content: space-between;
  gap: 1rem;
}

.layout--fourcol-33-67-split .layout__region--second1,
.layout--fourcol-33-67-split .layout__region--second2 {
  flex: 0 0 calc(50% - 0.5rem);
}

.layout--fourcol-33-67-split .layout__region--second3 {
  flex: 0 0 calc(50% - 0.5rem);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Desktop layout: 33% + 67% with spacing between columns */
@media screen and (min-width: 48em) { /* ~768px */
  .layout--fourcol-33-67-split .layout__main {
    flex-direction: row;
    gap: 2%;
  }

  .layout--fourcol-33-67-split .layout__region--first {
    flex: 0 0 33%;
    max-width: 33%;
    margin-right: 0;
  }

  .layout--fourcol-33-67-split .layout__region-group--67 {
    flex: 0 0 65%;
    max-width: 65%;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .layout--fourcol-33-67-split .layout__region--second1,
  .layout--fourcol-33-67-split .layout__region--second2,
  .layout--fourcol-33-67-split .layout__region--second3 {
    flex: 1 1 30%;
    max-width: 33.33%;
    text-align: left;
  }
}