/**
 * Responsive — All Breakpoints
 * @copyright     cliqable.com
 * @project       DJCliq
 * @version       0.1.1
 * @author        Strange Shapes Studio
 * @author_url    https://www.strangeshapesstudio.com
 * @developer     Strange Shapes Studio
 * @developer_url info@strangeshapes.com
 * @file          css/responsive.css
 */

/* ── 1024px — Tablet landscape ───────────────────────────── */
@media (max-width: 1024px) {
    .why-grid,
    .app-grid,
    .about-grid       { grid-template-columns: 1fr; gap: 3rem; }
    .just-ask-inner   { grid-template-columns: 1fr; gap: 3rem; }
    .footer-grid      { grid-template-columns: 1fr 1fr; }
    .app-mockups      { height: 360px; }
    .phone-mockup     { width: 180px; }
}

/* ── 768px — Tablet portrait / large mobile ──────────────── */
@media (max-width: 768px) {
    :root { --header-h: 64px; }

    .section-pad  { padding: 64px 0; }
    .container    { padding: 0 1.25rem; }

    /* Mobile nav */
    .nav-toggle { display: flex; }
    .site-nav {
        position: fixed;
        top: var(--header-h); left: 0; right: 0;
        background: rgba(8,8,8,0.97);
        backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: stretch;
        padding: 1.5rem;
        gap: 0;
        border-bottom: 1px solid var(--border);
        transform: translateY(-110%);
        transition: transform 0.3s ease;
        z-index: 999;
    }
    .site-nav.open           { transform: translateY(0); }
    .site-nav ul             { flex-direction: column; align-items: stretch; }
    .site-nav ul li a        { display: block; padding: 0.85rem 1rem; border-radius: var(--radius); }
    .nav-cta                 { margin: 1rem 0 0; text-align: center; justify-content: center; }

    /* Hero */
    .hero-title-main         { font-size: clamp(2.4rem, 8vw, 4rem); }
    .search-wrap             { flex-wrap: wrap; border-radius: var(--radius-lg); }
    .search-btn              { width: 100%; }

    /* Stats */
    .stats-inner             { gap: 2rem; }
    .stat-divider            { display: none; }

    /* Steps */
    .steps-grid              { grid-template-columns: 1fr; }

    /* Footer */
    .footer-grid             { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer-brand            { grid-column: 1 / -1; }
    .footer-bottom           { flex-direction: column; text-align: center; }

    /* Forms */
    .form-row                { grid-template-columns: 1fr; }

    /* Directory list cards */
    .dj-list-card            { flex-wrap: wrap; }
    .dj-list-actions         { flex-direction: row; width: 100%; }
    .dj-list-actions .btn    { flex: 1; justify-content: center; }
}

/* ── 480px — Small mobile ────────────────────────────────── */
@media (max-width: 480px) {
    .footer-grid             { grid-template-columns: 1fr; }
    .app-store-btns          { flex-direction: column; }
    .directory-coming-banner { padding: 2rem 1.5rem; }
    .dj-grid-home            { grid-template-columns: 1fr; }
    .hero-tags               { display: none; }
    .stat-num                { font-size: 2.2rem; }
}