/* ════════════════════════════════════════════════════════════════════════
   VTLOG · Ambassador Program (overview + personal page)
   Palette and hard corners as the rest of the user side (see home.css).
   Saira Stencil One only on the big headings, as on the homepage and Recruitment.
   ════════════════════════════════════════════════════════════════════════ */
.amb-wrap {
    --bg:        #0d0d0e;
    --card:      #151516;
    --hover:     #1b1b1d;
    --raised:    #212123;
    --line:      rgba(99,99,99,0.35);
    --line-soft: rgba(99,99,99,0.18);
    --ink:       #e0e0e0;
    --ink-dim:   rgba(224,224,224,0.82);
    --ink-faint: rgba(224,224,224,0.66);
    --accent:    #ff9900;
    --accent-lt: #ffb84d;
    --twitch:    #9146ff;
    --youtube:   #e62117;
    --discord:   #5865f2;
    color: var(--ink);
    padding: 1.25rem;
    display: flex; flex-direction: column; gap: 1.25rem;
    /* Full width of the content area, like the homepage: no centred cap, so an ultrawide
       screen gets more columns instead of empty gutters. Readability is kept per block
       (max-width in ch on running text), not by narrowing the page. */
    width: 100%;
    min-width: 0;
}
.amb-wrap .is-accent { color: var(--accent); }

.amb-h2 {
    margin: 0;
    font-family: 'Saira Stencil One', 'Rajdhani', sans-serif; font-weight: 400; font-synthesis: none;
    font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.2rem);
    line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase;
    color: #ffffff;
}
.amb-h3 {
    margin: 0 0 0.75rem;
    display: flex; align-items: center; gap: 0.6rem;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.3rem; font-weight: 700; line-height: 1.15;
    color: #ffffff;
}
.amb-h3 > i { color: var(--accent); font-size: 1.05rem; width: 1.2rem; text-align: center; }
.amb-lead { margin: 0.5rem 0 0; max-width: 72ch; font-size: 0.95rem; line-height: 1.55; color: var(--ink-dim); }
.amb-text { margin: 0 0 0.75rem; max-width: 80ch; font-size: 0.92rem; line-height: 1.6; color: var(--ink-dim); }
.amb-text:last-child { margin-bottom: 0; }
.amb-muted { color: var(--ink-faint); }
.amb-fineprint { margin: 0.9rem 0 0; max-width: 110ch; font-size: 0.78rem; line-height: 1.5; color: var(--ink-faint); }

.amb-panel {
    background: var(--card);
    border: 1px solid var(--line-soft);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    padding: 1.25rem 1.35rem;
}

/* Descriptive text: one sentence per line (Libraries\Ambassadors\Prose wraps each sentence).
   A block per sentence, no extra gap, so a paragraph stays one visual group and still wraps
   naturally on a phone. */
.amb-sentence { display: block; }

/* Buttons */
.amb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--line);
    background: var(--hover);
    font-size: 0.85rem; font-weight: 600; line-height: 1.2;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.amb-btn:hover { color: var(--ink); border-color: var(--accent); }
