/* ============================================================
 * user_ui — About Us page styles (Phase 7 Package L).
 * ============================================================
 *
 * Section-local CSS for the About Us page. Layers on top of
 * the shared cascade (tokens / fonts / base / buttons /
 * decorations / theme) loaded by Package D's base.html.
 *
 * Sections:
 *   1. .about-hero               — title + lead + mascot
 *   2. .team                     — team-member cards
 *   3. .member-card               — 2-column layout (text | avatar)
 *   4. .avatar-frame /
 *      .avatar-img /
 *      .avatar-placeholder       — round avatar + placeholder
 *   5. .team-cta                  — "Join the team" CTA strip
 *   6. responsive                  — @1100px / @760px breakpoints
 *
 * Global-background integration pass: the page's own
 * backgrounds are gone — hero image/gradient/fill, team
 * solid fill, and the glowing static divider lines were all
 * removed so the page sits transparently on the site-wide
 * background chrome (css/background/background.css). The
 * about-hero-{dark,light}.webp assets are no longer
 * referenced by this file.
 *
 * Brand tokens referenced via var(--<token>) from inline styles
 * in the template — admin-picked palette token plugs straight
 * into design system. See DESIGN_SYSTEM.md §2.1.
 * ============================================================ */

/* ====== HERO ============================================
 * Global-background integration pass: the hero previously
 * painted its own background (dark/light gradient + the
 * about-hero-{dark,light}.webp image — the source of the
 * baked-in static stripes — + a solid fill). All removed:
 * the page now sits transparently on the site-wide
 * background chrome like every other page. */
.about-hero {
    position: relative;
    isolation: isolate;
    /* Shared-hero alignment fix: padding matches the other hero
       pages (56px 0 90px) so the mascot context and the card start
       level are identical to Price List / Wallet — the neon member
       boxes overlap the shared hero band the same way those pages'
       cards do. */
    padding: 56px 0 90px;
}

.about-hero .wrap {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 32px;
    align-items: center;
}

.about-hero h1 {
    font-family: var(--font-head);
    font-size: clamp(48px, 6vw, 84px);
    line-height: 1;
    font-weight: 700;
    margin: 0 0 22px;
    letter-spacing: -.01em;
    color: #fff;
}
html[data-theme="light"] .about-hero h1 { color: var(--text); }

.about-hero .lead {
    color: rgba(255,255,255,.78);
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.5;
    max-width: 560px;
    font-weight: 500;
    margin: 0;
}
.about-hero .lead strong {
    color: #fff;
    font-weight: 600;
}
html[data-theme="light"] .about-hero .lead { color: var(--text-dim); }
html[data-theme="light"] .about-hero .lead strong { color: var(--text); }

/* Hero mascot — shared spec, single definition in shared/decorations.css (shared-hero pass). */

/* ====== TEAM SECTION ====================================
 * Global-background integration pass: solid section fill
 * removed (both themes) — transparent over the site
 * background. */
.team {
    padding: 0 0 120px;
    position: relative;
}

.team-member {
    position: relative;
    padding: 28px var(--pad);
}

/* Divider lines — REMOVED (global-background integration
   pass). The alternating-slope glowing `::before` dividers on
   .team-member / .team-cta were static per-page lines with a
   drop-shadow glow — exactly the motif retired site-wide in
   the Global background pass. The animated site background
   provides the diagonal-line texture now. Do not re-add. */

/* Neon member box (shared-hero alignment fix): each admin sits in
   its own card — surface fill, purple-tinted border, soft neon glow
   (dark theme only; light theme stays flat per DESIGN_SYSTEM §9 "no
   drop shadows in light mode"). Accent colors reuse the existing
   brand tokens at reduced alpha — no new palette. */
.member-card {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 48px;
    align-items: center;
    padding: 36px 44px;
    max-width: var(--container);
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--purple) 45%, var(--line));
    border-radius: var(--radius-lg);
    box-shadow:
        0 0 26px color-mix(in srgb, var(--purple) 16%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .03);
}
html[data-theme="light"] .member-card {
    border-color: var(--line);
    box-shadow: none;
}

.member-card h3 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 32px;
    margin: 0 0 14px;
    color: #fff;
    letter-spacing: -.005em;
}
html[data-theme="light"] .member-card h3 { color: var(--text); }

.member-card h3 .dash {
    color: var(--orange);
    margin: 0 8px;
    font-weight: 600;
}
.member-card h3 .role {
    /* Color comes inline via var(--<token>); this rule only
       supplies weight / spacing. */
    font-weight: 500;
}

.member-card p {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: #ACACAC;
    max-width: 520px;
    font-weight: 500;
}
html[data-theme="light"] .member-card p { color: var(--text-dim); }

