/* ==========================================================================
   event-teams.css — /event-teams and /event-teams/{id}
   Phase 2c-1, docs/ui-consistency/03-phase2c-event-teams-retheme.md

   EXTRACTED VERBATIM 2026-08-01 from inline <style> blocks in
   organizations/index.php (409 lines) and organizations/show.php (734 lines).
   These pages predate theme-v2.css and referenced ZERO design tokens.

   2c-1 changes NOTHING visually. The only edit is namespacing six class names
   that collided with globally-loaded stylesheets:

     .event-card .hero-overlay .hero-stats .stat-card .stat-label .stat-number
        -> .et-event-card .et-hero-overlay ... etc.

   Inline <style> used to come AFTER the global sheets, so the inline rule won by
   load order. Moving to an external file would have handed that decision to load
   order and silently changed those six. Namespacing removes the question.

   The palette remap (purple -> --t-accent, white cards -> --t-bg-card, green
   restricted to verified/active) is 2c-2. Raw hex below is intentional for now.
   ========================================================================== */

/* ── from /event-teams  (index.php) ─────────────────────────────────── */
/* Hero Section */
.event-teams-hero {
    background: linear-gradient(135deg, var(--t-bg-deep) 0%, var(--t-bg-card) 100%);  /* darkened; banner shape kept per decision #1 */;
    color: white;
    padding: 3rem 0;
    margin-top: -1rem;
}

.event-teams-hero .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}

.event-teams-hero .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}

.et-hero-stats {
    display: inline-flex;
    background: var(--t-bg-card);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border: 1px solid var(--t-border-mid);
}

.hero-stat-item {
    text-align: center;
}

.hero-stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.hero-stat-label {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* Search Section */
.search-section {
    background: var(--t-bg-card);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-top: -2rem;
    position: relative;
    z-index: 10;
}

.search-form .form-control,
.search-form .form-select {
    border: 2px solid var(--t-border-mid);
    border-radius: 8px;
}

.search-form .form-control:focus,
.search-form .form-select:focus {
    border-color: var(--t-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 15%, transparent);
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    background: color-mix(in srgb, var(--t-accent) 10%, transparent);
    color: var(--t-accent);
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Organization Cards */
.org-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.org-card {
    background: var(--t-bg-card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--t-border-mid);
}

.org-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--t-accent) 20%, transparent);
    border-color: var(--t-accent);
}

.org-card-header {
    background: linear-gradient(135deg, var(--t-bg-surface) 0%, var(--t-border-mid) 100%);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

.org-card-header.has-hero {
    background-size: cover;
    background-position: center;
    min-height: 100px;
}

.org-card-header.has-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.org-card-header.has-hero .org-logo-wrapper,
.org-card-header.has-hero .member-badge {
    position: relative;
    z-index: 2;
}

.member-badge {
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, var(--t-green) 0%, var(--t-green) 100%);
    color: var(--t-bg-abyss);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--t-green) 30%, transparent);
}

.org-logo-wrapper {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

.org-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--t-bg-card);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.org-logo-placeholder {
    width: 100%;
    height: 100%;
    background: var(--t-bg-card);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t-text-muted);
    font-size: 1.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


.org-card-body {
    padding: 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.org-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--t-text-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.org-name i {
    font-size: 0.9rem;
}

.org-description {
    color: var(--t-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.org-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.org-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--t-text-secondary);
    background: var(--t-bg-surface);
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
}

.org-stat i {
    color: var(--t-accent);
    font-size: 0.75rem;
}

.org-stat.upcoming {
    background: color-mix(in srgb, var(--t-accent) 10%, transparent);
    color: var(--t-accent);
}

.org-stat.upcoming i {
    color: var(--t-accent);
}

.org-stat.membership-available {
    background: color-mix(in srgb, var(--t-accent) 10%, transparent);
    color: var(--t-accent);
}

.org-stat.membership-available i {
    color: var(--t-accent);
}

.org-card-footer {
    padding: 1rem 1.25rem;
    /* --t-bg-card, not --t-bg-surface. The lighter surface put .view-details at
       4.04 contrast (under AA); --t-accent-bright only recovered it to a measured
       4.48, still short. The separation from the card body is carried by the
       border-top below, not by the fill, so dropping the fill costs nothing —
       and it matches /series, where .sr-card-cta sits directly on the card. */
    background: var(--t-bg-card);
    border-top: 1px solid var(--t-border-mid);
}

.view-details {
    /* 4.54 on --t-bg-card — the same value /series's .sr-card-cta measures. */
    color: var(--t-accent);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.org-card:hover .view-details {
    color: var(--t-accent-bright);
}

.org-card:hover .view-details i {
    transform: translateX(4px);
    transition: transform 0.2s;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--t-bg-card);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--t-accent) 0%, var(--t-accent-bright) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--t-bg-abyss);
    font-size: 2rem;
}

