/* DEVILS TRAILS - KINETIC BRUTALISM SYSTEM */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=Inter:wght@400;700&display=swap');

:root {
    --devil-red: #E31E24;
    --surface: #131313;
    --surface-low: #1C1B1B;
    --surface-high: #2A2A2A;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--surface);
    color: #fff;
    overflow-x: hidden;
}

.font-kinetic {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.05em;
}

/* Hero & Video */
.video-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden;
}
.video-bg iframe {
    width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.5;
}

/* Mobile Menu */
#mobile-menu {
    transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); background-color: var(--surface);
}
#mobile-menu.open { transform: translateX(0); }

/* Animations */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Buttons & Inputs */
.btn-kinetic {
    background-color: var(--devil-red); color: white; padding: 1.25rem 2.5rem; font-weight: bold; display: inline-block; transition: transform 0.2s;
}
.btn-kinetic:hover { transform: skewX(-6deg); }
input, select { background-color: var(--surface-high) !important; border: none !important; color: white !important; padding: 1rem !important; }

/* =========================================
   NEW: Weather Bento Grid & Trail Cards
   ========================================= */
.weather-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, auto); gap: 1rem; }
.weather-card { background: var(--surface-low); padding: 2rem; border: 1px solid rgba(255,255,255,0.05); }
.weather-main { grid-column: span 2; grid-row: span 2; border-left: 4px solid var(--devil-red); }
.weather-item { grid-column: span 1; }

@media (max-width: 1024px) {
    .weather-grid { grid-template-columns: repeat(2, 1fr); }
    .weather-main { grid-column: span 2; }
}

.trail-card { background: var(--surface-low); padding: 2.5rem; position: relative; transition: transform 0.3s; }
.trail-card:hover { transform: translateY(-5px); }