/**
 * /assets/css/pages/our-leadership.css
 *
 * Our Leadership page-specific layout and live Discord roster components.
 * Global tokens, containers, typography, buttons and public hero come from
 * core.css/components.css.
 */

.page-our-leadership {
  --hero-min-height: 72vh;
  --hero-accent-x: 78%;
  --hero-accent-y: 30%;
  --hero-accent-alpha: .20;
}

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

/* Live Discord leadership summary now belongs to the roster, not the hero. */
.leadership-live-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
  gap: 60px;
  align-items: end;
  margin-bottom: 24px;
  padding: 30px;
  border: 1px solid var(--border);
  background: #0d0d0d;
}

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

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

.leadership-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;
}

.leadership-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(3, 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;
}

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

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

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


/* =====================================================
           INTRO
        ====================================================== */

        .leadership-intro {

            padding:
                90px
                0;

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

            background:
                var(--bg-dark);

        }


        .intro-grid {

            display: grid;

            grid-template-columns:
                minmax(300px, .7fr)
                minmax(0, 1.3fr);

            gap: 80px;

            align-items: start;

        }
.intro-copy {

            max-width: 780px;

            color:
                var(--muted);

            font-size: .87rem;

            line-height: 1.85;

        }


        .intro-copy p {

            margin:
                0
                0
                18px;

        }


        .intro-copy p:last-child {
            margin-bottom: 0;
        }


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

        .leadership-roster {

            padding:
                90px
                0
                115px;

        }


        .roster-heading {

            display: flex;

            align-items: flex-end;

            justify-content: space-between;

            gap: 40px;

            margin-bottom: 32px;

        }


        .roster-heading-copy {

            max-width: 550px;

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

            font-size: .72rem;

            line-height: 1.7;

        }


        /* =====================================================
           ROLE SECTION
        ====================================================== */

        .leadership-group {

            margin-top: 55px;

        }


        .leadership-group:first-of-type {
            margin-top: 0;
        }


        .leadership-group-header {

            display: flex;

            align-items: center;

            gap: 17px;

            margin-bottom: 19px;

        }


        .leadership-group-number {

            color:
                var(--red-bright);

            font-size: .53rem;

            font-weight: 800;

            letter-spacing: .12em;

        }


        .leadership-group-title {

            color: #fff;

            font-size: .75rem;

            font-weight: 800;

            letter-spacing: .12em;

            text-transform: uppercase;

        }


        .leadership-group-line {

            flex: 1;

            height: 1px;

            background:
                var(--border);

        }


        .leadership-group-count {

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

            font-size: .51rem;

            font-weight: 700;

            letter-spacing: .08em;

            text-transform: uppercase;

        }


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

        .leadership-grid {

            display: grid;

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

            gap: 12px;

        }


        /* =====================================================
           LEADERSHIP CARD
        ====================================================== */

        .leader-card {

            position: relative;

            min-width: 0;

            min-height: 265px;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            padding:
                30px
                20px
                24px;

            overflow: hidden;

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

            background:
                var(--panel);

            text-align: center;

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

        }


        .leader-card::before {

            content: "";

            position: absolute;

            top: -1px;
            left: 50%;

            width: 0;
            height: 1px;

            transform:
                translateX(-50%);

            background:
                var(--red-bright);

            transition:
                width .18s ease;

        }


        .leader-card:hover {

            transform:
                translateY(-3px);

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

            background:
                var(--panel-hover);

        }


        .leader-card:hover::before {

            width: 58px;

        }


        .leader-avatar-wrap {

            position: relative;

            width: 96px;
            height: 96px;

            margin-bottom: 19px;

        }


        .leader-avatar {

            display: block;

            width: 96px;
            height: 96px;

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

            border-radius: 50%;

            object-fit: cover;

            background:
                #080808;

        }


        .leader-rank-marker {

            position: absolute;

            right: -2px;
            bottom: 3px;

            width: 29px;
            height: 29px;

            display: flex;

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

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

            border-radius: 50%;

            color: #fff;

            background:
                var(--red);

            font-size: .60rem;

        }


        .leader-name {

            max-width: 100%;

            overflow: hidden;

            color: #fff;

            font-size: .87rem;

            font-weight: 800;

            line-height: 1.35;

            text-overflow: ellipsis;

            white-space: nowrap;

        }


        .leader-role {

            display: inline-flex;

            align-items: center;

            gap: 5px;

            min-height: 22px;

            margin-top: 9px;

            padding:
                0
                8px;

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

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

            background:
                var(--red-soft);

            font-size: .48rem;

            font-weight: 800;

            letter-spacing: .07em;

            text-transform: uppercase;

        }


        .leader-meta {

            display: flex;

            flex-wrap: wrap;

            align-items: center;

            justify-content: center;

            gap: 7px;

            min-height: 21px;

            margin-top: 10px;

        }


        .leader-meta-item {

            display: inline-flex;

            align-items: center;

            gap: 4px;

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

            font-size: .48rem;

        }


        .leader-meta-item.supporter {

            color:
                rgba(255,190,190,.55);

        }


        .leader-meta-item.booster {

            color:
                rgba(220,190,255,.55);

        }


        .leader-joined {

            margin-top: 10px;

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

            font-size: .48rem;

        }


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

        .roster-status {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 20px;

            min-height: 44px;

            margin-bottom: 32px;

            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;

        }


        .leadership-loading,
        .leadership-error {

            min-height: 260px;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            padding: 40px;

            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:
                leaderSpin
                .75s
                linear
                infinite;

        }


        @keyframes leaderSpin {

            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: 440px;

            margin-top: 7px;

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

            font-size: .58rem;

            line-height: 1.6;

        }


        /* =====================================================
           RESPONSIBILITIES
        ====================================================== */

        .responsibilities-section {

            padding:
                105px
                0;

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

            background:
                var(--bg-dark);

        }


        .responsibilities-heading {

            display: grid;

            grid-template-columns:
                minmax(280px, .7fr)
                minmax(0, 1.3fr);

            gap: 80px;

            margin-bottom: 48px;

        }


        .responsibilities-copy {

            max-width: 720px;

            color:
                var(--muted);

            font-size: .84rem;

            line-height: 1.8;

        }


        .responsibility-grid {

            display: grid;

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

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

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

        }


        .responsibility {

            min-height: 215px;

            padding:
                26px
                23px;

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

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

            background:
                #0c0c0c;

        }


        .responsibility-icon {

            width: 39px;
            height: 39px;

            display: flex;

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

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

            color:
                var(--red-bright);

            background:
                var(--red-soft);

            font-size: .82rem;

        }


        .responsibility-title {

            margin-top: 20px;

            color: #fff;

            font-size: .77rem;

            font-weight: 800;

        }


        .responsibility-copy {

            margin-top: 8px;

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

            font-size: .67rem;

            line-height: 1.65;

        }


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

        .leadership-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;

        }


        .leadership-cta-grid {

            display: grid;

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

            gap: 50px;

            align-items: center;

        }


        .leadership-cta-title {

            color: #fff;

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

            font-weight: 900;

            line-height: .94;

            letter-spacing: -.045em;

            text-transform: uppercase;

        }


        .leadership-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) {

            .leadership-grid {

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

            }


            .responsibility-grid {

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

            }

        }


        @media (max-width: 991.98px) {

            .leadership-hero-inner,
            .intro-grid,
            .responsibilities-heading {

                grid-template-columns: 1fr;

            }
.leadership-grid {

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

            }

        }


        @media (max-width: 767.98px) {
.summary-stats {

                grid-template-columns: 1fr;

            }


            .roster-heading {

                display: block;

            }


            .roster-heading-copy {

                margin-top: 20px;

            }


            .leadership-grid {

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

            }


            .responsibility-grid {

                grid-template-columns: 1fr;

            }


            .leadership-cta-grid {

                grid-template-columns: 1fr;

            }

        }


        @media (max-width: 480px) {

            .leadership-grid {

                grid-template-columns: 1fr;

            }


            .leader-card {

                min-height: 245px;

            }

        }