/* ========================================================================== 
   Beca Theme — Layout & Regions
   ========================================================================== */

/* Page wrapper */
.layout-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: none;
  overflow-x: clip;
}

/* Top Strip */
.region-top-strip {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  font-size: var(--text-sm);
  /*padding: var(--space-2) var(--container-pad);*/
  width: 100%;
}

/* Header — styled by beca_header_block module */
.region-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  width: 100%;
}

/*
 * Content / Main
 * --------------------------------------------------------------------------
 * IMPORTANT:
 * The main content region must NOT be constrained by the theme container.
 * Layout Builder sections and full-bleed custom blocks need this region to be
 * full-width. Individual components should provide their own inner container.
 */
.region-content {
  flex: 1;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 0;
  overflow-x: clip;
}

/* Footer — styled by beca_footer_block module */
.region-footer {
  width: 100%;
}

/*
 * Node and Layout Builder full-width support.
 * Drupal renders Layout Builder output inside .node__content on content pages,
 * so .node__content must also remain unconstrained.
 */
.node,
.node__content,
.region-content .layout-builder,
.region-content .layout-builder__layout,
.region-content .layout,
.region-content .layout__region,
.region-content .layout--onecol,
.region-content .layout--onecol .layout__region,
.region-content .block,
.region-content .block-system-main-block {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.node__content {
  margin: 0;
}

/*
 * Readable text helper.
 * Use this class for normal article/body text that should not span too wide.
 */
.layout-container .text-content,
.beca-readable {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Utility container class for normal site-width content */
.container,
.beca-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  /*padding-inline: var(--container-pad);*/
  box-sizing: border-box;
}

/* Utility class for a full-viewport section inside a constrained wrapper */
.beca-full-bleed {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}

/* Layout Builder forms should remain usable in edit mode */
.layout-builder-form,
.layout-builder-discard-changes,
.layout-builder-revert-overrides,
.layout-builder-block-update,
.layout-builder-configure-section {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Responsive */
@media (max-width: 768px) {
  .container,
  .beca-container,
  .beca-readable,
  .layout-container .text-content {
    padding-inline: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
 * Extra Layout Builder width reset
 * --------------------------------------------------------------------------
 * Ensures Drupal core/layout wrappers do not introduce side padding or a
 * 1200px content restriction. Individual blocks/modules remain responsible for
 * their own inner max-width, e.g. 1240px.
 */
.region-content > .block,
.region-content > .block > .content,
.region-content .node,
.region-content .node__content,
.region-content .layout-builder,
.region-content .layout-builder__layout,
.region-content .layout-builder__section,
.region-content .layout,
.region-content .layout__region,
.region-content .layout--onecol,
.region-content .layout--onecol > .layout__region,
.region-content .layout--twocol-section,
.region-content .layout--threecol-section,
.region-content .layout--fourcol-section {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.region-content .block-beca-feature-cards,
.region-content .block-beca-feature-cards > .content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}