/**
 * season_data_display_images.css — Painel da temporada (proporções F055)
 * v1.0 (2026-07-08)
 */

/* season_banner 1920×1080 (16:9) — hero */
#season-data-display-container .season-header {
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 360px;
    min-height: 140px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* circuit_photo 600×600 (1:1) — cards de etapa */
#season-data-display-container .stage-card-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 220px;
    min-height: 140px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* circuit_photo no modal de detalhe da etapa */
#season-data-display-container .sdd-stage-modal-circuit-frame {
    margin: -1rem -1rem 1rem -1rem;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    max-height: 220px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-background);
}

#season-data-display-container .sdd-stage-modal-circuit-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* country_flag_sm 50×30 (5:3) */
#season-data-display-container .sdd-country-flag {
    width: 50px;
    height: 30px;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    object-position: center;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    flex-shrink: 0;
}

/* user_avatar 256×256 — avatares circulares */
#season-data-display-container .summary-grid .summary-card-avatar,
#season-data-display-container .rival-table .driver-avatar,
#season-data-display-container .points-detail-avatar.driver img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}

/* team_logo / org_logo 1:1 contain */
#season-data-display-container .classification-team-logo-wrapper {
    aspect-ratio: 1 / 1;
}

#season-data-display-container .classification-team-logo {
    width: 100%;
    height: 100%;
    max-width: 16px;
    max-height: 16px;
    object-fit: contain;
    object-position: center;
}

#season-data-display-container .points-detail-avatar.team img,
#season-data-display-container .points-detail-avatar.organization img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 767px) {
    #season-data-display-container .season-header {
        max-height: 220px;
        min-height: 120px;
    }

    #season-data-display-container .stage-card-image,
    #season-data-display-container .sdd-stage-modal-circuit-frame {
        max-height: 180px;
        min-height: 120px;
    }
}