/* Info Section */
.info-section {
    border-top: 1px solid var(--t-border-mid);
}

.info-card {
    background: var(--t-bg-card);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    height: 100%;
    transition: transform 0.2s;
}

.info-card:hover {
    transform: translateY(-4px);
}

.info-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    color: white;
}

.info-card-icon.parent {
    background: linear-gradient(135deg, var(--t-accent) 0%, var(--t-accent-bright) 100%);
}

.info-card-icon.chapter {
    background: linear-gradient(135deg, var(--t-teal) 0%, var(--t-teal) 100%);
}

.info-card-icon.benefits {
    background: linear-gradient(135deg, var(--t-accent) 0%, var(--t-accent-bright) 100%);
}

.info-card h5 {
    color: var(--t-text-primary);
    margin-bottom: 0.75rem;
}

.info-card p {
    color: var(--t-text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0;
    line-height: 1.6;
}

/* Pagination */
.pagination .page-link {
    border: none;
    color: var(--t-accent);
    padding: 0.6rem 1rem;
    margin: 0 0.25rem;
    border-radius: 8px;
    font-weight: 500;
}

.pagination .page-link:hover {
    background: color-mix(in srgb, var(--t-accent) 10%, transparent);
    color: var(--t-accent);
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--t-accent) 0%, var(--t-accent-bright) 100%);
    color: var(--t-bg-abyss);
}

.pagination .page-item.disabled .page-link {
    color: var(--t-text-muted);
    background: transparent;
}

