/**
 * Boost Theme - Container Width System
 *
 * ARCHITECTURE (Breakout Approach):
 *
 * Boost sections break OUT of WP constraints via calc(50% - 50vw).
 * We NEVER touch WP's <main>, .entry-content, .has-global-padding, .is-layout-constrained.
 *
 * LAYER 1 - Page Metabox (body.boost-layout-X):
 *   → Constrains the <section> element (background + outer boundary).
 *   → Default / Full Width = section stays 100% of breakout wrapper (edge-to-edge).
 *   → Wide = section max-width 1400px, centered.
 *   → Contained = section max-width 1200px, centered.
 *   → Narrow = section max-width 720px, centered.
 *
 * LAYER 2 - Block JSON (containerWidth class on <section>):
 *   → Constrains the [class$="-container"] inner element (content width).
 *   → Inherit = var(--boost-default, 1200px).
 *   → Full Width / Wide / Content / Narrow = explicit max-width.
 *
 * EXCEPTIONS:
 *   → Header/Footer: CPT-independent, use data-container-width attribute.
 *   → Sidebar: no breakout, sections fill grid column.
 *
 * @package BoostTheme
 */

/* /assets/css/layouts/container-widths.css */

/* =============================================
   1. VARIABLES
   ============================================= */

:root {
  --boost-narrow: 720px;
  --boost-default: 1200px;
  --boost-wide: 1400px;
  --boost-gutter: 1.5rem;
}

/* =============================================
   2. HEADER - CPT INDEPENDENT
   ============================================= */

.boost-site-header,
.boost-block-header {
  width: 100%;
  max-width: none;
}

.boost-site-header .header-container,
.boost-block-header .header-container {
  max-width: var(--boost-default);
  margin: 0 auto;
  padding: 0 var(--boost-gutter);
}

.boost-site-header[data-container-width="narrow"] .header-container { max-width: var(--boost-narrow); }
.boost-site-header[data-container-width="wide"] .header-container { max-width: var(--boost-wide); }
.boost-site-header[data-container-width="full"] .header-container { max-width: none; }

/* =============================================
   3. FOOTER - CPT INDEPENDENT
   ============================================= */

.boost-site-footer,
.boost-block-footer {
  width: 100%;
  max-width: none;
}

.boost-site-footer .boost-block-footer__inner,
.boost-block-footer .boost-block-footer__inner {
  max-width: var(--boost-default);
  margin: 0 auto;
  padding: 6rem var(--boost-gutter) 3rem;
}

.boost-site-footer[data-container-width="narrow"] .boost-block-footer__inner { max-width: var(--boost-narrow); }
.boost-site-footer[data-container-width="wide"] .boost-block-footer__inner { max-width: var(--boost-wide); }
.boost-site-footer[data-container-width="full"] .boost-block-footer__inner { max-width: none; }

/* =============================================
   4. CONTENT SECTIONS - Base Styles
   The <section> fills the breakout wrapper (100%).
   The inner -container is the content boundary.
   ============================================= */

section[class*="boost-block-"] {
  width: 100%;
  box-sizing: border-box;
}

section[class*="boost-block-"] [class$="-container"] {
  width: 100%;
  max-width: var(--boost-default);
  margin: 0 auto;
  padding: 0 var(--boost-gutter);
  box-sizing: border-box;
}

/* =============================================
   5. LAYER 2 - Block JSON → Content Width
   Classes on <section> control inner -container max-width.
   ============================================= */

section.boost-container-narrow [class$="-container"] { max-width: var(--boost-narrow); }
section.boost-container-default [class$="-container"] { max-width: var(--boost-default); }
section.boost-container-wide [class$="-container"] { max-width: var(--boost-wide); }
section.boost-container-full [class$="-container"] { max-width: none; }

/* =============================================
   6. LAYER 1 - Page Metabox → Section Width
   
   Controls the <section> max-width.
   The breakout wrapper (.boost-shortcode-block) is always 100vw.
   The <section> inside it is what we constrain here.
   
   Default (no class) + Full Width = section 100% (edge-to-edge).
   ============================================= */

