/* Profile pages (clubs, promoters, artists). Search modal styles live in
   components/search.css since the modal is mounted globally from base.html. */

/* ─── Page shell ─────────────────────────────────────────────────────────── */

.profile-page {
    color: #fff;
    font-family: var(--font-body);
}

.profile-page-header {
    border-bottom: 1px solid var(--rave-glow-soft);
    padding-bottom: var(--spacing-md);
}

.profile-page-title {
    font-family: var(--font-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    text-shadow: 0 0 15px var(--rave-glow-medium);
    margin: 0;
}

.profile-page-subtitle {
    color: rgba(255, 255, 255, 0.7);
    margin: var(--spacing-sm) 0 0;
}

.profile-filter-bar .form-select {
    background: rgba(20, 0, 30, 0.8);
    color: #fff;
    border: 1px solid var(--rave-glow-soft);
    border-radius: var(--radius-md);
    padding: 0.6rem 2rem 0.6rem 0.9rem;
    max-width: 280px;
    cursor: pointer;
}

.profile-filter-bar .form-select:focus {
    border-color: var(--rave-primary);
    box-shadow: var(--shadow-glow-sm);
    outline: none;
}

.profile-empty {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.05rem;
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */

.profile-hero {
    position: relative;
    min-height: 420px;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 0, 255, 0.35), transparent 60%),
        radial-gradient(ellipse at 80% 80%, rgba(0, 255, 255, 0.25), transparent 55%),
        var(--gradient-background);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.profile-hero--solid {
    min-height: 320px;
}

.profile-hero-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
    z-index: 0;
}

.profile-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 0, 20, 0.2) 0%, rgba(10, 0, 20, 0.7) 60%, rgba(10, 0, 20, 0.95) 100%);
    z-index: 1;
}

.profile-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 5rem;
    padding-bottom: 2.5rem;
}

.profile-breadcrumb {
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 var(--spacing-md);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.profile-breadcrumb a {
    color: var(--rave-secondary);
    text-decoration: none;
}

.profile-breadcrumb a:hover { text-decoration: underline; }

.profile-hero-logo,
.profile-hero-logo-placeholder {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 2px solid var(--rave-primary);
    box-shadow: var(--shadow-glow-md);
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 0, 255, 0.4), transparent 70%),
        rgba(20, 0, 30, 0.85);
    flex-shrink: 0;
}

.profile-hero-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: 2.4rem;
    color: var(--rave-secondary);
    text-shadow: 0 0 12px var(--rave-cyan-glow-medium);
    letter-spacing: 0.02em;
}

.profile-hero-title {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
    text-shadow:
        0 0 18px var(--rave-glow-strong),
        0 0 36px var(--rave-glow-medium);
    margin: 0;
    word-break: break-word;
}

.profile-hero-subtitle {
    color: rgba(255, 255, 255, 0.8);
    margin: var(--spacing-sm) 0 0;
    font-size: 1.05rem;
}

.profile-hero-subtitle a {
    color: var(--rave-secondary);
    text-decoration: none;
    border-bottom: 1px dashed rgba(0, 255, 255, 0.4);
}

