/* ==========================================================================
   08 - RESPONSIVE BREAKPOINTS
   Tablet (1024px), Mobile landscape (768px), Mobile portrait (480px).
   Matches Elementor's default breakpoints.
   ========================================================================== */


/* ==========================================================================
   TABLET (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {

    /* Typography scale down */
    :root {
        --mhs-size-h1:   40px;
        --mhs-size-h2:   28px;
        --mhs-size-h3:   22px;
    }

    /* Header */
    .site-header,
    .ast-primary-header {
        padding: 0 20px;
    }

    /* Hero */
    .mhs-hero {
        min-height: 80vh;
        padding: 100px 40px 60px;
    }

    .mhs-hero-headline,
    .mhs-hero h1 {
        font-size: var(--mhs-size-h1);
    }

    /* Trust strip: 4 columns still, tighter */
    .mhs-trust-strip .elementor-container {
        gap: var(--mhs-space-sm);
    }

    .mhs-trust-item .elementor-counter-number-wrapper {
        font-size: 28px;
    }

    /* D.R.E.A.M.S. grid: 2x3 */
    .mhs-dreams-section .elementor-container .elementor-row,
    .dreams-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Products: 2 columns */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer: 2x2 grid */
    .mhs-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--mhs-space-md);
    }

    /* CTA band */
    .mhs-cta-band h2,
    .mhs-cta-band .elementor-heading-title {
        font-size: 28px;
    }

    /* Page banner */
    .mhs-page-banner h1,
    .mhs-page-banner .elementor-heading-title {
        font-size: 32px;
    }
}


/* ==========================================================================
   MOBILE (max-width: 767px)
   ========================================================================== */

@media (max-width: 767px) {

    /* Typography scale down further */
    :root {
        --mhs-size-h1:   32px;
        --mhs-size-h2:   24px;
        --mhs-size-h3:   20px;
        --mhs-size-h4:   18px;
        --mhs-size-body: 15px;
    }

    /* Header */
    .ast-primary-header .ast-builder-grid-row {
        height: 64px;
    }

    .custom-logo-link img {
        max-height: 44px;
    }

    /* Hide desktop nav on mobile (Astra handles this but belt and suspenders) */
    .main-header-menu {
        display: none;
    }

    /* Hero */
    .mhs-hero {
        min-height: 70vh;
        padding: 90px 20px 48px;
        text-align: center;
    }

    .mhs-hero-content {
        max-width: 100%;
    }

    .mhs-hero-headline,
    .mhs-hero h1 {
        font-size: var(--mhs-size-h1);
    }

    .mhs-hero-sub,
    .mhs-hero .elementor-text-editor p {
        font-size: 15px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* CTAs stack vertically */
    .mhs-hero-ctas,
    .mhs-hero .elementor-button-wrapper {
        flex-direction: column;
        width: 100%;
    }

    .mhs-btn-primary,
    .mhs-btn-secondary,
    .mhs-hero .elementor-button {
        width: 100%;
        text-align: center;
        display: block;
    }

    /* Trust strip: 2x2 grid */
    .mhs-trust-strip .elementor-container {
        flex-wrap: wrap;
    }

    .mhs-trust-item {
        flex: 0 0 50%;
        padding: 16px 12px;
    }

    .mhs-trust-item .elementor-counter-number-wrapper {
        font-size: 28px;
    }

    /* Section titles */
    .mhs-section-title,
    .mhs-section-title .elementor-heading-title {
        font-size: var(--mhs-size-h2);
        margin-bottom: 32px;
    }

    /* D.R.E.A.M.S. grid: single column */
    .mhs-dreams-section .elementor-container .elementor-row,
    .dreams-grid {
        grid-template-columns: 1fr;
    }

    .mhs-dream-card,
    .mhs-dreams-section .elementor-icon-box-wrapper {
        padding: 24px 20px;
    }

    /* Products: single column */
    .products-grid {
        grid-template-columns: 1fr;
    }

    .mhs-product-card {
        padding: 28px 20px;
    }

    /* CTA band */
    .mhs-cta-band {
        padding: 48px 20px;
    }

    .mhs-cta-band h2,
    .mhs-cta-band .elementor-heading-title {
        font-size: 24px;
    }

    .mhs-cta-band p,
    .mhs-cta-band .elementor-text-editor p {
        font-size: 15px;
    }

    /* Footer: single column stack */
    .mhs-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .site-footer,
    .mhs-footer {
        padding: 40px 0 0;
    }

    /* Page banners */
    .mhs-page-banner {
        padding: 60px 20px 48px;
    }

    .mhs-page-banner h1,
    .mhs-page-banner .elementor-heading-title {
        font-size: 26px;
    }

    /* Comparison tables: horizontal scroll */
    .mhs-comparison-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Download cards: stack */
    .mhs-download-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .mhs-download-card .download-btn {
        width: 100%;
        text-align: center;
    }

    /* Contact WhatsApp button full width */
    .mhs-whatsapp-btn {
        width: 100%;
        justify-content: center;
    }

    /* Members Portal button tap target */
    .mhs-portal-btn,
    .ast-custom-button a,
    .ast-builder-layout-element .ast-button {
        min-width: 48px;
        min-height: 48px;
        padding: 12px 20px !important;
    }

    /* Timeline */
    .mhs-timeline-item {
        padding-left: 28px;
    }

    /* Team grid */
    .mhs-team-card img {
        width: 120px;
        height: 120px;
    }
}


/* ==========================================================================
   SMALL MOBILE (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {

    :root {
        --mhs-size-h1:   28px;
        --mhs-size-h2:   22px;
    }

    .mhs-hero {
        min-height: 65vh;
        padding: 80px 16px 40px;
    }

    .mhs-hero-eyebrow,
    .mhs-hero .mhs-eyebrow {
        font-size: 11px;
        letter-spacing: 2px;
    }

    /* Section padding */
    .mhs-dreams-section,
    .mhs-products-section,
    .mhs-news-section {
        padding: 48px 16px;
    }

    /* Trust strip: stack vertical on very small screens */
    .mhs-trust-item {
        flex: 0 0 100%;
    }

    .mhs-trust-item .elementor-counter-number-wrapper {
        font-size: 24px;
    }

    /* SASRA strip */
    .mhs-sasra-strip p {
        font-size: 11px;
    }
}


/* ==========================================================================
   REDUCED MOTION
   Respect user preferences for reduced animations
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .mhs-dream-card:hover,
    .mhs-product-card:hover {
        transform: none;
    }
}