/* Shared layout for club management headers. Theme artwork stays in its own half. */
.split-hero.split-hero {
    container-type: inline-size;
    box-sizing: border-box;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    min-height: 19rem;
    margin-bottom: 0;
    aspect-ratio: auto;
}

.split-hero.split-hero::before {
    inset: 0 0 0 55%;
    background-position: center;
    background-size: cover;
    mask-image: linear-gradient(90deg, transparent, #000 18%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%);
}

body .split-hero.split-hero::after {
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 9, 12, 0.78) 0%, rgba(4, 9, 12, 0.78) 50%, transparent 68%);
}

body.light-mode .split-hero.split-hero::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.55) 50%, transparent 68%);
}

.split-hero .split-hero__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-content: center;
    align-items: start;
    width: 55%;
    min-height: 0;
    padding: 0 1.5rem 0 0;
    box-sizing: border-box;
}

.split-hero__content > :is(.teams-hero__controls, .youth-hero__panel, .finance-hero__panel, .staff-dashboard-hero__panel, .infra-overview-hero-panel) {
    position: static;
    justify-self: start;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.split-hero h2 {
    overflow-wrap: anywhere;
    hyphens: auto;
    text-transform: uppercase;
    font-size: clamp(1.65rem, 3.6cqw, 3.6rem);
    line-height: 1.05;
    margin: 0.65rem 0 0;
}

.split-hero .teams-hero__control-row { flex-wrap: wrap; align-items: stretch; }
.split-hero .teams-hero__create-btn { flex: 1 1 auto; white-space: normal; }
.split-hero .staff-dashboard-hero__chips { flex-wrap: wrap; }

.split-hero .split-hero__content--with-media {
    width: 100%;
    padding: 0;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-items: center;
}

/* Tabs are siblings before the hero, with their own scrollable row. */
.team-module > .teams-hero-tabs,
.youth-view > .youth-hero-tabs,
.finance-shell > .finance-tabs .finance-tab-row,
.staff-view > .staff-tabs,
.scouting-view > .scouting-tabs {
    margin: 0;
    padding: 0.65rem 0 0.85rem;
    border-top: 0;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.team-module { --teams-hero-accent: #9ed64f; }
.youth-view { --youth-hero-accent: #f5b84b; --youth-hero-accent-strong: #ffd36d; }
.finance-shell { --finance-hero-gold: #d7aa45; }
body.light-mode .split-hero .teams-hero__eyebrow,
body.light-mode .split-hero .teams-hero__control-label { color: #47711e; }
body.light-mode .youth-view { --youth-hero-accent: #805818; --youth-hero-accent-strong: #805818; }
body.light-mode .split-hero.youth-hero { --youth-hero-accent: #805818; --youth-hero-accent-strong: #805818; }
body.light-mode .youth-view > .youth-hero-tabs .tab-btn span { color: #756a5a; }
.youth-view > .youth-hero-tabs { margin-bottom: 1rem; }
.youth-view > .split-hero { margin-bottom: 1rem; }
.infrastructure-view > .split-hero { margin-bottom: 1.25rem; }

/* One palette for selected primary tabs and the corresponding section tabs. */
body {
    --club-tabs-overview: #7bc785;
    --club-tabs-team: #9ed64f;
    --club-tabs-youth: #f5b84b;
    --club-tabs-scouting: #80c7ca;
    --club-tabs-finance: #d7aa45;
    --club-tabs-infra: #79cff2;
    --club-tabs-staff: #a78bfa;
}

body.light-mode {
    --club-tabs-overview: #28733a;
    --club-tabs-team: #47711e;
    --club-tabs-youth: #805818;
    --club-tabs-scouting: #25676e;
    --club-tabs-finance: #805c16;
    --club-tabs-infra: #176f98;
    --club-tabs-staff: #6843a3;
}

.club-primary-tabs > [data-tab="overview"] { --club-tab-accent: var(--club-tabs-overview); }
.club-primary-tabs > [data-tab="team"], .teams-hero-tabs { --club-tab-accent: var(--club-tabs-team); }
.club-primary-tabs > [data-tab="youth"], .youth-hero-tabs { --club-tab-accent: var(--club-tabs-youth); }
.club-primary-tabs > [data-tab="scouting"], .scouting-tabs { --club-tab-accent: var(--club-tabs-scouting); }
.club-primary-tabs > [data-tab="finance"], .finance-tab-row { --club-tab-accent: var(--club-tabs-finance); }
.club-primary-tabs > [data-tab="infra"], .infra-tabs { --club-tab-accent: var(--club-tabs-infra); }
.club-primary-tabs > [data-tab="staff"], .staff-tabs { --club-tab-accent: var(--club-tabs-staff); }
.club-primary-tabs > [data-tab="achievements"] { --club-tab-accent: var(--club-tabs-finance); }

/* Extra specificity also overrides existing light-mode tab styles. */
body :is(.club-primary-tabs, .teams-hero-tabs, .youth-hero-tabs, .scouting-tabs, .finance-tab-row, .infra-tabs, .staff-tabs) > .tab-btn.tab-btn.active {
    color: var(--club-tab-accent);
    border-color: var(--club-tab-accent);
}

body :is(.club-primary-tabs, .teams-hero-tabs, .youth-hero-tabs, .scouting-tabs, .finance-tab-row, .infra-tabs, .staff-tabs) > .tab-btn.tab-btn.active::after {
    background: var(--club-tab-accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--club-tab-accent) 30%, transparent);
}

body .youth-hero-tabs > .tab-btn.tab-btn.active span { color: inherit; }

@media (max-width: 760px) {
    .split-hero.split-hero { min-height: 0; }
    .split-hero.split-hero::before,
    body .split-hero.split-hero::after { display: none; }
    .split-hero .split-hero__content { width: 100%; padding: 0; }
    .split-hero .split-hero__content--with-media { grid-template-columns: minmax(0, 1fr); }
    .split-hero .scouting-hero__placeholder { display: none; }
    .split-hero .staff-dashboard-hero__chips span { display: inline; }
}

@media (max-width: 420px) {
    .split-hero .youth-hero__metrics,
    .split-hero .finance-hero__metrics { grid-template-columns: minmax(0, 1fr); }
}