/* ==========================================================================
   HospiDirect Responsive — v4.0
   Breakpoints: 1024px (tablet landscape), 768px (tablet), 480px (mobile)

   This file provides:
     1. Global responsive rules (navbar, footer, typography, grid utilities)
     2. Homepage section responsive rules (hero, about, products, why-us,
        counters, trusted-by, contact)
     3. Supplemental fixes (toast, container padding)

   Page-specific responsive rules live in their own CSS files:
     - product.css   (shop grid, single product, cards, tier pricing)
     - cart.css       (cart layout, items, totals)
     - checkout.css   (checkout grid, fields, summary, payment)
     - account.css    (sidebar, nav, tables, dashboard)
     - auth.css       (login card, registration layout)
     - policies.css   (policy cards, 404, shipping tables)

   DO NOT duplicate those rules here — responsive.css loads LAST in the
   cascade and would override page-specific breakpoints.
   ========================================================================== */


/* ==========================================================================
   Section 1: Global Responsive
   Navbar, footer, typography scale, grid utilities, section padding, body
   ========================================================================== */

/* === Tablet Landscape (max-width: 1024px) === */
@media (max-width: 1024px) {

    /* --- Navbar --- */
    .hd-navbar {
        padding: 0.5rem 0.75rem 0.5rem 1rem;
        gap: 1rem;
    }

    .hd-navbar-phone {
        display: none;
    }

    .hd-nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 0.75rem);
        left: 1rem;
        right: 1rem;
        background: rgba(255, 255, 255, 0.95);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: var(--hd-radius-lg);
        box-shadow: var(--hd-shadow-layered);
        padding: 1.5rem;
        flex-direction: column;
        gap: 0;
    }

    .hd-nav-links.active {
        display: flex;
    }

    .hd-nav-link {
        padding: 0.75rem 0;
        font-size: 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        width: 100%;
    }

    .hd-nav-link:last-child {
        border-bottom: none;
    }

    .hd-nav-link::after {
        display: none;
    }

    .hd-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Footer --- */
    .hd-footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .hd-footer-company {
        grid-column: span 2;
    }

    /* --- Typography --- */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }

    /* --- Grid utilities --- */
    .hd-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .hd-grid-4 { grid-template-columns: repeat(2, 1fr); }
}


/* === Tablet Portrait (max-width: 768px) === */
@media (max-width: 768px) {

    /* --- Body --- */
    body {
        padding-top: 88px;
    }

    /* --- Navbar --- */
    .hd-navbar-wrapper {
        top: 12px;
        padding: 0 0.5rem;
    }

    .hd-navbar-logo-img {
        height: 2rem;
    }

    .hd-navbar-login-btn span:not(.material-symbols-outlined) {
        display: none;
    }

    .hd-navbar-welcome-text {
        display: none;
    }

    .hd-navbar-welcome {
        padding: 0.5rem;
    }

    .hd-nav-links {
        left: 0.5rem;
        right: 0.5rem;
    }

    /* --- Footer --- */
    .hd-footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hd-footer-company {
        grid-column: span 1;
    }

    .hd-footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    /* --- Typography --- */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    /* --- Grid utilities --- */
    .hd-grid-2,
    .hd-grid-3,
    .hd-grid-4 {
        grid-template-columns: 1fr;
    }

    /* --- Section padding --- */
    .hd-section {
        padding: 2.5rem 0;
    }

    /* --- Body scroll lock --- */
    body.hd-menu-open {
        overflow: hidden;
    }
}


/* === Mobile (max-width: 480px) === */
@media (max-width: 480px) {

    /* --- Body --- */
    body {
        padding-top: 80px;
    }

    /* --- Navbar --- */
    .hd-navbar-wrapper {
        top: 8px;
    }

    .hd-navbar {
        padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    }

    /* --- Typography --- */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }

    /* --- Section padding --- */
    .hd-section {
        padding: 2rem 0;
    }

    .hd-section-title {
        margin-bottom: 1.5rem;
    }

    /* --- Buttons --- */
    .hd-btn {
        padding: 0.625rem 1.5rem;
        font-size: 0.8125rem;
    }
}


/* ==========================================================================
   Section 2: Homepage — Hero
   Scales title from 5rem desktop to 2rem mobile, stacks CTAs, hides
   scroll indicator on tablet.
   ========================================================================== */

@media (max-width: 1024px) {
    .hd-hero-title {
        font-size: 3.5rem;
    }

    .hd-hero-subtitle {
        font-size: 1.125rem;
    }
}