/* Responsive */
@media (max-width: 768px) {
    .event-teams-hero {
        padding: 2rem 0;
    }

    .event-teams-hero h1 {
        font-size: 1.75rem;
    }

    .et-hero-stats {
        margin-top: 1rem;
    }

    .search-section {
        margin-top: -1rem;
        padding: 1rem;
    }

    .org-card-header {
        padding: 1rem;
    }

    .org-logo-wrapper {
        width: 55px;
        height: 55px;
    }

    .org-stats {
        gap: 0.5rem;
    }

    .org-stat {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* ── from /event-teams/{id}  (show.php) ─────────────────────────────────── */
.organization-header {
    background: linear-gradient(135deg, var(--t-bg-deep) 0%, var(--t-bg-card) 100%);  /* darkened; sits under the org hero image */;
    color: white;
    padding: 3rem 0;
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.organization-header h1,
.organization-header .breadcrumb,
.organization-header .breadcrumb-item a,
.organization-header .member-badge {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.organization-header.has-hero-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 280px;
    display: flex;
    align-items: center;
}

.et-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.organization-header .container {
    z-index: 2;
}

.organization-logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    background: var(--t-bg-card);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.verified-badge {
    color: var(--t-green);
    font-size: 1.5rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.verified-badge i {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.organization-info {
    background: var(--t-bg-card);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    margin-top: -2rem;
    position: relative;
    z-index: 10;
}

.organization-type-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.established-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.stats-dashboard {
    margin-bottom: 2rem;
}

.et-stat-card {
    background: var(--t-bg-card);  /* stat tiles: dark card, not a red fill */;
    color: white;
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid var(--t-border-mid);
}

.et-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px color-mix(in srgb, var(--t-accent) 30%, transparent);
}

.et-stat-number {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
    line-height: 1;
    color: white;
    color: var(--t-accent);
}

.et-stat-label {
    font-size: 0.85rem;
    opacity: 0.95;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
}

.contact-info {
    background: var(--t-bg-surface);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.contact-item i {
    width: 20px;
    margin-right: 0.75rem;
    color: var(--t-text-secondary);
}

.et-event-card {
    border: 1px solid var(--t-border-mid);
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.et-event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.member-badge {
    background: color-mix(in srgb, var(--t-green) 20%, transparent);
    color: white;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.nav-tabs .nav-link {
    color: var(--t-accent);
    font-weight: 500;
}

.nav-tabs .nav-link.active {
    color: var(--t-accent);
    border-bottom: 2px solid var(--t-accent);
}

/* Membership Card Styles */
.membership-type-card {
    background: var(--t-bg-surface);
    border-radius: 8px;
    padding: 1rem;
    border-left: 3px solid var(--t-accent);
}

.membership-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--t-accent);
}

.discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: color-mix(in srgb, var(--t-accent) 10%, transparent);
    color: var(--t-accent);
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.membership-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.feature-badge.alert-success {
    background: color-mix(in srgb, var(--t-green) 15%, transparent);
    color: var(--t-green);
}

.feature-badge.alert-info {
    background: color-mix(in srgb, var(--t-teal) 15%, transparent);
    color: var(--t-teal);
}

.feature-badge.alert-primary {
    background: color-mix(in srgb, var(--t-blue) 15%, transparent);
    color: var(--t-blue);
}

.feature-badge.alert-warning {
    background: color-mix(in srgb, var(--t-amber) 15%, transparent);
    color: var(--t-amber);
}

.feature-badge.alert-secondary {
    background: rgba(108, 117, 125, 0.15);
    color: var(--t-text-secondary);
}

.feature-badge.alert-light {
    background: var(--t-border-mid);
    color: var(--t-text-secondary);
}

.membership-description {
    line-height: 1.4;
}

/* Competition Classes Styles */
.competition-classes-section {
    background: var(--t-bg-card);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    margin-top: 2rem;
}

.competition-type-group {
    margin-bottom: 1rem;
}

.competition-type-group:last-child {
    margin-bottom: 0;
}

.competition-type-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--t-text-secondary);
}

.competition-type-header i {
    color: var(--t-accent);
}

.class-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.class-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--t-accent) 0%, var(--t-accent-bright) 100%);
    color: var(--t-bg-abyss);
    padding: 0.35rem 0.75rem;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
}

.class-badge.has-discount {
    position: relative;
}

.class-badge.has-discount::after {
    content: '%';
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--t-accent);
    color: var(--t-bg-abyss);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo Placeholder */
.organization-logo-placeholder {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 2px dashed rgba(255, 255, 255, 0.4);
}

.organization-logo-placeholder i {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 768px) {
    .organization-logo {
        width: 70px;
        height: 70px;
    }

    .organization-logo-placeholder {
        width: 70px;
        height: 70px;
    }

    .organization-logo-placeholder i {
        font-size: 1.75rem;
    }

    .et-stat-number {
        font-size: 1.5rem;
    }

    .et-stat-label {
        font-size: 0.75rem;
    }

    .class-badge {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }
}

/* Main Content Membership Section */
.membership-section-main {
    background: var(--t-bg-card);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
}

.membership-card-main {
    background: var(--t-bg-card);
    border-radius: 12px;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--t-border-mid);
    transition: transform 0.2s, box-shadow 0.2s;
}

.membership-card-main:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.membership-card-main.competitor {
    border-color: var(--t-accent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--t-accent) 5%, transparent) 0%, var(--t-bg-card) 100%);
}

.membership-card-main.fan {
    border-color: var(--t-teal);
    background: linear-gradient(180deg, color-mix(in srgb, var(--t-teal) 5%, transparent) 0%, var(--t-bg-card) 100%);
}

.membership-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.membership-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.membership-type-badge.competitor {
    background: linear-gradient(135deg, var(--t-accent) 0%, var(--t-accent-bright) 100%);
    color: var(--t-bg-abyss);
}

.membership-type-badge.fan {
    background: linear-gradient(135deg, var(--t-teal) 0%, var(--t-teal) 100%);
    color: var(--t-bg-abyss);
}

