/* =========================================================
   CS HERO — MOBILE-FIRST LAYOUT
   ConincStudio™ — Cinematic Studio Hero
   ---------------------------------------------------------
   Base styles: phone (default).
   Breakpoints:  ≥640px tablet · ≥960px desktop · ≥1280px wide
   Owns: layout, typography, spacing, buttons, avatar size,
         stats grid, actions stack, safe-area handling.
   ========================================================= */

/* ---------- TOKENS ---------- */
.cs-hero {
    --cs-radius:      16px;
    --cs-radius-sm:   12px;
    --cs-radius-pill: 999px;

    --cs-pad-x:       16px;
    --cs-pad-y:       22px;
    --cs-gap:         16px;

    --cs-font-head:   'Inter', system-ui, -apple-system, sans-serif;
    --cs-font-body:   'Roboto', system-ui, -apple-system, sans-serif;

    --cs-cta:         linear-gradient(90deg, #f5b301, #ff8c42);

    --cs-gold:        #f5b301;
    --cs-gold-soft:   #fec503;
    --cs-orange:      #ff8c42;
    --cs-purple:      #9d4dff;
    --cs-teal:        #00e6d7;

    --cs-glow-gold:   rgba(245, 179, 1, 0.15);
    --cs-glow-orange: rgba(255, 140, 66, 0.30);
    --cs-glow-purple: rgba(157, 77, 255, 0.35);

    --cs-avatar-size: 64px;          /* phone default */
    --cs-safe-top:    env(safe-area-inset-top, 0px);
    --cs-safe-bottom: env(safe-area-inset-bottom, 0px);
    --cs-safe-left:   env(safe-area-inset-left, 0px);
    --cs-safe-right:  env(safe-area-inset-right, 0px);
}

/* =========================================================
   ROOT — spacing, rounding, fonts
   ========================================================= */

.cs-hero {
    display: flex;
    flex-direction: column;
    gap: var(--cs-gap);

    padding:
        calc(var(--cs-pad-y) + var(--cs-safe-top))
        calc(var(--cs-pad-x) + var(--cs-safe-right))
        calc(var(--cs-pad-y) + var(--cs-safe-bottom))
        calc(var(--cs-pad-x) + var(--cs-safe-left));

    border-radius: var(--cs-radius);
    font-family: var(--cs-font-body);
    color: #ffffff;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* =========================================================
   INNER container — vertical stack on mobile
   ========================================================= */

.cs-hero > .cs-hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--cs-gap);
    width: 100%;
}

/* =========================================================
   IDENTITY — avatar + name stack on phone, row on tablet+
   ========================================================= */

.cs-hero__identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;                     /* allow name truncation */
}

/* ---------- AVATAR — bulletproof, sized by token ---------- */
.cs-hero__avatar-group,
[data-cs-avatar-group] {
    flex: 0 0 var(--cs-avatar-size);
    width: var(--cs-avatar-size);
    height: var(--cs-avatar-size);

    position: relative;
    z-index: 3;
    padding: 0;
    border-radius: 50%;
    background: transparent;

    box-shadow:
        0 0 0 2px var(--cs-gold),
        0 0 0 3px rgba(245, 179, 1, 0.35),
        0 8px 20px -6px var(--cs-glow-purple);

    isolation: isolate;
    overflow: hidden;
}

.cs-hero__avatar,
[data-cs-avatar] {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    position: relative;
    z-index: 2;
    opacity: 1;
    clip-path: circle(50% at 50% 50%);
}

