/* =========================================================
   GEDIAN SPORTS
   PUBLIC CLUB DETAILS

   Institutional profile:
   centered club identity, Arabic RTL, Tajawal, compact data UI
   ========================================================= */

.public-club-details-page {
    --gedian-green: #5B8C3B;
    --gedian-green-dark: #41672e;
    --gedian-green-soft: #eef6e9;
    --gedian-navy: #17283b;
    --gedian-text: #334155;
    --gedian-muted: #7d8982;
    --gedian-border: #e1e7df;
    --gedian-bg: #f5f8f3;
    /*
       These can be overridden from the Club visual-identity fields.
       Invalid/missing club colors simply fall back to Gedian colors.
    */
    --club-primary: var(--gedian-green);
    --club-secondary: var(--gedian-navy);
    min-height: 100vh;
    padding: 12px 0 60px;
    background: radial-gradient( circle at 50% 0%, rgba(91,140,59,.055), transparent 27rem), linear-gradient( 180deg, #fbfcfa 0%, var(--gedian-bg) 100%);
    color: var(--gedian-text);
    font-family: "Tajawal",sans-serif;
}

    .public-club-details-page .container {
        max-width: 1280px;
    }


/* =========================================================
   Back bar / unavailable
   ========================================================= */

.club-details-backbar {
    min-height: 37px;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--gedian-muted);
    font-size: .61rem;
}

    .club-details-backbar > a {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: var(--gedian-green-dark);
        text-decoration: none;
        font-weight: 900;
    }

        .club-details-backbar > a:hover {
            color: var(--gedian-green);
        }

    .club-details-backbar > div {
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .club-details-backbar > div span {
            padding: 3px 7px;
            border: 1px solid var(--gedian-border);
            border-radius: 999px;
            background: #fff;
            color: #748079;
            font-size: .45rem;
            font-weight: 800;
        }

.club-details-unavailable {
    min-height: 390px;
    padding: 35px 20px;
    display: grid;
    place-items: center;
    align-content: center;
    border: 1px solid var(--gedian-border);
    border-radius: 18px;
    background: #fff;
    text-align: center;
    box-shadow: 0 12px 34px rgba(15,23,42,.035);
}

    .club-details-unavailable > div {
        width: 74px;
        height: 74px;
        display: grid;
        place-items: center;
        margin-bottom: 10px;
        border-radius: 22px;
        background: var(--gedian-green-soft);
        font-size: 2rem;
    }

    .club-details-unavailable h1 {
        margin: 0;
        color: var(--gedian-navy);
        font-size: 1.2rem;
        font-weight: 900;
    }

    .club-details-unavailable p {
        max-width: 520px;
        margin: 7px 0 15px;
        color: var(--gedian-muted);
        font-size: .69rem;
    }

    .club-details-unavailable a {
        min-height: 38px;
        padding: 7px 14px;
        display: inline-flex;
        align-items: center;
        border-radius: 9px;
        background: var(--gedian-green);
        color: #fff;
        text-decoration: none;
        font-size: .61rem;
        font-weight: 900;
    }


/* =========================================================
   Institutional hero
   ========================================================= */

.club-institution-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid #dce5d7;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 13px 36px rgba(45,66,32,.07);
}

.club-cover {
    position: relative;
    height: 205px;
    overflow: hidden;
    background: linear-gradient( 120deg, var(--club-primary), var(--club-secondary));
}

    .club-cover::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient( circle at 50% 10%, rgba(255,255,255,.16), transparent 30%), repeating-linear-gradient( -45deg, rgba(255,255,255,.022) 0, rgba(255,255,255,.022) 18px, transparent 18px, transparent 36px);
        pointer-events: none;
    }

.club-cover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.club-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, rgba(11,24,18,.08) 0%, rgba(11,24,18,.18) 55%, rgba(11,24,18,.58) 100%);
}

.club-cover-tags {
    position: absolute;
    right: 13px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

    .club-cover-tags span {
        min-height: 24px;
        padding: 4px 8px;
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(255,255,255,.22);
        border-radius: 999px;
        background: rgba(14,31,20,.48);
        color: #fff;
        font-size: .43rem;
        font-weight: 900;
        backdrop-filter: blur(6px);
    }


/* Centered institutional identity */

.club-centered-identity {
    position: relative;
    z-index: 5;
    min-height: 190px;
    padding: 0 20px 19px;
    display: grid;
    justify-items: center;
    text-align: center;
}

.club-logo-shell {
    width: 126px;
    height: 126px;
    margin-top: -63px;
    padding: 8px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 5px solid #fff;
    border-radius: 31px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(15,23,42,.15), 0 0 0 1px rgba(65,103,46,.08);
}

.club-main-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.club-main-logo-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: linear-gradient( 145deg, var(--club-primary), var(--club-secondary));
    color: #fff;
    font-size: 2.4rem;
    font-weight: 900;
}

.club-identity-copy {
    max-width: 780px;
    margin-top: 8px;
}

.club-institution-label {
    min-height: 21px;
    padding: 3px 7px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--gedian-green-soft);
    color: var(--gedian-green-dark);
    font-size: .39rem;
    font-weight: 900;
}

.club-identity-copy h1 {
    margin: 5px 0 0;
    color: var(--gedian-navy);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.3;
}

.club-identity-copy > p {
    margin: 2px 0 0;
    color: #909a94;
    font-size: .58rem;
    font-weight: 700;
}

.club-identity-meta {
    margin-top: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
}

    .club-identity-meta span {
        min-height: 23px;
        padding: 4px 8px;
        display: inline-flex;
        align-items: center;
        border: 1px solid #e3e9df;
        border-radius: 999px;
        background: #fbfcfa;
        color: #67746c;
        font-size: .43rem;
        font-weight: 800;
    }

.club-social-links {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

    .club-social-links a {
        width: 29px;
        height: 29px;
        display: grid;
        place-items: center;
        border: 1px solid #dfe6dc;
        border-radius: 8px;
        background: #fff;
        color: var(--gedian-green-dark);
        text-decoration: none;
        font-family: Arial,sans-serif;
        font-size: .42rem;
        font-weight: 900;
        transition: .15s ease;
    }

        .club-social-links a:hover {
            border-color: var(--gedian-green);
            background: var(--gedian-green-soft);
            transform: translateY(-1px);
        }


/* Headline metrics */

.club-headline-stats {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    border-top: 1px solid #e7ece5;
    background: #fbfcfa;
}

    .club-headline-stats > div {
        min-width: 0;
        min-height: 58px;
        padding: 8px;
        display: grid;
        place-items: center;
        align-content: center;
        border-inline-start: 1px solid #e7ece5;
        text-align: center;
    }

        .club-headline-stats > div:first-child {
            border-inline-start: 0;
        }

    .club-headline-stats small {
        color: #939d97;
        font-size: .37rem;
    }

    .club-headline-stats strong {
        margin-top: 2px;
        color: var(--gedian-navy);
        font-family: Arial,sans-serif;
        font-size: .78rem;
        font-weight: 900;
    }


/* =========================================================
   Main tabs
   ========================================================= */

.club-profile-tabs {
    position: sticky;
    top: 8px;
    z-index: 20;
    margin-top: 9px;
    padding: 5px;
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 4px;
    border: 1px solid var(--gedian-border);
    border-radius: 12px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 7px 24px rgba(15,23,42,.045);
    backdrop-filter: blur(9px);
}

.club-profile-tab {
    min-height: 40px;
    padding: 5px 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #707d75;
    font-family: inherit;
    font-size: .51rem;
    font-weight: 900;
    cursor: pointer;
    transition: .14s ease;
}

    .club-profile-tab:hover {
        background: #f5f8f3;
        color: var(--gedian-green-dark);
    }

    .club-profile-tab.is-active {
        background: var(--gedian-green);
        color: #fff;
    }

    .club-profile-tab > span {
        font-size: .65rem;
    }

    .club-profile-tab > b {
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background: rgba(15,23,42,.07);
        font-size: .34rem;
    }

    .club-profile-tab.is-active > b {
        background: rgba(255,255,255,.18);
    }


/* =========================================================
   Panel base / headings
   ========================================================= */

.club-tab-panel {
    margin-top: 9px;
    padding: 14px;
    border: 1px solid var(--gedian-border);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(15,23,42,.025);
}

    .club-tab-panel[hidden] {
        display: none !important;
    }

.club-section-heading {
    min-height: 62px;
    margin-bottom: 11px;
    padding-bottom: 9px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf0ed;
}

    .club-section-heading > div > span {
        color: var(--gedian-green);
        font-size: .4rem;
        font-weight: 900;
    }

    .club-section-heading h2 {
        margin: 2px 0 0;
        color: var(--gedian-navy);
        font-size: .88rem;
        font-weight: 900;
    }

    .club-section-heading > p {
        max-width: 600px;
        margin: 0;
        color: var(--gedian-muted);
        text-align: left;
        font-size: .43rem;
        line-height: 1.6;
    }

.club-section-subheading {
    min-height: 42px;
    padding: 6px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid #edf0ed;
}

    .club-section-subheading > div {
        min-width: 0;
    }

    .club-section-subheading span {
        display: block;
        color: var(--gedian-navy);
        font-size: .55rem;
        font-weight: 900;
    }

    .club-section-subheading small {
        display: block;
        margin-top: 1px;
        color: #9aa29d;
        font-size: .32rem;
    }

    .club-section-subheading > b {
        min-width: 25px;
        height: 25px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--gedian-green-soft);
        color: var(--gedian-green-dark);
        font-size: .4rem;
    }

.club-section-message {
    padding: 9px 11px;
    border-radius: 9px;
    font-size: .5rem;
}

    .club-section-message.is-warning {
        border: 1px solid #eadfbf;
        background: #fff9e9;
        color: #886817;
    }


/* =========================================================
   Information tab
   ========================================================= */

.club-info-layout {
    display: grid;
    grid-template-columns: 1.35fr .85fr;
    gap: 8px;
}

.club-info-card {
    min-width: 0;
    padding: 11px;
    border: 1px solid #e4e9e1;
    border-radius: 11px;
    background: #fff;
}

    .club-info-card.is-main {
        background: radial-gradient( circle at 90% 0%, rgba(91,140,59,.045), transparent 15rem), #fff;
    }

