/* ============================================================
   RESPONSIVE.CSS — Media queries for all breakpoints
   Breakpoints: 1200 | 960 | 768 | 600 | 480 | 360
   ============================================================ */

/* ── 1200px — Large screens cap ── */

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

/* ── 960px — Medium desktops ── */

@media (max-width: 960px) {
    .webhook-grid {
        grid-template-columns: 1fr;
    }
    .contact-grid {
        grid-template-columns: 1fr;
    }
    .founders-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
    .webhook-preview-stack {
        position: static;
    }
    .features-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

/* ── 768px — Tablets ── */

@media (max-width: 768px) {
    /* Navbar: hide links, show hamburger */
    .nav-links {
        display: none;
    }
    .hamburger {
        display: flex;
    }
    /* Stats: 2 per row */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    /* Founders: stack vertically on tablet */
    .founders-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
    /* Form rows: single column */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    /* Hero adjustments */
    .hero {
        padding: clamp(60px, 10vw, 80px) 0 50px;
    }
    .hero-discord-card {
        padding: 16px 18px;
    }
    .hero-image-wrap {
        padding: 0 12px;
    }
    /* Features: smaller min */
    .features-grid {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: 14px;
    }
    /* Privacy: tabs stack */
    .privacy-tabs {
        flex-direction: column;
    }
    .privacy-tab {
        text-align: center;
    }
    /* CTA buttons */
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    .cta-buttons .btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
    /* Contact sidebar stacks first, then form */
    .contact-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .contact-info-card {
        flex: 1;
        min-width: 200px;
    }
}

/* ── 600px — Large phones ── */

@media (max-width: 600px) {
    /* Stats: 2 columns still, smaller padding */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .stat-card {
        padding: 22px 14px;
    }
    .stat-value {
        font-size: 2rem;
    }
    /* Features: single column */
    .features-grid {
        grid-template-columns: 1fr;
    }
    /* Founder cards single col */
    .founders-grid {
        grid-template-columns: 1fr;
    }
    .founder-card {
        padding: 28px 20px;
    }
    .founder-avatar {
        width: 86px;
        height: 86px;
    }
    .founder-avatar-placeholder {
        width: 86px;
        height: 86px;
        font-size: 2.2rem;
    }
    /* Commands: single col list */
    .command-list {
        grid-template-columns: 1fr;
    }
    /* Field rows: 2 cols */
    .field-row {
        grid-template-columns: 1fr 1fr;
        row-gap: 8px;
    }
    .field-row>*:nth-child(1) {
        grid-column: 1;
    }
    .field-row>*:nth-child(2) {
        grid-column: 2;
    }
    .field-row>*:nth-child(3) {
        grid-column: 1;
    }
    .field-row>*:nth-child(4) {
        grid-column: 2;
    }
    /* Webhook preview sticky off */
    .webhook-preview-stack {
        position: static;
    }
    /* Nav logo text */
    .nav-logo span {
        font-size: 1.2rem;
    }
    /* Footer */
    .footer-inner {
        justify-content: center;
        text-align: center;
    }
    .footer-links {
        justify-content: center;
    }
    .footer-bottom {
        justify-content: center;
    }
    /* Contact sidebar flat */
    .contact-sidebar {
        flex-direction: column;
    }
    .contact-info-card {
        min-width: unset;
    }
    /* Hero CTA: stack */
    .hero-ctas {
        flex-direction: column;
        align-items: center;
    }
    .hero-ctas .btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
    /* Section header margins */
    .section-header {
        margin-bottom: 36px;
    }
}

/* ── 480px — Small phones ── */

@media (max-width: 480px) {
    /* Stats: still 2 col */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Category filters wrap smaller */
    .cat-btn {
        font-size: 0.72rem;
        padding: 6px 12px;
    }
    /* Embed color row: single col */
    .embed-color-row {
        grid-template-columns: 1fr;
    }
    /* Field rows: single col */
    .field-row {
        grid-template-columns: 1fr 1fr;
    }
    /* Service card: adjust */
    .service-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .service-status-badge {
        align-self: flex-start;
    }
    /* Status overall text size */
    .status-overall {
        font-size: 0.9rem;
        padding: 12px 18px;
    }
    /* Mobile nav narrower */
    .mobile-nav-panel {
        width: min(280px, 88vw);
    }
    /* Hero title min-size */
    .hero-title {
        font-size: clamp(2.2rem, 9vw, 3rem);
    }
    /* Privacy tab: icon + text */
    .privacy-tab {
        font-size: 0.8rem;
        padding: 9px 12px;
    }
    /* Founder links */
    .founder-links {
        gap: 6px;
    }
    .founder-link {
        font-size: 0.72rem;
        padding: 5px 10px;
    }
    /* Discord preview card */
    .hero-discord-card {
        padding: 14px 15px;
    }
    .discord-embed {
        padding: 10px 12px;
    }
}

/* ── 360px — Very small phones ── */

@media (max-width: 360px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .stat-card {
        padding: 18px 10px;
    }
    .stat-value {
        font-size: 1.7rem;
    }
    .stat-icon {
        font-size: 1.6rem;
    }
    .hero-title {
        font-size: clamp(1.9rem, 10vw, 2.6rem);
    }
    .hero-ctas .btn {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
    .container {
        padding: 0 14px;
    }
    .founder-card {
        padding: 24px 16px;
    }
    .founder-avatar {
        width: 76px;
        height: 76px;
    }
    .founder-avatar-placeholder {
        width: 76px;
        height: 76px;
        font-size: 2rem;
    }
    .founder-name {
        font-size: 1.1rem;
    }
    .webhook-panel {
        padding: 16px;
    }
    .contact-form-panel {
        padding: 18px;
    }
}

/* ── Hover: disable on touch devices ── */

@media (hover: none) {
    .feature-card:hover,
    .stat-card:hover,
    .founder-card:hover,
    .card:hover,
    .service-card:hover {
        transform: none;
    }
    .btn-primary:hover,
    .btn-discord:hover {
        transform: none;
    }
}

/* ── High-DPI / Retina ── */

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .nav-logo img,
    .founder-avatar,
    .mobile-nav-logo img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .hero-discord-card {
        animation: none;
    }
    #particles-canvas {
        display: none;
    }
}

/* ── Print ── */

@media print {
    #navbar,
    footer,
    #mobile-nav,
    #particles-canvas {
        display: none !important;
    }
    .page {
        display: flex !important;
    }
    body {
        background: white;
        color: black;
    }
}