@media (max-width: 768px) {
    .hd-hero-title {
        font-size: 2.5rem;
    }

    .hd-hero-subtitle {
        font-size: 1rem;
        max-width: 90%;
    }

    .hd-hero-scroll-indicator {
        display: none;
    }

    .hd-hero-content {
        margin-top: 3rem;
    }
}

@media (max-width: 480px) {
    .hd-hero-title {
        font-size: 2rem;
    }

    .hd-hero-badge {
        font-size: 0.625rem;
        padding: 0.375rem 0.75rem;
    }

    .hd-hero-ctas {
        flex-direction: column;
        width: 100%;
    }

    .hd-hero-cta-primary,
    .hd-hero-cta-outline {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   Section 3: Homepage — About
   Stacks 2-col layout to single column, collapses stats and CTAs.
   ========================================================================== */

@media (max-width: 1024px) {
    .hd-about-grid {
        flex-direction: column;
        gap: 2.5rem;
    }

    .hd-about-heading {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .hd-about-section {
        padding: 3rem 0;
    }

    .hd-about-stats {
        flex-direction: column;
    }

    .hd-about-ctas {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .hd-about-heading {
        font-size: 1.75rem;
    }

    .hd-about-image-staggered {
        transform: none;
    }
}


/* ==========================================================================
   Section 4: Homepage — Products
   Collapses 2-col product grid to 1-col on tablet, reduces padding.
   ========================================================================== */

@media (max-width: 768px) {
    .hd-products-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hd-products-section {
        padding: 3rem 0;
    }

    .hd-products-heading {
        font-size: 2rem;
    }

    .hd-products-header {
        margin-bottom: 2rem;
    }
}

@media (max-width: 480px) {
    .hd-products-heading {
        font-size: 1.75rem;
    }

    .hd-products-section .hd-product-card {
        padding: 1rem;
    }
}


/* ==========================================================================
   Section 5: Homepage — Why Choose Us
   Stacks 2-col features + how-it-works to single column.
   ========================================================================== */

@media (max-width: 1024px) {
    .hd-why-us-grid {
        flex-direction: column;
        gap: 2.5rem;
    }

    .hd-why-us-heading {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .hd-why-us-section {
        padding: 3rem 0;
    }

    .hd-how-it-works-card {
        padding: 1.5rem;
    }
}


/* ==========================================================================
   Section 6: Homepage — Counters
   4-col grid to 2-col (768px) to 1-col (480px), adjusts borders.
   ========================================================================== */

@media (max-width: 768px) {
    .hd-counters-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hd-counter-item + .hd-counter-item {
        border-left: none;
    }

    .hd-counter-item:nth-child(2n+1) {
        border-right: 1px solid rgba(197, 157, 95, 0.2);
    }

    .hd-counter-number,
    .hd-counter-suffix {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .hd-counters-grid {
        grid-template-columns: 1fr;
    }

    .hd-counter-item:nth-child(2n+1) {
        border-right: none;
    }

    .hd-counter-item + .hd-counter-item {
        border-top: 1px solid rgba(197, 157, 95, 0.2);
    }
}


/* ==========================================================================
   Section 7: Homepage — Trusted By
   4-col grid to 2-col (1024px) to 1-col (480px), adjusts card height
   and CTA banner padding.
   ========================================================================== */

@media (max-width: 1024px) {
    .hd-trusted-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .hd-trusted-grid {
        grid-template-columns: 1fr;
    }

    .hd-trusted-card {
        height: 14rem;
    }

    .hd-cta-banner {
        padding: 2.5rem 1.5rem;
        border-radius: 1.5rem;
    }

    .hd-cta-banner-heading {
        font-size: 1.75rem;
    }
}


/* ==========================================================================
   Section 8: Homepage — Contact
   Stacks dark/light panels vertically, collapses form row grid.
   ========================================================================== */

@media (max-width: 768px) {
    .hd-contact-card {
        flex-direction: column;
    }

    .hd-contact-info-panel,
    .hd-contact-form-panel {
        padding: 2rem;
    }

    .hd-contact-form-row {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   Section 9: Supplemental Fixes
   Toast overflow on small screens, homepage container padding.
   ========================================================================== */

@media (max-width: 768px) {
    .hd-hero-content {
        padding: 0 1.5rem;
    }
}

@media (max-width: 480px) {
    .woocommerce-message {
        right: 1rem;
        max-width: calc(100vw - 2rem);
    }
}