.amb-btn.is-primary { background: var(--accent); border-color: var(--accent); color: #161617; }
.amb-btn.is-primary:hover { background: var(--accent-lt); border-color: var(--accent-lt); color: #161617; }
.amb-btn.is-outline { background: transparent; border-color: var(--accent); color: var(--accent); }
.amb-btn.is-outline:hover { background: rgba(255,153,0,0.12); color: var(--accent-lt); }
.amb-btn.is-block { width: 100%; }
.amb-btn[disabled] { cursor: not-allowed; opacity: 0.85; }
.amb-btn.is-primary[disabled]:hover { background: var(--accent); border-color: var(--accent); }
.amb-btn:focus-visible, .amb-social:focus-visible, .amb-link-tile:focus-visible, .amb-card-name a:focus-visible {
    outline: 2px solid var(--accent-lt); outline-offset: 2px;
}

/* Demo notice */
.amb-demo-note {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.65rem 0.9rem;
    background: rgba(23,162,184,0.10);
    border: 1px solid rgba(23,162,184,0.45);
    font-size: 0.85rem; color: #bfe6ee;
}
.amb-demo-tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border: 1px solid rgba(23,162,184,0.55);
    background: rgba(23,162,184,0.14);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: #bfe6ee;
    vertical-align: middle;
}

/* ── Overview: one continuous landing page ───────────────────────────
   Hero -> steps -> roster -> benefits sit straight on the page background (no
   stacked panels). The hero bleeds to the content edges and fades into the
   background; every section shares one inset so all left edges line up. */
.amb-wrap.amb-landing {
    --amb-inset: clamp(1rem, 2.4vw, 3.25rem);
    --amb-sec-gap: clamp(2rem, 2.6vw, 3.25rem);
    gap: 0;
    padding: 0 var(--amb-inset) var(--amb-sec-gap);
    background: var(--bg);
}
.amb-sec { position: relative; padding-top: var(--amb-sec-gap); container-type: inline-size; }
.amb-sec-head { margin-bottom: clamp(1rem, 1.6vw, 1.5rem); }
.amb-eyebrow {
    margin: 0 0 0.45rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--accent-lt);
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.amb-hero {
    position: relative;
    overflow: hidden;
    min-height: clamp(280px, 26vw, 620px);
    display: flex; align-items: center;
    background: #0b0b0c;
}
.amb-hero-photo, .amb-hero-photo img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 70% 45%;
}
.amb-hero-scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(13,13,14,0.94) 0%, rgba(13,13,14,0.8) 32%, rgba(13,13,14,0.22) 64%, rgba(13,13,14,0.05) 100%),
        linear-gradient(0deg, var(--bg) 0%, rgba(13,13,14,0.85) 12%, rgba(13,13,14,0) 48%),
        linear-gradient(180deg, rgba(13,13,14,0.55) 0%, rgba(13,13,14,0) 18%);
}
.amb-hero-body { position: relative; z-index: 1; padding: clamp(1.25rem, 3vw, 4rem); max-width: clamp(560px, 46vw, 1180px); }
/* Overview intro: hero text + the How-to heading share one full-bleed photo background
   (.amb-intro-bg). The photo is never squeezed to make room for text - the text sits on it,
   readable through the left-hand scrim - and it fades into the page only at its foot, where
   the step cards begin. The title keeps its fixed distance under the navigation. */
