/* ==========================================================================
   NOA-O MOBILE 1.2.0
   Uniform mobile width system.
   Goal: make Home + CMS pages use the same near-full-width canvas as the
   L-Acoustics catalogue (single 12px gutter, no nested Bootstrap narrowing).
   Loaded after 1.0.0 and 1.1.0.
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --noao-mobile-page-gutter: 12px;
  }

  /* ----------------------------------------------------------------------
     1) Remove the outer Bootstrap bottleneck on the custom full-width pages.
     Category/catalogue already has its own successful width system, so it is
     intentionally left untouched.
     ---------------------------------------------------------------------- */
  body#index #wrapper > .columns-container.container,
  body#cms #wrapper > .columns-container.container,
  body.page-cms #wrapper > .columns-container.container,
  body#contact #wrapper > .columns-container.container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--noao-mobile-page-gutter) !important;
    padding-right: var(--noao-mobile-page-gutter) !important;
  }

  body#index #center-column,
  body#cms #center-column,
  body.page-cms #center-column,
  body#contact #center-column {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ----------------------------------------------------------------------
     2) Home: every custom section inherits one single gutter from the outer
     layout instead of adding another .container margin inside it.
     ---------------------------------------------------------------------- */
  body#index .noao-v2-home {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body#index .noao-v2-home > .noao-v2-section > .container,
  body#index .noao-v2-home .noao-v2-section > .container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ----------------------------------------------------------------------
     3) CMS pages (Solutions, Secteurs, Réalisations, À propos, legal pages):
     neutralise any container/max-width pasted in the CMS editor. Direct CMS
     blocks then fill the same canvas as the catalogue page.
     ---------------------------------------------------------------------- */
  body#cms .page-content--cms,
  body.page-cms .page-content--cms {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body#cms .page-content--cms > div,
  body#cms .page-content--cms > section,
  body#cms .page-content--cms > article,
  body.page-cms .page-content--cms > div,
  body.page-cms .page-content--cms > section,
  body.page-cms .page-content--cms > article {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body#cms .page-content--cms .container,
  body.page-cms .page-content--cms .container,
  body#cms .page-content--cms [class*="container"],
  body.page-cms .page-content--cms [class*="container"] {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Avoid reintroducing a second gutter inside custom NOA-O CMS sections. */
  body#cms .page-content--cms .container,
  body.page-cms .page-content--cms .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* The large dark shells now align with the catalogue's outer edge. */
  body#cms .page-content--cms .noao-v2-hero__shell,
  body.page-cms .page-content--cms .noao-v2-hero__shell,
  body#cms .page-content--cms .noao-v2-project__shell,
  body.page-cms .page-content--cms .noao-v2-project__shell,
  body#cms .page-content--cms .noao-v2-la__shell,
  body.page-cms .page-content--cms .noao-v2-la__shell,
  body#cms .page-content--cms .noao-v2-sav__shell,
  body.page-cms .page-content--cms .noao-v2-sav__shell,
  body#cms .page-content--cms .noao-v2-final__shell,
  body.page-cms .page-content--cms .noao-v2-final__shell {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ----------------------------------------------------------------------
     4) Contact: use the same canvas. Keep the actual form readable by only
     removing outer Bootstrap narrowing, not the form's internal typography.
     ---------------------------------------------------------------------- */
  body#contact #content,
  body#contact .page-content,
  body#contact .contact-form {
    width: 100% !important;
    max-width: none !important;
  }

  /* Consistent edge radius with catalogue mobile cards. */
  body#index .noao-v2-hero__shell,
  body#cms .page-content--cms .noao-v2-hero__shell,
  body.page-cms .page-content--cms .noao-v2-hero__shell {
    border-radius: 22px !important;
  }
}

@media (max-width: 390px) {
  :root {
    --noao-mobile-page-gutter: 10px;
  }
}