/* =========================================================
 * ALMARA Affiliate Sub-Pages — Mobile CSS Extension v1.0.0
 * Append this file to: almara-affiliate-mobile.css
 *
 * Breakpoints:
 *   Tablet  ≤ 1024px
 *   Mobile  ≤  767px
 *   Small   ≤  390px
 *
 * Architecture:
 *   body:has(#alm-{tier}-hero) as scope selector.
 *   flex: 0 0 100% + flex-wrap: wrap on ALL container levels.
 *   padding-inline reset on .e-con + .e-con-inner.
 * ========================================================= */

/* =========================================================
 * TABLET  ≤ 1024px
 * ========================================================= */
@media screen and (max-width: 1024px) {

  /* Section horizontal padding */
  body:has(#alm-coast-hero) #alm-coast-hero,
  body:has(#alm-coast-hero) #alm-coast-badge,
  body:has(#alm-coast-hero) #alm-coast-how,
  body:has(#alm-coast-hero) #alm-coast-final-cta,
  body:has(#alm-reef-hero)  #alm-reef-hero,
  body:has(#alm-reef-hero)  #alm-reef-badge,
  body:has(#alm-reef-hero)  #alm-reef-form,
  body:has(#alm-reef-hero)  #alm-reef-final-cta,
  body:has(#alm-deep-hero)  #alm-deep-hero,
  body:has(#alm-deep-hero)  #alm-deep-badge,
  body:has(#alm-deep-hero)  #alm-deep-exclusivity,
  body:has(#alm-deep-hero)  #alm-deep-final-cta,
  body:has(#alm-reg-hero)   #alm-reg-hero,
  body:has(#alm-reg-hero)   #alm-reg-trust,
  body:has(#alm-reg-hero)   #alm-reg-embed,
  body:has(#alm-reg-hero)   #alm-reg-info {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* e-con padding-inline reset */
  body:has(#alm-coast-hero) #alm-coast-badge .e-con-inner,
  body:has(#alm-coast-hero) #alm-coast-how .e-con-inner,
  body:has(#alm-reef-hero)  #alm-reef-badge .e-con-inner,
  body:has(#alm-reef-hero)  #alm-reef-form .e-con-inner,
  body:has(#alm-deep-hero)  #alm-deep-badge .e-con-inner,
  body:has(#alm-deep-hero)  #alm-deep-exclusivity .e-con-inner,
  body:has(#alm-reg-hero)   #alm-reg-trust .e-con-inner,
  body:has(#alm-reg-hero)   #alm-reg-info .e-con-inner {
    padding-inline: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Badge 2-col → stack on tablet */
  body:has(#alm-coast-hero) #alm-coast-badge .elementor-container,
  body:has(#alm-reef-hero)  #alm-reef-badge  .elementor-container,
  body:has(#alm-deep-hero)  #alm-deep-badge  .elementor-container {
    flex-wrap: wrap !important;
  }
  body:has(#alm-coast-hero) #alm-coast-badge .elementor-col-50,
  body:has(#alm-reef-hero)  #alm-reef-badge  .elementor-col-50,
  body:has(#alm-deep-hero)  #alm-deep-badge  .elementor-col-50 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Steps 3-col → stack */
  body:has(#alm-coast-hero) #alm-coast-how .elementor-container,
  body:has(#alm-deep-hero)  #alm-deep-exclusivity .elementor-container,
  body:has(#alm-reg-hero)   #alm-reg-info .elementor-container {
    flex-wrap: wrap !important;
  }
  body:has(#alm-coast-hero) #alm-coast-how .elementor-col-33,
  body:has(#alm-reg-hero)   #alm-reg-info .elementor-col-33 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }
  body:has(#alm-deep-hero) #alm-deep-exclusivity .elementor-col-50 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Trust bar 4-col → 2-col */
  body:has(#alm-reg-hero) #alm-reg-trust .elementor-container {
    flex-wrap: wrap !important;
  }
  body:has(#alm-reg-hero) #alm-reg-trust .elementor-col-25 {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }

  /* Final CTA inner section: wrap */
  body:has(#alm-coast-hero) #alm-coast-final-cta .elementor-section .elementor-container,
  body:has(#alm-reef-hero)  #alm-reef-final-cta  .elementor-section .elementor-container,
  body:has(#alm-deep-hero)  #alm-deep-final-cta  .elementor-section .elementor-container {
    flex-wrap: wrap !important;
  }
}

/* =========================================================
 * MOBILE  ≤ 767px
 * ========================================================= */
@media screen and (max-width: 767px) {

  /* ── Global section padding ── */
  body:has(#alm-coast-hero) #alm-coast-hero,
  body:has(#alm-coast-hero) #alm-coast-badge,
  body:has(#alm-coast-hero) #alm-coast-how,
  body:has(#alm-coast-hero) #alm-coast-final-cta,
  body:has(#alm-reef-hero)  #alm-reef-hero,
  body:has(#alm-reef-hero)  #alm-reef-badge,
  body:has(#alm-reef-hero)  #alm-reef-form,
  body:has(#alm-reef-hero)  #alm-reef-final-cta,
  body:has(#alm-deep-hero)  #alm-deep-hero,
  body:has(#alm-deep-hero)  #alm-deep-badge,
  body:has(#alm-deep-hero)  #alm-deep-exclusivity,
  body:has(#alm-deep-hero)  #alm-deep-final-cta,
  body:has(#alm-reg-hero)   #alm-reg-hero,
  body:has(#alm-reg-hero)   #alm-reg-trust,
  body:has(#alm-reg-hero)   #alm-reg-embed,
  body:has(#alm-reg-hero)   #alm-reg-info {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* ── All sub-page containers: wrap ── */
  body:has(#alm-coast-hero) .elementor-container,
  body:has(#alm-reef-hero)  .elementor-container,
  body:has(#alm-deep-hero)  .elementor-container,
  body:has(#alm-reg-hero)   .elementor-container { flex-wrap: wrap !important; }

  /* ── CRITICAL: Remove Elementor's generated padding-inline on .e-con/.e-con-inner ──
     Elementor sets padding-inline: 84px (or similar) via per-element CSS.
     On mobile this crushes content width. Scope to sub-page sections. ── */
  body:has(#alm-coast-hero) #alm-coast-hero .e-con,
  body:has(#alm-coast-hero) #alm-coast-hero .e-con-inner,
  body:has(#alm-coast-hero) #alm-coast-badge .e-con,
  body:has(#alm-coast-hero) #alm-coast-badge .e-con-inner,
  body:has(#alm-coast-hero) #alm-coast-how .e-con,
  body:has(#alm-coast-hero) #alm-coast-how .e-con-inner,
  body:has(#alm-coast-hero) #alm-coast-final-cta .e-con,
  body:has(#alm-coast-hero) #alm-coast-final-cta .e-con-inner,
  body:has(#alm-reef-hero)  #alm-reef-hero .e-con,
  body:has(#alm-reef-hero)  #alm-reef-hero .e-con-inner,
  body:has(#alm-reef-hero)  #alm-reef-badge .e-con,
  body:has(#alm-reef-hero)  #alm-reef-badge .e-con-inner,
  body:has(#alm-reef-hero)  #alm-reef-form .e-con,
  body:has(#alm-reef-hero)  #alm-reef-form .e-con-inner,
  body:has(#alm-deep-hero)  #alm-deep-hero .e-con,
  body:has(#alm-deep-hero)  #alm-deep-hero .e-con-inner,
  body:has(#alm-deep-hero)  #alm-deep-badge .e-con,
  body:has(#alm-deep-hero)  #alm-deep-badge .e-con-inner,
  body:has(#alm-deep-hero)  #alm-deep-exclusivity .e-con,
  body:has(#alm-deep-hero)  #alm-deep-exclusivity .e-con-inner,
  body:has(#alm-deep-hero)  #alm-deep-final-cta .e-con,
  body:has(#alm-deep-hero)  #alm-deep-final-cta .e-con-inner,
  body:has(#alm-reg-hero)   #alm-reg-hero .e-con,
  body:has(#alm-reg-hero)   #alm-reg-hero .e-con-inner,
  body:has(#alm-reg-hero)   #alm-reg-trust .e-con,
  body:has(#alm-reg-hero)   #alm-reg-trust .e-con-inner,
  body:has(#alm-reg-hero)   #alm-reg-embed .e-con,
  body:has(#alm-reg-hero)   #alm-reg-embed .e-con-inner,
  body:has(#alm-reg-hero)   #alm-reg-info .e-con,
  body:has(#alm-reg-hero)   #alm-reg-info .e-con-inner {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── HERO: full height, column stack ── */
  body:has(#alm-coast-hero) #alm-coast-hero,
  body:has(#alm-reef-hero)  #alm-reef-hero,
  body:has(#alm-deep-hero)  #alm-deep-hero,
  body:has(#alm-reg-hero)   #alm-reg-hero { min-height: 100svh !important; }

  body:has(#alm-coast-hero) #alm-coast-hero .elementor-col-100,
  body:has(#alm-reef-hero)  #alm-reef-hero  .elementor-col-100,
  body:has(#alm-deep-hero)  #alm-deep-hero  .elementor-col-100,
  body:has(#alm-reg-hero)   #alm-reg-hero   .elementor-col-100 { min-height: 100svh !important; }

  body:has(#alm-coast-hero) #alm-coast-hero .elementor-heading-title,
  body:has(#alm-reef-hero)  #alm-reef-hero  .elementor-heading-title,
  body:has(#alm-deep-hero)  #alm-deep-hero  .elementor-heading-title,
  body:has(#alm-reg-hero)   #alm-reg-hero   .elementor-heading-title {
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
    line-height: 1.1 !important;
  }
  /* Hero copy container: full width on mobile */
  body:has(#alm-coast-hero) #alm-coast-hero .e-con.e-parent:not(:has(.elementor-widget-image)),
  body:has(#alm-reef-hero)  #alm-reef-hero  .e-con.e-parent:not(:has(.elementor-widget-image)),
  body:has(#alm-deep-hero)  #alm-deep-hero  .e-con.e-parent:not(:has(.elementor-widget-image)),
  body:has(#alm-reg-hero)   #alm-reg-hero   .e-con.e-parent:not(:has(.elementor-widget-image)) {
    max-width: 100% !important;
    padding-bottom: 3rem !important;
  }
  /* Hero CTA buttons: full width */
  body:has(#alm-coast-hero) #alm-coast-hero .elementor-section .elementor-button,
  body:has(#alm-reef-hero)  #alm-reef-hero  .elementor-section .elementor-button,
  body:has(#alm-deep-hero)  #alm-deep-hero  .elementor-section .elementor-button,
  body:has(#alm-reg-hero)   #alm-reg-hero   .elementor-section .elementor-button {
    width: 100% !important; display: block !important;
    box-sizing: border-box !important; text-align: center !important;
  }
  /* Hero CTA cols: stack */
  body:has(#alm-coast-hero) #alm-coast-hero .elementor-section .elementor-col-50,
  body:has(#alm-reef-hero)  #alm-reef-hero  .elementor-section .elementor-col-50,
  body:has(#alm-deep-hero)  #alm-deep-hero  .elementor-section .elementor-col-50,
  body:has(#alm-reg-hero)   #alm-reg-hero   .elementor-section .elementor-col-50 {
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  }

  /* ── BADGE SECTIONS: stack ── */
  body:has(#alm-coast-hero) #alm-coast-badge .elementor-col-50,
  body:has(#alm-reef-hero)  #alm-reef-badge  .elementor-col-50,
  body:has(#alm-deep-hero)  #alm-deep-badge  .elementor-col-50 {
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  }
  body:has(#alm-coast-hero) #alm-coast-badge .elementor-col-50:first-child img,
  body:has(#alm-reef-hero)  #alm-reef-badge  .elementor-col-50:first-child img,
  body:has(#alm-deep-hero)  #alm-deep-badge  .elementor-col-50:first-child img {
    width: 140px !important; height: 140px !important;
  }
  body:has(#alm-coast-hero) #alm-coast-badge .elementor-heading-title,
  body:has(#alm-reef-hero)  #alm-reef-badge  .elementor-heading-title,
  body:has(#alm-deep-hero)  #alm-deep-badge  .elementor-heading-title {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
  }

  /* ── STEPS: single column ── */
  body:has(#alm-coast-hero) #alm-coast-how .elementor-col-33,
  body:has(#alm-reg-hero)   #alm-reg-info .elementor-col-33 {
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  }

  /* ── DEEP EXCLUSIVITY: single column ── */
  body:has(#alm-deep-hero) #alm-deep-exclusivity .elementor-col-50 {
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  }

  /* ── TRUST BAR: single column ── */
  body:has(#alm-reg-hero) #alm-reg-trust .elementor-col-25 {
    width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important;
  }

  /* ── REEF FORM: single column ── */
  body:has(#alm-reef-hero) #alm-reef-form .elementor-col-100 { width: 100% !important; }

  /* ── FINAL CTA: stack buttons ── */
  body:has(#alm-coast-hero) #alm-coast-final-cta .elementor-section .elementor-col-50,
  body:has(#alm-reef-hero)  #alm-reef-final-cta  .elementor-section .elementor-col-50,
  body:has(#alm-deep-hero)  #alm-deep-final-cta  .elementor-section .elementor-col-50 {
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  }
  body:has(#alm-coast-hero) #alm-coast-final-cta .elementor-button,
  body:has(#alm-reef-hero)  #alm-reef-final-cta  .elementor-button,
  body:has(#alm-deep-hero)  #alm-deep-final-cta  .elementor-button {
    width: 100% !important; display: block !important;
    text-align: center !important; box-sizing: border-box !important;
  }
  body:has(#alm-coast-hero) #alm-coast-final-cta .elementor-heading-title,
  body:has(#alm-reef-hero)  #alm-reef-final-cta  .elementor-heading-title,
  body:has(#alm-deep-hero)  #alm-deep-final-cta  .elementor-heading-title {
    font-size: clamp(1.75rem, 7vw, 2.4rem) !important;
  }

  /* ── Headings in content sections ── */
  body:has(#alm-coast-hero) #alm-coast-how .elementor-heading-title,
  body:has(#alm-reg-hero)   #alm-reg-info .elementor-heading-title,
  body:has(#alm-deep-hero)  #alm-deep-exclusivity .elementor-heading-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }

  /* ── Reef form: full-width fields on mobile ── */
  body:has(#alm-reef-hero) #alm-reef-form .elementor-field-group {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  body:has(#alm-reef-hero) #alm-reef-form .elementor-heading-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }

  /* SliceWP affiliate area: full width */
  body:has(#alm-reg-hero) .slicewp-affiliate-area {
    max-width: 100% !important;
  }
}

/* =========================================================
 * SMALL MOBILE  ≤ 390px
 * ========================================================= */
@media screen and (max-width: 390px) {

  body:has(#alm-coast-hero) #alm-coast-hero .elementor-heading-title,
  body:has(#alm-reef-hero)  #alm-reef-hero  .elementor-heading-title,
  body:has(#alm-deep-hero)  #alm-deep-hero  .elementor-heading-title,
  body:has(#alm-reg-hero)   #alm-reg-hero   .elementor-heading-title { font-size: 1.85rem !important; }

  body:has(#alm-reg-hero) #alm-reg-trust .elementor-col-25 {
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  }
}