/* ============================================
   RESPONSIVE STYLES
   Breakpoints and mobile adaptations
   ============================================ */

/* ============================================
   BREAKPOINT: Large Desktop (1400px+)
   ============================================ */
@media (min-width: 1400px) {
    :root {
        --section-padding-y: 8rem;
    }
}

/* ============================================
   BREAKPOINT: Tablet (991px and below)
   ============================================ */
@media (max-width: 991px) {
    :root {
        --section-padding-y: 4rem;
    }
    
    /* Typography adjustments */
    .section-title {
        font-size: var(--text-3xl);
    }
    
    /* Hero adjustments */
    .hero-title {
        font-size: var(--text-4xl);
    }
    
    /* Table visualization smaller */
    .hero-table {
        transform: scale(0.7);
        opacity: 0.4;
    }
    
    /* Float cards stack */
    .float-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        max-width: 100%;
        margin-bottom: var(--space-4);
    }
    
    /* Video container adjustments */
    .video-container {
        margin-left: calc(var(--space-6) * -1);
        margin-right: calc(var(--space-6) * -1);
        border-radius: 0;
    }
    
    .video-frame {
        border-radius: 0;
    }
}

/* ============================================
   BREAKPOINT: Mobile Landscape (767px and below)
   ============================================ */
@media (max-width: 767px) {
    :root {
        --nav-height: 64px;
        --section-padding-y: 3rem;
    }
    
    /* Container tighter padding */
    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
    
    /* Hero */
    .hero {
        padding-top: calc(var(--nav-height) + var(--space-4));
    }
    
    .hero-title {
        font-size: var(--text-3xl);
    }
    
    .hero-subtitle {
        font-size: var(--text-base);
    }
    
    .hero-table {
        display: none;
    }
    
    /* Buttons stack */
    .hero-ctas {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-ctas .btn {
        width: 100%;
    }
    
    /* Section headers */
    .section-title {
        font-size: var(--text-2xl);
    }
    
    .section-desc {
        font-size: var(--text-base);
    }
    
    /* Comparison section */
    .comparison {
        grid-template-columns: 1fr;
    }
    
    .comparison-vs {
        order: -1;
    }
    
    .comparison-vs span {
        width: 48px;
        height: 48px;
        font-size: var(--text-base);
    }
    
    /* Stats grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-value {
        font-size: var(--text-2xl);
    }
    
    /* Charts stack */
    .charts-showcase {
        grid-template-columns: 1fr;
    }
    
    /* Pricing cards stack */
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    
    .pricing-card.featured {
        transform: none;
        order: -1;
    }
    
    .pricing-card.featured:hover {
        transform: translateY(-8px);
    }
    
    /* Testimonials stack */
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    /* Export cards stack */
    .export-cards {
        grid-template-columns: 1fr;
    }
    
    /* AI interface stack */
    .ai-interface {
        grid-template-columns: 1fr;
    }
    
    .ai-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .mini-table-preview {
        flex: 1;
        min-width: 200px;
    }
    
    .ai-actions {
        flex: 1;
        min-width: 200px;
    }
    
    /* Controls showcase stack */
    .controls-showcase {
        grid-template-columns: 1fr;
    }
    
    /* Browser showcase stack */
    .browser-showcase {
        grid-template-columns: 1fr;
    }
    
    /* Specs grid */
    .feature-specs {
        flex-direction: column;
        gap: var(--space-8);
    }
    
    /* Position chart */
    .position-chart {
        gap: var(--space-2);
    }
    
    .pos-bar {
        width: 30px;
    }
    
    /* Time filter */
    .time-filter {
        flex-wrap: wrap;
    }
    
    .time-filter span {
        width: 100%;
        text-align: center;
        margin-right: 0;
        margin-bottom: var(--space-2);
    }
    
    /* CTA buttons */
    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .cta-buttons .btn {
        width: 100%;
    }
    
    /* Footer grid */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .footer-brand {
        grid-column: 1 / -1;
        text-align: center;
    }
    
    .footer-social {
        justify-content: center;
    }
}

/* ============================================
   BREAKPOINT: Small Mobile (479px and below)
   ============================================ */
@media (max-width: 479px) {
    /* Typography */
    .hero-title {
        font-size: var(--text-2xl);
    }
    
    .section-title {
        font-size: var(--text-xl);
    }
    
    /* Session cards */
    .session-card {
        flex-wrap: wrap;
    }
    
    .session-stats {
        width: 100%;
        text-align: left;
        margin-top: var(--space-2);
        padding-top: var(--space-2);
        border-top: 1px solid var(--border-subtle);
    }
    
    /* Stats cards */
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    /* Keyboard smaller */
    kbd {
        min-width: 28px;
        height: 28px;
        font-size: var(--text-xs);
    }
    
    .key-wide {
        min-width: 70px;
    }
    
    /* Control bar */
    .control-buttons {
        justify-content: center;
    }
    
    .speed-selector {
        width: 100%;
        justify-content: center;
        margin-top: var(--space-2);
        margin-left: 0;
    }
    
    /* Pricing */
    .pricing-price .amount {
        font-size: var(--text-4xl);
    }
    
    /* Chat messages */
    .message-bubble {
        max-width: 90%;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-links h4 {
        margin-top: var(--space-6);
    }
}

/* ============================================
   HIGH DPI / RETINA DISPLAYS
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper text rendering */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ============================================
   DARK MODE PREFERENCE (already dark, but respect system)
   ============================================ */
@media (prefers-color-scheme: light) {
    /* Website is designed dark-first, but we could add light mode */
    /* For now, keep dark as it's the poker aesthetic */
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .nav,
    .hero-table,
    .hero-scroll,
    .hero-ctas,
    .cta-section,
    .footer-social,
    .pricing-faq-mini {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    section {
        padding: 2rem 0;
        page-break-inside: avoid;
    }
    
    .pricing-card {
        border: 1px solid #ccc;
        break-inside: avoid;
    }
}

/* ============================================
   SAFARI / iOS SPECIFIC FIXES
   ============================================ */
@supports (-webkit-touch-callout: none) {
    /* iOS specific adjustments */
    .hero {
        min-height: -webkit-fill-available;
    }
    
    /* Fix for iOS input zoom */
    input,
    select,
    textarea {
        font-size: 16px;
    }
}

/* ============================================
   FIREFOX SPECIFIC FIXES
   ============================================ */
@-moz-document url-prefix() {
    /* Firefox scrollbar styling */
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--felt-tertiary) var(--felt-primary);
    }
}