.membership-price-main {
    text-align: right;
}

.membership-price-main .price {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--t-accent);
    display: block;
    line-height: 1;
}

.membership-price-main .period {
    font-size: 0.85rem;
    color: var(--t-text-secondary);
}

.membership-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--t-text-primary);
    margin-bottom: 1rem;
}

.membership-highlight {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--t-accent) 10%, transparent) 0%, color-mix(in srgb, var(--t-accent) 5%, transparent) 100%);
    color: var(--t-accent);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 1rem;
    border-left: 3px solid var(--t-accent);
}

.membership-highlight i {
    font-size: 1.1rem;
}

.membership-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    flex-grow: 1;
}

.membership-features-list .feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.membership-features-list .feature-item i {
    margin-top: 0.15rem;
    font-size: 0.85rem;
}

.membership-features-list .feature-item.alert-success {
    background: color-mix(in srgb, var(--t-green) 10%, transparent);
    color: var(--t-green);
}

.membership-features-list .feature-item.alert-info {
    background: color-mix(in srgb, var(--t-teal) 10%, transparent);
    color: var(--t-teal);
}

.membership-features-list .feature-item.alert-primary {
    background: color-mix(in srgb, var(--t-blue) 10%, transparent);
    color: var(--t-blue);
}

.membership-features-list .feature-item.alert-warning {
    background: color-mix(in srgb, var(--t-amber) 10%, transparent);
    color: var(--t-amber);
}

.membership-features-list .feature-item.alert-secondary {
    background: rgba(108, 117, 125, 0.1);
    color: var(--t-text-secondary);
}

.membership-description-main {
    color: var(--t-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.btn-membership {
    width: 100%;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s;
    margin-top: auto;
}

.btn-membership.competitor {
    background: linear-gradient(135deg, var(--t-accent) 0%, var(--t-accent-bright) 100%);
    border: none;
    color: var(--t-bg-abyss);
}

.btn-membership.competitor:hover {
    background: linear-gradient(135deg, var(--t-accent-bright) 0%, var(--t-accent) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--t-accent) 40%, transparent);
    color: var(--t-bg-abyss);
}

.btn-membership.fan {
    background: linear-gradient(135deg, var(--t-teal) 0%, var(--t-teal) 100%);
    border: none;
    color: var(--t-bg-abyss);
}

.btn-membership.fan:hover {
    background: linear-gradient(135deg, var(--t-teal) 0%, var(--t-teal) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--t-teal) 40%, transparent);
    color: var(--t-bg-abyss);
}

/* Current Membership Banner */
.current-membership-banner {
    background: linear-gradient(135deg, color-mix(in srgb, var(--t-green) 10%, transparent) 0%, color-mix(in srgb, var(--t-green) 5%, transparent) 100%);
    border: 2px solid var(--t-green);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}

.membership-icon-circle {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--t-green) 0%, var(--t-green) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t-bg-abyss);
    font-size: 1.25rem;
}

.member-number-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--t-green);
    color: var(--t-bg-abyss);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.membership-benefits-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.benefit-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: color-mix(in srgb, var(--t-accent) 15%, transparent);
    color: var(--t-accent);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Current Membership Card Styling */
.membership-card-main.current {
    border-color: var(--t-green);
    position: relative;
    overflow: hidden;
}

.membership-card-main.current::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--t-green) 0%, var(--t-green) 100%);
}

.current-membership-ribbon {
    position: absolute;
    top: 12px;
    right: -35px;
    background: linear-gradient(135deg, var(--t-green) 0%, var(--t-green) 100%);
    color: var(--t-bg-abyss);
    padding: 0.35rem 2.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    transform: rotate(45deg);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--t-green) 30%, transparent);
}

.current-membership-ribbon i {
    margin-right: 0.25rem;
}

/* The ribbon is absolutely positioned across the card's top-right corner, which
   is exactly where .membership-price-main sits. On a current membership the
   ribbon rendered ON TOP OF the price — "$60.00 /year" was partly unreadable.
   Pre-existing (the geometry came through 2c-1 extraction verbatim); it only
   appears for a signed-in CURRENT member, which is why it went unnoticed.
   Measured in-browser: 120px is the first value that clears the ribbon's box.
   min-width guard because the 768px block already stacks the header into a
   column, which moves the price out of the corner on its own. */