.club-card-title {
    min-height: 41px;
    padding-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #edf0ed;
}

    .club-card-title > span {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        background: var(--gedian-green-soft);
        color: var(--gedian-green-dark);
        font-family: Arial,sans-serif;
        font-size: .4rem;
        font-weight: 900;
    }

    .club-card-title small {
        display: block;
        color: #9aa29d;
        font-size: .32rem;
    }

    .club-card-title h3 {
        margin: 1px 0 0;
        color: var(--gedian-navy);
        font-size: .58rem;
        font-weight: 900;
    }

.club-info-list {
    margin: 0;
}

    .club-info-list > div {
        min-height: 38px;
        padding: 6px 1px;
        display: grid;
        grid-template-columns: 155px minmax(0,1fr);
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid #f0f2f0;
    }

        .club-info-list > div:last-child {
            border-bottom: 0;
        }

    .club-info-list dt {
        color: #909a94;
        font-size: .4rem;
    }

    .club-info-list dd {
        min-width: 0;
        margin: 0;
        color: #4f5d55;
        font-size: .47rem;
        font-weight: 900;
    }

        .club-info-list dd.is-schema-pending {
            color: #927020;
            font-weight: 800;
        }

    .club-info-list.compact {
        margin-top: 8px;
        border-top: 1px solid #edf0ed;
    }

.club-metric-grid {
    padding: 9px 0 4px;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
}

    .club-metric-grid > div {
        min-height: 67px;
        padding: 8px;
        display: grid;
        place-items: center;
        align-content: center;
        border: 1px solid #e7ebe5;
        border-radius: 9px;
        background: #fbfcfa;
        text-align: center;
    }

    .club-metric-grid small {
        color: #929c96;
        font-size: .34rem;
    }

    .club-metric-grid strong {
        margin-top: 3px;
        color: var(--gedian-navy);
        font-size: .58rem;
        font-weight: 900;
    }

.club-description-card {
    margin-top: 8px;
    padding: 12px;
    border: 1px solid #e4e9e1;
    border-radius: 11px;
    background: #fbfcfa;
}

    .club-description-card > span {
        color: var(--gedian-green);
        font-size: .4rem;
        font-weight: 900;
    }

    .club-description-card p {
        margin: 5px 0 0;
        color: #5f6d64;
        font-size: .48rem;
        line-height: 1.85;
        white-space: pre-line;
    }

.club-featured-images {
    margin-top: 9px;
}

.club-featured-grid {
    margin-top: 7px;
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 6px;
}

.club-featured-image {
    position: relative;
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dfe5dc;
    border-radius: 9px;
    background: #f3f6f1;
    cursor: zoom-in;
}

    .club-featured-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .2s ease;
    }

    .club-featured-image:hover img {
        transform: scale(1.035);
    }

.club-schema-note {
    margin-top: 9px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 9px;
    border: 1px solid #e8deb9;
    border-radius: 10px;
    background: #fffaf0;
}

    .club-schema-note > span {
        height: max-content;
        padding: 3px 6px;
        border-radius: 6px;
        background: #f7e9bc;
        color: #806115;
        font-size: .34rem;
        font-weight: 900;
    }

    .club-schema-note p {
        margin: 0;
        color: #796b46;
        font-size: .4rem;
        line-height: 1.7;
    }


/* =========================================================
   Squad / people
   ========================================================= */

.club-people-section + .club-people-section {
    margin-top: 12px;
}

.club-people-grid {
    margin-top: 7px;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 7px;
}

.club-person-card {
    min-width: 0;
    min-height: 84px;
    padding: 8px;
    display: grid;
    grid-template-columns: 51px minmax(0,1fr) auto;
    align-items: center;
    gap: 7px;
    border: 1px solid #e3e8e1;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

a.club-person-card:hover {
    color: inherit;
    border-color: #cdddc4;
    box-shadow: 0 7px 18px rgba(35,61,24,.055);
    transform: translateY(-1px);
}

.club-person-card.is-unlinked {
    background: #fafbfa;
}

.club-person-photo {
    position: relative;
    width: 49px;
    height: 49px;
    display: grid;
    place-items: center;
    overflow: visible;
    border: 1px solid #dde5d9;
    border-radius: 50%;
    background: var(--gedian-green-soft);
}

    .club-person-photo img,
    .club-person-photo > span {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .club-person-photo img {
        object-fit: cover;
    }

    .club-person-photo > span {
        display: grid;
        place-items: center;
        color: var(--gedian-green-dark);
        font-size: .72rem;
        font-weight: 900;
    }

.club-person-verified {
    position: absolute;
    right: -2px;
    bottom: -1px;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--gedian-green);
    color: #fff;
    font-size: .28rem;
    font-style: normal;
    font-weight: 900;
}

.club-person-copy {
    min-width: 0;
}

    .club-person-copy strong,
    .club-person-copy span,
    .club-person-copy small,
    .club-person-copy em {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .club-person-copy strong {
        color: var(--gedian-navy);
        font-size: .49rem;
        font-weight: 900;
    }

    .club-person-copy span {
        margin-top: 2px;
        color: #617067;
        font-size: .39rem;
        font-weight: 800;
    }

    .club-person-copy small {
        margin-top: 1px;
        color: #909a94;
        font-size: .32rem;
    }

    .club-person-copy em {
        margin-top: 2px;
        color: #a0a8a3;
        font-size: .29rem;
        font-style: normal;
    }

.club-captain-badge {
    margin-inline-start: 3px;
    padding: 1px 4px;
    border-radius: 4px;
    background: #ffe7a8;
    color: #755a11;
    font-family: Arial,sans-serif;
    font-size: .28rem;
}

.club-person-open {
    color: var(--gedian-green);
    font-size: .63rem;
    font-weight: 900;
}

.club-person-account-note {
    max-width: 61px;
    padding: 3px 5px;
    border-radius: 6px;
    background: #f2eee4;
    color: #8a7856;
    font-size: .27rem;
    line-height: 1.25;
    text-align: center;
}

.club-schema-empty {
    min-height: 96px;
    margin-top: 7px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px dashed #cfdac9;
    border-radius: 10px;
    background: #fafcf9;
}

.club-schema-empty-icon {
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--gedian-green-soft);
    font-size: 1rem;
}

.club-schema-empty strong {
    display: block;
    color: var(--gedian-navy);
    font-size: .5rem;
}

.club-schema-empty p {
    max-width: 780px;
    margin: 4px 0 0;
    color: #7d8982;
    font-size: .38rem;
    line-height: 1.65;
}

.club-history-two-columns {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
}

.club-history-panel {
    min-width: 0;
    padding: 8px;
    border: 1px solid #e4e9e1;
    border-radius: 10px;
}

.club-history-list {
    margin-top: 5px;
    display: grid;
    gap: 5px;
}

    .club-history-list .club-person-card {
        min-height: 72px;
    }

.club-account-resolution-note {
    margin-top: 11px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: start;
    gap: 9px;
    border: 1px solid #d9e7d1;
    border-radius: 10px;
    background: #f4f9f1;
}

    .club-account-resolution-note > span {
        padding: 4px 7px;
        border-radius: 6px;
        background: var(--gedian-green);
        color: #fff;
        font-family: Arial,sans-serif;
        font-size: .35rem;
        font-weight: 900;
    }

    .club-account-resolution-note p {
        margin: 0;
        color: #5e7054;
        font-size: .4rem;
        line-height: 1.7;
    }


/* =========================================================
   Competitions
   ========================================================= */

.club-competition-toolbar {
    min-height: 39px;
    margin-bottom: 7px;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #e5e9e3;
    border-radius: 8px;
    background: #fbfcfa;
}

    .club-competition-toolbar > span {
        color: #6e7a73;
        font-size: .41rem;
        font-weight: 900;
    }

    .club-competition-toolbar > div {
        display: flex;
        gap: 5px;
    }

    .club-competition-toolbar button {
        min-height: 27px;
        padding: 4px 8px;
        border: 1px solid #dce5d7;
        border-radius: 7px;
        background: #fff;
        color: var(--gedian-green-dark);
        font-family: inherit;
        font-size: .35rem;
        font-weight: 900;
        cursor: pointer;
    }

.club-competition-list {
    display: grid;
    gap: 7px;
}

.club-competition-card {
    overflow: hidden;
    border: 1px solid #e0e6de;
    border-radius: 11px;
    background: #fff;
}

    .club-competition-card[open] {
        border-color: #cfddc7;
        box-shadow: 0 6px 18px rgba(37,61,25,.035);
    }

    .club-competition-card > summary {
        min-height: 70px;
        padding: 9px 11px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        list-style: none;
        background: #fbfcfa;
        cursor: pointer;
    }

        .club-competition-card > summary::-webkit-details-marker {
            display: none;
        }

.competition-summary-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.competition-icon {
    flex: 0 0 41px;
    width: 41px;
    height: 41px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--gedian-green-soft);
    font-size: .95rem;
}

.competition-summary-main > div {
    min-width: 0;
}

