/* ==========================================================================
   Akasha Magia — responsive fixes (mobile polish)
   Loaded site-wide; all rules are scoped to mobile breakpoints.
   Added 2026-07-19 to address the RESPONSIVE_AKASHA report.
   ========================================================================== */

/* --- H2: floating "Start a Conversation" CTA on mobile ------------------- */
.akm-float-cta { display: none; }

@media (max-width: 767px) {
  .akm-float-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    z-index: 9990;                 /* under modals, over content */
    background: var(--e-global-color-accent, #9c7c8c);
    color: #fff !important;
    font-family: var(--e-global-typography-accent-font-family, inherit), sans-serif;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 1;
    padding: 13px 26px;
    border-radius: 100px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .akm-float-cta:hover,
  .akm-float-cta:focus { color: #fff !important; opacity: .94; }
}

/* --- H1: make the header logo tappable on mobile -------------------------- */
/* The mobile nav container is pulled up (-80px, z-index:3) and overlays the
   logo, swallowing taps so the logo no longer links home. Lift the logo above
   it. The hamburger toggle sits on the right, so this doesn't block it. */
@media (max-width: 767px) {
  .elementor-704 .elementor-element.elementor-element-98d9d31 {
    position: relative;
    z-index: 10;
  }
}

/* --- CONTACT page (3217) -------------------------------------------------- */
@media (max-width: 767px) {
  /* CT1: hero image lives as a background on a container hidden on mobile.
     Reveal it and give it height so the background renders. */
  .elementor-3217 .elementor-element.elementor-element-120d99e {
    display: flex !important;
    min-height: 320px;
    background-size: cover;
    background-position: center center;
  }
  /* CT2: second image has a fixed 500px height -> vertical stretch on narrow
     screens. Let it scale to its natural aspect ratio. */
  .elementor-3217 .elementor-element.elementor-element-c467616 img {
    height: auto !important;
  }
}

/* --- ABOUT page (1056) ---------------------------------------------------- */
@media (max-width: 767px) {
  /* AB1: the second photo is hidden on mobile; reveal it. */
  .elementor-1056 .elementor-element.elementor-element-b0813bf {
    display: block !important;
  }
}

/* --- INNER INTEGRATION (2237) + SACRED MEDICINE (2239) heroes ------------- */
/* II2 / SM1: the hero has a 65% gradient overlay ONLY on mobile (desktop = 0),
   which washes the photo out ("filtro blanco"). Remove it so the image is
   clean like Shakti Awakening. Both pages reuse hero element 4bbafb9. */
@media (max-width: 767px) {
  .elementor-2237 .elementor-element-4bbafb9 > .elementor-background-overlay,
  .elementor-2239 .elementor-element-4bbafb9 > .elementor-background-overlay {
    opacity: 0 !important;
  }
}

/* --- THE CIRCLE page (1143) ---------------------------------------------- */
@media (max-width: 767px) {
  /* TC2: the "The Circle" text card has margin-top:-150px on mobile, pulling it
     up over the first image. Drop the negative pull so the card sits below a
     clean image. */
  .elementor-1143 .elementor-element.elementor-element-2bdcbaf {
    margin-top: 0 !important;
  }
}

/* --- TC3 + floating-button housekeeping (all pages, mobile) --------------- */
/* The scroll-to-top button (64x64, bottom-right) floated over images and sat
   right where the new CTA is. Lift it above the CTA and shrink it a touch so
   it's separated and unobtrusive. */
@media (max-width: 767px) {
  #wpfront-scroll-top-container {
    bottom: 88px !important;
    right: 14px !important;
  }
}

/* --- "This space tends to resonate…" list --------------------------------- */
/* SACRED MEDICINE (2239) + INNER INTEGRATION (2237) + SHAKTI (1498). The
   section was cloned across the three pages, so they share the same element ids.
   The list widget (27c67dd) carries desktop-only sizing that Elementor never
   overrides on mobile: a percentage width (88.888%, or 40.984% on 1498) PLUS a
   left offset on the widget container (130px margin on 2239, 130px padding on
   2237, 24px margin on 1498). On a 390px viewport that leaves the text 110-160px
   wide, so every bullet wraps onto 2-4 lines and the block sits off-centre.
   Shrink the widget to its content's natural width and let the parent
   container's align-items:center centre it in the available space. */
@media (max-width: 767px) {
  .elementor-2239 .elementor-element.elementor-element-27c67dd,
  .elementor-2237 .elementor-element.elementor-element-27c67dd,
  .elementor-1498 .elementor-element.elementor-element-27c67dd {
    width: max-content !important;
    max-width: 100% !important;
    --container-widget-width: max-content !important;
  }
  .elementor-2239 .elementor-element.elementor-element-27c67dd > .elementor-widget-container,
  .elementor-2237 .elementor-element.elementor-element-27c67dd > .elementor-widget-container,
  .elementor-1498 .elementor-element.elementor-element-27c67dd > .elementor-widget-container {
    margin: 0 0 -10px 0 !important;
    padding: 0 !important;
  }
}

/* --- SHAKTI AWAKENING (1498) --------------------------------------------- */
@media (max-width: 767px) {
  /* SK3: the "If this space resonates" row stays side-by-side on mobile
     (flex row-reverse, no mobile stacking) and its photo column is hidden,
     leaving a misaligned empty strip. Stack it and reveal the photo. */
  .elementor-1498 .elementor-element.elementor-element-b992bae {
    flex-direction: column !important;
  }
  .elementor-1498 .elementor-element.elementor-element-89b672e {
    display: flex !important;
    width: 100% !important;
  }
  .elementor-1498 .elementor-element.elementor-element-34541eb,
  .elementor-1498 .elementor-element.elementor-element-a98d8d6,
  .elementor-1498 .elementor-element.elementor-element-80285df {
    width: 100% !important;
  }
  /* The "If this space resonates with you, you are welcome." title sits on top
     of the pale card's colour edge instead of inside it. Two mobile-only causes
     compound: the card (34541eb) has --padding-top:0 where desktop has 50px,
     and the heading's widget container is pulled up by margin-top:-20px. On top
     of that the title's line-height is 1em, so its glyph ink (37px at a 28px
     font) overflows the line box by ~5px. Net result: the title's ink starts
     15px ABOVE the card edge, where desktop clears it by 35px.
     Give the card real top padding and drop the negative pull, so the title
     clears the edge by the same 35px desktop uses. */
  .elementor-1498 .elementor-element.elementor-element-34541eb {
    --padding-top: 30px;
    padding-top: 30px;
  }
  .elementor-1498 .elementor-element.elementor-element-9af0edf > .elementor-widget-container {
    margin-top: 0 !important;
  }
  /* SK3 buttons carry desktop negative margins (right:-47% / -13%), 50% custom
     widths and offsets that shove them off-screen on mobile. Full reset. */
  .elementor-1498 .elementor-element.elementor-element-7eb23e1,
  .elementor-1498 .elementor-element.elementor-element-4094905 {
    width: 100% !important;
  }
  .elementor-1498 .elementor-element.elementor-element-2701d25,
  .elementor-1498 .elementor-element.elementor-element-9fb0567 {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 auto 12px auto !important;
    width: 100% !important;
    max-width: 100% !important;
    --container-widget-width: 100% !important;
    align-self: center !important;
    --align-self: center !important;
  }
  /* The offsets that actually break the layout live on the inner
     .elementor-widget-container, not on the widget: Elementor emits
     `margin: 0% -47% 0% 22%` (2701d25) and `margin: 0% -13% 0% -8%` (9fb0567)
     with no mobile override, so at 390px the REQUEST button is pushed to
     x=102.6 and runs off the right edge, while SEND A PRIVATE MESSAGE is
     dragged to x=3.6 off the left. Zero the margins so both sit in their
     already-centred widget box. */
  .elementor-1498 .elementor-element.elementor-element-2701d25 > .elementor-widget-container,
  .elementor-1498 .elementor-element.elementor-element-9fb0567 > .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .elementor-1498 .elementor-element.elementor-element-2701d25 .elementor-button,
  .elementor-1498 .elementor-element.elementor-element-9fb0567 .elementor-button {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    white-space: normal !important;
    text-align: center !important;
  }
  /* Helper text under the SEND button. */
  .elementor-1498 .elementor-element.elementor-element-5ff69df {
    margin-top: 8px !important;
    text-align: center !important;
  }
  /* "Places are confirmed through a short connection call." is an Elementor
     atomic element — class .e-cae051e-157074d, NOT .elementor-element-cae051e,
     which is why the selector above never matched it.
     Its `line-height: 1.4px` unit typo (which collapsed the box to 2.8px and
     made the two wrapped lines render on top of each other) was corrected at
     source in _elementor_data on 2026-07-22, so no line-height override is
     needed here. Only the mobile centring below is ours. */
  .elementor-1498 .e-cae051e-157074d {
    text-align: center !important;
    margin: 8px 0 0 0 !important;
  }
}