/* =========================
   Global
========================= */

body {
    font-family: 'Inter', sans-serif;
    background-color: #050505;
    color: white;
    scroll-behavior: smooth;
}

/* =========================
   Typography
========================= */

.italic-heading {
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.04em;
}

/* =========================
   UI Panels
========================= */

.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* =========================
   Team Accent Borders
========================= */

.team-border-ferrari { border-left: 4px solid #FF0000; }
.team-border-mclaren { border-left: 4px solid #FF8700; }
.team-border-redbull { border-left: 4px solid #0600EF; }
.team-border-mercedes { border-left: 4px solid #00D2BE; }
.team-border-astonmartin { border-left: 4px solid #006F62; }
.team-border-alpine { border-left: 4px solid #FF87BC; }
.team-border-williams { border-left: 4px solid #00A0FF; }
.team-border-rb { border-left: 4px solid #6692FF; }
.team-border-haas { border-left: 4px solid #B6BABD; }
.team-border-audi { border-left: 4px solid #F50505; }
.team-border-cadillac { border-left: 4px solid #FFD700; }

/* =========================
   Horizontal Scrollbar
========================= */

.scroll-container::-webkit-scrollbar {
    height: 6px;
}

.scroll-container::-webkit-scrollbar-track {
    background: #050505;
}

.scroll-container::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}
/* =========================
   Schedule Card Carousel
========================= */

#schedule-container.card-carousel {
    display: flex;
    gap: 0; /* cards overlap via transforms */
    align-items: center;
    overflow-x: auto; /* allow programmatic scrolling but hide visuals */
    padding: 1.5rem 0.75rem 3rem 0.75rem;
    margin-bottom: 1rem;
    -ms-overflow-style: none; /* IE/Edge hide scrollbar */
    scrollbar-width: none; /* Firefox hide scrollbar */
}

.card-carousel::-webkit-scrollbar { display: none; } /* WebKit hide scrollbar */

/* use scroll snapping so scrolling/clicking aligns cleanly */
#schedule-container.card-carousel {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.card-carousel .card {
    position: relative;
    flex: 0 0 280px; /* narrower but taller */
    width: 280px;
    height: 360px;
    max-width: 92%;
    transition: transform 300ms cubic-bezier(0.22,1,0.36,1), opacity 240ms ease, box-shadow 240ms ease;
    cursor: pointer;
    z-index: 10;
    opacity: 0.92;
    will-change: transform, opacity;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    scroll-snap-align: center;
}

/* overlap using negative margins instead of translating elements */
.card-carousel .card + .card { margin-left: -120px; }

/* default visual scale for non-active cards */
.card-carousel .card { transform: scale(0.88); }

.card-carousel .card.near { transform: scale(0.95); }

.card-carousel .card.active {
    transform: scale(1) translateZ(0);
    z-index: 60;
    box-shadow: 0 28px 56px rgba(0,0,0,0.65);
    border-left: 5px solid #FF0000; /* red accent when active */
}

/* bring hovered card to front so clicks are not blocked */
.card-carousel .card:hover {
    z-index: 80;
    transform: scale(1.02);
}

.card-carousel .card .card-inner { display: block; }

.card-carousel .card.active {
    transform: scale(1) translateZ(0);
    z-index: 60;
    box-shadow: 0 28px 56px rgba(0,0,0,0.65);
    border-left: 5px solid #FF0000; /* Red accent on active */
}

.card-carousel .card.near {
    /* near cards are slightly smaller and sit partially behind the active card */
    z-index: 40;
}

.card-carousel .card { transform: scale(0.78); }

@media (max-width: 768px) {
    .card-carousel { padding: 1rem 1rem 3rem 1rem; }
    .card-carousel .card { flex: 0 0 260px; width: 260px; height: 340px; }
}

/* Custom schedule track (line, dots, car handle) */
.schedule-track {
    position: relative;
    height: 56px;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.schedule-track .track-line {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 50%;
    height: 6px;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
}

.schedule-track .dots {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: auto; /* allow clicks and drag mapping */
}

.schedule-track .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
    pointer-events: auto;
    cursor: pointer;
    transition: transform 220ms ease, background-color 220ms ease;
}

.schedule-track .dot.active {
    background: white;
    transform: scale(1.25);
}

.schedule-track .car-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg,#ff4d4d,#c40000);
    border-radius: 12px;
    color: white;
    font-size: 14px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.5);
    touch-action: none;
    cursor: grab;
}

.schedule-track .car-handle:active { cursor: grabbing; }

/* date labels under the track – each absolutely positioned under its dot */
.schedule-track .dates {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    height: 1.25rem;
    pointer-events: none;
}

.schedule-track .date-label {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 0.75rem; /* slightly smaller text */
    color: #ccc;
    white-space: nowrap;
    opacity: 0.6;
    transition: opacity 200ms ease, color 200ms ease;
}

.schedule-track .date-label.active {
    opacity: 1;
    color: white;
    font-weight: 600;
}

@media (max-width: 768px) {
    .schedule-track { height: 48px; }
    .schedule-track .car-handle { width: 30px; height: 20px; font-size: 12px; }
}

/* Larger team cards (3 per row) */
#teams-container .team-card {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem;
}

#teams-container .team-card h3 {
    font-size: 1.35rem;
    line-height: 1;
}

@media (max-width: 1024px) {
    #teams-container { gap: 1rem; }
}
/* =========================
   Scroll Anchor Offset
========================= */

#news, #schedule, #teams {
    scroll-margin-top: 128px;
}