/* ==========================================================================
   Mobile responsiveness overrides for the public landing page.
   Loaded after style.css in layouts/app.blade.php so it wins the cascade.
   Source partials live in public/scss/ — keep in sync if recompiling.
   ========================================================================== */

/* Guard against horizontal overflow on small screens */
@media (max-width: 991.98px) {
    html, body { overflow-x: hidden; }
}

/* --------------------------------------------------------------------------
   HERO
   The hero is locked to height: 100vh / min-height: 760px on desktop. On
   mobile the stacked intro + registration form is taller than that, so the
   content overflows the fixed-height row and overlaps the next section.
   Let it flow naturally and use vertical padding instead.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .hero,
    .hero > .container > .row {
        height: auto;
        min-height: 0;
    }

    .hero {
        padding-top: 100px;
        padding-bottom: 50px;
    }

    /* keep the parallax background covering the whole (now taller) hero */
    .hero.overlay { background-position: center center; }

    .hero .intro {
        max-width: 100%;
        text-align: center;
        margin-bottom: 32px;
    }

    .hero .intro p { margin-left: auto; margin-right: auto; }
}

/* --------------------------------------------------------------------------
   REGISTRATION FORM (inside hero)
   Tighten the padding so fields aren't cramped on narrow screens.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .form-register,
    .form-login,
    .form-block {
        padding: 24px 20px;
    }

    .hero .intro h1 { font-size: 28px; }
}

/* The Register button is already btn-block; make all hero CTAs full-width
   and comfortably tappable on phones. */
@media (max-width: 767.98px) {
    .hero .intro .btn { width: 100%; max-width: 320px; }
    .form-register .input-group { flex-wrap: nowrap; }
}

/* --------------------------------------------------------------------------
   SECTION SPACING
   7rem top/bottom is far too tall on phones.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .section, .site-section { padding: 4rem 0; }
}
@media (max-width: 575.98px) {
    .section, .site-section { padding: 3rem 0; }
}

/* --------------------------------------------------------------------------
   INTRO / SERVICE BLOCKS
   Give stacked service cards breathing room.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .service-block { padding: 24px; }
    .intro .row.mb-5 { margin-bottom: 2rem !important; }
}

/* --------------------------------------------------------------------------
   OUR PROCESS (services)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .services .service { margin-bottom: 0.5rem; }
}

/* --------------------------------------------------------------------------
   CUSTOMERS / ABOUT
   Remove the desktop negative overlap that looks broken when stacked, and
   center the copy + counters under the image.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .overlap-img,
    .form-overlap { margin-top: 0; }

    .section .col-lg-4.mr-auto.ml-auto { text-align: center; }
    .section .col-lg-4.mr-auto.ml-auto .count-numbers { display: inline-block; text-align: left; }
}

/* --------------------------------------------------------------------------
   CTA SECTION
   Center the heading/copy above the full-width button on mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .cta-section .cta { text-align: center; }
    .cta-section .col-md-6:first-child { margin-bottom: 1.25rem; }
}

/* --------------------------------------------------------------------------
   FOOTER
   Space the stacked widget columns.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .site-footer .col-lg-4,
    .site-footer .col-lg-6 { margin-bottom: 1.5rem; }
    .site-footer { text-align: center; }
    .site-footer .social.list-unstyled { display: inline-flex; gap: 6px; }
}

/* --------------------------------------------------------------------------
   MOBILE OFF-CANVAS MENU
   The off-canvas panel is 300px wide; on very small phones cap it to the
   viewport so it never overflows.
   -------------------------------------------------------------------------- */
@media (max-width: 320px) {
    .site-mobile-menu { width: 100%; }
}