.profile-hero-genres {
    margin-top: var(--spacing-sm);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* ─── Info bar ──────────────────────────────────────────────────────────── */

.profile-info-bar {
    background:
        linear-gradient(135deg, rgba(255, 0, 255, 0.08) 0%, rgba(0, 255, 255, 0.05) 100%),
        rgba(20, 0, 30, 0.85);
    border: 1px solid var(--rave-glow-soft);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
    justify-content: flex-start;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* Region + links stay left-adjacent; followers + follow button push right. */
.profile-info-bar .profile-info-followers {
    margin-left: auto;
}

.profile-info-bar > * { color: rgba(255, 255, 255, 0.9); }

.profile-info-region {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
}

.profile-info-region strong {
    color: var(--rave-secondary);
    margin-right: 0.4rem;
}

.profile-info-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

/* A font glyph took the link's letter-spacing after it, and a sprite icon does
   not, so the icon carries that space as a margin. The tracking is registered
   as a length so it resolves against the link's font size, not the icon's. */
@property --profile-link-tracking {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

.profile-info-links a {
    --profile-link-tracking: 0.05em;
    color: var(--rave-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(20, 0, 30, 0.8);
    border: 1px solid var(--rave-glow-soft);
    transition: all var(--transition-fast);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--profile-link-tracking);
    line-height: 1;
}

/* The font glyph's line box was taller than the glyph (the browser rounds the
   font's ascent and descent to whole pixels), and it set the pill's height, so
   the icon keeps that height as padding above and below. */
.profile-info-links a .icon {
    font-size: 1rem;
    margin-right: var(--profile-link-tracking);
    height: calc(1em + 1px);
    padding-block: 0.5px;
}

/* Icon-only round buttons (website + socials), brand-tinted hover. */
.profile-info-link-icon {
    width: 38px;
    height: 38px;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center;
}

/* The font glyph sat above the middle of the round button (about 1.5px, from
   its line box); the sprite icon keeps it there. */
.profile-info-link-icon .icon {
    font-size: 1.05rem !important;
    translate: 0 -0.09em;
}

.profile-info-link-instagram:hover {
    color: #ffffff !important;
    border-color: #e1306c !important;
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}

.profile-info-link-facebook:hover {
    color: #ffffff !important;
    border-color: #1877f2 !important;
    background: #1877f2 !important;
}

.profile-info-link-twitter:hover {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background: #000000 !important;
}

.profile-info-links a:hover {
    color: var(--rave-primary);
    border-color: var(--rave-primary);
    box-shadow: var(--shadow-glow-sm);
    transform: translateY(-2px);
}

.profile-info-followers {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: 0.9rem;
}

.follower-count {
    color: var(--rave-secondary);
    font-weight: bold;
    font-family: var(--font-primary);
}

.profile-follower-group {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    white-space: nowrap;
}

/* ─── Follow button ─────────────────────────────────────────────────────── */

.btn-follow {
    background: transparent;
    border: 1.5px solid var(--rave-primary);
    color: var(--rave-primary);
    padding: 0.5rem 1.4rem;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-body);
}

.btn-follow:hover {
    background: var(--rave-glow-subtle);
    box-shadow: var(--shadow-glow-sm);
    color: #fff;
}

.btn-follow.is-following {
    background: var(--gradient-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-glow-sm);
}

/* ─── Tabs ──────────────────────────────────────────────────────────────── */

.profile-tabs {
    border-bottom: 1px solid var(--rave-glow-subtle);
    padding-bottom: 0;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.profile-tabs::-webkit-scrollbar { display: none; }

.profile-tabs .nav-item {
    margin-right: var(--spacing-xs);
    flex-shrink: 0;
}

.profile-tabs .nav-link {
    color: rgba(255, 255, 255, 0.65);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.7rem 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
    transition: all var(--transition-fast);
}

.profile-tabs .nav-link:hover {
    color: #fff;
    border-bottom-color: var(--rave-glow-soft);
}

.profile-tabs .nav-link.active {
    color: var(--rave-secondary);
    background: transparent;
    border-bottom-color: var(--rave-primary);
    box-shadow: none;
    text-shadow: 0 0 8px var(--rave-cyan-glow-soft);
}

/* ─── Sections / stats ──────────────────────────────────────────────────── */

.profile-section {
    border-top: 1px solid var(--rave-glow-subtle);
    padding-top: var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

.profile-section-title {
    font-family: var(--font-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rave-secondary);
    font-size: 1.15rem;
    margin-bottom: var(--spacing-md);
    text-shadow: 0 0 10px var(--rave-cyan-glow-soft);
}

.profile-description {
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.75;
    font-size: 1.05rem;
    letter-spacing: 0.005em;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--rave-magenta, #ff00c3);
    background: linear-gradient(
        90deg,
        rgba(255, 0, 195, 0.06) 0%,
        rgba(255, 0, 195, 0.02) 30%,
        rgba(255, 255, 255, 0) 100%
    );
    border-radius: 0 6px 6px 0;
}

/* Override inline colours that the rich-text editor sometimes saves
   alongside pasted content (typically `color:rgb(0,0,0)` from Word /
   Google Docs / browser DevTools). Those values are invisible on the
   dark theme. `!important` because inline `style="..."` would
   otherwise win. Links keep their cyan accent. */
.profile-description,
.profile-description p,
.profile-description span,
.profile-description li,
.profile-description strong,
.profile-description em,
.profile-description blockquote {
    color: rgba(255, 255, 255, 0.92) !important;
}

.profile-description a {
    color: var(--rave-secondary, #00ffff) !important;
}

.profile-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Legacy variant — kept as a no-op alias for backwards compatibility with
   templates that still apply both classes. All visual treatment now lives
   on `.profile-pill` so the site has a single pill design across blog,
   SEO landing, profile, FAQ. */
.profile-pill-genre {
    /* intentionally empty — inherits from .profile-pill */
}

.profile-hero-est {
    margin-top: 0.25rem;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

.profile-stats {
    margin-top: var(--spacing-md);
}

.profile-stat {
    background:
        linear-gradient(135deg, rgba(255, 0, 255, 0.08) 0%, rgba(0, 255, 255, 0.05) 100%),
        rgba(20, 0, 30, 0.8);
    border: 1px solid var(--rave-glow-soft);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.profile-stat::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--gradient-primary);
    opacity: 0.7;
}

.profile-stat:hover {
    border-color: var(--rave-primary);
    box-shadow: var(--shadow-glow-sm);
    transform: translateY(-2px);
}

.profile-stat-value {
    font-family: var(--font-primary);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    font-weight: 600;
    text-shadow: 0 0 15px var(--rave-glow-medium);
    letter-spacing: 0.02em;
    margin-top: 0.15rem;
}

.profile-stat-label {
    color: var(--rave-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}

.profile-stat--wide {
    /* Artist list card lays out differently — no giant hero number */
}

.profile-stat--wide .profile-stat-label {
    margin-bottom: 0.25rem;
}

.profile-artist-list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-md);
    font-size: 0.95rem;
}

.profile-artist-list a {
    color: var(--rave-secondary);
    text-decoration: none;
    border-bottom: 1px dashed rgba(0, 255, 255, 0.4);
}

.profile-artist-list a:hover {
    text-shadow: 0 0 6px var(--rave-cyan-glow-medium);
}

.profile-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* Profile / SEO landing pill — shares the blog `.btn-category` vocabulary
   (Orbitron, 0.9rem, 0.5rem 1.2rem padding, magenta border) so every
   pill on the site reads as one design system. Literal colour values
   instead of `--light-border` / `--neon-pink` because those variables
   live in `blog.css` `:root` and SEO landing pages don't load blog.css
   — so a `var(--light-border)` reference falls back to no-border and
   the pills lose their visible outline on dark hero backgrounds. */
.profile-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 0, 255, 0.3);
    color: #fff;
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.profile-pill:hover,
.profile-pill:focus-visible {
    background-color: rgba(255, 0, 255, 0.3);
    border-color: #ff00ff;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.7);
    color: #fff;
    outline: none;
}

.profile-map iframe {
    width: 100%;
    border: 1px solid var(--rave-glow-soft);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.profile-address {
    color: rgba(255, 255, 255, 0.7);
    margin-top: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
}

.profile-team-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-md);
    border-bottom: 1px solid var(--rave-glow-subtle);
    color: #fff;
}

.profile-team-row:last-child { border-bottom: none; }

.profile-team-name { font-weight: 600; }

.profile-team-role {
    color: var(--rave-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 600;
}

.profile-empty-state {
    background: rgba(20, 0, 30, 0.5);
    border: 1px dashed var(--rave-glow-soft);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

.profile-empty-state strong {
    display: block;
    color: #fff;
    font-family: var(--font-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--spacing-sm);
    font-size: 1.05rem;
    text-shadow: 0 0 10px var(--rave-glow-soft);
}

.profile-empty-state span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.profile-empty-state--rich {
    max-width: 560px;
    padding: var(--spacing-xl) var(--spacing-xl);
    text-align: center;
    background:
        radial-gradient(ellipse at top, rgba(255, 0, 255, 0.08), transparent 70%),
        rgba(20, 0, 30, 0.5);
}

.profile-empty-state--rich strong { text-align: center; }
.profile-empty-state--rich span { display: block; text-align: center; }

.profile-empty-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    margin: 0 auto var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--rave-secondary);
    background: rgba(0, 255, 255, 0.08);
    border: 1px solid rgba(0, 255, 255, 0.25);
    box-shadow: var(--shadow-cyan-glow-md);
}

/* The font glyph sat up to a pixel and a half above the middle of the circle
   (from its line box, depending on where the line fell); the sprite icon is
   nudged up to match. */
.profile-empty-icon .icon {
    translate: 0 -0.035em;
}

.profile-empty-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin: var(--spacing-md) 0 var(--spacing-sm);
}

.profile-empty-chip {
    background: rgba(255, 0, 255, 0.08);
    border: 1px solid rgba(255, 0, 255, 0.35);
    color: #fff;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: all var(--transition-fast);
}

.profile-empty-chip:hover {
    background: rgba(255, 0, 255, 0.18);
    border-color: var(--rave-primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 0 12px rgba(255, 0, 255, 0.35);
}

.profile-empty-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--spacing-md);
    padding: 0.6rem 1.4rem;
    background: linear-gradient(135deg, #ff00ff, #8b00ff);
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 6px;
    border: 1px solid rgba(255, 0, 255, 0.5);
    transition: all var(--transition-fast);
}

.profile-empty-link:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(255, 0, 255, 0.45);
}

