/**
 * /assets/css/pages/our-members.css
 *
 * Our Members page-specific roster, filtering and membership presentation.
 * Shared public hero, buttons, typography and global design primitives come
 * from core.css/components.css.
 */

.page-our-members {
  --hero-min-height: 72vh;
  --hero-accent-x: 77%;
  --hero-accent-y: 31%;
  --hero-accent-alpha: .20;
}

.members-hero-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 77% 31%, rgba(189,0,0,.18), transparent 31%),
    linear-gradient(120deg, #080808, #111 52%, #070707);
}

/* Live roster data belongs with the roster rather than inside the hero. */
.members-live-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(500px, 1fr);
  gap: 60px;
  align-items: end;
  margin-bottom: 24px;
  padding: 30px;
  border: 1px solid var(--border);
  background: #0d0d0d;
}

.members-live-copy {
  max-width: 680px;
}

.members-live-label {
  color: var(--red-bright);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.members-live-title {
  margin: 11px 0 0;
  color: #fff;
  font-size: clamp(1.35rem, 2.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
}

.members-live-copy p {
  max-width: 620px;
  margin: 13px 0 0;
  color: rgba(255,255,255,.36);
  font-size: .75rem;
  line-height: 1.68;
}

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: rgba(255,255,255,.34);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.live-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--red-bright);
  box-shadow: 0 0 9px rgba(224,0,0,.55);
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.summary-stat {
  min-height: 92px;
  padding: 17px 15px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.summary-stat-label {
  color: rgba(255,255,255,.22);
  font-size: .47rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.summary-stat-value {
  margin-top: 8px;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
}

.membership-actions {
  margin-top: 28px;
}

@media (max-width: 1100px) {
  .members-live-summary {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 700px) {
  .members-live-summary {
    padding: 22px;
  }

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


/* =====================================================
           ROSTER
        ====================================================== */

        .roster-section {

            padding:
                85px
                0
                115px;

        }


        .roster-heading {

            display: flex;

            align-items: flex-end;

            justify-content: space-between;

            gap: 40px;

            margin-bottom: 32px;

        }
/* =====================================================
           CONTROLS
        ====================================================== */

        .roster-controls {

            display: flex;

            gap: 8px;

        }


        .roster-search {

            position: relative;

            width: 260px;

        }


        .roster-search i {

            position: absolute;

            top: 50%;
            left: 14px;

            transform:
                translateY(-50%);

            color:
                rgba(255,255,255,.26);

            font-size: .72rem;

            pointer-events: none;

        }


        .roster-search input {

            width: 100%;
            height: 43px;

            padding:
                0
                14px
                0
                39px;

            border:
                1px solid
                var(--border);

            outline: 0;

            color: #fff;

            background:
                #0d0d0d;

            font-size: .67rem;

        }


        .roster-search input:focus {

            border-color:
                var(--red-border);

        }


        .roster-search input::placeholder {

            color:
                rgba(255,255,255,.22);

        }


        .roster-filter {

            height: 43px;

            padding:
                0
                34px
                0
                13px;

            border:
                1px solid
                var(--border);

            outline: 0;

            color:
                rgba(255,255,255,.58);

            background:
                #0d0d0d;

            font-size: .61rem;

            font-weight: 700;

        }


        /* =====================================================
           ROSTER STATUS
        ====================================================== */

        .roster-status {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 20px;

            min-height: 44px;

            margin-bottom: 22px;

            padding:
                0
                15px;

            border:
                1px solid
                var(--border);

            background:
                #0d0d0d;

            color:
                rgba(255,255,255,.29);

            font-size: .56rem;

        }


        .roster-status-main {

            display: flex;

            align-items: center;

            gap: 8px;

        }


        /* =====================================================
           MEMBER GRID
        ====================================================== */

        .member-grid {

            display: grid;

            grid-template-columns:
                repeat(
                    5,
                    minmax(0, 1fr)
                );

            gap: 12px;

        }


        /* =====================================================
           MEMBER CARD
        ====================================================== */

        .member-card {

            position: relative;

            min-width: 0;

            padding:
                27px
                18px
                20px;

            overflow: hidden;

            border:
                1px solid
                var(--border);

            background:
                var(--panel);

            text-align: center;

            content-visibility: auto;

            contain-intrinsic-size:
                230px;

            transition:
                transform .18s ease,
                background .18s ease,
                border-color .18s ease;

        }


        .member-card::before {

            content: "";

            position: absolute;

            top: -1px;
            left: 50%;

            width: 0;
            height: 1px;

            transform:
                translateX(-50%);

            background:
                var(--red-bright);

            transition:
                width .18s ease;

        }


        .member-card:hover {

            transform:
                translateY(-3px);

            border-color:
                var(--red-border);

            background:
                var(--panel-hover);

        }


        .member-card:hover::before {

            width: 52px;

        }


        /* =====================================================
           AVATAR
        ====================================================== */

        .member-avatar-wrap {

            position: relative;

            width: 84px;
            height: 84px;

            margin:
                0
                auto
                17px;

        }


        .member-avatar {

            display: block;

            width: 84px;
            height: 84px;

            border:
                2px solid
                rgba(189,0,0,.72);

            border-radius: 50%;

            object-fit: cover;

            background:
                #080808;

        }


        .member-support-marker {

            position: absolute;

            right: -2px;
            bottom: 2px;

            width: 25px;
            height: 25px;

            display: flex;

            align-items: center;
            justify-content: center;

            border:
                3px solid
                var(--panel);

            border-radius: 50%;

            color: #fff;

            background:
                var(--red);

            font-size: .54rem;

        }


        /* =====================================================
           MEMBER NAME
        ====================================================== */

        .member-name {

            overflow: hidden;

            color: #fff;

            font-size: .78rem;

            font-weight: 800;

            line-height: 1.35;

            text-overflow: ellipsis;

            white-space: nowrap;

        }


        .member-joined {

            margin-top: 11px;

            color:
                rgba(255,255,255,.22);

            font-size: .52rem;

        }


        /* =====================================================
           BADGES
        ====================================================== */

        .member-badges {

            min-height: 24px;

            display: flex;

            flex-wrap: wrap;

            align-items: center;

            justify-content: center;

            gap: 5px;

            margin-top: 9px;

        }


        .member-badge {

            display: inline-flex;

            align-items: center;

            gap: 4px;

            min-height: 20px;

            padding:
                0
                7px;

            border:
                1px solid
                var(--border);

            color:
                rgba(255,255,255,.46);

            background:
                rgba(255,255,255,.018);

            font-size: .47rem;

            font-weight: 800;

            letter-spacing: .05em;

            text-transform: uppercase;

        }


        .member-badge.leadership {

            border-color:
                var(--red-border);

            color:
                rgba(255,255,255,.78);

            background:
                var(--red-soft);

        }


        .member-badge.supporter {

            border-color:
                rgba(255,82,82,.24);

            color:
                rgba(255,210,210,.80);

            background:
                rgba(189,0,0,.055);

        }


        .member-badge.booster {

            border-color:
                rgba(185,105,255,.26);

            color:
                rgba(232,205,255,.80);

            background:
                rgba(185,105,255,.055);

        }


        /* =====================================================
           LOADING
        ====================================================== */

        .roster-loading,
        .roster-message {

            grid-column:
                1 / -1;

            min-height: 220px;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            padding: 35px;

            border:
                1px solid
                var(--border);

            background:
                #0d0d0d;

            text-align: center;

        }


        .loading-spinner {

            width: 30px;
            height: 30px;

            border:
                2px solid
                rgba(255,255,255,.08);

            border-top-color:
                var(--red-bright);

            border-radius: 50%;

            animation:
                memberSpin
                .75s
                linear
                infinite;

        }


        @keyframes memberSpin {

            to {
                transform:
                    rotate(360deg);
            }

        }


        .loading-title {

            margin-top: 17px;

            color:
                rgba(255,255,255,.68);

            font-size: .67rem;

            font-weight: 800;

            letter-spacing: .09em;

            text-transform: uppercase;

        }


        .loading-copy {

            max-width: 420px;

            margin-top: 7px;

            color:
                rgba(255,255,255,.26);

            font-size: .58rem;

            line-height: 1.6;

        }


        /* =====================================================
           LOAD MORE
        ====================================================== */

        .load-more-wrap {

            display: flex;

            justify-content: center;

            margin-top: 31px;

        }


        .load-more-button {

            min-height: 43px;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 8px;

            padding:
                0
                19px;

            border:
                1px solid
                var(--red-border);

            color:
                rgba(255,255,255,.68);

            background:
                var(--red-soft);

            font-size: .57rem;

            font-weight: 800;

            letter-spacing: .09em;

            text-transform: uppercase;

            cursor: pointer;

        }


        .load-more-button:hover {

            color: #fff;

            border-color:
                var(--red-bright);

            background:
                rgba(189,0,0,.14);

        }


        /* =====================================================
           MEMBERSHIP EXPLANATION
        ====================================================== */

        .membership-section {

            padding:
                105px
                0;

            border-top:
                1px solid
                var(--border);

            background:
                var(--bg-dark);

        }


        .membership-layout {

            display: grid;

            grid-template-columns:
                minmax(0, 1fr)
                minmax(390px, .78fr);

            gap: 70px;

            align-items: start;

        }


        .membership-title {

            margin-top: 12px;

            color: #fff;

            font-size:
                clamp(
                    2.5rem,
                    5vw,
                    5rem
                );

            font-weight: 900;

            line-height: .94;

            letter-spacing: -.05em;

            text-transform: uppercase;

        }


        .membership-copy {

            max-width: 760px;

            margin-top: 21px;

            color:
                var(--muted);

            font-size: .87rem;

            line-height: 1.8;

        }


        .membership-points {

            border:
                1px solid
                var(--border);

            background:
                #0d0d0d;

        }


        .membership-point {

            display: grid;

            grid-template-columns:
                41px
                minmax(0, 1fr);

            gap: 14px;

            padding:
                21px
                23px;

            border-bottom:
                1px solid
                var(--border-soft);

        }


        .membership-point:last-child {
            border-bottom: 0;
        }


        .membership-point-icon {

            width: 37px;
            height: 37px;

            display: flex;

            align-items: center;
            justify-content: center;

            border:
                1px solid
                var(--red-border);

            color:
                var(--red-bright);

            background:
                var(--red-soft);

        }


        .membership-point-title {

            color: #fff;

            font-size: .80rem;

            font-weight: 750;

        }


        .membership-point-copy {

            margin-top: 5px;

            color:
                rgba(255,255,255,.32);

            font-size: .69rem;

            line-height: 1.62;

        }


        /* =====================================================
           CTA
        ====================================================== */

        .members-cta {

            padding:
                82px
                0;

            border-top:
                1px solid
                var(--border);

            background:

                radial-gradient(
                    circle at 81% 50%,
                    rgba(189,0,0,.15),
                    transparent 32%
                ),

                #090909;

        }


        .members-cta-grid {

            display: grid;

            grid-template-columns:
                minmax(0, 1fr)
                auto;

            gap: 50px;

            align-items: center;

        }


        .members-cta-title {

            color: #fff;

            font-size:
                clamp(
                    2rem,
                    4vw,
                    4rem
                );

            font-weight: 900;

            line-height: .94;

            letter-spacing: -.045em;

            text-transform: uppercase;

        }


        .members-cta-copy {

            max-width: 700px;

            margin-top: 14px;

            color:
                rgba(255,255,255,.36);

            font-size: .75rem;

            line-height: 1.68;

        }
/* =====================================================
           RESPONSIVE
        ====================================================== */

        @media (max-width: 1199.98px) {

            .member-grid {

                grid-template-columns:
                    repeat(
                        4,
                        minmax(0, 1fr)
                    );

            }

        }


        @media (max-width: 991.98px) {
            .membership-layout {

                grid-template-columns: 1fr;

            }
.member-grid {

                grid-template-columns:
                    repeat(
                        3,
                        minmax(0, 1fr)
                    );

            }

        }


        @media (max-width: 767.98px) {
.roster-section {

                padding:
                    70px
                    0
                    90px;

            }


            .roster-heading {

                display: block;

            }


            .roster-controls {

                display: grid;

                grid-template-columns: 1fr;

                margin-top: 25px;

            }


            .roster-search {
                width: 100%;
            }


            .roster-status {

                align-items: flex-start;

                flex-direction: column;

                padding:
                    11px
                    14px;

            }


            .member-grid {

                grid-template-columns:
                    repeat(
                        2,
                        minmax(0, 1fr)
                    );

            }


            .members-cta-grid {

                grid-template-columns: 1fr;

            }

        }


        @media (max-width: 480px) {

            .member-card {

                padding:
                    23px
                    12px
                    18px;

            }


            .member-avatar-wrap,
            .member-avatar {

                width: 72px;
                height: 72px;

            }


            .member-name {
                font-size: .69rem;
            }


            .member-badge {
                font-size: .42rem;
            }

        }