.competition-summary-main h3 {
    margin: 0;
    overflow: hidden;
    color: var(--gedian-navy);
    font-size: .58rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.competition-summary-main p {
    margin: 3px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

    .competition-summary-main p span {
        padding: 2px 5px;
        border-radius: 5px;
        background: #f0f3ef;
        color: #869088;
        font-size: .3rem;
    }

.competition-summary-status {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 5px;
}

.participation-status {
    padding: 3px 6px;
    border-radius: 999px;
    background: #edf1ef;
    color: #637068;
    font-size: .32rem;
    font-weight: 900;
}

    .participation-status.status-2 {
        background: var(--gedian-green-soft);
        color: var(--gedian-green-dark);
    }

    .participation-status.status-4,
    .participation-status.status-5 {
        background: #fff0ed;
        color: #a14d3d;
    }

.competition-summary-status > b {
    padding: 3px 6px;
    border-radius: 999px;
    background: #f4f1e7;
    color: #7d682f;
    font-size: .32rem;
}

.competition-summary-status > i {
    color: #869188;
    font-style: normal;
    transition: transform .15s ease;
}

.club-competition-card[open] .competition-summary-status > i {
    transform: rotate(180deg);
}

.competition-body {
    padding: 10px;
    border-top: 1px solid #e6ebe3;
}

.competition-stat-table-wrap {
    overflow-x: auto;
    border: 1px solid #e3e8e1;
    border-radius: 9px;
}

.competition-stat-table {
    width: 100%;
    min-width: 810px;
    border-collapse: collapse;
    background: #fff;
    text-align: center;
}

    .competition-stat-table th,
    .competition-stat-table td {
        padding: 7px 6px;
        border-inline-start: 1px solid #edf0ed;
        border-bottom: 1px solid #edf0ed;
        white-space: nowrap;
    }

        .competition-stat-table th:first-child,
        .competition-stat-table td:first-child {
            border-inline-start: 0;
        }

    .competition-stat-table thead th {
        background: #f6f9f4;
        color: #7a867f;
        font-size: .32rem;
        font-weight: 900;
    }

    .competition-stat-table tbody td {
        color: var(--gedian-navy);
        font-family: Arial,"Tajawal",sans-serif;
        font-size: .47rem;
        font-weight: 900;
    }

    .competition-stat-table td.positive {
        color: #4b7b31;
    }

    .competition-stat-table td.negative {
        color: #ad4d47;
    }

.competition-extra-metrics {
    margin-top: 7px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

    .competition-extra-metrics span {
        padding: 4px 7px;
        border: 1px solid #e2e7df;
        border-radius: 7px;
        background: #fafbfa;
        color: #7b867f;
        font-size: .34rem;
    }

    .competition-extra-metrics strong {
        color: #506058;
    }

.competition-matches-heading {
    min-height: 42px;
    margin-top: 9px;
    padding: 6px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #edf0ed;
    border-bottom: 1px solid #edf0ed;
}

    .competition-matches-heading span {
        display: block;
        color: var(--gedian-navy);
        font-size: .48rem;
        font-weight: 900;
    }

    .competition-matches-heading small {
        display: block;
        margin-top: 1px;
        color: #99a19c;
        font-size: .3rem;
    }

    .competition-matches-heading b {
        min-width: 23px;
        height: 23px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--gedian-green-soft);
        color: var(--gedian-green-dark);
        font-size: .36rem;
    }

.competition-match-list {
    display: grid;
}

.competition-match-row {
    min-height: 56px;
    padding: 6px 3px;
    display: grid;
    grid-template-columns: 93px minmax(0,1fr) 55px;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #eef1ee;
    color: inherit;
    text-decoration: none;
}

    .competition-match-row:last-child {
        border-bottom: 0;
    }

    .competition-match-row:hover {
        color: inherit;
        background: #f8faf7;
    }

.competition-match-date span,
.competition-match-date small {
    display: block;
}

.competition-match-date span {
    color: #65736a;
    font-family: Arial,sans-serif;
    font-size: .36rem;
}

.competition-match-date small {
    margin-top: 1px;
    color: #99a19c;
    font-size: .29rem;
}

.competition-match-teams {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0,1fr) 67px minmax(0,1fr);
    align-items: center;
    gap: 6px;
    text-align: center;
}

    .competition-match-teams span {
        overflow: hidden;
        color: #48564e;
        font-size: .4rem;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .competition-match-teams strong {
        color: var(--gedian-navy);
        font-family: Arial,sans-serif;
        font-size: .54rem;
    }

.competition-match-result {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

    .competition-match-result span {
        padding: 3px 5px;
        border-radius: 5px;
        background: #eef1ef;
        color: #657068;
        font-size: .3rem;
        font-weight: 900;
    }

    .competition-match-result.is-win span {
        background: #edf7e8;
        color: #4a7931;
    }

    .competition-match-result.is-loss span {
        background: #fff0ed;
        color: #a34c42;
    }

    .competition-match-result.is-draw span {
        background: #f1f2f1;
        color: #6e7772;
    }

    .competition-match-result i {
        color: var(--gedian-green);
        font-style: normal;
    }


/* =========================================================
   Awards
   ========================================================= */

.club-awards-section + .club-awards-section {
    margin-top: 13px;
}

.club-awards-grid {
    margin-top: 7px;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 7px;
}

.club-award-card {
    min-width: 0;
    min-height: 99px;
    padding: 10px;
    display: grid;
    grid-template-columns: 49px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
    border: 1px solid #e2e7df;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

    .club-award-card.is-club-award {
        grid-template-columns: 49px minmax(0,1fr);
        background: radial-gradient( circle at 100% 0%, rgba(201,163,67,.07), transparent 9rem), #fff;
    }

a.club-award-card:hover {
    color: inherit;
    border-color: #d6dfd1;
    background: #fbfcfa;
}

.club-award-icon,
.club-award-winner {
    width: 47px;
    height: 47px;
    display: grid;
    place-items: center;
    border-radius: 13px;
}

.club-award-icon {
    background: #fff5d8;
    font-size: 1rem;
}

.club-award-winner {
    border-radius: 50%;
    background: var(--gedian-green-soft);
    color: var(--gedian-green-dark);
    font-size: .65rem;
    font-weight: 900;
}

.club-award-card > div:nth-child(2) {
    min-width: 0;
}

    .club-award-card > div:nth-child(2) > span {
        display: block;
        overflow: hidden;
        color: var(--gedian-green);
        font-size: .33rem;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.club-award-card h3 {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--gedian-navy);
    font-size: .5rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.club-award-card p {
    margin: 3px 0 0;
    overflow: hidden;
    color: #737f77;
    font-size: .35rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.club-award-card small {
    display: block;
    margin-top: 2px;
    color: #9aa29d;
    font-size: .3rem;
}

.club-award-card > i {
    color: var(--gedian-green);
    font-style: normal;
}

.club-award-card.is-unlinked {
    background: #fafbfa;
}


/* =========================================================
   Studio
   ========================================================= */

.club-studio-filter {
    margin-bottom: 9px;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border: 1px solid #e4e9e1;
    border-radius: 10px;
    background: #fafbfa;
}

    .club-studio-filter button {
        min-height: 31px;
        padding: 5px 9px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: #718078;
        font-family: inherit;
        font-size: .4rem;
        font-weight: 900;
        cursor: pointer;
    }

        .club-studio-filter button.is-active {
            background: var(--gedian-green);
            color: #fff;
        }

    .club-studio-filter b {
        min-width: 17px;
        height: 17px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background: rgba(15,23,42,.07);
        font-size: .28rem;
    }

    .club-studio-filter button.is-active b {
        background: rgba(255,255,255,.18);
    }

.club-studio-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 7px;
}

.club-media-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2e7df;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

    .club-media-card[hidden] {
        display: none !important;
    }

.club-media-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #eef2ec;
    cursor: zoom-in;
}

    .club-media-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .18s ease;
    }

    .club-media-preview:hover img {
        transform: scale(1.035);
    }

    .club-media-preview span {
        position: absolute;
        right: 7px;
        bottom: 7px;
        padding: 3px 6px;
        border-radius: 5px;
        background: rgba(15,31,20,.65);
        color: #fff;
        font-size: .3rem;
        font-weight: 900;
    }

.club-media-video {
    aspect-ratio: 16 / 10;
    background: #0f172a;
}

    .club-media-video video {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.club-media-copy {
    min-width: 0;
    padding: 8px;
}

    .club-media-copy strong {
        display: block;
        overflow: hidden;
        color: var(--gedian-navy);
        font-size: .45rem;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .club-media-copy p {
        margin: 3px 0 0;
        display: -webkit-box;
        overflow: hidden;
        color: #758078;
        font-size: .34rem;
        line-height: 1.45;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .club-media-copy small {
        display: block;
        margin-top: 4px;
        color: #9aa29d;
        font-size: .29rem;
    }

.club-media-card.is-file {
    min-height: 105px;
    padding: 9px;
    display: grid;
    grid-template-columns: 46px minmax(0,1fr) auto;
    align-items: center;
    gap: 8px;
}

.club-media-file-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--gedian-green-soft);
    font-size: .95rem;
}

.club-media-card.is-file .club-media-copy {
    padding: 0;
}

.club-media-card.is-file audio {
    width: 100%;
    height: 28px;
    margin-top: 4px;
}

.club-media-card.is-file > i {
    color: var(--gedian-green);
    font-size: .32rem;
    font-style: normal;
    font-weight: 900;
}


/* =========================================================
   Management concept
   ========================================================= */

.club-management-concept {
    max-width: 890px;
    margin: 0 auto;
    padding: 14px;
    border: 1px solid #dfe6dc;
    border-radius: 13px;
    background: radial-gradient( circle at 50% 0%, rgba(91,140,59,.07), transparent 15rem), #fbfcfa;
}

.management-term-header {
    min-height: 48px;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid #e5e9e3;
}

    .management-term-header span {
        display: block;
        color: var(--gedian-green);
        font-size: .34rem;
        font-weight: 900;
    }

    .management-term-header h3 {
        margin: 1px 0 0;
        color: var(--gedian-navy);
        font-size: .6rem;
        font-weight: 900;
    }

    .management-term-header > small {
        color: #969f99;
        font-size: .31rem;
    }

.management-president-placeholder {
    width: 190px;
    margin: 18px auto 0;
    display: grid;
    justify-items: center;
    text-align: center;
}

.management-person-photo {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--gedian-green-soft);
    box-shadow: 0 5px 18px rgba(32,58,21,.08);
}

    .management-person-photo span {
        color: var(--gedian-green-dark);
        font-size: 1rem;
        font-weight: 900;
    }

.management-president-placeholder strong {
    margin-top: 5px;
    color: var(--gedian-navy);
    font-size: .5rem;
}

.management-president-placeholder small {
    margin-top: 1px;
    color: #959f98;
    font-size: .29rem;
}

.management-tree-line {
    width: 1px;
    height: 27px;
    margin: 7px auto;
    background: #cad8c2;
}

.management-level-placeholder {
    position: relative;
    max-width: 650px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 15px;
}

    .management-level-placeholder::before {
        content: "";
        position: absolute;
        top: -8px;
        right: 16.66%;
        left: 16.66%;
        height: 1px;
        background: #cad8c2;
    }

    .management-level-placeholder > div {
        position: relative;
        display: grid;
        justify-items: center;
        text-align: center;
    }

        .management-level-placeholder > div::before {
            content: "";
            position: absolute;
            top: -8px;
            width: 1px;
            height: 8px;
            background: #cad8c2;
        }

        .management-level-placeholder > div > span {
            width: 51px;
            height: 51px;
            display: grid;
            place-items: center;
            border: 3px solid #fff;
            border-radius: 50%;
            background: #edf1ef;
            color: #627069;
            box-shadow: 0 3px 12px rgba(15,23,42,.06);
            font-size: .64rem;
            font-weight: 900;
        }

    .management-level-placeholder strong {
        margin-top: 4px;
        color: var(--gedian-navy);
        font-size: .4rem;
    }

    .management-level-placeholder small {
        color: #9aa19d;
        font-size: .27rem;
    }

.management-members-placeholder {
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px dashed #d6dfd1;
    text-align: center;
}

    .management-members-placeholder > span {
        color: #7b877f;
        font-size: .36rem;
        font-weight: 900;
    }

    .management-members-placeholder > div {
        margin-top: 7px;
        display: flex;
        justify-content: center;
        gap: 7px;
    }

    .management-members-placeholder i {
        width: 31px;
        height: 31px;
        border-radius: 50%;
        background: #edf1ef;
    }

.club-management-schema-message {
    max-width: 890px;
    margin: 9px auto 0;
    padding: 11px 13px;
    border: 1px solid #eadfbf;
    border-radius: 10px;
    background: #fffaf0;
}

    .club-management-schema-message > span {
        color: #94701b;
        font-size: .34rem;
        font-weight: 900;
    }

    .club-management-schema-message h3 {
        margin: 3px 0 0;
        color: #725b25;
        font-size: .49rem;
        font-weight: 900;
    }

    .club-management-schema-message p {
        margin: 5px 0 0;
        color: #7c6e4a;
        font-size: .38rem;
        line-height: 1.7;
    }


/* =========================================================
   Empty states
   ========================================================= */

.club-empty-state {
    min-height: 180px;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
}

    .club-empty-state > span {
        font-size: 1.45rem;
    }

    .club-empty-state h3 {
        margin: 5px 0 0;
        color: var(--gedian-navy);
        font-size: .62rem;
        font-weight: 900;
    }

    .club-empty-state p {
        max-width: 500px;
        margin: 3px 0 0;
        color: var(--gedian-muted);
        font-size: .4rem;
    }

.club-empty-small {
    padding: 12px 8px;
    color: #99a19c;
    text-align: center;
    font-size: .4rem;
}


/* =========================================================
   Bottom actions
   ========================================================= */

.club-details-bottom-actions {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

    .club-details-bottom-actions > a,
    .club-details-bottom-actions > button {
        min-height: 38px;
        padding: 7px 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 9px;
        font-family: inherit;
        font-size: .54rem;
        font-weight: 900;
        cursor: pointer;
    }

    .club-details-bottom-actions > a {
        border: 1px solid #dfe5dc;
        background: #fff;
        color: var(--gedian-green-dark);
        text-decoration: none;
    }

        .club-details-bottom-actions > a:hover {
            background: var(--gedian-green-soft);
        }

    .club-details-bottom-actions > button {
        border: 0;
        background: var(--gedian-green);
        color: #fff;
    }


/* =========================================================
   Lightbox
   ========================================================= */

.club-lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;
    padding: 40px 20px;
    display: grid;
    place-items: center;
    background: rgba(8,16,11,.88);
    backdrop-filter: blur(7px);
}

    .club-lightbox[hidden] {
        display: none !important;
    }

    .club-lightbox img {
        max-width: min(1100px,94vw);
        max-height: 86vh;
        border-radius: 10px;
        object-fit: contain;
        box-shadow: 0 18px 60px rgba(0,0,0,.35);
    }

    .club-lightbox > button {
        position: fixed;
        top: 16px;
        left: 18px;
        width: 37px;
        height: 37px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255,255,255,.25);
        border-radius: 50%;
        background: rgba(255,255,255,.12);
        color: #fff;
        font-family: Arial,sans-serif;
        font-size: 1rem;
        cursor: pointer;
    }


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199.98px) {
    .club-people-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .club-awards-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .club-studio-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}


@media (max-width: 991.98px) {
    .club-cover {
        height: 185px;
    }

    .club-profile-tabs {
        overflow-x: auto;
        display: flex;
        justify-content: flex-start;
        scrollbar-width: none;
    }

        .club-profile-tabs::-webkit-scrollbar {
            display: none;
        }

    .club-profile-tab {
        flex: 0 0 auto;
        min-width: 132px;
    }

    .club-info-layout {
        grid-template-columns: 1fr;
    }

    .club-featured-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .club-people-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .club-studio-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .club-section-heading {
        align-items: start;
        flex-direction: column;
    }

        .club-section-heading > p {
            text-align: right;
        }
}


@media (max-width: 767.98px) {
    .club-cover {
        height: 160px;
    }

    .club-logo-shell {
        width: 108px;
        height: 108px;
        margin-top: -54px;
        border-radius: 27px;
    }

    .club-main-logo-fallback {
        border-radius: 19px;
        font-size: 2rem;
    }

    .club-identity-copy h1 {
        font-size: 1.1rem;
    }

    .club-headline-stats {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

        .club-headline-stats > div {
            border-bottom: 1px solid #e7ece5;
        }

            .club-headline-stats > div:nth-child(4),
            .club-headline-stats > div:nth-child(5) {
                grid-column: auto;
            }

    .club-history-two-columns {
        grid-template-columns: 1fr;
    }

    .club-featured-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .competition-summary-status > b {
        display: none;
    }

    .competition-match-row {
        grid-template-columns: 73px minmax(0,1fr) 44px;
    }

    .competition-match-teams {
        grid-template-columns: minmax(0,1fr) 52px minmax(0,1fr);
    }

    .club-management-concept {
        padding-inline: 8px;
    }
}


@media (max-width: 575.98px) {
    .public-club-details-page {
        padding-top: 6px;
    }

        .public-club-details-page .container {
            padding-inline: 8px;
        }

    .club-details-backbar {
        min-height: 31px;
    }

        .club-details-backbar > div span:nth-child(2) {
            display: none;
        }

    .club-institution-hero {
        border-radius: 13px;
    }

    .club-cover {
        height: 135px;
    }

    .club-cover-tags span:nth-child(2) {
        display: none;
    }

    .club-centered-identity {
        min-height: 167px;
        padding-inline: 8px;
    }

    .club-logo-shell {
        width: 92px;
        height: 92px;
        margin-top: -46px;
        padding: 6px;
        border-width: 4px;
        border-radius: 23px;
    }

    .club-main-logo-fallback {
        border-radius: 16px;
        font-size: 1.65rem;
    }

    .club-identity-copy h1 {
        font-size: .92rem;
    }

    .club-identity-meta span {
        font-size: .36rem;
    }

    .club-headline-stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

        .club-headline-stats > div:last-child {
            grid-column: 1 / -1;
        }

    .club-tab-panel {
        margin-top: 7px;
        padding: 10px 8px;
        border-radius: 11px;
    }

    .club-profile-tab {
        min-width: 116px;
        min-height: 37px;
        font-size: .46rem;
    }

    .club-info-list > div {
        grid-template-columns: 118px minmax(0,1fr);
    }

    .club-people-grid {
        grid-template-columns: 1fr;
    }

    .club-person-card {
        min-height: 76px;
    }

    .club-schema-note,
    .club-account-resolution-note {
        grid-template-columns: 1fr;
    }

    .club-competition-card > summary {
        padding-inline: 8px;
    }

    .competition-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .participation-status {
        display: none;
    }

    .competition-match-row {
        grid-template-columns: 58px minmax(0,1fr) 34px;
        gap: 4px;
    }

    .competition-match-teams {
        grid-template-columns: minmax(0,1fr) 45px minmax(0,1fr);
        gap: 3px;
    }

        .competition-match-teams span {
            font-size: .34rem;
        }

    .club-awards-grid,
    .club-studio-grid {
        grid-template-columns: 1fr;
    }

    .club-studio-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .club-studio-filter::-webkit-scrollbar {
            display: none;
        }

        .club-studio-filter button {
            flex: 0 0 auto;
        }

    .management-term-header {
        align-items: start;
        flex-direction: column;
    }

    .management-level-placeholder {
        gap: 4px;
    }

        .management-level-placeholder > div > span {
            width: 43px;
            height: 43px;
        }

    .club-details-bottom-actions {
        flex-direction: column;
        align-items: stretch;
    }

        .club-details-bottom-actions > a,
        .club-details-bottom-actions > button {
            width: 100%;
        }
}


/* =========================================================
   GEDIAN SPORTS - CLUB DETAILS MODERN V2
   Screenshot-inspired institutional header + readable type
   ========================================================= */

/* ---------------------------------------------------------
   READABILITY BASELINE

   Important:
   The original compact prototype used many .3rem - .5rem
   values. Public pages must remain readable at normal zoom.
   --------------------------------------------------------- */

.public-club-details-page {
    --club-third: #ffffff;
    font-size: 16px;
    line-height: 1.65;
    font-family: "Tajawal", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

    .public-club-details-page :is( p, a, button, dt, dd, th, td ) {
        font-size: .84rem !important;
    }

    .public-club-details-page small,
    .public-club-details-page em {
        font-size: .74rem !important;
    }

    .public-club-details-page span {
        font-size: .8rem !important;
    }

    .public-club-details-page b {
        font-size: .72rem !important;
    }

    .public-club-details-page strong {
        font-size: .88rem !important;
    }

    .public-club-details-page h1 {
        font-size: clamp(1.65rem, 1.35rem + .8vw, 2.2rem) !important;
    }

    .public-club-details-page h2 {
        font-size: clamp(1.15rem, 1.05rem + .3vw, 1.4rem) !important;
    }

    .public-club-details-page h3 {
        font-size: 1rem !important;
    }

    .public-club-details-page h4 {
        font-size: .94rem !important;
    }

.club-section-heading > div > span,
.club-card-title small,
.club-card-title > span,
.club-info-card span,
.club-info-list dt,
.club-section-subheading small,
.club-person-copy span,
.club-person-copy small,
.club-person-copy em,
.competition-summary-main p span,
.competition-stat-table thead th,
.competition-extra-metrics span,
.competition-match-date span,
.competition-match-date small,
.competition-match-teams span,
.competition-match-result span,
.club-award-card > div:nth-child(2) > span,
.club-award-card small,
.club-media-copy small,
.club-management-schema-message > span,
.club-management-schema-message p,
.club-schema-note p,
.club-schema-empty p,
.club-account-resolution-note p {
    font-size: .78rem !important;
    line-height: 1.55;
}

.club-section-heading > p,
.club-description-card p,
.club-news-card p,
.club-transfer-note p {
    font-size: .9rem !important;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   SCREENSHOT-INSPIRED CLUB HERO

   RTL adaptation of the supplied reference:
   crest + identity + social actions over a deep green
   photographic institutional header.
   --------------------------------------------------------- */

.club-showcase-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(28,87,61,.25);
    border-radius: 18px;
    background: #062f26;
    color: #fff;
    box-shadow: 0 20px 55px rgba(7,35,28,.14), 0 4px 14px rgba(7,35,28,.08);
}

.club-showcase-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: radial-gradient( circle at 25% 35%, rgba(38,136,91,.38), transparent 34%), linear-gradient( 110deg, #031c19 0%, #064638 48%, #08342e 100%);
}

    .club-showcase-background::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .22;
        background-image: linear-gradient( 90deg, transparent 0, transparent 48%, rgba(255,255,255,.05) 50%, transparent 52%), repeating-linear-gradient( 0deg, rgba(255,255,255,.025) 0, rgba(255,255,255,.025) 1px, transparent 1px, transparent 19px);
    }

.club-showcase-background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.82) contrast(1.08);
}