.amb-landing > .amb-intro {
    position: relative; isolation: isolate;
    margin: 0 calc(-1 * var(--amb-inset));
    /* The bottom padding is the gap between the How-to text and the step cards: the photo's box
       ends exactly where the card row begins (no overlap, no negative margin). */
    padding: 0 var(--amb-inset) clamp(2.25rem, 3.2vw, 3.75rem);
}
.amb-intro-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #0b0b0c; }
.amb-intro .amb-hero-photo img { object-position: 70% 35%; }
.amb-intro .amb-hero-scrim {
    background:
        linear-gradient(90deg, rgba(13,13,14,0.92) 0%, rgba(13,13,14,0.78) 32%, rgba(13,13,14,0.22) 64%, rgba(13,13,14,0.05) 100%),
        linear-gradient(0deg, rgba(13,13,14,0.82) 0%, rgba(13,13,14,0.55) 18%, rgba(13,13,14,0) 45%),
        linear-gradient(180deg, rgba(13,13,14,0.5) 0%, rgba(13,13,14,0) 14%);
}
.amb-intro > .amb-hero { display: block; min-height: 0; overflow: visible; background: none; }
.amb-landing .amb-hero-body {
    padding: clamp(1.5rem, 2.2vw, 2.75rem) 0 0;
    max-width: clamp(520px, 44vw, 1120px);
}
/* Room between the introduction and THE PROGRAM. */
.amb-how-head { position: relative; margin: clamp(2.5rem, 2.9vw, 4rem) 0 0; }
.amb-intro > .amb-how-head { margin-bottom: 0; }
/* The card row starts right where the photo ends. */
.amb-landing > .amb-intro + .amb-sec { padding-top: 0; }
.amb-hero-title {
    margin: 0;
    font-family: 'Saira Stencil One', 'Rajdhani', sans-serif; font-weight: 400; font-synthesis: none;
    line-height: 0.95; text-transform: uppercase; letter-spacing: 0.01em;
}
.amb-hero-line { display: block; font-size: clamp(2.4rem, 1.2rem + 3.6vw, 7rem); color: #f2f2f2; }
.amb-hero-line.is-accent {
    color: var(--accent);
    text-shadow: 0 0 28px rgba(255,153,0,0.25);
}
.amb-hero-kicker {
    margin: 0.9rem 0 0;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: clamp(0.85rem, 0.72rem + 0.35vw, 1.35rem); font-weight: 600;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: rgba(242,242,242,0.9);
}
.amb-hero-kicker i { font-style: normal; color: var(--accent); margin: 0 0.25em; }
.amb-hero-text { margin: 0.9rem 0 0; max-width: 60ch; font-size: clamp(0.95rem, 0.82rem + 0.25vw, 1.25rem); line-height: 1.6; color: rgba(236,236,236,0.9); }

/* ── How to become an Ambassador ───────────────────────────────────── */
/* The five steps and the "Interested?" call to action share one row, as in the
   reference; they stack only when the section is too narrow for both. The step
   grid follows its own column's width (container query): 5 across, else 3 + 2
   centred, else 2 + 2 + 1 centred, else 1. Never a stretched lone last card. */
.amb-how-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@container (min-width: 1000px) {
    .amb-how-grid { grid-template-columns: minmax(0, 1fr) clamp(260px, 19%, 340px); }
}
.amb-steps-wrap { container-type: inline-size; min-width: 0; }
.amb-steps {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    height: 100%;
}
.amb-step {
    position: relative;
    display: flex; flex-direction: column;
    padding: 1.25rem 1.3rem 1.4rem;
    background:
        radial-gradient(120% 85% at 100% 0%, rgba(255,153,0,0.07), rgba(255,153,0,0) 60%),
        linear-gradient(165deg, #1d1d20 0%, #151516 62%);
    border: 1px solid rgba(99,99,99,0.22);
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.amb-step::before {
    content: ''; position: absolute; top: -1px; left: -1px;
    width: 2.75rem; height: 2px; background: var(--accent);
}
.amb-step-num {
    position: absolute; top: 0.85rem; right: 1.1rem;
    font-family: 'Saira Stencil One', 'Rajdhani', sans-serif; font-weight: 400; font-synthesis: none;
    font-size: 2rem; line-height: 1;
    color: rgba(255,153,0,0.8);
}
.amb-step-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.9rem; height: 2.9rem;
    background: rgba(255,153,0,0.1);
    border: 1px solid rgba(255,153,0,0.3);
    color: var(--accent);
    font-size: 1.2rem;
}
.amb-step-title {
    margin: 1.05rem 0 0.45rem;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.12rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.15;
    color: #ffffff;
}
.amb-step-text { margin: 0; max-width: 44ch; font-size: 0.86rem; line-height: 1.55; color: var(--ink-dim); }
@container (min-width: 420px) {
    .amb-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .amb-step { grid-column: span 2; }
    .amb-step:last-child { grid-column: 2 / span 2; }
}
@container (min-width: 640px) {
    .amb-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .amb-step, .amb-step:last-child { grid-column: span 2; }
    .amb-step:nth-child(4) { grid-column: 2 / span 2; }
}
@container (min-width: 1040px) {
    .amb-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .amb-step, .amb-step:nth-child(4), .amb-step:last-child { grid-column: auto; }
}

/* Interested? - the call to action beside step 5, in the same card language. */
.amb-apply {
    display: flex; flex-direction: column; justify-content: center; gap: 0.9rem;
    padding: 1.3rem;
    background: linear-gradient(160deg, rgba(255,153,0,0.12), rgba(255,153,0,0.03) 70%), #151516;
    border: 1px solid rgba(255,153,0,0.4);
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.amb-apply-icon { color: var(--accent); margin-right: 0.3rem; }
.amb-apply-title {
    margin: 0;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.2rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--accent);
}
.amb-apply-text { margin: 0.45rem 0 0; font-size: 0.86rem; line-height: 1.55; color: var(--ink-dim); }

/* ── Our Ambassadors: cards ────────────────────────────────────────── */
.amb-roster-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
}
/* Right side of a roster heading: the directory's count, or the carousel controls. */
.amb-roster-side {
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem;
    min-width: 0;
}
.amb-roster-count {
    margin: 0;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-dim);
}
.amb-roster-count b { color: var(--accent); font-size: 1.25rem; }

/* /ambassadors/all: the roster as its own page, no hero above it. */
.amb-wrap.amb-directory { padding-top: 1.25rem; }
.amb-directory > .amb-sec { padding-top: 1rem; }

