/**
 * @file
 * Layout Builder sections: overflow fix, spacing, Open Social 900px breakpoint.
 *
 * Never combine column-gap on flex with percentage flex-basis from core — total
 * width exceeds 100% and the second column wraps below the first. From 900px up
 * we switch those sections to CSS Grid so gap sits in the gutter track.
 */

.layout--twocol-section > .layout__region,
.layout--threecol-section > .layout__region,
.layout--fourcol-section > .layout__region {
  box-sizing: border-box;
  min-width: 0;
}

/*
 * Basic blocks / cards in LB regions often omit .card__block, so text sits on
 * the border — add horizontal padding on the card shell.
 */
.layout--twocol-section .layout__region .card,
.layout--threecol-section .layout__region .card,
.layout--fourcol-section .layout__region .card {
  box-sizing: border-box;
  padding-inline: 1.25rem;
}

/* Vertical spacing when regions stack as flex; no column-gap here */
.layout--twocol-section,
.layout--threecol-section,
.layout--fourcol-section {
  row-gap: 1.25rem;
}

.field--type-layout-section .field__item + .field__item {
  margin-top: 1.5rem;
}

.region--content article > .layout + .layout {
  margin-top: 1.5rem;
}

/* LB threecol on nodes: <article> has no .article class; layout is nested, not direct child. */
article .layout.layout--threecol-section.layout--threecol-section--33-34-33,
.article .layout.layout--threecol-section.layout--threecol-section--33-34-33 {
  padding-inline: 1.25rem;
  box-sizing: border-box;
}

article > div.layout.layout--onecol {
  padding-inline: 1.25rem;
  box-sizing: border-box;
}

@media screen and (max-width: 899px) {
  .layout--twocol-section > .layout__region,
  .layout--threecol-section > .layout__region,
  .layout--fourcol-section > .layout__region {
    flex: 0 1 100% !important;
    max-width: 100%;
  }
}

@media screen and (min-width: 900px) {
  .layout--twocol-section.layout--twocol-section--50-50 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
  }

  .layout--twocol-section.layout--twocol-section--33-67 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1.25rem 1.5rem;
  }

  .layout--twocol-section.layout--twocol-section--67-33 {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.25rem 1.5rem;
  }

  .layout--twocol-section.layout--twocol-section--25-75 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: 1.25rem 1.5rem;
  }

  .layout--twocol-section.layout--twocol-section--75-25 {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 1.25rem 1.5rem;
  }

  .layout--threecol-section.layout--threecol-section--25-50-25 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.25rem 1.5rem;
  }

  .layout--threecol-section.layout--threecol-section--25-25-50 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
    gap: 1.25rem 1.5rem;
  }

  .layout--threecol-section.layout--threecol-section--50-25-25 {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem 1.5rem;
  }

  .layout--threecol-section.layout--threecol-section--33-34-33 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
  }

  .layout--fourcol-section {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
  }
}

/*
 * Platform intro block: socialbase/block--introtext caps title/content width at
 * 900px+ (calc((100% / 1.5) - 15px)). Parent class raises specificity site-wide.
 */
.block--intro-text .block--intro-text__title,
.block--intro-text .block--intro-text__content {
  max-width: unset;
}

@media (min-width: 900px) {
  .block--intro-text .block--intro-text__title,
  .block--intro-text .block--intro-text__content {
    max-width: unset;
  }
}