/* ==========================================================================
   PREMIOS — Estilos exclusivos de paginas/premios.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Variables locales de la página
   --------------------------------------------------------------------------

   Los tonos de plata y los textos oscuros de las medallas viven aquí porque
   todavía no se usan fuera de esta página. Si más adelante aparecen en otra
   hoja, se promueven a tokens.css junto a los colores de marca. */

:root {
    --medal-plata-color: #8a929c;
    --medal-plata-text-color: #6c7484;
    --medal-bronce-text-color: #5d3a1a;
    --medal-oro-text-color: #8a5a1c;
}

/* --------------------------------------------------------------------------
   1. Distinciones — .awards-highlights
   -------------------------------------------------------------------------- */

.awards-highlights {
    padding-block: var(--section-padding);
    background-color: var(--body-color);
}

.awards-highlights__shell {
    display: grid;
    gap: var(--spacing-xl);
}

.awards-highlights__head {
    display: grid;
    gap: var(--spacing-xs);
    max-width: 46ch;
}

.awards-highlights__title {
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    text-transform: uppercase;
}

.awards-highlights__lead {
    color: var(--muted-color);
    font-size: 0.98rem;
}

/* La rejilla se adapta al número de distinciones: la ganadería irá sumando. */
.awards-highlights__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    grid-template-rows: auto auto auto;
    gap: var(--spacing-sm);
}

/* Cada distinción es una placa sobre el azul de la casa: manda la cifra —el
   periodo, el año o el número— y el nombre la explica.

   Las tres líneas de la placa son filas de la rejilla, no del item, de modo
   que cifras, nombres y detalles quedan a la misma altura en todas las
   tarjetas aunque un nombre ocupe dos líneas y los demás una. */
.awards-highlights__item {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--spacing-xs);
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
    background-color: var(--deep-color);
    border-top: 3px solid var(--secondary-color);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.awards-highlights__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}

.awards-highlights__item-figure {
    color: var(--secondary-color);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: var(--title-weight);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.02em;
}

.awards-highlights__item-title {
    color: var(--inverse-color);
    font-size: 1.02rem;
    text-transform: uppercase;
}

.awards-highlights__item-text {
    color: var(--inverse-muted-color);
    font-size: 0.85rem;
}

/* Una distinción sin cifra o sin detalle no debe dejar hueco en la placa. */
.awards-highlights__item-figure:empty,
.awards-highlights__item-text:empty {
    display: none;
}

/* --------------------------------------------------------------------------
   2. Palmarés por temporada — .awards-timeline
   -------------------------------------------------------------------------- */

.awards-timeline {
    padding-block: var(--section-padding);
    background-color: var(--surface-color);
}

.awards-timeline__shell {
    display: grid;
    gap: var(--spacing-xl);
}

.awards-timeline__head {
    display: grid;
    gap: var(--spacing-md);
    max-width: 56ch;
}

.awards-timeline__title {
    font-size: clamp(1.9rem, 4.2vw, 3.25rem);
    text-transform: uppercase;
}

.awards-timeline__lead {
    color: var(--muted-color);
    font-size: 0.98rem;
}

/* Banda de cifras: cuatro KPIs del palmarés separados por filetes. La
   superior y la inferior enmarcan la banda, las verticales se generan con
   borders-left en los items a partir del segundo. */
.awards-timeline__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    padding-block: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.awards-timeline__stat {
    display: grid;
    gap: var(--spacing-2xs);
    padding-inline: var(--spacing-md);
    border-left: 1px solid var(--border-color);
}

.awards-timeline__stat:first-child {
    border-left: 0;
    padding-left: 0;
}

.awards-timeline__stat-figure {
    color: var(--primary-color);
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    font-weight: var(--title-weight);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.02em;
}

.awards-timeline__stat-label {
    color: var(--muted-color);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Leyenda de colores: cuatro puntos con etiqueta, alineados en una fila. */
.awards-timeline__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
}

.awards-timeline__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--muted-color);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.awards-timeline__legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background-color: currentColor;
}

.awards-timeline__legend-dot--oro {
    color: var(--secondary-color);
}

.awards-timeline__legend-dot--plata {
    color: var(--medal-plata-color);
}

.awards-timeline__legend-dot--bronce {
    color: var(--secondary-dark-color);
}

.awards-timeline__legend-dot--campeonato {
    color: var(--primary-color);
}

/* Lista de temporadas en orden inverso: 2026 arriba, 2016 al final. */
.awards-timeline__list {
    display: grid;
    gap: var(--spacing-lg);
}

/* Cada temporada es una rejilla de dos columnas: la cifra del año a la
   izquierda, los premios a la derecha. En móvil se apila. */