.club-showcase-background-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(2,24,21,.94) 0%, rgba(3,43,34,.84) 42%, rgba(3,47,37,.72) 70%, rgba(2,27,23,.88) 100%), linear-gradient( 180deg, rgba(0,0,0,.08), rgba(0,0,0,.28));
}

.club-showcase-main {
    position: relative;
    z-index: 2;
    min-height: 195px;
    padding: 28px 34px 22px;
    display: grid;
    grid-template-columns: 132px minmax(0,1fr) auto;
    align-items: center;
    gap: 26px;
}

.club-showcase-logo {
    width: 124px;
    height: 124px;
    padding: 7px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.7);
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(10,62,46,.08);
}

    .club-showcase-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .club-showcase-logo > span {
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        border-radius: 17px;
        background: linear-gradient( 145deg, var(--club-primary), var(--club-secondary));
        color: #fff;
        font-size: 2.4rem !important;
        font-weight: 900;
    }

.club-showcase-identity {
    min-width: 0;
}

.club-showcase-location {
    display: block;
    margin-bottom: 5px;
    color: rgba(255,255,255,.7);
    font-size: .78rem !important;
    font-weight: 800;
    letter-spacing: .08em;
}

.club-showcase-identity h1 {
    margin: 0;
    color: #fff;
    font-weight: 900;
    line-height: 1.25;
    text-shadow: 0 2px 12px rgba(0,0,0,.2);
}

