/* ==========================================================================
   Breakpoint-specific adjustments. Bootstrap's grid/utilities handle most
   responsive behavior; this file covers the custom-component exceptions.
   ========================================================================== */

/* Prevent any accidental horizontal scroll on narrow phones. */
html {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    max-width: 100%;
}

@media (max-width: 991.98px) {
    /* Mobile gets its own, slightly quicker motion pacing rather than a
       scaled-down copy of the desktop timing - shorter reveal/stagger
       transitions and no idle floating chips (see .float-subtle below). */
    :root {
        --hws-transition-slow: 420ms var(--hws-ease);
    }

    .hws-navbar .navbar-nav {
        padding-top: var(--hws-space-3);
    }

    .hws-navbar .dropdown-menu {
        box-shadow: none;
        border: none;
        padding-left: var(--hws-space-3);
    }

    .hws-navbar .hws-services-menu { min-width: 0; padding-left: 0; }
    .hws-service-menu-item { padding: 0.75rem 0; }

    .hws-hero {
        text-align: center;
        padding-top: var(--hws-space-6);
    }

    .hws-hero-visual {
        margin-top: var(--hws-space-5);
        transform: none !important;
    }

    .hws-process-track { grid-template-columns: repeat(2, 1fr); row-gap: var(--hws-space-5); }
    .hws-process-track .hws-step:nth-child(2)::after { display: none; }

    /* Keep mobile fast and uncluttered: no mouse-parallax, no floating
       chips (already display:none by default, see components.css), and
       smaller/lighter decorative blobs behind sections. */
    .hws-bg-blob {
        width: 260px;
        height: 260px;
        filter: blur(60px);
        opacity: 0.1;
    }

    .float-subtle {
        animation: none;
    }
}

@media (max-width: 767.98px) {
    .hws-workflow-step::after { display: none; }
    .hws-product-gallery { grid-template-columns: 1fr; }
    .hws-product-gallery img:first-child { grid-row: auto; }
    .hws-case-highlights { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .hws-cta {
        padding: var(--hws-space-6) var(--hws-space-4);
    }

    .hws-step,
    .hws-timeline {
        padding-left: var(--hws-space-4);
    }

    .hws-step-number {
        left: -17px;
        width: 34px;
        height: 34px;
    }

    /* Comparison tables become stacked, labeled cards below tablet width
       instead of shrinking to unreadable text (spec section 40). */
    .hws-compare-table thead {
        display: none;
    }

    .hws-compare-table,
    .hws-compare-table tbody,
    .hws-compare-table tr,
    .hws-compare-table td {
        display: block;
        width: 100%;
    }

    .hws-compare-table tr {
        border: 1px solid var(--hws-border);
        border-radius: var(--hws-radius-md);
        margin-bottom: var(--hws-space-3);
        padding: var(--hws-space-3);
    }

    .hws-compare-table td {
        border: none;
        padding: 0.35rem 0;
        display: flex;
        justify-content: space-between;
        gap: var(--hws-space-3);
    }

    .hws-compare-table td::before {
        content: attr(data-label);
        font-weight: var(--hws-weight-semibold);
        color: var(--hws-text-muted);
    }
}

@media (min-width: 768px) {
    /* On tablet and up, wide comparison tables scroll horizontally within
       their own container rather than shrinking the page. */
    .hws-compare-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .hws-compare-table {
        min-width: 640px;
    }
}

@media (max-width: 575.98px) {
    :root {
        --hws-navbar-height: 64px;
    }

    .hws-card,
    .hws-plan-card {
        padding: var(--hws-space-4);
    }

    .btn-lg {
        width: 100%;
    }

    .hws-hero .d-flex.gap-3 {
        flex-direction: column;
    }

    .hws-hero .d-flex.gap-3 .btn {
        width: 100%;
    }

    .hws-about-timeline-card, .hws-about-product { padding: var(--hws-space-4); }
    .hws-about-product { align-items: flex-start; flex-direction: column; }
    .hws-process-track { grid-template-columns: 1fr; gap: var(--hws-space-4); }
    .hws-process-track .hws-step { padding-right: 0; }
    .hws-process-track .hws-step::after { display: none; }
}