/* =========================================
   Celebrity Page — Page-Specific Styles
   ========================================= */

/* ── Star profile header — bio row ────────────────────────────────
   The card chrome is the shared <entity-header> (.entity-header* in
   components.css); only the star-specific Row 2 (bio + social links, dropped
   into the component's default slot) lives here. Row 1 (avatar + name/handle +
   Follow) and Row 3 (<stat-items>) are the component's own. */

/* Row 2 stacks bio + social links vertically (the base row is a
   space-between flex row). */
.star-about {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.star-bio {
    font-size: var(--fs-base);
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Unfolded by the inline "More" link, and worn by measureBio's probe. The clamp
   is a -webkit-box property, so dropping the box display is what releases it. */
.star-bio.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
/* The list highlights strip (.thumb-strip*) moved to components.css —
   the shop page renders the same component and does not load this file. */

/* ── Star profile header on mobile ────────────────────────────────────────
   This file is loaded ONLY by celebrity.html, so these are scoped to the star
   profile — shop and list headers keep their current behaviour. */
@media (max-width: 600px) {
    /* .entity-header-name truncates with an ellipsis, which is right for a shop
       row but not on the star's OWN page — their name is the point of the page.
       Let it wrap instead. */
    .entity-header-name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}