/* ---- PAGE LAYOUT ---- */
.results-page {
    max-width: var(--content-width);
    margin-inline: auto;
    padding: var(--content-rhythm) var(--content-gutter);
}

.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.results-title {
    font-family: 'F1-Regular', sans-serif;
    font-size: clamp(28px, 4vw, 40px);
    color: var(--text-light);
    letter-spacing: 0.3px;
    animation: tabFadeIn 0.4s ease;
}

.results-empty {
    font-family: 'F1-Regular', sans-serif;
    color: var(--text-dim);
    padding: 40px 0;
    text-align: center;
}

/* ---- TABLE CARD (no max-height, grows with content) ---- */
/* Mismo aspecto que .standings-table-wrap (championship.css): degradado,
   borde fino, y sin hover en el contenedor. */
.results-table-wrap {
    background: linear-gradient(135deg, var(--base-700) 0%, var(--base-800) 100%);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.results-table-wrap::-webkit-scrollbar { height: 4px; }
.results-table-wrap::-webkit-scrollbar-track { background: transparent; }
.results-table-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
.results-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }


.results-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'F1-Regular', sans-serif;
    font-size: 14px;
}

/* Cabecera calcada de .data-table th (grandprix.css): misma tipografía,
   tamaño y fondo en todas las tablas del sitio. */
.results-table th {
    height: 44px;
    padding: 0 20px;
    text-align: left;
    font-family: 'F1-Regular', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    background: var(--base-700);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    white-space: nowrap;
}

.results-table td {
    height: 32px;
    padding: 0 20px;
    color: var(--text-light);
    font-size: 16px;
    letter-spacing: 0.1px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    background: transparent;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.results-table tbody tr:last-child td {
    border-bottom: none;
}

.results-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.results-row:hover td,
.results-row:focus-visible td,
.results-row.is-open td {
    background: rgba(255,255,255,0.035);
}

.results-row:focus-visible {
    outline: none;
}

/* ---- EXPAND (chevron al final de la fila) ---- */
.results-expand-col,
.results-expand {
    width: 24px;
    padding-left: 0 !important;
    text-align: right;
}

.results-expand-icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid rgba(255,255,255,0.3);
    border-bottom: 1.5px solid rgba(255,255,255,0.3);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.2s ease;
}

.results-row:hover .results-expand-icon { border-color: rgba(255,255,255,0.6); }
.results-row.is-open .results-expand-icon {
    transform: rotate(225deg) translateY(-2px);
    border-color: var(--primary-red);
}

/* ---- DETAIL (clasificación completa desplegada bajo la fila) ---- */
/* Es la misma .race-table-wrap/.data-table de la página del GP
   (styles/result-table.css), metida en una celda que ocupa toda la fila.

   La fila de detalle siempre existe, plegada: la celda no tiene padding ni
   borde, y adentro una grilla pasa de 0fr a 1fr. Así la altura se anima de
   verdad (la tabla se estira, las filas de abajo bajan acompañando) en vez
   de aparecer de golpe. El contenido hace un fade corto encima. */
.results-table > tbody > tr.results-detail > td {
    height: auto;
    padding: 0;
    border-bottom: none;
    background: rgba(255,255,255,0.02);
    white-space: normal;
}

/* La fila de GP es la que dibuja la línea divisoria; la última no la lleva
   salvo que esté abierta (ahí separa la fila de su detalle). */
.results-table > tbody > tr.results-row:nth-last-child(2):not(.is-open) > td { border-bottom: none; }

.results-detail-grid {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}

.results-detail.is-open .results-detail-grid {
    grid-template-rows: 1fr;
}

.results-detail-inner {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}

.results-detail.is-open .results-detail-inner {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease 0.1s, transform 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}

.results-detail-body {
    padding: 0 20px 20px;
}

.results-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 14px 0 12px;
}

.results-detail-title {
    font-family: 'F1-Regular';
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
}

.results-detail-link {
    font-family: 'F1-Regular';
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s ease;
}