@media (min-width: 769px) {
    .membership-card-main.current .membership-card-header {
        padding-right: 120px;
    }
}

.membership-card-content {
    position: relative;
}

.current-membership-status {
    background: linear-gradient(135deg, color-mix(in srgb, var(--t-green) 10%, transparent) 0%, color-mix(in srgb, var(--t-green) 5%, transparent) 100%);
    color: var(--t-green);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    margin-top: auto;
}

/* Contact Organization Section */
.contact-organization-section {
    background: var(--t-bg-card);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
}

.contact-card {
    background: var(--t-bg-surface);
    border-radius: 8px;
    padding: 1.5rem;
    border-left: 4px solid var(--t-accent);
}

.login-prompt {
    background: color-mix(in srgb, var(--t-accent) 5%, transparent);
    border-radius: 8px;
    padding: 1rem;
}

.contact-alternatives {
    padding-top: 0.5rem;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--t-bg-card);
    border: 1px solid var(--t-border-mid);
    border-radius: 6px;
    color: var(--t-text-secondary);
    text-decoration: none;
    transition: all 0.2s;
}

.contact-link:hover {
    background: var(--t-accent);
    border-color: var(--t-accent);
    color: var(--t-bg-abyss);
    text-decoration: none;
}

.contact-link i {
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .membership-card-main {
        margin-bottom: 1rem;
    }

    .membership-card-header {
        flex-direction: column;
        gap: 0.75rem;
    }

    .membership-price-main {
        text-align: left;
    }

    .membership-price-main .price {
        font-size: 1.5rem;
    }

    .contact-alternatives .d-flex {
        flex-direction: column;
    }

    .contact-link {
        width: 100%;
        justify-content: center;
    }
}

/* ── color-mix fallback ──────────────────────────────────────────────────
   The tinted badge/alert backgrounds above use color-mix() so they stay
   token-driven. Engines without it get a flat surface rather than nothing,
   which keeps the badges legible. Same pattern as series.css. */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .org-stat.upcoming, .discount-badge, .benefit-tag, .filter-tag,
  .feature-badge, .membership-features-list .feature-item,
  .org-stat.membership-available, .login-prompt {
    background: var(--t-bg-surface);
  }
}

/* ── Bootstrap button variants ───────────────────────────────────────────
   The org templates use 9 stock Bootstrap button classes. On the old white
   pages those read fine; after the Phase 2c retheme they were the last raw
   (non-token) colours left — Bootstrap blue #0d6efd on a red-accent site, and
   .btn-outline-success at 4.18 contrast, under AA, on the membership CTA.

   These rules only apply to /event-teams and /event-teams/{id}: this file is
   gated to those two routes in header.php, so no wrapper scope is needed and
   no other page can be affected. No !important — this sheet loads after
   Bootstrap, so equal specificity wins on order.

   Green is kept ONLY on .btn-outline-success, which is the "View Membership"
   CTA for an ACTIVE member — status, not decoration (Phase 2c decision #2).

   Link targets, form actions and prices are untouched; this is colour only. */
.btn-primary {
    background: var(--t-accent);
    border-color: var(--t-accent);
    color: var(--t-bg-abyss);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--t-accent-bright);
    border-color: var(--t-accent-bright);
    color: var(--t-bg-abyss);
}

.btn-outline-primary {
    border-color: var(--t-accent);
    color: var(--t-accent);
    background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: var(--t-accent);
    border-color: var(--t-accent);
    color: var(--t-bg-abyss);
}

.btn-outline-success {
    border-color: var(--t-green);
    color: var(--t-green);
    background: transparent;
}
.btn-outline-success:hover, .btn-outline-success:focus {
    background: var(--t-green);
    border-color: var(--t-green);
    color: var(--t-bg-abyss);
}

.btn-outline-secondary {
    border-color: var(--t-border-mid);
    color: var(--t-text-secondary);
    background: transparent;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    border-color: var(--t-text-muted);
    color: var(--t-text-hero);
    background: transparent;
}