/* =========================================
   EVENTOS (portada #eventos y eventos.html) — REDISEÑO 2026
   Tarjetas de evento, la mini sección de la portada y la página de eventos.
   Usa tokens.css y ui.css; el contacto y las «pendientes» vienen de home.css
   y autores.css en eventos.html.
   ========================================= */

/* TARJETA DE EVENTO PRÓXIMO: fecha en mono a la izquierda, datos a la derecha */
.events { display: grid; gap: 16px; }
.event {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-10);
    background: var(--bg-2);
}
.event__date {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 2px;
    padding-top: 2px;
    border-right: 1px solid var(--line);
    padding-right: 16px;
}
.event__day { font: 500 2rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--brand-text); }
.event__month { font: 500 var(--fs-label)/1.4 var(--mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-2); }
.event__body { display: grid; gap: 6px; min-width: 0; }
.event__kind { font: 500 var(--fs-label)/1.4 var(--mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-2); }
.event__title { font-size: var(--fs-d3); line-height: var(--lh-d3); letter-spacing: var(--track-d3); overflow-wrap: anywhere; }
.event__when { font-weight: 600; }
.event__meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font: 400 var(--fs-mono)/1.5 var(--mono); color: var(--text-2); }
.event__desc { max-width: 60ch; color: var(--text-2); }
.event__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
/* Con afiche: el afiche arriba en móvil y a la izquierda desde 600 px */
.event__poster {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 360px;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--r-6);
    background: var(--bg-3);
}
@media (min-width: 600px) {
    .event--poster { grid-template-columns: minmax(140px, 200px) 64px minmax(0, 1fr); }
    .event--poster .event__poster { grid-column: auto; }
}
@media (max-width: 479px) {
    .event { grid-template-columns: 1fr; }
    .event__date { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; border-right: 0; padding-right: 0; }
}

/* ESTADOS (cargando, sin eventos, sin conexión) */
.events-state { display: grid; justify-items: start; gap: 14px; max-width: 560px; }
.facts--tight { margin-top: 24px; }
.events-state .icon { width: 32px; height: 32px; color: var(--brand-text); }
.events-state form { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.events-state form .input { flex: 1 1 240px; }

/* PORTADA: mini sección. Sin próximo evento es una sola columna con el WhatsApp;
   con evento, el próximo aparece al lado. */
.events-mini { display: grid; gap: 32px; }
.events-mini__text { display: grid; gap: 16px; justify-items: start; align-content: center; }
.events-mini__next { display: grid; gap: 12px; align-content: center; }
.events-mini__next[hidden] { display: none; }
@media (min-width: 900px) {
    .events-mini--has-next { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 48px; align-items: center; }
}

/* EVENTOS ANTERIORES */
.pasts { display: grid; gap: 32px; }
.past { display: grid; gap: 8px; align-content: start; }
.past__photos { display: grid; gap: 6px; margin-bottom: 8px; }
.past__photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-6); background: var(--bg-3); }
.past__photos--2, .past__photos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.past__photos--3 img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 760px) { .pasts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; } }
@media (min-width: 1100px) { .pasts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* FORMATOS Y CATERING */
.formats { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.formats li { display: grid; gap: 2px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.formats strong { font-size: 1.125rem; font-weight: 600; }
.formats span { color: var(--text-2); }
.organize { display: grid; gap: 40px; }
@media (min-width: 900px) { .organize { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; align-items: start; } }

.catering {
    display: grid;
    gap: 14px;
    justify-items: start;
    margin-top: 32px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--r-10);
    background: var(--bg-2);
}
.catering .icon { width: 28px; height: 28px; color: var(--brand-text); }
.catering p { color: var(--text-2); max-width: 52ch; }

/* ESPACIOS */
.spaces { display: grid; gap: 16px; }
.spaces figure { margin: 0; display: grid; gap: 8px; }
.spaces img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-10); background: var(--bg-3); }
.spaces figcaption { font: 400 var(--fs-mono)/1.5 var(--mono); color: var(--text-2); }
@media (min-width: 640px) { .spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .spaces { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* FORMULARIO DE COTIZACIÓN: casilla nativa con el color de marca */
.check { display: flex; align-items: flex-start; gap: 12px; min-height: var(--tap); font-weight: 400; }
.check input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--brand); }
.band--ink input[type="date"] { color-scheme: dark; }