.results-detail-link:hover { color: var(--primary-red); }

/* La tabla desplegada va sobre el fondo de la celda, sin su propia tarjeta:
   dos degradados anidados se ven como una caja dentro de otra. */
.results-detail .race-table-wrap {
    background: var(--base-800);
    border-color: rgba(255,255,255,0.06);
}

@media (prefers-reduced-motion: reduce) {
    .results-detail-grid,
    .results-detail-inner,
    .results-expand-icon { transition: none; }
}

/* ---- CARGA ---- */
/* Al cambiar de año se atenúa lo que ya está en vez de vaciarlo. */
#results-tabs-container.is-loading {
    opacity: 0.45;
    pointer-events: none;
}

#results-tabs-container[hidden] { display: none; }

/* Columna de ronda = .res-pos / .st-pos: mismo tamaño y mismo gris. */
.results-round {
    width: 25px;
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-family: 'F1-Regular', sans-serif;
    font-size: 16px;
}

.results-gp {
    font-family: 'F1-Regular', sans-serif;
    font-size: 16px;
}

.results-flag {
    margin-right: 10px;
}

.results-flag img {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    object-fit: cover;
    vertical-align: middle;
    margin-bottom: 2px;
}

.results-gp-short {
    display: none;
}

.results-date {
    color: rgba(255,255,255,0.6);
    font-size: 16px;
}

.results-winner {
    color: var(--text-light);
}

.results-winner-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.results-team-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.9;
}

.sprint-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 6px;
    line-height: 1;
    background: rgba(225,6,0,0.1);
    border: 1px solid rgba(225,6,0,0.2);
    color: var(--primary-red);
    font-family: 'F1-Regular', sans-serif;
    font-size: 10px;
    letter-spacing: 0.5px;
}

.results-dash {
    color: rgba(255,255,255,0.2);
}

.res-duration-col {
    color: rgba(255,255,255,0.6);
    font-size: 16px;
}

.res-laps-col {
    color: rgba(255,255,255,0.55);
    font-size: 16px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 500px) {
    .results-table th,
    .results-table td { padding: 0 12px; }
    .results-round,
    .results-round-col,
    .res-sprint-col,
    .results-date,
    .results-date-col,
    .res-duration-col,
    .res-laps-col { display: none; }

    .results-gp-full { display: none; }
    .results-gp-short { display: inline; }

    .results-detail-body { padding: 0 8px 14px; }
    .results-detail-head { padding: 12px 4px 10px; }
}

/* ---- SESSION TABS ---- */
/* Calcadas de #session-tabs-container / .session-tab-bar de grandprix.css:
   misma tipografía, mismo indicador rojo, misma animación y mismo
   comportamiento en móvil. Cualquier cambio de aspecto se hace allá y se
   copia acá. */
#results-tabs-container {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

#results-tabs-container.in-view {
    opacity: 1;
    transform: translateY(0);
}

.session-tab-bar {
    position: relative;
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 0;
    flex-wrap: wrap;
}

.session-tab-indicator {
    position: absolute;
    bottom: -1px;
    height: 2px;
    background: var(--primary-red);
    transition: left 0.25s ease, width 0.25s ease;
}

.session-tab-btn {
    margin-bottom: -1px;
    padding: 0.75rem 1.5rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-dim);
    font-family: 'F1-Regular';
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.session-tab-btn:hover {
    color: var(--text-light);
}

.session-tab-btn.active {
    color: var(--text-light);
}

.session-tab-panel {
    display: none;
    padding-top: 2.5rem;
}

.session-tab-panel.active {
    display: block;
    animation: tabFadeIn 0.35s ease;
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateX(var(--tab-slide-x, 0px)); }
    to   { opacity: 1; transform: translateX(0); }
}

.tab-label-short { display: none; }

@media (max-width: 500px){
    .session-tab-btn { padding: 0.6rem 12px; font-size: 0.65rem; flex: 1; text-align: center; white-space: normal; }
    .tab-label-short { display: inline; }
    .tab-label-full  { display: none; }
}