.amb-cards {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    /* auto-fit, not auto-fill: a short roster stretches across the row instead of leaving
       empty tracks on the right. A wide card switches to a flatter banner and a capped text
       measure (container queries below), so it never turns into a stretched poster. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1rem;
}
/* ── Ambassador card: the universal design (docs/Ambassadors/VTLOG Ambassadors Showcase.png) ──
   Every card is drawn in its creator's accent, --amb-accent (Directory::accent: their stored
   Profile Studio accent, validated, independent of Premium; VTLOG orange otherwise). One
   continuous line: the outline around the whole card, the rule under the banner and the
   divider between identity and bio meet without gaps; the round photo sits on top of the
   banner rule, which passes behind it. Nothing here is per-creator: any number of cards, any
   colour. Corners stay square (site rule: only circles and pills are rounded). */
.amb-card {
    --acc: var(--amb-accent, #ff9900);
    --acc-ink: var(--acc);
    --acc-ink: color-mix(in srgb, var(--acc) 72%, #ffffff);
    --acc-soft: rgba(255,153,0,0.25);
    --acc-soft: color-mix(in srgb, var(--acc) 28%, transparent);
    container-type: inline-size;
    position: relative;
    display: flex; flex-direction: column;
    background: var(--card);
    border: 1px solid var(--acc);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    transition: box-shadow 0.15s;
}
.amb-card:hover, .amb-card:focus-within { box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 0 1px var(--acc), 0 0 22px var(--acc-soft); }
.amb-card-banner { display: block; aspect-ratio: 5 / 2; overflow: hidden; background: #0b0b0c; border-bottom: 1px solid var(--acc); }
.amb-card-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The overlapping circular photo - the key element of both designs. */
.amb-avatar {
    position: relative;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 30% 25%, #2a2a2d, #111112 70%);
    border: 3px solid var(--accent);
    box-shadow: 0 0 0 4px var(--card), 0 8px 24px rgba(0,0,0,0.55), 0 0 22px rgba(255,153,0,0.25);
}
.amb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amb-avatar-mono {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Saira Stencil One', 'Rajdhani', sans-serif; font-weight: 400; font-synthesis: none;
    color: var(--accent);
    letter-spacing: 0.04em;
}
/* On the card: ring and initials in the creator's accent; no halo, so the banner rule runs
   right up to the ring and disappears behind the opaque photo. The photo is the plain
   uploaded avatar (partials/avatar), never a Profile Studio frame or decoration. */
.amb-card .amb-avatar.is-card {
    --av: 140px;
    z-index: 1;
    width: var(--av); height: var(--av);
    margin: calc(var(--av) * -0.57) 0 0.1rem 0;
    border: 3px solid var(--acc);
    box-shadow: 0 8px 24px rgba(0,0,0,0.55), 0 0 20px var(--acc-soft);
}
.amb-card .amb-avatar.is-card .amb-avatar-mono { font-size: calc(var(--av) * 0.29); color: var(--acc); }

/* Body: identity left (photo, name, badge, platforms, View profile), bio right. --pad is the
   body padding the divider and bands reach through to meet the card's own outline. */
.amb-card-body {
    --pad: 1rem;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "id" "bio" "cta";
    grid-template-rows: auto auto 1fr;
    row-gap: 0.8rem;
    padding: 0 var(--pad) var(--pad);
}
.amb-card-id { grid-area: id; display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; min-width: 0; }
/* Inline, not flex: a long name wraps between words and the badge stays with the last one. */
.amb-card-name {
    margin: 0;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.5rem; font-weight: 700; line-height: 1.1;
    overflow-wrap: break-word;
}
.amb-card-name .amb-name-end { white-space: nowrap; }
.amb-card-name .amb-verified { margin-left: 0.35rem; vertical-align: 0.1em; }
.amb-card-name a { color: #ffffff; text-decoration: none; }
.amb-card-name a:hover { color: var(--acc-ink); }
.amb-card-id > .amb-demo-tag { margin-top: -0.2rem; }
.amb-verified { color: var(--accent); font-size: 1.05rem; }
/* Stacked (narrow cards, phones): the bio is a band ruled off in the accent across the card. */
.amb-card-bio {
    grid-area: bio;
    margin: 0 calc(-1 * var(--pad));
    padding: 0.85rem var(--pad);
    border-top: 1px solid var(--acc);
    border-bottom: 1px solid var(--acc);
}
.amb-card-text {
    margin: 0;
    font-size: 0.86rem; line-height: 1.5; color: var(--ink-dim);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.amb-card-cta { grid-area: cta; align-self: end; }
.amb-card .amb-card-cta { border-color: var(--acc); color: var(--acc-ink); }
.amb-card .amb-card-cta:hover { border-color: var(--acc); background: var(--acc-soft); color: #ffffff; }

@container (min-width: 330px) {
    .amb-card-body {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        grid-template-areas: "id bio" "cta bio";
        grid-template-rows: auto 1fr;
        column-gap: var(--pad);
    }
    /* The divider: from the banner rule down to the card's bottom outline. */
    .amb-card-bio {
        align-self: stretch;
        margin: 0 calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;
        padding: 0.9rem var(--pad) var(--pad) 1rem;
        border: 0;
        border-left: 1px solid var(--acc);
    }
    /* The bio column runs beside the taller identity block, so it can hold more lines
       without adding height; CARD_BIO_MAX (140 chars) fits in 7. */
    .amb-card-text { -webkit-line-clamp: 7; }
    .amb-card-cta { justify-self: stretch; }
}
@container (min-width: 440px) {
    .amb-card-banner { aspect-ratio: 3 / 1; }
    .amb-card .amb-avatar.is-card { --av: 152px; }
    .amb-card-body { --pad: 1.25rem; }
    .amb-card-text { max-width: 62ch; -webkit-line-clamp: 4; }
}
@container (min-width: 560px) {
    .amb-card-body { grid-template-columns: minmax(13rem, 0.8fr) minmax(0, 1.2fr); }
    .amb-card-text { font-size: 0.92rem; }
}
/* Phones: one card per view at full width - stack identity, bio band, button. */
@media (max-width: 480px) {
    .amb-card-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "bio" "cta"; grid-template-rows: auto auto 1fr; }
    .amb-card-bio {
        align-self: auto;
        margin: 0 calc(-1 * var(--pad));
        padding: 0.85rem var(--pad);
        border: 0;
        border-top: 1px solid var(--acc);
        border-bottom: 1px solid var(--acc);
    }
    .amb-card-text { -webkit-line-clamp: 4; }
    .amb-card .amb-avatar.is-card { --av: 124px; }
    .amb-card-name { font-size: 1.35rem; }
}
@container (min-width: 640px) {
    .amb-card-banner { aspect-ratio: 7 / 2; }
}

/* ── Overview carousel (js/pages/ambassadors/carousel.js) ─────────────
   The same cards in one row; --per cards fit the viewport (4 / 3 / 2 / 1 by the
   section's width, never four narrow cards on a small screen). The script reads
   --per, moves the track a group at a time and ends the last group flush with
   the last card, so no slot is ever empty. */
.amb-carousel {
    --per: 1; --n: 1; --gap: 1rem; --show: min(var(--per), var(--n));
    position: relative;
    /* Clip sideways only: the off-view cards must stay hidden, but nothing may be cut at the
       top or bottom. With overflow: hidden the viewport's edge fell on the cards' fractional
       bottom edge and swallowed their 1px bottom outline (and the hover glow) on some screens. */
    overflow: hidden;
    overflow-x: clip;
    overflow-y: visible;
}
@container (min-width: 600px)  { .amb-carousel { --per: 2; } }
@container (min-width: 960px)  { .amb-carousel { --per: 3; } }
@container (min-width: 1240px) { .amb-carousel { --per: 4; } }
@media (min-width: 1900px) { .amb-carousel { --gap: 1.25rem; } }
.amb-cards.is-carousel {
    display: flex;
    gap: var(--gap);
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}
/* --show = min(--per, --n): fewer Ambassadors than fit simply share the row, no empty slots. */
.amb-cards.is-carousel > .amb-card { flex: 0 0 calc((100% - (var(--show) - 1) * var(--gap)) / var(--show)); min-width: 0; }
.amb-carousel.is-reduced .amb-cards.is-carousel { transition: none; }

/* "View all Ambassadors": on the banner of the last visible card only, so it adds no
   height and never touches that card's own View profile button. */
.amb-viewall {
    position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
    display: none; align-items: center; gap: 0.45rem;
    padding: 0.4rem 0.7rem;
    background: rgba(13,13,14,0.86);
    border: 1px solid rgba(255,153,0,0.7);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    font-size: 0.78rem; font-weight: 700; line-height: 1.2;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}
.amb-card.is-last-visible .amb-viewall { display: inline-flex; }
.amb-viewall:hover { background: var(--accent); color: #161617; }
.amb-viewall:focus-visible { outline: 2px solid var(--accent-lt); outline-offset: 2px; }

.amb-carousel-nav { display: flex; align-items: center; gap: 0.5rem; }
.amb-carousel-nav[hidden] { display: none; }
.amb-carousel-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--hover);
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.amb-carousel-btn:hover { border-color: var(--accent); color: var(--accent); }
.amb-carousel-btn:focus-visible { outline: 2px solid var(--accent-lt); outline-offset: 2px; }
.amb-carousel-count {
    min-width: 3.5rem; text-align: center;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.8rem; color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}
.amb-carousel-count b { color: var(--ink); }

.amb-empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    padding: 2.5rem 1rem;
    background: var(--card);
    border: 1px dashed var(--line);
    text-align: center; color: var(--ink-faint);
}
.amb-empty i { font-size: 1.8rem; color: var(--accent); }
.amb-empty p { margin: 0; }

/* Social icon buttons */
.amb-socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.amb-social {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem;
    background: var(--raised);
    border: 1px solid var(--line-soft);
    color: #ffffff;
    font-size: 0.95rem;
    text-decoration: none;
    transition: filter 0.15s, border-color 0.15s;
}
.amb-social.is-twitch  { background: var(--twitch);  border-color: var(--twitch); }
.amb-social.is-youtube { background: var(--youtube); border-color: var(--youtube); }
.amb-social.is-discord { background: var(--discord); border-color: var(--discord); }
a.amb-social:hover { filter: brightness(1.15); color: #ffffff; }
.amb-social.is-placeholder { opacity: 0.45; cursor: help; }

/* ── Requirements: four grouped cards ──────────────────────────────── */
/* One set for every applicant (Libraries\Ambassadors\Requirements). 4 across when
   there is room, else 2 x 2, else 1 - always an even grid, never a lone card. */
.amb-req-list {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@container (min-width: 640px)  { .amb-req-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1280px) { .amb-req-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.amb-req {
    position: relative;
    padding: 1.25rem 1.3rem 1.3rem;
    background: linear-gradient(165deg, #1b1b1e 0%, #151516 65%);
    border: 1px solid rgba(99,99,99,0.22);
    border-left: 2px solid rgba(255,153,0,0.7);
    box-shadow: 0 10px 28px rgba(0,0,0,0.3);
}
.amb-req-title {
    margin: 0 0 1rem;
    display: flex; align-items: center; gap: 0.75rem;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.12rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: #ffffff;
}
.amb-req-icon {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem;
    background: rgba(255,153,0,0.1);
    border: 1px solid rgba(255,153,0,0.3);
    color: var(--accent);
    font-size: 1.05rem;
}
.amb-req-rows { margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.amb-req-row { padding-top: 0.7rem; border-top: 1px solid rgba(99,99,99,0.18); }
.amb-req-row:first-child { padding-top: 0; border-top: 0; }
.amb-req-row dt {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent-lt);
}
.amb-req-row dd { margin: 0.2rem 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink); }

/* ── Benefits: five separate cards ─────────────────────────────────── */
.amb-benefit-list {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.amb-benefit {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 1.3rem 1.3rem 1.4rem;
    background: linear-gradient(180deg, #1a1a1c 0%, #151516 100%);
    border: 1px solid rgba(255,153,0,0.16);
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.amb-benefit:hover {
    border-color: rgba(255,153,0,0.45);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.amb-benefit-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem;
    margin-bottom: 0.95rem;
    background: rgba(255,153,0,0.1);
    color: var(--accent);
    font-size: 1.25rem;
}
.amb-benefit h3 {
    margin: 0 0 0.35rem;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.08rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: #ffffff;
}
.amb-benefit p { margin: 0; max-width: 44ch; font-size: 0.86rem; line-height: 1.55; color: var(--ink-dim); }
@container (min-width: 540px) {
    .amb-benefit-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .amb-benefit { grid-column: span 2; }
    .amb-benefit:last-child { grid-column: 2 / span 2; }
}
@container (min-width: 900px) {
    .amb-benefit-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .amb-benefit, .amb-benefit:last-child { grid-column: span 2; }
    .amb-benefit:nth-child(4) { grid-column: 2 / span 2; }
}
@container (min-width: 1440px) {
    .amb-benefit-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .amb-benefit, .amb-benefit:nth-child(4), .amb-benefit:last-child { grid-column: auto; }
}
.amb-benefits .amb-fineprint { margin-top: 1.1rem; }

/* ── Personal page ─────────────────────────────────────────────────── */
.amb-crumbs a { font-size: 0.85rem; color: var(--ink-dim); text-decoration: none; }
.amb-crumbs a:hover { color: var(--accent); }
.amb-pf-head {
    background: var(--card);
    border: 1px solid var(--line-soft);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.amb-pf-banner {
    position: relative;
    aspect-ratio: 16 / 5;
    min-height: 180px; max-height: clamp(380px, 19vw, 640px);
    width: 100%;
    overflow: hidden;
    background: #0b0b0c;
}
.amb-pf-banner > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amb-pf-banner-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(21,21,22,0.85) 0%, rgba(21,21,22,0) 45%);
}
.amb-pf-emblem {
    position: absolute; left: clamp(1rem, 3vw, 2rem); top: clamp(1rem, 3vw, 1.75rem);
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.45rem 0.85rem 0.45rem 0.5rem;
    background: rgba(10,10,11,0.72);
    border: 1px solid rgba(255,153,0,0.55);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.amb-pf-emblem span {
    font-family: 'Saira Stencil One', 'Rajdhani', sans-serif; font-weight: 400; font-synthesis: none;
    font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent);
}
.amb-pf-id {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.5rem 1.5rem;
    padding: 0 clamp(1rem, 3vw, 2rem) 1.4rem;
}
.amb-avatar.is-profile {
    --amb-pf-av: clamp(132px, 11vw, 232px);
    width: var(--amb-pf-av); height: var(--amb-pf-av);
    margin-top: calc(var(--amb-pf-av) * -0.55);
    border-width: 4px;
}
.amb-avatar.is-profile .amb-avatar-mono { font-size: calc(var(--amb-pf-av) * 0.36); }
.amb-pf-who { padding-top: 1rem; min-width: 0; }
.amb-pf-name {
    margin: 0;
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); font-weight: 700; line-height: 1;
    color: #ffffff;
    overflow-wrap: anywhere;
}
.amb-pf-name .amb-verified { font-size: 0.6em; }
.amb-pf-role {
    margin: 0.45rem 0 0;
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 1.1rem; font-weight: 700; color: var(--accent);
}
.amb-pf-tagline { margin: 0.6rem 0 0; max-width: 64ch; font-size: 0.95rem; line-height: 1.55; color: var(--ink-dim); }
.amb-tags { list-style: none; margin: 0.85rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.amb-tags li {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--raised);
    border: 1px solid var(--line-soft);
    font-size: 0.76rem; font-weight: 600; color: var(--ink);
}
.amb-pf-actions {
    padding-top: 1rem;
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.85rem;
}
.amb-pf-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }

.amb-pf-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 22vw, 500px);
    gap: 1.25rem;
    align-items: start;
}
.amb-pf-main, .amb-pf-side { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

.amb-partner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; }
.amb-seal {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    min-width: 170px;
    padding: 1rem 1.25rem;
    background: var(--bg);
    border: 1px solid rgba(255,153,0,0.4);
    text-align: center;
}
.amb-seal span { margin-top: 0.4rem; font-family: 'Rajdhani', system-ui, sans-serif; font-size: 1.05rem; font-weight: 700; color: #ffffff; }
.amb-seal b { font-family: 'Rajdhani', system-ui, sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--accent); }

.amb-prizes {
    list-style: none; margin: 0.25rem 0 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.6rem;
}
.amb-prize {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.8rem 0.9rem;
    background: var(--hover);
    border: 1px solid var(--line-soft);
}
.amb-prize > i {
    flex: 0 0 auto;
    width: 2.6rem; height: 2.6rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 1.15rem;
}
.amb-prize.is-diamond > i { color: #5fd3f3; background: rgba(95,211,243,0.12); border: 1px solid rgba(95,211,243,0.45); }
.amb-prize.is-gold > i    { color: #f5c542; background: rgba(245,197,66,0.12); border: 1px solid rgba(245,197,66,0.45); }
.amb-prize.is-silver > i  { color: #cfd4da; background: rgba(207,212,218,0.10); border: 1px solid rgba(207,212,218,0.4); }
.amb-prize b { display: block; font-family: 'Rajdhani', system-ui, sans-serif; font-size: 1.1rem; font-weight: 700; color: #ffffff; }
.amb-prize small { display: block; font-size: 0.8rem; color: var(--ink-dim); }

.amb-link-tiles {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem;
}
.amb-link-tile {
    display: flex; align-items: center; gap: 0.65rem;
    height: 100%;
    padding: 0.7rem 0.8rem;
    background: var(--raised);
    border: 1px solid var(--line-soft);
    color: #ffffff;
    text-decoration: none;
    transition: filter 0.15s, border-color 0.15s;
}
.amb-link-tile > i { flex: 0 0 auto; width: 1.4rem; font-size: 1.25rem; text-align: center; }
.amb-link-tile > img { flex: 0 0 auto; }
.amb-link-tile b { display: block; font-size: 0.86rem; line-height: 1.2; }
.amb-link-tile small { display: block; font-size: 0.72rem; line-height: 1.3; color: rgba(255,255,255,0.78); }
.amb-link-tile.is-twitch  { background: var(--twitch);  border-color: var(--twitch); }
.amb-link-tile.is-youtube { background: var(--youtube); border-color: var(--youtube); }
.amb-link-tile.is-discord { background: var(--discord); border-color: var(--discord); }
.amb-link-tile.is-vtlog   { border-color: rgba(255,153,0,0.45); }
a.amb-link-tile:hover { filter: brightness(1.12); color: #ffffff; }
.amb-link-tile.is-placeholder { opacity: 0.5; cursor: default; }

/* ── Responsive ────────────────────────────────────────────────────── */
/* Wide and ultrawide: more room per block rather than empty gutters. */
@media (min-width: 1900px) {
    .amb-wrap { padding: 1.5rem 1.75rem; gap: 1.5rem; }
    .amb-panel { padding: 1.5rem 1.75rem; }
    .amb-cards { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }
}
/* The personal page's main column gets two columns of panels once it is wide enough
   that a single column would only produce long lines and a tall page. */
@media (min-width: 2200px) {
    .amb-pf-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
    .amb-pf-main > .amb-panel:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 2800px) {
    .amb-cards { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
}
@media (max-width: 1100px) {
    .amb-pf-grid { grid-template-columns: 1fr; }
    .amb-pf-id { grid-template-columns: auto minmax(0, 1fr); }
    .amb-pf-actions { grid-column: 1 / -1; align-items: flex-start; padding-top: 0; }
    .amb-pf-buttons { justify-content: flex-start; }
}
@media (max-width: 760px) {
    .amb-wrap { padding: 0.75rem; gap: 1rem; }
    .amb-wrap.amb-landing { --amb-inset: 0.75rem; }
    .amb-intro .amb-hero-scrim { background: linear-gradient(0deg, rgba(13,13,14,0.88) 0%, rgba(13,13,14,0.72) 22%, rgba(13,13,14,0.6) 100%); }
    .amb-roster-head { align-items: flex-start; }
    .amb-roster-side { align-items: flex-start; width: 100%; }
    .amb-pf-id { grid-template-columns: 1fr; justify-items: start; }
    .amb-pf-who { padding-top: 0.25rem; }
    .amb-partner { grid-template-columns: 1fr; }
    .amb-seal { justify-self: start; }
}
@media (max-width: 480px) {
    .amb-hero-kicker { letter-spacing: 0.18em; }
    .amb-link-tiles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .amb-btn, .amb-card, .amb-social, .amb-link-tile, .amb-benefit, .amb-cards.is-carousel { transition: none; }
}

/* ── Personal page: offers, streaming, own accent (Phase 2 follow-up) ── */
/* The Ambassador's own colour (--amb-accent on .amb-profile): the photo ring and the section icons. */
.amb-profile .amb-avatar.is-profile { border-color: var(--amb-accent, var(--accent)); }
.amb-profile .amb-h3 > i { color: var(--amb-accent, var(--accent)); }
.amb-offer-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 0.6rem; }
.amb-offer { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.75rem 0.85rem; background: var(--hover); border: 1px solid var(--line-soft); }
.amb-offer > i { flex: 0 0 auto; width: 1.4rem; margin-top: 0.15rem; text-align: center; font-size: 1.05rem; color: var(--amb-accent, var(--accent)); }
.amb-offer b { display: block; font-size: 0.92rem; color: #ffffff; }
.amb-offer small { display: block; margin-top: 0.1rem; font-size: 0.78rem; line-height: 1.4; color: var(--ink-dim); }
.amb-offer-note { margin-top: 0.85rem; }
.amb-streaming-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.amb-streaming-head .amb-h3 { margin-bottom: 0.6rem; }
.amb-live { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem; border: 1px solid var(--line); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.amb-live.is-on { border-color: rgba(255,59,48,0.6); color: #ff6b62; }
.amb-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 8px #ff3b30; }
.amb-live-title b { color: #ffffff; }
.amb-stream-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }

/* Development preview only: "Test as" (partials/preview_as.php, Context::actAs). */
.amb-preview-as { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.75rem; }
.amb-preview-as b { color: var(--accent, #ff9900); font-weight: 600; }
.amb-preview-as a { padding: 0.15rem 0.5rem; border: 1px solid rgba(99,99,99,0.45); color: rgba(224,224,224,0.8); text-decoration: none; }
.amb-preview-as a:hover { border-color: #ff9900; color: #fff; }
.amb-preview-as a.is-on { border-color: #ff9900; color: #ff9900; }