.awards-timeline__year {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: start;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.awards-timeline__year:first-child {
    border-top: 0;
    padding-top: 0;
}

.awards-timeline__year-head {
    display: grid;
    gap: var(--spacing-2xs);
    align-self: start;
}

.awards-timeline__year-title {
    color: var(--deep-color);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: var(--title-weight);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.03em;
}

.awards-timeline__year-count {
    color: var(--muted-color);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.awards-timeline__entries {
    display: grid;
    gap: var(--spacing-xs);
}

/* Premio: banda coloreada a la izquierda + cuerpo con el detalle. La banda
   lleva el color del tipo de medalla y ocupa toda la altura del item. */
.awards-timeline__entry {
    display: grid;
    grid-template-columns: 4px 1fr;
    background-color: var(--body-color);
    border: 1px solid var(--border-color);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.awards-timeline__entry:hover {
    background-color: var(--surface-color);
    transform: translateX(2px);
}

.awards-timeline__band {
    align-self: stretch;
    background-color: var(--muted-color);
}

.awards-timeline__band--oro {
    background-color: var(--secondary-color);
}

.awards-timeline__band--plata {
    background-color: var(--medal-plata-color);
}

.awards-timeline__band--bronce {
    background-color: var(--secondary-dark-color);
}

.awards-timeline__band--campeonato {
    background-color: var(--primary-color);
}

.awards-timeline__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
}

.awards-timeline__primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
}

.awards-timeline__horse {
    margin: 0;
    color: var(--title-color);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.awards-timeline__medal {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}

.awards-timeline__medal--oro {
    color: var(--medal-oro-text-color);
}

.awards-timeline__medal--plata {
    color: var(--medal-plata-text-color);
}

.awards-timeline__medal--bronce {
    color: var(--medal-bronce-text-color);
}

.awards-timeline__medal--campeonato {
    color: var(--primary-color);
}

.awards-timeline__location {
    margin: 0;
    color: var(--muted-color);
    font-size: 0.88rem;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   3. Palmarés por ejemplar — .awards-roster
   -------------------------------------------------------------------------- */

.awards-roster {
    padding-block: var(--section-padding);
    background-color: var(--body-color);
}

.awards-roster__shell {
    display: grid;
    gap: var(--spacing-xl);
}

.awards-roster__head {
    display: grid;
    gap: var(--spacing-xs);
    max-width: 56ch;
}

.awards-roster__title {
    font-size: clamp(1.9rem, 4.2vw, 3.25rem);
    text-transform: uppercase;
}

.awards-roster__lead {
    color: var(--muted-color);
    font-size: 0.98rem;
}

.awards-roster__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: var(--spacing-sm);
}

.awards-roster__item {
    display: grid;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.awards-roster__item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}

.awards-roster__item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border-color);
}

.awards-roster__name {
    margin: 0;
    color: var(--title-color);
    font-size: 1.1rem;
    font-weight: var(--title-weight);
    letter-spacing: -0.01em;
}

.awards-roster__count {
    margin: 0;
    color: var(--muted-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.awards-roster__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.awards-roster__chip {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2xs);
    padding: 0.4rem 0.7rem;
    background-color: var(--body-color);
    border: 1px solid var(--border-color);
    border-left-width: 3px;
    font-size: 0.78rem;
    line-height: 1.2;
}

.awards-roster__chip--oro {
    border-left-color: var(--secondary-color);
}

.awards-roster__chip--oro .awards-roster__chip-medal {
    color: var(--medal-oro-text-color);
}

.awards-roster__chip--plata {
    border-left-color: var(--medal-plata-color);
}

.awards-roster__chip--plata .awards-roster__chip-medal {
    color: var(--medal-plata-text-color);
}

.awards-roster__chip--bronce {
    border-left-color: var(--secondary-dark-color);
}

.awards-roster__chip--bronce .awards-roster__chip-medal {
    color: var(--medal-bronce-text-color);
}

.awards-roster__chip--campeonato {
    border-left-color: var(--primary-color);
}

.awards-roster__chip--campeonato .awards-roster__chip-medal {
    color: var(--primary-color);
}

.awards-roster__chip-year {
    color: var(--title-color);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.awards-roster__chip-medal {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.awards-roster__chip-location {
    color: var(--muted-color);
}

/* --------------------------------------------------------------------------
   4. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .awards-timeline__stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .awards-timeline__stat {
        border-left: 0;
        padding-inline: 0;
    }

    /* En dos columnas hace falta un filete vertical entre las dos primeras
       celdas y entre las dos últimas, para mantener la rejilla visible. */
    .awards-timeline__stat:nth-child(2) {
        padding-left: var(--spacing-md);
        border-left: 1px solid var(--border-color);
    }

    .awards-timeline__stat:nth-child(3) {
        padding-top: var(--spacing-sm);
        border-top: 1px solid var(--border-color);
    }

    .awards-timeline__stat:nth-child(4) {
        padding-top: var(--spacing-sm);
        padding-left: var(--spacing-md);
        border-top: 1px solid var(--border-color);
        border-left: 1px solid var(--border-color);
    }
}

@media (max-width: 768px) {
    .awards-timeline__year {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .awards-timeline__year-head {
        padding-bottom: var(--spacing-xs);
        border-bottom: 1px solid var(--border-color);
    }

    .awards-timeline__body {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
}

@media (max-width: 480px) {
    .awards-roster__list {
        grid-template-columns: 1fr;
    }
}