/* ---------- USER NAME ---------- */
.cs-hero__user {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cs-hero__user h2 {
    margin: 0;
    font-family: var(--cs-font-head);
    font-weight: 700;
    font-size: 1.1rem;                /* phone */
    line-height: 1.2;
    letter-spacing: -0.01em;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.cs-hero__user span {
    font-size: 0.82rem;
    color: #bbbbbb;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   HEADLINE — mobile-first typographic scale
   ========================================================= */

.cs-hero h1 {
    margin: 0;
    font-family: var(--cs-font-head);
    font-weight: 800;
    font-size: clamp(1.5rem, 7vw, 2rem);   /* fluid but capped for phone */
    line-height: 1.1;
    letter-spacing: -0.02em;

    background: linear-gradient(90deg,
        #ffffff 0%,
        var(--cs-gold-soft) 40%,
        var(--cs-orange) 80%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;

    text-shadow: 0 0 24px rgba(245, 179, 1, 0.18);

    /* Allow wrapping on narrow screens instead of overflow */
    overflow-wrap: break-word;
    word-break: break-word;
}

.cs-hero p {
    margin: 0;
    font-family: var(--cs-font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: #eeeeee;
    max-width: 62ch;
}

/* =========================================================
   ACTION BUTTONS — full-width stack on phone
   ========================================================= */

.cs-hero__actions,
.cs-hero .cs-artist-actions,
.cs-hero .cs-client-actions,
.cs-hero .cs-studio-actions {
    display: flex;
    flex-direction: column;           /* stack on phone */
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}

.cs-hero .Btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;                      /* full-width on phone */
    min-height: 46px;                 /* thumb-friendly */
    padding: 12px 20px;

    border-radius: var(--cs-radius-pill);
    border: 2px solid transparent;

    font-family: var(--cs-font-head);
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;

    transition:
        transform 0.2s ease,
        box-shadow 0.25s ease,
        background-position 0.5s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

.cs-hero .Btn:focus-visible {
    outline: 2px solid var(--cs-gold-soft);
    outline-offset: 3px;
}

/* ---------- PRIMARY — Gold → Orange ---------- */
.cs-hero .Btn.Btn-primary,
.cs-hero .Btn.btn-primary {
    background: var(--cs-cta);
    background-size: 200% 100%;
    background-position: 0% 50%;
    color: #120a1f;
    box-shadow:
        0 8px 24px -8px var(--cs-glow-orange),
        0 0 0 1px rgba(245, 179, 1, 0.4) inset;
}

/* ---------- OUTLINE — Gold border ---------- */
.cs-hero .Btn.Btn-outline,
.cs-hero .Btn.btn-outline {
    background: transparent;
    color: var(--cs-gold);
    border-color: var(--cs-gold);
}

/* ---------- HOVER — only where a real hover exists ---------- */
@media (hover: hover) and (pointer: fine) {
    .cs-hero .Btn.Btn-primary:hover,
    .cs-hero .Btn.btn-primary:hover {
        transform: translateY(-1px);
        background-position: 100% 50%;
        box-shadow:
            0 12px 32px -8px var(--cs-glow-orange),
            0 0 24px -4px var(--cs-glow-gold),
            0 0 0 1px rgba(255, 140, 66, 0.6) inset;
    }
    .cs-hero .Btn.Btn-outline:hover,
    .cs-hero .Btn.btn-outline:hover {
        transform: translateY(-1px);
        color: #120a1f;
        background: var(--cs-gold);
        border-color: var(--cs-gold-soft);
        box-shadow:
            0 0 24px -4px var(--cs-glow-gold),
            0 8px 24px -10px var(--cs-glow-orange);
    }
}

/* Active feedback (touch + mouse) */
.cs-hero .Btn.Btn-primary:active,
.cs-hero .Btn.btn-primary:active,
.cs-hero .Btn.Btn-outline:active,
.cs-hero .Btn.btn-outline:active {
    transform: scale(0.985);
}

/* =========================================================
   STATS — 2×2 grid on phone, inline pills on tablet+
   ========================================================= */

.cs-hero__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;

    font-family: var(--cs-font-head);
    font-size: 0.82rem;
    color: #bbbbbb;
}

.cs-hero__stats li {
    display: inline-flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;

    padding: 8px 12px;
    border-radius: var(--cs-radius-sm);

    background: rgba(27, 19, 51, 0.6);
    border: 1px solid rgba(245, 179, 1, 0.10);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    min-width: 0;
}

.cs-hero__stats [data-cs-stat] {
    color: #ffffff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   NOW PLAYING + PRESENCE — compact on mobile
   ========================================================= */

.cs-hero__now-playing {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 8px 14px;
    border-radius: var(--cs-radius-pill);

    background: rgba(18, 10, 31, 0.6);
    border: 1px solid rgba(157, 77, 255, 0.25);

    font-size: 0.85rem;
    color: #eeeeee;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.cs-hero__now-playing:empty {
    display: none;
}

.cs-hero__now-playing[data-active="true"] {
    border-color: rgba(0, 230, 215, 0.45);
    box-shadow: 0 0 24px -8px rgba(0, 230, 215, 0.5);
}

.cs-hero__now-playing[data-active="true"]::before {
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cs-teal);
    box-shadow: 0 0 10px var(--cs-teal);
    animation: cs-hero-pulse 1.6s ease-in-out infinite;
}

@keyframes cs-hero-pulse {
    0%, 100% { opacity: 1;   transform: scale(1);   }
    50%      { opacity: 0.5; transform: scale(0.8); }
}

.cs-hero__presence:empty,
.cs-hero__online:empty {
    display: none;
}

.cs-hero__presence {
    font-size: 0.82rem;
    color: #bbbbbb;
}

.cs-hero__online {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(187, 187, 187, 0.4);
    margin-left: 6px;
    vertical-align: middle;
}

.cs-hero__online[data-online="true"] {
    background: var(--cs-teal);
    box-shadow: 0 0 12px var(--cs-teal);
}

/* =========================================================
   COMMAND RAIL — social root dock
   ========================================================= */

.cs-hero [data-cs-command-rail] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;

    width: 100%;
    margin-top: 4px;
}

/* =========================================================
   BREAKPOINT — TABLET (≥ 640px)
   ========================================================= */

@media (min-width: 640px) {
    .cs-hero {
        --cs-pad-x: 24px;
        --cs-pad-y: 28px;
        --cs-gap:   20px;
        --cs-avatar-size: 76px;
        --cs-radius: 20px;
    }

    .cs-hero h1 {
        font-size: clamp(1.75rem, 4.5vw, 2.25rem);
    }

    .cs-hero p {
        font-size: 1rem;
    }

    .cs-hero__actions,
    .cs-hero .cs-artist-actions,
    .cs-hero .cs-client-actions,
    .cs-hero .cs-studio-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cs-hero .Btn {
        width: auto;
        flex: 0 1 auto;
        min-width: 140px;
    }

    .cs-hero__stats {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 28px;
    }

    .cs-hero__stats li {
        padding: 6px 14px;
        border-radius: var(--cs-radius-pill);
        justify-content: flex-start;
    }
}

/* =========================================================
   BREAKPOINT — DESKTOP (≥ 960px)
   ========================================================= */

@media (min-width: 960px) {
    .cs-hero {
        --cs-pad-x: 48px;
        --cs-pad-y: 56px;
        --cs-gap:   24px;
        --cs-avatar-size: 96px;
        --cs-radius: 24px;
    }

    .cs-hero h1 {
        font-size: clamp(2rem, 3.2vw, 3rem);
    }

    .cs-hero__inner {
        gap: 28px;
    }

    .cs-hero__identity {
        gap: 16px;
    }

    .cs-hero__user h2 {
        font-size: 1.4rem;
    }

    .cs-hero .Btn {
        padding: 12px 22px;
        font-size: 0.95rem;
        min-height: 44px;
    }
}

/* =========================================================
   BREAKPOINT — WIDE (≥ 1280px)
   ========================================================= */

@media (min-width: 1280px) {
    .cs-hero {
        --cs-pad-x: 64px;
        --cs-pad-y: 64px;
    }

    .cs-hero h1 {
        font-size: clamp(2.25rem, 3vw, 3.25rem);
    }
}

/* =========================================================
   SAFE AREA — notch / home indicator (iPhone, Android)
   ========================================================= */

@supports (padding: env(safe-area-inset-top)) {
    .cs-hero {
        padding-top:    calc(var(--cs-pad-y) + env(safe-area-inset-top));
        padding-bottom: calc(var(--cs-pad-y) + env(safe-area-inset-bottom));
        padding-left:   calc(var(--cs-pad-x) + env(safe-area-inset-left));
        padding-right:  calc(var(--cs-pad-x) + env(safe-area-inset-right));
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .cs-hero *,
    .cs-hero *::before,
    .cs-hero *::after {
        transition: none !important;
        animation: none !important;
    }
    .cs-hero__now-playing[data-active="true"]::before {
        animation: none !important;
    }
}