/* ============================================
   Layout Containers
   ============================================ */

.layout {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.layout__columns {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-12);
  padding: 2rem 0;
}

/* ============================================
   Background Colours
   ============================================ */

.background-blue {
  background-color: var(--color-primary-dark);
  color: white;
  margin: auto;
}

.background-blue h2,
.background-blue h3,
.background-blue h4 {
  color: #ffff;
}

.background-grey {
  background-color: var(--color-accent-grey);
  margin: auto;
}

/* ============================================
   Content Regions
   ============================================ */

body.node--type-article #block-modern-minimal-atomic-content,
body.node--type-sponsor #block-modern-minimal-atomic-content {
  max-width: var(--block-container-contain);
  padding: 0 var(--container-padding);
  margin-inline-start: auto;
  margin-inline-end: auto;
}

node--view-mode-full {
  background: #f0f9ff;
}

body.node--type-blog-post img {
  float: left;
  width: 25%;
  height: auto;
}

/* ============================================
   Two Column Layouts - Desktop
   ============================================ */

.layout--twocol-section {
  display: revert;
}

.layout--twocol-section--50-50 .layout__columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.layout--twocol-section--67-33 .layout__columns {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.layout--twocol-section--33-67 .layout__columns {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.layout--twocol-section--75-25 .layout__columns {
  display: grid;
  grid-template-columns: 3fr 1fr;
}

.layout--twocol-section--25-75 .layout__columns {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

/* ============================================
   Three Column Layouts - Desktop
   ============================================ */

.layout--threecol-section {
  display: revert;
}

.layout--threecol-section--33-34-33 .layout__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.layout--threecol-section--25-50-25 .layout__columns {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.layout--threecol-section--25-25-50 .layout__columns {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
}

.layout--threecol-section--50-25-25 .layout__columns {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

/* ============================================
   Tablet - 768px
   ============================================ */

@media (max-width: 768px) {

  .layout__columns {
    gap: var(--space-8);
    padding: 1.5rem 0;
  }

  /* Add padding to layout regions so content doesn't touch edges */
  .layout__region {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Remove padding from full bleed sections */
  .layout__region:has(.hero-banner) {
    padding-left: 0;
    padding-right: 0;
  }

  /* Background sections - keep full width but pad inner content */
  .background-blue .layout__region,
  .background-grey .layout__region {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Remove outer padding from background sections themselves */
  .background-blue,
  .background-grey {
    padding-left: 0;
    padding-right: 0;
  }

  /* Stack all two column layouts */
  .layout--twocol-section--50-50 .layout__columns,
  .layout--twocol-section--67-33 .layout__columns,
  .layout--twocol-section--33-67 .layout__columns,
  .layout--twocol-section--75-25 .layout__columns,
  .layout--twocol-section--25-75 .layout__columns {
    grid-template-columns: 1fr;
  }

  /* Stack three columns to two on tablet */
  .layout--threecol-section--33-34-33 .layout__columns,
  .layout--threecol-section--25-50-25 .layout__columns,
  .layout--threecol-section--25-25-50 .layout__columns,
  .layout--threecol-section--50-25-25 .layout__columns {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Blog image on tablet */
  body.node--type-blog-post img {
    width: 40%;
  }
}

/* ============================================
   Mobile - 480px
   ============================================ */

@media (max-width: 480px) {

  .layout {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .layout__columns {
    gap: var(--space-6);
    padding: 1rem 0;
  }

  /* Increase padding on mobile */
  .layout__region {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Remove padding from full bleed sections */
  .layout__region:has(.hero-banner) {
    padding-left: 0;
    padding-right: 0;
  }

  /* Background sections - pad inner content only */
  .background-blue .layout__region,
  .background-grey .layout__region {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Stack all layouts to single column */
  .layout--twocol-section--50-50 .layout__columns,
  .layout--twocol-section--67-33 .layout__columns,
  .layout--twocol-section--33-67 .layout__columns,
  .layout--twocol-section--75-25 .layout__columns,
  .layout--twocol-section--25-75 .layout__columns,
  .layout--threecol-section--33-34-33 .layout__columns,
  .layout--threecol-section--25-50-25 .layout__columns,
  .layout--threecol-section--25-25-50 .layout__columns,
  .layout--threecol-section--50-25-25 .layout__columns {
    grid-template-columns: 1fr;
  }

  /* Blog image full width on mobile */
  body.node--type-blog-post img {
    float: none;
    width: 100%;
    margin-bottom: var(--space-4);
  }
}