/**
 * Layout Builder section rules, converted to literal CSS from Sass source:
 * src/stories/components/layouts/layouts.scss
 *
 * Per Phase 0 (Batch C inventory, `layouts` row), this file has no
 * accompanying Twig or stories.js -- it is pure CSS backing Drupal's own
 * Layout Builder section templates (layout--onecol.html.twig,
 * layout--twocol-section.html.twig, layout--twocol-section-stack.html.twig,
 * layout--threecol-section.html.twig, layout--threecol-section-stack.html.twig,
 * and the layout--onecol--seo-page.html.twig variant), all of which previously
 * attached this library via `attach_library('lehigh_coe_theme/layouts')`.
 * As of Phase 9's cutover/Phase 10 Batch D cleanup, this CSS is now delivered
 * sitewide via the `global` library instead.
 *
 * The source uses Bootstrap's media-breakpoint-down(lg) mixin. Re-derived
 * directly from src/stories/global/_variables.scss ($grid-breakpoints map,
 * lines 349-356 -- this theme does not override Bootstrap's default
 * breakpoint values) and confirmed against the compiled output
 * (dist/css/layouts.css): lg: 992px, so media-breakpoint-down(lg) compiles
 * to `@media (max-width: 991.98px)`. Each such rule below is commented with
 * its source --site-grid-breakpoints-lg token for traceability (CSS custom
 * properties cannot be used inside an @media condition).
 *
 * No --site-* design tokens are consumed in declaration values in this
 * file; every value here (colors, lengths, keywords) is a literal already
 * hard-coded in the Sass source, transcribed as-is.
 */

/* Sections with an inset background should not overflow the viewport on
 * mobile -- pull the single-column region back out to the viewport edge.
 * --site-grid-breakpoints-lg: 992px */
@media (max-width: 991.98px) {

  .section-inset.layout--onecol-section > .layout__region {
    margin-left: -24px;
    margin-right: -24px;
  }
}

/* --site-grid-breakpoints-lg: 992px */
@media (max-width: 991.98px) {

  .section-inset.layout--twocol-section,
  .section-inset.layout--threecol-section,
  .section-inset.layout--twocol-section-stack,
  .section-inset.layout--threecol-section-stack {
    padding: 0;
  }

  .section-inset.layout--twocol-section .row,
  .section-inset.layout--threecol-section .row,
  .section-inset.layout--twocol-section-stack .row,
  .section-inset.layout--threecol-section-stack .row {
    margin: 0;
  }

  .section-inset.layout--twocol-section .layout__region,
  .section-inset.layout--threecol-section .layout__region,
  .section-inset.layout--twocol-section-stack .layout__region,
  .section-inset.layout--threecol-section-stack .layout__region {
    padding: 0;
  }
}

/* Sections with the same background should not get double padding. */
.section-inset.gold-20 + .section-inset.gold-20 > div,
.section-inset.blue-20 + .section-inset.blue-20 > div,
.section-inset.grey-20 + .section-inset.grey-20 > div,
.section-inset.brown-2 + .section-inset.brown-2 > div {
  padding-block-start: 0 !important;
}

.layout--onecol-section .row,
.layout--twocol-section .row,
.layout--threecol-section .row,
.layout--twocol-section-stack .row,
.layout--threecol-section-stack .row {
  min-width: 100%;
}

/* The pseudo-element inherits its background-color from .row/.layout__region
 * so an inset section's background can bleed full-bleed on mobile without
 * overflow-x scroll (105vw centered via translateX(-50%)).
 * --site-grid-breakpoints-lg: 992px */
@media (max-width: 991.98px) {

  .layout--onecol-section.section-inset:not(.border-20) .row,
  .layout--onecol-section.section-inset:not(.border-20) .layout__region--top,
  .layout--onecol-section.section-inset:not(.border-20) .layout__region--bottom,
  .layout--twocol-section.section-inset:not(.border-20) .row,
  .layout--twocol-section.section-inset:not(.border-20) .layout__region--top,
  .layout--twocol-section.section-inset:not(.border-20) .layout__region--bottom,
  .layout--threecol-section.section-inset:not(.border-20) .row,
  .layout--threecol-section.section-inset:not(.border-20) .layout__region--top,
  .layout--threecol-section.section-inset:not(.border-20) .layout__region--bottom,
  .layout--twocol-section-stack.section-inset:not(.border-20) .row,
  .layout--twocol-section-stack.section-inset:not(.border-20) .layout__region--top,
  .layout--twocol-section-stack.section-inset:not(.border-20) .layout__region--bottom,
  .layout--threecol-section-stack.section-inset:not(.border-20) .row,
  .layout--threecol-section-stack.section-inset:not(.border-20) .layout__region--top,
  .layout--threecol-section-stack.section-inset:not(.border-20) .layout__region--bottom {
    position: relative;
    padding-inline: 0 !important;
  }

  .layout--onecol-section.section-inset:not(.border-20) .row::before,
  .layout--onecol-section.section-inset:not(.border-20) .layout__region--top::before,
  .layout--onecol-section.section-inset:not(.border-20) .layout__region--bottom::before,
  .layout--twocol-section.section-inset:not(.border-20) .row::before,
  .layout--twocol-section.section-inset:not(.border-20) .layout__region--top::before,
  .layout--twocol-section.section-inset:not(.border-20) .layout__region--bottom::before,
  .layout--threecol-section.section-inset:not(.border-20) .row::before,
  .layout--threecol-section.section-inset:not(.border-20) .layout__region--top::before,
  .layout--threecol-section.section-inset:not(.border-20) .layout__region--bottom::before,
  .layout--twocol-section-stack.section-inset:not(.border-20) .row::before,
  .layout--twocol-section-stack.section-inset:not(.border-20) .layout__region--top::before,
  .layout--twocol-section-stack.section-inset:not(.border-20) .layout__region--bottom::before,
  .layout--threecol-section-stack.section-inset:not(.border-20) .row::before,
  .layout--threecol-section-stack.section-inset:not(.border-20) .layout__region--top::before,
  .layout--threecol-section-stack.section-inset:not(.border-20) .layout__region--bottom::before {
    content: "";
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    background-color: inherit;
    width: 105vw;
    height: 100%;
    position: absolute;
    z-index: -1;
  }
}

.center-inset.layout--onecol-section,
.center-inset.layout--twocol-section,
.center-inset.layout--threecol-section,
.center-inset.layout--twocol-section-stack,
.center-inset.layout--threecol-section-stack {
  max-width: 1000px;
}

/* Layout settings. */
.cols-equal-height-off .block--layout-builder.h-100 {
  height: unset !important;
}