/* ==========================================
   CSS/RESPONSIVE.CSS
   Media Queries for BMW Protocol
   ========================================== */

/* Hidden Classes */
.hidden { display: none !important; }

/* Large Laptops / Desktops */
@media screen and (max-width: 1200px) {
    .title { font-size: 3.2rem; }
    .hero-content { gap: 30px; }
    .live-cockpit { padding: 30px; }
}

/* Tablets (iPad Pro and similar) */
@media screen and (max-width: 1024px) {
    .hero-content { grid-template-columns: 1fr; text-align: center; }
    .hero-text { margin-bottom: 40px; }
    .bio-text { margin: 0 auto; border-left: none; border-bottom: 3px solid var(--bmw-m-light-blue); padding-bottom: 15px; }
    .hero-dashboard { max-width: 700px; margin: 0 auto; }
    
    .soc-dashboard { grid-template-columns: 1fr; }
    .rotating-platform { gap: 20px; }
    .nav-links { gap: 1rem; }
    .nav-link { font-size: 0.8rem; }
}

/* Mobile & Small Tablets */
@media screen and (max-width: 768px) {
    .section { padding: 80px 5%; }
    .title { font-size: 2.5rem; }
    .subtitle { font-size: 1.2rem; }
    
    .nav-links { display: none; } /* Simplified mobile nav for the hidden protocol */
    .m-nav { justify-content: center; position: relative; border-bottom: none; }
    
    .rotating-platform { grid-template-columns: 1fr; transform-style: flat; }
    .showroom-car-card { transform: none !important; margin-bottom: 30px; }
    .showroom-car-card:hover { transform: translateY(-10px) !important; }
    
    .primary-dials { flex-direction: column; gap: 30px; }
    .dial { width: 100%; max-width: 300px; margin: 0 auto; }
    
    .stats-readout { grid-template-columns: 1fr; gap: 15px; }
    
    .blueprint-timeline { padding-left: 20px; }
    .cad-dot { left: -27px; }
    
    .machine-grid { grid-template-columns: 1fr; }
}

/* Global Controls */
.global-controls {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 10000;
}
#mute-btn {
    width: 50px; height: 50px;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    background: rgba(0,0,0,0.8);
    border: 1px solid var(--glass-border);
    color: #888;
    cursor: pointer !important;
}
#mute-btn:hover, #mute-btn.active { color: var(--bmw-cyan); border-color: var(--bmw-cyan); box-shadow: 0 0 15px rgba(0,243,255,0.3); }

/* M Mode Indicator */
#m-mode-indicator {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    background: rgba(231,34,46,0.1); border: 1px solid var(--bmw-m-red); color: var(--bmw-m-red);
    padding: 5px 20px; font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 2px;
    border-radius: 20px; z-index: 10000; opacity: 0; transition: opacity 0.3s; pointer-events: none;
}