/* ====== AVATARS ========================================= */
.avatar-frame {
    width: 180px;
    height: 180px;
    justify-self: end;
    position: relative;
}
.avatar-frame::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple), transparent 60%);
    opacity: .15;
    z-index: -1;
}
.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #1A2230;
    border: 2px solid rgba(255,255,255,.10);
    display: block;
}
html[data-theme="light"] .avatar-img {
    background: var(--surface);
    border-color: rgba(20,28,40,.12);
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(124,91,230,.18), transparent 60%),
        repeating-linear-gradient(135deg,
            rgba(255,255,255,.05) 0 8px,
            rgba(255,255,255,.0) 8px 16px),
        #1A2230;
    border: 2px dashed rgba(255,255,255,.25);
    display: grid;
    place-items: center;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(255,255,255,.55);
    line-height: 1.6;
    padding: 14px;
    letter-spacing: .04em;
}
.avatar-placeholder .tag {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--orange-3);
    margin-bottom: 4px;
}
html[data-theme="light"] .avatar-placeholder {
    background:
        radial-gradient(circle at 35% 30%, rgba(124,91,230,.10), transparent 60%),
        repeating-linear-gradient(135deg,
            rgba(20,28,40,.05) 0 8px,
            rgba(20,28,40,.0) 8px 16px),
        var(--surface);
    border-color: rgba(20,28,40,.20);
    color: var(--text-dim);
}

/* ====== CTA STRIP ======================================== */
.team-cta {
    position: relative;
    padding: 52px calc(var(--pad) + 44px) 0;
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.team-cta h3 {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 30px;
    margin: 0 0 6px;
    color: #fff;
}
html[data-theme="light"] .team-cta h3 { color: var(--text); }
.team-cta p {
    margin: 0;
    color: #ACACAC;
    font-size: 17px;
    font-weight: 500;
}
html[data-theme="light"] .team-cta p { color: var(--text-dim); }

/* Discord button — local variant of the brand button family.
   `.btn` base may already exist in shared/buttons.css; the
   `.discord` modifier here re-declares everything we need so
   we don't depend on `.btn` having every property we want. */
.team-cta .btn.discord {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 28px;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .02em;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-body);
    background: #5865F2;
    color: #fff;
}
.team-cta .btn.discord:hover { filter: brightness(1.05); }

/* Inert state — section-local, and it HAS to be section-local.
   The shared `a.btn[aria-disabled="true"]` pair in shared/buttons.css
   (social-links pass) dims this button when DISCORD_INVITE_URL is
   unset, but it cannot win the other two properties here: the local
   variant above re-declares the whole button, so `.team-cta
   .btn.discord` (0,3,0) outranks the shared `a.btn[…]` (0,2,1) and
   keeps `cursor: pointer`, and `.team-cta .btn.discord:hover` (0,4,0)
   — `:hover` counts in the class column — outranks the shared
   `a.btn[…]:hover` (0,3,1) and keeps re-applying the brightness lift.
   A non-link that lifts on hover and shows a pointer cursor still
   reads as clickable, which is exactly what the inert state exists to
   stop. Scoping to `.team-cta` scores (0,3,1) / (0,4,1) and holds.
   The landing page needs no such override — its CTAs use the shared
   `.btn.discord` / `.btn.steam-dark` variants and landing.css adds no
   competing `cursor` or `:hover` rule. */
.team-cta a.btn[aria-disabled="true"],
.team-cta a.btn[aria-disabled="true"]:hover {
    cursor: default;
    filter: none;
}

/* ====== RESPONSIVE ======================================= */
@media (max-width: 1100px) {
    .about-hero { padding: 56px 0 90px; }
    .about-hero h1 { font-size: clamp(40px, 7vw, 64px); }
    .member-card { padding: 28px 32px; }
    .team-cta { padding-left: calc(var(--pad) + 32px); padding-right: calc(var(--pad) + 32px); }
    .member-card h3 { font-size: 26px; }
    .member-card p { font-size: 16px; }
    .avatar-frame { width: 150px; height: 150px; }
}

@media (max-width: 760px) {
    .about-hero { padding: 40px 0 60px; }
    .about-hero .wrap { grid-template-columns: 1fr; gap: 24px; }
    .about-hero h1 { font-size: 42px; margin-bottom: 14px; }
    .about-hero .lead { font-size: 16px; }

    .team { padding: 20px 0 80px; }
    .team-member { padding: 16px var(--pad); }
    .member-card {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: left;
        padding: 22px 20px;
    }
    .team-cta { padding: 44px var(--pad) 0 var(--pad) !important; }
    .avatar-frame { width: 120px; height: 120px; justify-self: start; }
    .member-card h3 { font-size: 22px; }
    .member-card p { font-size: 15px; }

    .team-cta { flex-direction: column; align-items: flex-start; }
    .team-cta h3 { font-size: 24px; }
}