/* Portal Público da League (Fase 28) - segunda excecao deliberada ao padrao
   "sem estilo proprio" do plugin (a primeira foi arena-console.css, Fase
   9.5e). Escopo apenas as 8 telas publicas novas desta fase - nunca
   retrofitado em [spehx_ranking]/[spehx_season_archive]/[spehx_prize_detail]/
   [spehx_next_event], que ja existiam e podem ja estar estilizados via
   Elementor em sites em producao. Layout responsivo simples, sem framework. */

.spehx-league-home,
.spehx-event-calendar,
.spehx-athlete-profile,
.spehx-box-directory,
.spehx-box-profile,
.spehx-event-detail,
.spehx-official-results,
.spehx-prizes-overview {
    max-width: 100%;
    box-sizing: border-box;
}

.spehx-league-home *,
.spehx-event-calendar *,
.spehx-athlete-profile *,
.spehx-box-directory *,
.spehx-box-profile *,
.spehx-event-detail *,
.spehx-official-results *,
.spehx-prizes-overview * {
    box-sizing: border-box;
}

.spehx-league-home-nav ul,
.spehx-box-directory-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.spehx-league-home-nav li,
.spehx-box-directory-list li {
    padding: 0.25rem 0;
}

.spehx-event-calendar-table,
.spehx-athlete-history-table,
.spehx-prizes-overview-table {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto;
    display: block;
}

.spehx-event-calendar-table thead,
.spehx-athlete-history-table thead,
.spehx-prizes-overview-table thead {
    display: table-header-group;
}

.spehx-event-calendar-table tbody,
.spehx-athlete-history-table tbody,
.spehx-prizes-overview-table tbody {
    display: table-row-group;
}

.spehx-event-calendar-table tr,
.spehx-athlete-history-table tr,
.spehx-prizes-overview-table tr {
    display: table-row;
}

.spehx-event-calendar-table th,
.spehx-event-calendar-table td,
.spehx-athlete-history-table th,
.spehx-athlete-history-table td,
.spehx-prizes-overview-table th,
.spehx-prizes-overview-table td {
    display: table-cell;
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.spehx-athlete-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.spehx-athlete-header img {
    border-radius: 50%;
}

.spehx-athlete-achievements ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.spehx-box-directory-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Achado real de auditoria visual (rodada 8, 2026-08-05) - esta regra
   assumia que <input> era filho direto em linha de .spehx-box-directory-search
   (onde flex-basis controla largura), mas o input real fica dentro de um
   <label> (.spx-hub-filter-form label, column) - nesse eixo flex-basis
   controla ALTURA, forcando cada campo a renderizar como uma caixa de
   160px de altura. O item flex correto de .spehx-box-directory-search e o
   <label>, nao o <input> (que so precisa de width:100%, ja garantido por
   .spx-hub-filter-form input em design-system.css). */
.spehx-box-directory-search label {
    flex: 1 1 160px;
}

.spehx-category-leaderboards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.spehx-prize-podium {
    font-weight: bold;
}

.spehx-result-preliminary {
    opacity: 0.75;
}

.spehx-preliminary-badge {
    font-size: 0.75em;
    text-transform: uppercase;
    margin-left: 0.35em;
}

.spehx-share-links a {
    margin-right: 0.5rem;
}

@media (max-width: 600px) {
    .spehx-league-home-nav ul,
    .spehx-box-directory-list,
    .spehx-athlete-achievements ul {
        flex-direction: column;
        gap: 0.25rem;
    }

    .spehx-box-directory-search {
        flex-direction: column;
    }
}