/*
 * ============================================
 * NATTYPETS - GLOBAL RESPONSIVE STYLES
 * ============================================
 *
 * Breakpoints:
 * - Desktop:    > 1024px (default styles)
 * - Tablet-lg:  <= 1024px
 * - Tablet:     <= 768px
 * - Mobile:     <= 480px
 * - Mobile-sm:  <= 375px
 *
 * Usage in other files:
 * @media (max-width: 1024px) { } - Tablet landscape, small laptops
 * @media (max-width: 768px)  { } - Tablet portrait
 * @media (max-width: 480px)  { } - Mobile
 * @media (max-width: 375px)  { } - Small mobile (iPhone SE)
 * ============================================
 */

/* ===== TABLET LANDSCAPE (1024px) ===== */
@media (max-width: 1024px) {
    :root {
        --fs-5xl: 3.5rem;
        --fs-6xl: 4rem;
        --space-lg: 2.5rem;
    }

    .np-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ===== TABLET PORTRAIT (768px) ===== */
@media (max-width: 768px) {
    :root {
        --fs-3xl: 2rem;
        --fs-5xl: 2.5rem;
        --fs-6xl: 3rem;
        --space-lg: 2rem;
        --space-md: 1rem;
    }

    .np-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Hide desktop navigation, show mobile menu */
    .header-desktop .header-nav {
        display: none;
    }

    .header-desktop .header-auth {
        display: none;
    }

    /* Footer responsive */
    .np-footer-inner {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .np-footer-left,
    .np-footer-right {
        width: 100%;
    }

    .np-footer-subscribe {
        flex-direction: column;
        gap: 12px;
    }

    .np-footer-btn {
        width: 100%;
    }
}

/* ===== MOBILE (480px) ===== */
@media (max-width: 480px) {
    :root {
        --fs-xl: 1.25rem;
        --fs-xxl: 1.5rem;
        --fs-3xl: 1.75rem;
        --fs-5xl: 2rem;
        --fs-6xl: 2.5rem;
        --space-lg: 1.5rem;
        --space-md: 0.75rem;
    }

    .np-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Modal responsive */
    .np-modal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .np-modal-content {
        padding: 20px;
    }

    /* Footer social icons */
    .np-footer-social {
        flex-wrap: wrap;
        justify-content: center;
    }

    .np-social-icon {
        width: 36px;
        height: 36px;
    }
}

/* ===== SMALL MOBILE (375px) ===== */
@media (max-width: 375px) {
    :root {
        --fs-lg: 1rem;
        --fs-xl: 1.125rem;
        --fs-xxl: 1.25rem;
        --fs-3xl: 1.5rem;
    }

    .np-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Buttons full width on very small screens */
    .np-btn {
        width: 100%;
        text-align: center;
    }
}

/* ===== UTILITY CLASSES FOR RESPONSIVE ===== */

/* Hide on mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 481px) {
    .mobile-only {
        display: none !important;
    }
}

/* Show only on tablet */
@media (max-width: 480px), (min-width: 769px) {
    .tablet-only {
        display: none !important;
    }
}

/* Show only on desktop */
@media (max-width: 1024px) {
    .desktop-only {
        display: none !important;
    }
}