/**
 * PepperLabz Homepage Hero + Promise — narrow-phone fix only.
 *
 * As of 2026-09-20, the hero and promise sections' own layout (background
 * swirl, column widths, margins, the promise texture background, every
 * breakpoint) is no longer hand-rolled here -- it comes directly from
 * pepperlabz-post-95.css, which is Elementor's own generated CSS for the
 * real homepage (post 95), copied verbatim. That's pixel-exact by
 * definition, since it's literally the CSS the real page uses. See
 * pepperlabz-homepage-static.php for how the matching HTML is included.
 *
 * The one thing this file still does: fix a real (pre-existing, not
 * migration-introduced) bug on the LIVE real homepage where, at true
 * narrow-phone widths (390px and below -- iPhone SE/13/14 etc.), the hero
 * headline sits behind the vial images instead of below them. Elementor's
 * own CSS only has ONE mobile breakpoint (max-width:767px) with a fixed
 * -131px pull-up on the text column; that has plenty of clearance at
 * ~600-767px but not at ~390px, where the text column is nearly full width.
 * This file is loaded site-wide (same as pepperlabz-post-95.css), so this
 * fix applies to the real homepage too, not just this preview -- confirmed
 * via live browser testing at 390px on both pages before landing this.
 */

@media (max-width: 480px) {
  .pepper-hero-text {
    margin-top: -10px !important;
  }
}

/**
 * Full-bleed breakout for the copied hero/promise sections.
 *
 * The preview page (post 9443) is itself built as an Elementor page, and
 * the [pepperlabz_static_homepage] shortcode sits inside a BOXED Elementor
 * container there (max-width ~1200px, centered) -- so the hero/promise
 * sections' own e-con-full class gets its width squashed down to that box
 * instead of the real page's true 100vw. The real homepage (post 95)
 * doesn't have this problem because its hero is a direct top-level section,
 * not nested inside another boxed container. This forces the breakout
 * explicitly for anything e-con-full directly inside our injected
 * .elementor-95 wrapper, regardless of what it's nested inside.
 */
.elementor-95.elementor > .e-con-full {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/**
 * Full-bleed break-out for the homepage's hand-built sections.
 *
 * Sections 3-5 below (Featured Peppers, Why PepperLabz, Verify) are NOT
 * copied from Elementor -- they're this rebuild's own markup, so they still
 * need this explicit full-bleed rule to span true edge-to-edge width the
 * same way Elementor's own e-con-full class does natively for the
 * hero/promise sections above.
 */
.pepperlabz-featured,
.pepper-info-section,
.pepper-verify-section {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box;
}