/* Homepage hero — mobile layout fix (2026-09-22, revised 2026-09-23).
   Sergio built the hero (post 23, top Elementor section) with Elementor's
   "Custom Positioning" — the heading and 3 CTA buttons are all
   position:absolute with fixed pixel offsets. Absolute + fixed-px offsets
   can't adapt to different phone widths on their own — that's the part
   Elementor's per-breakpoint controls can't fix, since there's no
   "position: static on mobile" control, only offset_x/offset_y_mobile
   (still fixed pixels, still assuming one exact container width).

   REVISION 2026-09-23 (important): the first version of this fix also
   hardcoded padding, min-height and the 3 spacers' heights — Sergio had
   ALREADY set his own padding_mobile (56px), background_image_mobile
   (his own "baner-za-sajt-fon" photo) and space_mobile on the spacers
   (135px/142px) directly in Elementor, and none of it was showing on
   the live page because this file's !important rules always won
   ("kada ja nesto izmenim ta izmena se ne menja"). Those values are
   removed below — Elementor's own generated CSS now drives padding,
   background and spacer height, same as any normal edit he makes.
   ONLY position/layout-flow (which Elementor has no mobile control
   for) and the 3 buttons' alignment (a genuine bug — each button had
   a different, inconsistent leftover alignment setting, not something
   Sergio was trying to art-direct) still come from this file.

   Targets Elementor's own per-element ID classes so nothing else on
   the page is touched. Desktop is completely unchanged (max-width
   query only). Also scoped to body:not(.elementor-editor-active) so
   none of this ever runs inside the Elementor editor's own preview —
   only on the real, published page. */
@media (max-width: 767px) {
    body:not(.elementor-editor-active) .elementor-element-654659f {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        overflow: hidden !important;
    }

    /* Elementor's "boxed" container splits into an inner wrapper that
       was still flex-direction:row and carrying its own 250px vertical
       padding independent of the section's own padding_mobile — same
       flow fix, one level deeper. Padding stays 0 here on purpose: the
       section's own padding_mobile (Sergio's, 56px) already provides
       the real spacing. */
    body:not(.elementor-editor-active) .elementor-element-654659f > .e-con-inner {
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        width: 100% !important;
    }

    /* Empty desktop-only layout columns (no children — Sergio's 25/50/25
       split for the image area) — hidden so they can't consume space
       now that the section is normal flow instead of absolute. */
    body:not(.elementor-editor-active) .elementor-element-7c78700,
    body:not(.elementor-editor-active) .elementor-element-11a3f08,
    body:not(.elementor-editor-active) .elementor-element-adc1707 {
        display: none !important;
    }

    body:not(.elementor-editor-active) .elementor-element-99ba706,
    body:not(.elementor-editor-active) .elementor-element-a34ffc3,
    body:not(.elementor-editor-active) .elementor-element-6c0396b,
    body:not(.elementor-editor-active) .elementor-element-756b2c6 {
        position: static !important;
        inset: auto !important;
        transform: none !important;
    }

    /* Heading first regardless of DOM order (Elementor's own element
       order here is button/button/button/heading, invisible on desktop
       since absolute position ignores DOM order — it matters now). */
    body:not(.elementor-editor-active) .elementor-element-99ba706 {
        order: -1;
        width: 100% !important;
        margin: 0 0 4px !important;
        text-align: center !important;
    }

    /* The one real bug, not a style choice: confirmed live these three
       buttons each carry a DIFFERENT leftover alignment setting from
       the desktop absolute-position build ("Buy a Car!" has a
       text-align, "Sell my car!" has its own _flex_align_self_mobile,
       "Flip my car!" has neither) — that's why they lined up crooked
       rather than as a clean stack. Forcing the same align-self +
       width on all three just makes them consistent with each other. */
    body:not(.elementor-editor-active) .elementor-element-a34ffc3,
    body:not(.elementor-editor-active) .elementor-element-6c0396b,
    body:not(.elementor-editor-active) .elementor-element-756b2c6 {
        align-self: center !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }
    body:not(.elementor-editor-active) .elementor-element-a34ffc3 .elementor-button,
    body:not(.elementor-editor-active) .elementor-element-6c0396b .elementor-button,
    body:not(.elementor-editor-active) .elementor-element-756b2c6 .elementor-button {
        width: 100% !important;
        justify-content: center !important;
    }
}