/* ============================================================
   FLOW — CALENDÁRIO DE CORRIDAS (tema claro)
   Usa tokens/componentes de flow.css
   ============================================================ */

* { box-sizing: border-box; }
body { font-family: 'DM Sans', system-ui, sans-serif; color: var(--ink); background: var(--bg); margin: 0; }

/* ── Header ── */
.cal-header {
    position: relative;
    background: var(--black);
    padding: 7.5rem 0 3rem;
    overflow: hidden;
}
.cal-header.has-bg::after {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background-image: var(--cal-bg); background-size: cover; background-position: center;
    opacity: .28; filter: grayscale(.3);
}
.cal-header::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--yellow); z-index: 2;
}
.cal-header-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(8,9,12,.85), rgba(8,9,12,.5)); }
.cal-header-content { position: relative; z-index: 3; }
.cal-header .flow-eyebrow { color: var(--yellow); }
.cal-title {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase;
    font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: .95; color: #fff; margin: 0 0 .6rem;
}
.cal-sub { color: rgba(255,255,255,.78); font-size: 1.05rem; max-width: 520px; margin: 0 0 1.6rem; }

.cal-search { position: relative; max-width: 420px; }
.cal-search input {
    width: 100%; padding: .8rem 1rem .8rem 2.8rem;
    border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-pill);
    background: rgba(255,255,255,.08); color: #fff; font-size: 1rem;
    transition: border-color .25s, background .25s;
}
.cal-search input::placeholder { color: rgba(255,255,255,.55); }
.cal-search input:focus { outline: none; border-color: var(--yellow); background: rgba(255,255,255,.14); }
.cal-search i { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.6); }

/* ── Conteúdo ── */
.cal-main { padding: 3.2rem 0 4.5rem; background: var(--bg); }

.cal-month-block { margin-bottom: 3rem; }
.cal-month-head {
    display: flex; align-items: baseline; gap: 1rem;
    margin-bottom: 1.4rem; padding-bottom: .8rem; border-bottom: 2px solid var(--line);
}
.cal-month {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase;
    font-size: clamp(1.5rem, 3.5vw, 2.1rem); color: var(--ink); margin: 0; line-height: 1;
}
.cal-month span { color: var(--ink-3); }
.cal-month .flow-mark { color: var(--black); }
.cal-month-count {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; font-size: .8rem; color: var(--ink-3); margin-left: auto; white-space: nowrap;
}

.cal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* Card link wrapper */
.flow-card-link { text-decoration: none; display: block; height: 100%; }
.flow-event-cta { width: 100%; margin-top: .3rem; }

/* Realizadas: bem apagadas (já aconteceram) */
.cal-past .cal-month,
.cal-past .cal-month span { color: var(--ink-3); }
.cal-past .cal-month-head { border-bottom-color: var(--line); }
.cal-past .flow-event-card {
    filter: grayscale(100%);
    opacity: .45;
    transition: filter .3s ease, opacity .3s ease, transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.cal-past .flow-card-link:hover .flow-event-card { filter: grayscale(0); opacity: 1; }
/* botão "Mais Informações" some quando apagado; volta no hover */
.cal-past .flow-event-cta { background: var(--bg-soft-2); color: var(--ink-3); }
.cal-past .flow-card-link:hover .flow-event-cta { background: var(--yellow); color: var(--black); }

/* Estados vazios */
.cal-empty, .cal-noresult {
    text-align: center; padding: 4rem 1rem; color: var(--ink-3);
    border: 1px dashed var(--line-2); border-radius: var(--r-lg);
    font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 2px;
}
.cal-noresult { margin-top: 1rem; }

/* ── Responsivo ── */
@media (max-width: 992px) { .cal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
    .cal-header { padding: 6.5rem 0 2.5rem; }
}
@media (max-width: 576px) {
    .cal-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .cal-month-count { display: none; }
}