.club-showcase-identity > p {
    margin: 4px 0 0;
    color: rgba(255,255,255,.76);
    font-size: 1rem !important;
    font-weight: 600;
}

.club-showcase-badges {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

    .club-showcase-badges span {
        min-height: 28px;
        padding: 5px 9px;
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 7px;
        background: rgba(4,32,27,.42);
        color: rgba(255,255,255,.9);
        font-size: .75rem !important;
        font-weight: 800;
        backdrop-filter: blur(4px);
    }

.club-showcase-social {
    align-self: start;
    display: flex;
    align-items: center;
    gap: 7px;
}

    .club-showcase-social a {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255,255,255,.3);
        border-radius: 50%;
        background: rgba(255,255,255,.94);
        color: #143f34;
        text-decoration: none;
        font-family: Arial,sans-serif;
        font-size: .78rem !important;
        font-weight: 900;
        transition: transform .15s ease, background .15s ease;
    }

        .club-showcase-social a:hover {
            transform: translateY(-2px);
            background: #fff;
        }


/* Facts strip - same visual role as the reference image */

.club-showcase-facts {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    border-top: 1px solid rgba(255,255,255,.13);
    background: rgba(2,28,23,.72);
    backdrop-filter: blur(8px);
}

.club-showcase-fact {
    min-width: 0;
    min-height: 74px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-inline-start: 1px solid rgba(255,255,255,.11);
    color: #fff;
    text-decoration: none;
}

    .club-showcase-fact:first-child {
        border-inline-start: 0;
    }

a.club-showcase-fact:hover {
    color: #fff;
    background: rgba(255,255,255,.06);
}

.club-showcase-fact > span {
    flex: 0 0 auto;
    font-size: 1.05rem !important;
}

.club-showcase-fact p {
    min-width: 0;
    margin: 0;
}

.club-showcase-fact small,
.club-showcase-fact strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.club-showcase-fact small {
    color: rgba(255,255,255,.58);
    font-size: .72rem !important;
}

.club-showcase-fact strong {
    margin-top: 2px;
    color: #fff;
    font-size: .9rem !important;
    font-weight: 900;
}

.club-showcase-fact > i {
    margin-inline-start: auto;
    color: #78d691;
    font-size: .9rem;
    font-style: normal;
}

.club-color-dots {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    overflow: visible !important;
}

    .club-color-dots i {
        width: 18px;
        height: 18px;
        display: inline-block;
        border: 2px solid rgba(255,255,255,.9);
        border-radius: 50%;
        box-shadow: 0 1px 6px rgba(0,0,0,.22);
    }

        .club-color-dots i.is-empty {
            background: repeating-linear-gradient( 45deg, #d5dad7, #d5dad7 3px, transparent 3px, transparent 6px) !important;
        }

    .club-color-dots.is-light i {
        border-color: #d7ded9;
        box-shadow: none;
    }

.club-colors-fact > span {
    color: #6fc282;
}


/* ---------------------------------------------------------
   Tabs - more like a professional sports portal
   --------------------------------------------------------- */

.club-profile-tabs {
    top: 8px;
    padding: 0 10px !important;
    overflow-x: auto !important;
    display: flex !important;
    gap: 0 !important;
    border: 1px solid #e1e8df !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.97) !important;
    scrollbar-width: none;
}

    .club-profile-tabs::-webkit-scrollbar {
        display: none;
    }

.club-profile-tab {
    position: relative;
    flex: 1 0 auto;
    min-width: 122px !important;
    min-height: 54px !important;
    padding: 10px 12px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #627168 !important;
    font-size: .82rem !important;
}

    .club-profile-tab::after {
        content: "";
        position: absolute;
        right: 18px;
        bottom: 0;
        left: 18px;
        height: 3px;
        border-radius: 99px 99px 0 0;
        background: transparent;
    }

    .club-profile-tab:hover {
        color: var(--gedian-green-dark) !important;
        background: #fafcf9 !important;
    }

    .club-profile-tab.is-active {
        color: var(--gedian-green-dark) !important;
        background: transparent !important;
    }

        .club-profile-tab.is-active::after {
            background: var(--gedian-green);
        }

    .club-profile-tab > span {
        font-size: 1rem !important;
    }

    .club-profile-tab > b {
        min-width: 21px !important;
        height: 21px !important;
        background: #eef4eb !important;
        color: var(--gedian-green-dark) !important;
        font-size: .68rem !important;
    }


/* ---------------------------------------------------------
   Panels / cards - modernized spacing
   --------------------------------------------------------- */

.club-tab-panel {
    margin-top: 11px !important;
    padding: 20px !important;
    border-radius: 16px !important;
    border-color: #e2e8e0 !important;
    box-shadow: 0 10px 32px rgba(23,40,59,.035) !important;
}

.club-section-heading {
    min-height: 76px !important;
    margin-bottom: 16px !important;
    padding-bottom: 13px !important;
}

    .club-section-heading > div > span {
        font-size: .75rem !important;
    }

    .club-section-heading h2 {
        margin-top: 3px !important;
    }

    .club-section-heading > p {
        font-size: .86rem !important;
    }

.club-info-card,
.club-description-card,
.club-history-panel,
.club-competition-card,
.club-award-card,
.club-media-card,
.club-management-concept {
    border-radius: 13px !important;
}

.club-info-card {
    padding: 16px !important;
}

.club-card-title {
    min-height: 52px !important;
    padding-bottom: 10px !important;
}

    .club-card-title > span {
        width: 36px !important;
        height: 36px !important;
        font-size: .76rem !important;
    }

.club-info-list > div {
    min-height: 48px !important;
    grid-template-columns: 180px minmax(0,1fr) !important;
}

.club-info-list dt {
    font-size: .8rem !important;
}

.club-info-list dd {
    font-size: .9rem !important;
}

.club-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--gedian-green-dark);
    text-decoration: none;
    font-weight: 900;
}

    .club-inline-link:hover {
        color: var(--gedian-green);
        text-decoration: underline;
    }

.club-metric-grid > div {
    min-height: 86px !important;
}

.club-metric-grid small {
    font-size: .76rem !important;
}

.club-metric-grid strong {
    font-size: 1rem !important;
}


/* ---------------------------------------------------------
   People / clickable profiles
   --------------------------------------------------------- */

.club-people-grid {
    gap: 10px !important;
}

.club-person-card {
    min-height: 106px !important;
    padding: 12px !important;
    grid-template-columns: 64px minmax(0,1fr) 22px !important;
    gap: 11px !important;
    border-radius: 13px !important;
}

.club-person-photo {
    width: 62px !important;
    height: 62px !important;
}

.club-person-copy strong {
    font-size: .95rem !important;
}

.club-person-copy span {
    margin-top: 3px !important;
    font-size: .8rem !important;
}

