/* ============================================
   CloudBeem Responsive Breakpoints
   ============================================ */

/* --- Tablet and below (max 1024px) --- */
@media (max-width: 1024px) {
    .nav__links {
        display: none;
    }

    .nav__toggle {
        display: flex;
    }

    .nav__actions .btn {
        display: none;
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }

    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero__title {
        font-size: var(--font-size-4xl);
    }

    .pricing-card--featured {
        transform: none;
    }

    .pricing-card--featured:hover {
        transform: translateY(-4px);
    }
}

/* --- Mobile (max 768px) --- */
@media (max-width: 768px) {
    :root {
        --font-size-5xl: 2.25rem;
        --font-size-4xl: 1.875rem;
        --font-size-3xl: 1.5rem;
    }

    .section {
        padding: var(--space-12) 0;
    }

    .section--lg {
        padding: var(--space-16) 0;
    }

    .container {
        padding: 0 var(--space-4);
    }

    .hero {
        padding: var(--space-12) 0;
    }

    .hero--large {
        padding: var(--space-16) 0;
    }

    .hero__title {
        font-size: var(--font-size-3xl);
    }

    .hero__subtitle {
        font-size: var(--font-size-base);
    }

    /* Domain search stacks on mobile */
    .domain-search {
        flex-direction: column;
        border-radius: var(--radius-lg);
    }

    .domain-search__input {
        padding: var(--space-4);
        font-size: var(--font-size-base);
    }

    .domain-search__btn {
        border-radius: var(--radius);
        margin: var(--space-2);
        justify-content: center;
    }

    /* Grids become single column */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }

    /* Footer stacks */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .footer__bottom {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }

    /* TLD strip scrolls horizontally */
    .tld-strip {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding: var(--space-4) 0;
        gap: var(--space-3);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tld-strip::-webkit-scrollbar {
        display: none;
    }

    .tld-strip__item {
        flex-shrink: 0;
        min-width: 90px;
    }

    /* Domain item responsive */
    .domain-item {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .domain-item__right {
        margin-left: calc(16px + var(--space-3));
        width: 100%;
    }

    .domain-cart-bar {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }

    /* Filter bar stacks */
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-bar__search {
        min-width: auto;
    }

    .filter-bar__buttons {
        display: flex;
        gap: var(--space-2);
        overflow-x: auto;
        padding-bottom: var(--space-2);
    }

    /* Captcha stacks */
    .captcha-field {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Section header */
    .section-header {
        margin-bottom: var(--space-8);
    }

    /* Top bar hidden on mobile */
    .top-bar {
        display: none;
    }

    /* Button full width on mobile */
    .btn--mobile-block {
        width: 100%;
    }

    /* Table responsive */
    .tld-table-wrapper {
        margin: 0 calc(-1 * var(--space-4));
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

/* --- Small mobile (max 480px) --- */
@media (max-width: 480px) {
    .hero__title {
        font-size: var(--font-size-2xl);
    }

    .pricing-card {
        padding: var(--space-6);
    }

    .pricing-card__amount {
        font-size: var(--font-size-4xl);
    }

    .nav__inner {
        height: 60px;
    }

    .nav__logo img {
        height: 28px;
    }
}

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

/* --- Large Desktop (min 1280px) --- */
@media (min-width: 1280px) {
    .container {
        padding: 0 var(--space-8);
    }
}

/* --- Print --- */
@media print {
    .nav, .footer, .top-bar, .mobile-nav,
    .domain-search, .btn, .captcha-field {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    .section {
        padding: 1rem 0;
    }
}