.profile-empty-inline {
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
    font-size: 0.9rem;
}

.profile-incomplete-banner {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    background: rgba(255, 200, 0, 0.08);
    border: 1px solid rgba(255, 200, 0, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    color: rgba(255, 255, 255, 0.85);
}

.profile-incomplete-banner strong {
    display: block;
    color: #ffc800;
    font-family: var(--font-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
}

.profile-incomplete-banner span { font-size: 0.92rem; }

.profile-incomplete-icon {
    color: #ffc800;
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ─── Club cards (list page + popular-clubs section) ────────────────────── */

.club-card {
    display: block;
    background: rgba(20, 0, 30, 0.7);
    border: 1px solid var(--rave-glow-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    height: 100%;
}

.club-card:hover {
    transform: translateY(-4px);
    border-color: var(--rave-primary);
    box-shadow: var(--shadow-glow-md);
    color: #fff;
}

.club-card-cover {
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(ellipse at center, rgba(255, 0, 255, 0.3), transparent 70%),
        var(--gradient-background);
    overflow: hidden;
}

.club-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.club-card-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: 2.5rem;
    color: var(--rave-secondary);
    text-shadow: 0 0 15px var(--rave-cyan-glow-medium);
    background:
        radial-gradient(ellipse at center, rgba(255, 0, 255, 0.25), transparent 70%),
        var(--gradient-background);
}

.club-card-body {
    padding: var(--spacing-md);
}

.club-card-name {
    font-family: var(--font-primary);
    color: #fff;
    margin: 0;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.club-card-city {
    color: rgba(255, 255, 255, 0.7);
    margin: var(--spacing-xs) 0;
    font-size: 0.85rem;
    text-transform: capitalize;
}

.club-card-meta {
    color: rgba(255, 255, 255, 0.55);
    margin: var(--spacing-sm) 0 0;
    font-size: 0.78rem;
    display: flex;
    gap: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.club-card-compact {
    display: flex;
    align-items: center;
    min-height: 76px;
}

.club-card-compact .club-card-body {
    padding: var(--spacing-sm) var(--spacing-md);
    width: 100%;
}

/* ─── Artist cards (on /artists/ grid) ──────────────────────────────────── */

.artist-card {
    display: flex;
    flex-direction: column;
    background: rgba(20, 0, 30, 0.7);
    border: 1px solid var(--rave-glow-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    height: 100%;
}

.artist-card:hover {
    transform: translateY(-4px);
    border-color: var(--rave-primary);
    box-shadow: var(--shadow-glow-md);
    color: #fff;
}

.artist-card-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background:
        radial-gradient(ellipse at center, rgba(255, 0, 255, 0.3), transparent 70%),
        var(--gradient-background);
}

.artist-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artist-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: 1.75rem;
    color: var(--rave-secondary);
    text-shadow: 0 0 15px var(--rave-cyan-glow-medium);
}

.artist-card-body {
    padding: 0.7rem 0.85rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.artist-card-name {
    font-family: var(--font-primary);
    color: #fff;
    margin: 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
    overflow-wrap: break-word;
}

/* A name word ("HEADLINER") must fit a card whole: on a phone the cards sit
   closer together (g-2), with less padding, and the name is a size smaller;
   from 992px there are four cards a row until 1200px, not six. */
@media (max-width: 399.98px) {
    .artist-card-body {
        padding: 0.6rem;
    }
    .artist-card-name {
        font-size: 0.8rem;
    }
}

/* Reserve a fixed line of vertical space for the genre row so cards
   with no genres (or no follower count) line up identically with cards
   that have them. The reserved row collapses visually to whitespace. */
.artist-card-genres {
    color: var(--rave-secondary);
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow-wrap: anywhere;
    min-height: calc(0.72rem * 1.2);
}

.artist-card-meta {
    color: rgba(255, 255, 255, 0.55);
    /* margin-top: auto pushes meta to the bottom of the flex column body
       so cards with no genre line up the same as cards with a genre. */
    margin: auto 0 0;
    padding-top: 0.35rem;
    font-size: 0.7rem;
    display: flex;
    gap: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── Pagination ────────────────────────────────────────────────────────── */

.profile-pagination .page-link {
    background: rgba(20, 0, 30, 0.8);
    border-color: var(--rave-glow-soft);
    color: var(--rave-secondary);
}

.profile-pagination .page-link:hover {
    background: var(--rave-glow-subtle);
    color: #fff;
}

.profile-pagination .page-item.disabled .page-link {
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
}

/* ─── Mobile + tablet redesign ───────────────────────────────────────────── */

@media (max-width: 768px) {
    .profile-hero {
        min-height: 260px;
        align-items: flex-end;
    }

    .profile-hero-content {
        padding-top: 4.5rem;
        padding-bottom: 1.5rem;
    }

    .profile-hero-logo,
    .profile-hero-logo-placeholder {
        width: 72px;
        height: 72px;
    }
    .profile-hero-logo-placeholder { font-size: 1.6rem; }

    .profile-breadcrumb {
        font-size: 0.75rem;
        margin-bottom: var(--spacing-sm);
    }

    .profile-hero-title {
        font-size: clamp(1.5rem, 8vw, 2.3rem);
    }

    .profile-hero-subtitle {
        font-size: 0.9rem;
    }

    .profile-incomplete-banner {
        padding: var(--spacing-sm) var(--spacing-md);
        gap: var(--spacing-sm);
    }

    /* Info bar stacks as: Region → Social pills (wrap) → Followers + Follow */
    .profile-info-bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }

    .profile-info-region,
    .profile-info-links,
    .profile-info-followers {
        width: 100%;
    }

    .profile-info-links {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .profile-info-links a {
        padding: 0.3rem 0.7rem;
        font-size: 0.72rem;
        gap: 0.3rem;
    }

    .profile-info-links a .icon { font-size: 0.9rem; height: calc(1em + 0.22px); padding-block: 0.11px; }

    .profile-info-followers {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid var(--rave-glow-subtle);
        padding-top: var(--spacing-md);
        font-size: 0.9rem;
    }

    .btn-follow {
        padding: 0.55rem 1.6rem;
        font-size: 0.8rem;
    }

    /* Tabs: fit ALL tabs on a 360px viewport. Each tab gets an equal share
       of the row with shrunk padding/font. No overflow, no scroll. */
    .profile-tabs {
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
        overflow-y: visible;
        gap: 0 !important;
        border-bottom: 1px solid var(--rave-glow-subtle);
        display: flex;
        justify-content: stretch;
        width: 100%;
    }

    .profile-tabs .nav-item {
        flex: 1 1 0 !important;
        min-width: 0;
        margin-right: 0 !important;
        text-align: center;
    }

    .profile-tabs .nav-link {
        padding: 0.55rem 0.25rem;
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        width: 100%;
        overflow-wrap: anywhere;
    }

    /* Stats: comfortable single column, not cramped */
    .profile-stat {
        padding: var(--spacing-md);
    }

    .profile-stat-value {
        font-size: 2rem;
    }

    .profile-section {
        padding-top: var(--spacing-lg);
        margin-top: var(--spacing-md);
    }

    .profile-section-title {
        font-size: 1rem;
    }

    /* Club cards in the Popular Clubs compact row — stack vertically */
    .club-card-compact {
        min-height: auto;
    }

    /* Team tab rows stack nicely */
    .profile-team-row {
        padding: var(--spacing-sm) 0;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    .profile-team-name { font-size: 0.95rem; }
    .profile-team-role { font-size: 0.7rem; }

    /* Empty-state cards on mobile */
    .profile-empty-state {
        padding: var(--spacing-md);
    }
}

/* Very narrow phones */
@media (max-width: 400px) {
    .profile-hero-title {
        font-size: 1.65rem;
    }
    .profile-hero-content .d-flex {
        gap: var(--spacing-sm) !important;
    }
    .profile-hero-logo,
    .profile-hero-logo-placeholder {
        width: 56px;
        height: 56px;
    }
    .profile-hero-logo-placeholder { font-size: 1.2rem; }
}

/* Navbar mobile-actions styling lives in responsive.css so it applies to
   every page globally, not just profile pages (which load this file). */