body.boost-layout-contained:not(.boost-layout-sidebar-left):not(.boost-layout-sidebar-right) .boost-shortcode-block > section[class*="boost-block-"],
body.boost-layout-contained:not(.boost-layout-sidebar-left):not(.boost-layout-sidebar-right) .is-layout-constrained > section[class*="boost-block-"] {
  max-width: var(--boost-default);
  margin-left: auto;
  margin-right: auto;
}

body.boost-layout-wide:not(.boost-layout-sidebar-left):not(.boost-layout-sidebar-right) .boost-shortcode-block > section[class*="boost-block-"],
body.boost-layout-wide:not(.boost-layout-sidebar-left):not(.boost-layout-sidebar-right) .is-layout-constrained > section[class*="boost-block-"] {
  max-width: var(--boost-wide);
  margin-left: auto;
  margin-right: auto;
}

body.boost-layout-narrow:not(.boost-layout-sidebar-left):not(.boost-layout-sidebar-right) .boost-shortcode-block > section[class*="boost-block-"],
body.boost-layout-narrow:not(.boost-layout-sidebar-left):not(.boost-layout-sidebar-right) .is-layout-constrained > section[class*="boost-block-"] {
  max-width: var(--boost-narrow);
  margin-left: auto;
  margin-right: auto;
}

/* Full Width + Default: section stays 100% — no rule needed (base is width: 100%) */

/* =============================================
   7. SIDEBAR - Grid does breakout, sections fill column
   ============================================= */

/* Sidebar sections: fill content column, no individual breakout */
body.boost-layout-sidebar-left .boost-shortcode-block,
body.boost-layout-sidebar-right .boost-shortcode-block {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.boost-layout-sidebar-left section[class*="boost-block-"],
body.boost-layout-sidebar-right section[class*="boost-block-"] {
  width: 100% !important;
  max-width: 100% !important;
}

body.boost-layout-sidebar-left section[class*="boost-block-"] [class$="-container"],
body.boost-layout-sidebar-right section[class*="boost-block-"] [class$="-container"] {
  max-width: 100% !important;
}

body.boost-layout-sidebar-left .boost-block-content-area,
body.boost-layout-sidebar-right .boost-block-content-area {
  min-width: 0;
  overflow: hidden;
}

/* =============================================
   8. MOBILE
   All layouts edge-to-edge except narrow.
   Breakout still active — sections fill viewport.
   Inner containers get gutter padding.
   ============================================= */

@media (max-width: 768px) {
  :root { --boost-gutter: 1rem; }

  /* Header */
  .boost-site-header .header-container,
  .boost-block-header .header-container {
    max-width: none !important;
    padding-left: var(--boost-gutter) !important;
    padding-right: var(--boost-gutter) !important;
  }

  /* Footer */
  .boost-site-footer .boost-block-footer__inner,
  .boost-block-footer .boost-block-footer__inner {
    max-width: none !important;
    padding: 4rem var(--boost-gutter) 2rem !important;
  }

  /* All content blocks: inner container edge-to-edge with gutter */
  section[class*="boost-block-"] [class$="-container"] {
    max-width: none !important;
    padding-left: var(--boost-gutter) !important;
    padding-right: var(--boost-gutter) !important;
  }

  /* Override page metabox constraints on mobile (all full-width except narrow) */
  body:not(.boost-layout-narrow) .boost-shortcode-block > section[class*="boost-block-"],
  body:not(.boost-layout-narrow) .is-layout-constrained > section[class*="boost-block-"],
  body.boost-layout-contained .boost-shortcode-block > section[class*="boost-block-"],
  body.boost-layout-wide .boost-shortcode-block > section[class*="boost-block-"],
  body.boost-layout-full-width .boost-shortcode-block > section[class*="boost-block-"] {
    max-width: none !important;
  }

  /* Narrow on mobile: keep constraint */
  body.boost-layout-narrow .boost-shortcode-block > section[class*="boost-block-"] {
    max-width: var(--boost-narrow) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =============================================
   9. BLOCK-SPECIFIC OVERRIDES
   ============================================= */

.boost-block-hero .hero-container {
  position: relative;
  z-index: 1;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (max-width: 768px) {
  .boost-block-hero .hero-container {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}