.club-person-copy small {
    font-size: .73rem !important;
}

.club-person-name-en {
    margin-top: 2px;
    color: #87938b !important;
}

.club-person-copy em {
    margin-top: 4px !important;
    font-size: .7rem !important;
}

.club-person-open {
    color: var(--gedian-green) !important;
    font-size: 1rem !important;
}


/* ---------------------------------------------------------
   Competition tables and match rows
   --------------------------------------------------------- */

.club-competition-card > summary {
    min-height: 86px !important;
    padding: 14px 16px !important;
}

.competition-icon {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    font-size: 1.15rem !important;
}

.competition-summary-main h3 {
    font-size: .96rem !important;
}

.participation-status,
.competition-summary-status > b {
    font-size: .72rem !important;
}

.competition-body {
    padding: 15px !important;
}

.competition-stat-table th {
    font-size: .74rem !important;
}

.competition-stat-table td {
    font-size: .86rem !important;
}

.competition-match-row {
    min-height: 70px !important;
}

.competition-match-date span,
.competition-match-date small {
    font-size: .72rem !important;
}

.competition-match-teams span {
    font-size: .82rem !important;
}

.competition-match-teams strong {
    font-size: .95rem !important;
}

.competition-match-result span {
    font-size: .72rem !important;
}


/* ---------------------------------------------------------
   TRANSFERS
   --------------------------------------------------------- */

.club-transfer-summary {
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
}

    .club-transfer-summary > div {
        min-height: 82px;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 1px solid #e1e8df;
        border-radius: 12px;
        background: #fafcf9;
    }

        .club-transfer-summary > div.is-arrivals {
            background: #f1f8ee;
        }

        .club-transfer-summary > div.is-departures {
            background: #fff6f3;
        }

    .club-transfer-summary span {
        color: #66746b;
        font-size: .82rem !important;
        font-weight: 800;
    }

    .club-transfer-summary strong {
        color: var(--gedian-navy);
        font-family: Arial,sans-serif;
        font-size: 1.35rem !important;
    }

.club-transfer-toolbar {
    min-height: 52px;
    margin-bottom: 10px;
    padding: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #e2e8e0;
    border-radius: 11px;
    background: #fbfcfa;
}

    .club-transfer-toolbar > div {
        display: flex;
        gap: 5px;
    }

    .club-transfer-toolbar button {
        min-height: 36px;
        padding: 7px 12px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #69766e;
        font-size: .78rem !important;
        font-weight: 900;
        cursor: pointer;
    }

        .club-transfer-toolbar button.is-active {
            background: var(--gedian-green);
            color: #fff;
        }

    .club-transfer-toolbar > span {
        color: #929b95;
        font-size: .72rem !important;
    }

.club-transfer-list {
    display: grid;
    gap: 9px;
}

.club-transfer-row {
    position: relative;
    min-width: 0;
    min-height: 104px;
    padding: 13px 15px;
    display: grid;
    grid-template-columns: minmax(230px,1.15fr) minmax(300px,1.5fr) minmax(135px,.65fr) minmax(160px,.75fr);
    align-items: center;
    gap: 14px;
    border: 1px solid #e1e7df;
    border-inline-start: 4px solid #99a59d;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(25,45,31,.025);
}

    .club-transfer-row[hidden] {
        display: none !important;
    }

    .club-transfer-row.is-incoming {
        border-inline-start-color: #5b8c3b;
    }

    .club-transfer-row.is-outgoing {
        border-inline-start-color: #c66a53;
    }

.club-transfer-player {
    min-width: 0;
    display: grid;
    grid-template-columns: 60px minmax(0,1fr);
    align-items: center;
    gap: 10px;
}

.club-transfer-player-photo {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #dfe6dc;
    border-radius: 50%;
    background: var(--gedian-green-soft);
    text-decoration: none;
}

    .club-transfer-player-photo img,
    .club-transfer-player-photo > span {
        width: 100%;
        height: 100%;
    }

    .club-transfer-player-photo img {
        object-fit: cover;
    }

    .club-transfer-player-photo > span {
        display: grid;
        place-items: center;
        color: var(--gedian-green-dark);
        font-size: 1rem !important;
        font-weight: 900;
    }

.club-transfer-player > div {
    min-width: 0;
}

.club-transfer-direction-badge {
    display: inline-flex;
    min-height: 23px;
    padding: 3px 7px;
    align-items: center;
    border-radius: 999px;
    background: #eef2ef;
    color: #66736b;
    font-size: .68rem !important;
    font-weight: 900;
}

    .club-transfer-direction-badge.is-incoming {
        background: #edf7e8;
        color: #46772e;
    }

    .club-transfer-direction-badge.is-outgoing {
        background: #fff0ec;
        color: #a25442;
    }

.club-transfer-player-name {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--gedian-navy);
    text-decoration: none;
    font-size: .94rem !important;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .club-transfer-player-name:hover {
        color: var(--gedian-green-dark);
    }

.club-transfer-player small {
    display: block;
    margin-top: 1px;
    color: #929b95;
    font-size: .72rem !important;
}

.club-transfer-movement {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0,1fr) 38px minmax(0,1fr);
    align-items: center;
    gap: 7px;
}

    .club-transfer-movement > div {
        min-width: 0;
    }

    .club-transfer-movement small {
        display: block;
        color: #919b95;
        font-size: .68rem !important;
    }

    .club-transfer-movement a,
    .club-transfer-movement strong {
        display: block;
        margin-top: 2px;
        overflow: hidden;
        color: #425149;
        text-decoration: none;
        font-size: .84rem !important;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .club-transfer-movement a:hover {
            color: var(--gedian-green-dark);
        }

    .club-transfer-movement > span {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--gedian-green-soft);
        color: var(--gedian-green-dark);
        font-size: 1rem !important;
        font-weight: 900;
    }

.club-transfer-meta strong,
.club-transfer-meta span,
.club-transfer-meta small {
    display: block;
}

.club-transfer-meta strong {
    color: var(--gedian-navy);
    font-size: .84rem !important;
}

.club-transfer-meta span {
    margin-top: 3px;
    color: #647169;
    font-size: .8rem !important;
}

.club-transfer-meta small {
    margin-top: 2px;
    color: #959f98;
    font-size: .7rem !important;
}

.club-transfer-financial {
    text-align: left;
}

    .club-transfer-financial > strong {
        display: block;
        color: var(--gedian-navy);
        font-size: .9rem !important;
    }

    .club-transfer-financial > div {
        margin-top: 5px;
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 4px;
    }

    .club-transfer-financial span,
    .club-transfer-financial b {
        min-height: 22px;
        padding: 3px 6px;
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        background: #f0f3f1;
        color: #69756e;
        font-size: .65rem !important;
        font-weight: 900;
    }

    .club-transfer-financial b {
        background: #eef4eb;
        color: #567340;
    }

        .club-transfer-financial b.is-verified {
            background: #eaf7ed;
            color: #3e7e4c;
        }

.club-transfer-note {
    grid-column: 1 / -1;
    padding: 9px 11px;
    border-top: 1px solid #edf0ed;
    background: #fbfcfa;
    border-radius: 8px;
}

    .club-transfer-note strong {
        color: #46544c;
    }

    .club-transfer-note p {
        margin: 3px 0 0;
        color: #77827b;
    }


/* ---------------------------------------------------------
   CLUB NEWS
   --------------------------------------------------------- */

.club-news-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
}

.club-news-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e1e7df;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(24,43,30,.03);
}

    .club-news-card.is-featured {
        border-color: #cbdcc1;
        box-shadow: 0 10px 28px rgba(68,112,44,.06);
    }

.club-news-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient( 135deg, #edf5e9, #dbe9d4);
}

    .club-news-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .22s ease;
    }

.club-news-card:hover .club-news-cover img {
    transform: scale(1.025);
}

.club-news-cover > span {
    color: var(--gedian-green-dark);
    font-size: 2rem !important;
}

.club-news-cover-badges {
    position: absolute;
    top: 9px;
    right: 9px;
    display: flex;
    gap: 4px;
}

    .club-news-cover-badges b {
        min-height: 24px;
        padding: 3px 7px;
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        background: rgba(8,43,32,.8);
        color: #fff;
        font-size: .65rem !important;
    }

.club-news-copy {
    padding: 14px;
}

.club-news-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

    .club-news-meta span,
    .club-news-meta time {
        min-height: 23px;
        padding: 3px 6px;
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        background: #f0f4ee;
        color: #6e7c72;
        font-size: .67rem !important;
        font-weight: 800;
    }

    .club-news-meta time {
        margin-inline-start: auto;
        background: transparent;
        color: #979f9a;
    }

.club-news-copy h3 {
    margin: 9px 0 0;
    color: var(--gedian-navy);
    line-height: 1.55;
}

