/* ──────────────────────────────────────────────────────────────
   Hero image full-width
────────────────────────────────────────────────────────────── */
.hero-banner {
    margin: 0; /* remove any default page padding */
}

    .hero-banner img {
        display: block;
        width: 100%;
        height: auto;
    }

/* ──────────────────────────────────────────────────────────────
   Page content gutters & spacing
────────────────────────────────────────────────────────────── */
/* 24px of space above, 16px on left/right, 0 below */
.leagues-page {
    margin: 62px 62px 0;
    padding: 0;
}

/* ──────────────────────────────────────────────────────────────
   Page Title
────────────────────────────────────────────────────────────── */
.page-title {
    color: var(--Gray-900, #181D27);
    font-family: Inter, sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 38px; /* 126.667% */
    margin: 0;
}

/* ──────────────────────────────────────────────────────────────
   Header + Actions
────────────────────────────────────────────────────────────── */
.header-row {
    display: flex;
    align-items: flex-start; /* aligns top of title with buttons */
    gap: 20px; /* space between title & actions */
    width: 100%;
    margin-bottom: 24px; /* space below header */
}

    /* the button container itself */
    .header-row .actions {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 16px; /* space between each button */
        flex: 1 0 0; /* push to the right */
    }

/* ──────────────────────────────────────────────────────────────
   Button base style
────────────────────────────────────────────────────────────── */
.actions .btn {
    display: inline-flex; /* shrink to its contents */
    align-items: center;
    justify-content: center;
    gap: 8px; /* icon/text gap */
    padding: 10px 16px; /* 10px vertical, 16px horizontal */
    border-radius: 8px;
    border: 1px solid var(--Gray-300, #D5D7DA);
    background: var(--White, #FFF);
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    text-decoration: none;
    font-weight: 500;
    color: var(--Gray-900, #181D27);
    font-size: 14px;
    transition: background-color 0.2s, border-color 0.2s;
}

    .actions .btn:hover {
        background-color: var(--Gray-100, #F5F5F5);
    }

/* Primary button (Create a League) */
.btn-primary {
    background-color: var(--Green-500);
    border-color: var(--Green-500);
    color: #fff;
}

    .btn-primary:hover {
        background-color: var(--Green-600);
        border-color: var(--Green-600);
    }

/* Secondary button (Leave League) */
.btn-secondary {
    background-color: transparent;
    color: var(--Gray-700);
}

    .btn-secondary:hover {
        background-color: var(--Gray-100, #F5F5F5);
    }

/* ──────────────────────────────────────────────────────────────
   Tabs
────────────────────────────────────────────────────────────── */
.league-tabs {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    border-bottom: 1px solid var(--Gray-200);
    overflow-x: auto;
}

    .league-tabs .tab-item {
        margin-right: 1rem;
    }

        .league-tabs .tab-item a {
            display: inline-block;
            padding: 0.5rem 1rem;
            border-radius: 9999px;
            text-decoration: none;
            color: var(--Gray-700);
            border: 1px solid var(--Gray-300);
            transition: background-color 0.2s, border-color 0.2s;
        }

        .league-tabs .tab-item.active a {
            background-color: var(--Green-500);
            border-color: var(--Green-500);
            color: #ffffff;
        }

/* ──────────────────────────────────────────────────────────────
   Details Grid
────────────────────────────────────────────────────────────── */
.league-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.owner-coaches h2,
.owner-coaches h3,
.challenges h3 {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.owner-coaches p,
.coaches ul,
.challenges ul {
    margin: 0;
    padding: 0;
}

.coaches ul,
.challenges ul {
    list-style: none;
}

.coaches li,
.challenges li {
    margin-bottom: 0.25rem;
}