.club-news-copy > p {
    margin: 7px 0 0;
    display: -webkit-box;
    overflow: hidden;
    color: #68756d;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.club-news-footer {
    min-height: 42px;
    margin-top: 12px;
    padding-top: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid #edf0ed;
}

    .club-news-footer > div {
        min-width: 0;
    }

        .club-news-footer > div span {
            display: block;
            overflow: hidden;
            color: #8b958f;
            font-size: .7rem !important;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .club-news-footer > a {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 6px 9px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border-radius: 8px;
        background: var(--gedian-green-soft);
        color: var(--gedian-green-dark);
        text-decoration: none;
        font-size: .73rem !important;
        font-weight: 900;
    }

.club-news-details {
    margin-top: 10px;
    border-top: 1px solid #edf0ed;
}

    .club-news-details > summary {
        padding-top: 10px;
        color: var(--gedian-green-dark);
        font-size: .78rem;
        font-weight: 900;
        cursor: pointer;
    }

    .club-news-details > div {
        margin-top: 8px;
        max-height: 330px;
        overflow: auto;
        padding: 10px;
        border-radius: 9px;
        background: #fafcf9;
        color: #58665e;
        font-size: .86rem;
        line-height: 1.85;
        white-space: pre-line;
    }


/* ---------------------------------------------------------
   Awards / Studio / Management readability
   --------------------------------------------------------- */

.club-award-card {
    min-height: 120px !important;
    padding: 14px !important;
}

.club-award-icon,
.club-award-winner {
    width: 56px !important;
    height: 56px !important;
}

.club-award-card h3 {
    font-size: .9rem !important;
}

.club-media-copy strong {
    font-size: .88rem !important;
}

.club-media-copy p {
    font-size: .8rem !important;
}

.club-media-preview span {
    font-size: .7rem !important;
}

.club-studio-filter button {
    min-height: 38px !important;
    font-size: .78rem !important;
}

.management-term-header h3,
.management-president-placeholder strong,
.management-level-placeholder strong {
    font-size: .88rem !important;
}

.management-president-placeholder small,
.management-level-placeholder small {
    font-size: .72rem !important;
}


/* ---------------------------------------------------------
   Responsive V2
   --------------------------------------------------------- */

@media (max-width: 1199.98px) {

    .club-showcase-main {
        grid-template-columns: 116px minmax(0,1fr) auto;
        gap: 20px;
        padding-inline: 24px;
    }

    .club-showcase-logo {
        width: 108px;
        height: 108px;
    }

    .club-showcase-facts {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .club-showcase-fact:nth-child(n+4) {
        border-top: 1px solid rgba(255,255,255,.11);
    }

    .club-news-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .club-transfer-row {
        grid-template-columns: minmax(210px,1fr) minmax(280px,1.35fr) minmax(125px,.65fr);
    }

    .club-transfer-financial {
        grid-column: 1 / -1;
        padding-top: 8px;
        border-top: 1px solid #edf0ed;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: right;
    }
}


@media (max-width: 991.98px) {

    .club-showcase-main {
        min-height: 180px;
        grid-template-columns: 100px minmax(0,1fr);
    }

    .club-showcase-logo {
        width: 94px;
        height: 94px;
        border-radius: 20px;
    }

    .club-showcase-social {
        grid-column: 1 / -1;
        align-self: auto;
        justify-content: flex-start;
        padding-inline-start: 120px;
        margin-top: -10px;
    }

    .club-profile-tab {
        flex: 0 0 auto;
        min-width: 135px !important;
    }

    .club-info-list > div {
        grid-template-columns: 155px minmax(0,1fr) !important;
    }

    .club-transfer-row {
        grid-template-columns: 1fr 1fr;
    }

    .club-transfer-meta,
    .club-transfer-financial {
        grid-column: auto;
    }

    .club-transfer-financial {
        padding-top: 0;
        border-top: 0;
        display: block;
        text-align: left;
    }
}


@media (max-width: 767.98px) {

    .club-showcase-main {
        padding: 22px 18px 18px;
        grid-template-columns: 86px minmax(0,1fr);
        gap: 14px;
    }

    .club-showcase-logo {
        width: 82px;
        height: 82px;
        padding: 5px;
    }

    .club-showcase-identity h1 {
        font-size: 1.45rem !important;
    }

    .club-showcase-social {
        padding-inline-start: 100px;
    }

    .club-showcase-facts {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .club-showcase-fact {
        min-height: 69px;
        border-top: 1px solid rgba(255,255,255,.1);
    }

        .club-showcase-fact:last-child {
            grid-column: 1 / -1;
        }

    .club-tab-panel {
        padding: 16px !important;
    }

    .club-info-list > div {
        grid-template-columns: 130px minmax(0,1fr) !important;
    }

    .club-transfer-summary {
        grid-template-columns: 1fr;
    }

    .club-transfer-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

        .club-transfer-toolbar > div {
            overflow-x: auto;
        }

        .club-transfer-toolbar > span {
            padding-inline: 4px;
        }

    .club-transfer-row {
        grid-template-columns: 1fr;
    }

    .club-transfer-financial {
        text-align: right;
    }

        .club-transfer-financial > div {
            justify-content: flex-start;
        }

    .club-news-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 575.98px) {

    .public-club-details-page .container {
        padding-inline: 8px;
    }

    .club-showcase-hero {
        border-radius: 13px;
    }

    .club-showcase-main {
        min-height: 0;
        padding: 20px 14px 17px;
        grid-template-columns: 76px minmax(0,1fr);
    }

    .club-showcase-logo {
        width: 72px;
        height: 72px;
        border-radius: 17px;
    }

    .club-showcase-location {
        font-size: .68rem !important;
    }

    .club-showcase-identity h1 {
        font-size: 1.25rem !important;
    }

    .club-showcase-identity > p {
        font-size: .82rem !important;
    }

    .club-showcase-badges {
        gap: 4px;
    }

        .club-showcase-badges span {
            min-height: 25px;
            padding: 4px 6px;
            font-size: .68rem !important;
        }

    .club-showcase-social {
        padding-inline-start: 89px;
        gap: 5px;
    }

        .club-showcase-social a {
            width: 31px;
            height: 31px;
        }

    .club-showcase-facts {
        grid-template-columns: 1fr;
    }

    .club-showcase-fact,
    .club-showcase-fact:last-child {
        min-height: 62px;
        grid-column: auto;
        justify-content: flex-start;
        border-inline-start: 0;
    }

    .club-tab-panel {
        padding: 13px 10px !important;
    }

    .club-section-heading {
        min-height: 0 !important;
    }

    .club-info-list > div {
        grid-template-columns: 110px minmax(0,1fr) !important;
        gap: 8px !important;
    }

    .club-person-card {
        min-height: 96px !important;
        grid-template-columns: 58px minmax(0,1fr) 18px !important;
    }

    .club-person-photo {
        width: 56px !important;
        height: 56px !important;
    }

    .club-transfer-player {
        grid-template-columns: 54px minmax(0,1fr);
    }

    .club-transfer-player-photo {
        width: 52px;
        height: 52px;
    }

    .club-transfer-movement {
        grid-template-columns: minmax(0,1fr) 32px minmax(0,1fr);
    }

    .club-news-copy {
        padding: 12px;
    }
}


/* =========================================================
   CLUB DETAILS MODERN V2.1 - SMALL HERO AMENDMENTS
   ========================================================= */

/* Club crest/profile image is now fully rounded. */
.club-showcase-logo {
    border-radius: 50% !important;
}

    .club-showcase-logo img {
        border-radius: 50% !important;
    }

    .club-showcase-logo > span {
        border-radius: 50% !important;
    }


/* Right-side social + future engagement controls */
.club-showcase-actions {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

    .club-showcase-actions .club-showcase-social {
        align-self: auto;
    }

.club-future-engagement {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

    .club-future-engagement button {
        min-height: 40px;
        padding: 8px 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border-radius: 9px;
        font-family: inherit;
        font-size: .82rem !important;
        font-weight: 900;
        transition: transform .15s ease, opacity .15s ease;
    }

.club-follow-button {
    border: 1px solid #67b77a;
    background: #5dbb72;
    color: #fff;
}

.club-like-button {
    border: 1px solid rgba(255,255,255,.32);
    background: rgba(4,32,27,.56);
    color: #fff;
    backdrop-filter: blur(5px);
}

.club-future-engagement button > span {
    font-size: 1rem !important;
    line-height: 1;
}

/*
   They are intentionally inactive for now.
   Keep them visually present without implying that the action was saved.
*/
.club-future-engagement button:disabled {
    opacity: .82;
    cursor: not-allowed;
}

    .club-future-engagement button:disabled:hover {
        transform: none;
    }


/* Tablet */
@media (max-width: 991.98px) {

    .club-showcase-actions {
        grid-column: 1 / -1;
        align-self: auto;
        padding-inline-start: 120px;
        margin-top: -10px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

        .club-showcase-actions .club-showcase-social {
            padding-inline-start: 0;
            margin-top: 0;
        }
}


/* Mobile */
@media (max-width: 767.98px) {

    .club-showcase-actions {
        padding-inline-start: 100px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .club-future-engagement button {
        min-height: 36px;
        padding: 7px 11px;
        font-size: .76rem !important;
    }
}

@media (max-width: 575.98px) {

    .club-showcase-actions {
        padding-inline-start: 89px;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .club-future-engagement {
        width: 100%;
        justify-content: flex-start;
    }
}

/* =========================================================
   CLUB DETAILS V3
   Index-style tabs + professional roster tables
   ========================================================= */

/* ---------------------------------------------------------
   Index-style tab surface
   Mirrors the accepted gs-main-tabs / gs-tab visual language.
   --------------------------------------------------------- */

.club-profile-tabs {
    position: sticky !important;
    top: 8px !important;
    z-index: 25 !important;
    width: 100%;
    min-height: 64px !important;
    height: 64px !important;
    margin-top: 14px !important;
    padding: 8px 10px 0 !important;
    display: flex !important;
    align-items: stretch;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    border: 1px solid var(--gedian-border) !important;
    border-bottom-color: #dce4d9 !important;
    border-radius: 16px 16px 0 0 !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.045) !important;
    backdrop-filter: blur(9px);
    scrollbar-width: none;
}

    .club-profile-tabs::-webkit-scrollbar {
        display: none;
    }

.club-profile-tab {
    position: relative !important;
    flex: 1 0 132px !important;
    min-width: 132px !important;
    min-height: 55px !important;
    height: 55px !important;
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 0 !important;
    border-radius: 11px 11px 0 0 !important;
    background: transparent !important;
    color: #626a64 !important;
    font-family: inherit;
    font-size: .84rem !important;
    font-weight: 800 !important;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

    .club-profile-tab::after {
        content: "";
        position: absolute;
        right: 15% !important;
        bottom: 0 !important;
        left: 15% !important;
        height: 3px !important;
        border-radius: 3px 3px 0 0 !important;
        background: transparent !important;
        transform: scaleX(.2);
        transition: transform .2s ease, background .2s ease;
    }

    .club-profile-tab:hover {
        color: var(--gedian-green-dark) !important;
        background: #fafcf9 !important;
    }

    .club-profile-tab.is-active {
        color: var(--gedian-green-dark) !important;
        background: linear-gradient( 180deg, #fbfdf9, #f4f8f1 ) !important;
    }

        .club-profile-tab.is-active::after {
            background: var(--gedian-green) !important;
            transform: scaleX(1);
        }

    .club-profile-tab > span {
        font-size: 1rem !important;
        line-height: 1;
    }

    .club-profile-tab > b {
        min-width: 21px !important;
        height: 21px !important;
        padding: 0 6px !important;
        display: inline-grid !important;
        place-items: center !important;
        border-radius: 999px !important;
        background: #eef4eb !important;
        color: var(--gedian-green-dark) !important;
        font-size: .68rem !important;
        font-weight: 900 !important;
    }

    .club-profile-tab.is-active > b {
        background: rgba(91,140,59,.12) !important;
    }

.club-tab-panel {
    margin-top: 0 !important;
    padding: 20px !important;
    border-top: 0 !important;
    border-color: #e2e8e0 !important;
    border-radius: 0 0 16px 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 32px rgba(23,40,59,.035) !important;
}

    .club-tab-panel:not([hidden]) {
        animation: clubPanelEnter .2s ease both;
    }

@keyframes clubPanelEnter {
    from {
        opacity: .55;
        transform: translateY(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---------------------------------------------------------
   Waving club-color flags
   Pure CSS: no image assets and no database changes.
   --------------------------------------------------------- */

.club-color-flags {
    display: inline-flex !important;
    align-items: flex-end;
    gap: 8px;
    min-height: 30px;
    overflow: visible !important;
    perspective: 220px;
}

.club-color-flag {
    --club-flag-color: transparent;
    position: relative;
    width: 35px;
    height: 27px;
    display: inline-block;
    flex: 0 0 35px;
    overflow: visible;
}

    .club-color-flag::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: 27px;
        border-radius: 999px;
        background: rgba(255,255,255,.82);
        box-shadow: 0 1px 4px rgba(0,0,0,.14);
    }

    .club-color-flag::after {
        content: "";
        position: absolute;
        top: 2px;
        right: 3px;
        width: 29px;
        height: 19px;
        border: 1px solid rgba(255,255,255,.72);
        background: var(--club-flag-color);
        clip-path: polygon( 100% 0, 15% 0, 0 16%, 13% 35%, 0 55%, 14% 75%, 0 100%, 100% 100% );
        box-shadow: 0 2px 7px rgba(0,0,0,.14);
        transform-origin: right center;
        animation: clubFlagWave 2.2s ease-in-out infinite;
    }

    .club-color-flag:nth-child(2)::after {
        animation-delay: -.42s;
    }

    .club-color-flag:nth-child(3)::after {
        animation-delay: -.84s;
    }

    .club-color-flag.is-empty::after {
        border-color: #d6ddd3;
        background: repeating-linear-gradient( 45deg, #e2e6e0, #e2e6e0 4px, #f5f7f4 4px, #f5f7f4 8px );
    }

.club-color-flags.is-light .club-color-flag::before {
    background: #9aa59b;
}

.club-color-flags.is-light .club-color-flag::after {
    border-color: rgba(31,41,55,.12);
    box-shadow: 0 2px 6px rgba(31,41,55,.08);
}

@keyframes clubFlagWave {
    0%, 100% {
        transform: rotateY(0deg) skewY(0deg) scaleX(1);
    }

    25% {
        transform: rotateY(-15deg) skewY(2deg) scaleX(.96);
    }

    50% {
        transform: rotateY(11deg) skewY(-2deg) scaleX(1.02);
    }

    75% {
        transform: rotateY(-8deg) skewY(1deg) scaleX(.98);
    }
}


/* ---------------------------------------------------------
   Squad / staff tables
   --------------------------------------------------------- */

.club-roster-section {
    min-width: 0;
}

    .club-roster-section + .club-roster-section {
        margin-top: 22px;
        padding-top: 20px;
        border-top: 1px solid #edf0ed;
    }

.club-roster-table-shell {
    width: 100%;
    margin-top: 8px;
    overflow-x: auto;
    border: 1px solid #e1e7df;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(31,41,55,.035);
    scrollbar-width: thin;
    scrollbar-color: #c9d6c3 #f4f7f2;
}

.club-roster-table {
    width: 100%;
    min-width: 920px;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    text-align: right;
}

.former-players-table {
    min-width: 1180px;
}

.former-coaches-table {
    min-width: 760px;
}

.club-roster-table th,
.club-roster-table td {
    padding: 11px 13px !important;
    border-bottom: 1px solid #edf0ed;
    vertical-align: middle;
    white-space: nowrap;
}

    .club-roster-table th + th,
    .club-roster-table td + td {
        border-inline-start: 1px solid #f0f2ef;
    }

.club-roster-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient( 180deg, #f9fbf8, #f3f7f1 );
    color: #657069;
    font-size: .76rem !important;
    font-weight: 900;
}

.club-roster-table tbody tr:last-child td {
    border-bottom: 0;
}

.club-roster-person-row {
    transition: background-color .16s ease, box-shadow .16s ease;
}

    .club-roster-person-row:hover {
        background: #fbfcfa;
    }

    .club-roster-person-row.is-head-coach {
        background: linear-gradient( 90deg, rgba(237,245,232,.7), #fff 42% );
    }

.club-roster-group-row td {
    padding: 8px 13px !important;
    border-bottom: 1px solid #dde7d8 !important;
    background: #eef5ea;
    color: var(--gedian-green-dark);
}

.club-roster-group-row span {
    font-size: .78rem !important;
    font-weight: 900;
}

.club-roster-group-row small {
    margin-inline-start: 8px;
    color: #788376;
    font-size: .7rem !important;
}

.club-roster-empty-row td {
    padding: 16px !important;
    background: #fafbfa;
    color: #909990;
    text-align: center;
    font-size: .78rem !important;
}

.club-roster-schema-row td {
    padding: 13px 16px !important;
    background: #fffdf6;
    color: #776d53;
    white-space: normal;
}

.club-roster-schema-row strong {
    display: block;
    color: #675d45;
    font-size: .78rem !important;
}

.club-roster-schema-row span {
    display: block;
    margin-top: 3px;
    color: #8b8169;
    font-size: .72rem !important;
    line-height: 1.65;
}

.club-roster-person {
    min-width: 215px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.club-roster-person-photo {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--gedian-green-soft);
    color: var(--gedian-green-dark);
    box-shadow: 0 0 0 1px #dce5d7;
    font-size: .82rem;
    font-weight: 900;
}

    .club-roster-person-photo img,
    .club-roster-person-photo > span {
        width: 100%;
        height: 100%;
    }

    .club-roster-person-photo img {
        display: block;
        object-fit: cover;
    }

    .club-roster-person-photo > span {
        display: grid;
        place-items: center;
    }

.club-roster-person-copy {
    min-width: 0;
}

.club-roster-name-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

    .club-roster-name-line > a,
    .club-roster-name-line > strong {
        max-width: 230px;
        overflow: hidden;
        color: var(--gedian-navy);
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .84rem !important;
        font-weight: 900;
    }

    .club-roster-name-line > a {
        text-decoration: none;
    }

        .club-roster-name-line > a:hover {
            color: var(--gedian-green-dark);
            text-decoration: underline;
        }

.club-roster-verified {
    display: inline-block;
    width: 17px;
    height: 17px;
    min-width: 17px;
    max-width: 17px;
    flex: 0 0 17px;
    object-fit: contain;
}

.club-roster-person-copy > small {
    display: block;
    max-width: 230px;
    margin-top: 2px;
    overflow: hidden;
    color: #98a09a;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .69rem !important;
}

.club-roster-person-copy > em {
    display: inline-flex;
    margin-top: 4px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--gedian-green-soft);
    color: var(--gedian-green-dark);
    font-size: .64rem !important;
    font-style: normal;
    font-weight: 900;
}

.club-coach-trophy-count {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 30px;
    padding: 0 8px;
    border-radius: 999px;
    background: #fff7de;
    color: #826511;
    font-weight: 900;
}

.club-roster-data-note {
    margin-top: 16px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: start;
    gap: 10px;
    border: 1px solid #dbe8d4;
    border-radius: 12px;
    background: #f6faf3;
}

    .club-roster-data-note > span {
        padding: 4px 8px;
        border-radius: 7px;
        background: var(--gedian-green);
        color: #fff;
        font-size: .7rem !important;
        font-weight: 900;
    }

    .club-roster-data-note p {
        margin: 0;
        color: #5f6d62;
        font-size: .76rem !important;
        line-height: 1.75;
    }


/* ---------------------------------------------------------
   Responsive V3
   --------------------------------------------------------- */

@media (max-width: 991.98px) {

    .club-profile-tabs {
        height: auto !important;
        min-height: 64px !important;
        padding: 8px !important;
        gap: 4px !important;
    }

    .club-profile-tab {
        flex: 0 0 145px !important;
        min-width: 145px !important;
        height: 48px !important;
        min-height: 48px !important;
        border-radius: 10px !important;
    }

        .club-profile-tab::after {
            display: none;
        }

        .club-profile-tab.is-active {
            background: var(--gedian-green) !important;
            color: #fff !important;
            box-shadow: 0 7px 18px rgba(91,140,59,.16);
        }

            .club-profile-tab.is-active > b {
                background: rgba(255,255,255,.18) !important;
                color: #fff !important;
            }

    .club-tab-panel {
        border-top: 1px solid #e2e8e0 !important;
        border-radius: 14px !important;
        margin-top: 8px !important;
    }
}


@media (max-width: 767.98px) {

    .club-tab-panel {
        padding: 15px 10px !important;
    }

    .club-roster-table th,
    .club-roster-table td {
        padding: 10px !important;
    }

    .club-roster-data-note {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 575.98px) {

    .club-profile-tab {
        flex-basis: 132px !important;
        min-width: 132px !important;
        font-size: .76rem !important;
    }

    .club-roster-person {
        min-width: 190px;
    }

    .club-roster-person-photo {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .club-roster-name-line > a,
    .club-roster-name-line > strong {
        max-width: 190px;
        font-size: .78rem !important;
    }
}


@media (prefers-reduced-motion: reduce) {

    .club-color-flag::after,
    .club-tab-panel:not([hidden]) {
        animation: none !important;
    }

    .club-profile-tab,
    .club-profile-tab::after {
        transition: none !important;
    }
}