/* ==========================================================
   SIDE PANEL HERO -- .cp-panel-hero, the identity card injected by
   CompanyPublicProfileController::show() at the very top of
   .cp-home-columns__panel, ahead of whatever About/Locations/etc.
   sections an owner has placed there. Unlike those, this isn't a
   placeable "section" (no native_key, no DB row, no Website settings
   toggle) -- it renders unconditionally whenever the Side Panel itself
   is active, the same way the page's main Hero (06_hero.css) is
   unconditional above everything else. Owns: the panel avatar/name
   block, the contact (email/phone) line, the overlapping follower
   avatar stack, and the Message/Follow action row. Do not place general
   panel-layout CSS here -- that's 07_homepage.css's SIDE PANEL block.
========================================================== */

/* margin-top matches .cp-home-section's own top margin (07_homepage.css)
   exactly -- the main column's first card carries that margin (even as
   the first item in .cp-home-columns__main), but this card isn't a
   .cp-home-section and doesn't inherit it, so without this the two
   columns' first cards start 20px out of alignment with each other. */
.cp-panel-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    padding: 18px;
    margin-top: 20px;
}

/* Same edge-to-edge flattening as every other card at this breakpoint
   (07_homepage.css's own .cp-home-section:not(--full-width) override) --
   this card isn't a .cp-home-section, so it needs its own copy of that
   one rule. Also flush under the header -- this card is the first thing
   on the page whenever the panel reorders ahead of main content
   (07_homepage.css's own ≤560px block), and its own margin-top:20px
   (above) existed only to align with the main column's first card, a
   concern that no longer applies once it's first overall. */
@media (max-width: 560px) {
    .cp-panel-hero {
        border-radius: 0;
        margin-top: 0;
    }
}

/* Subtle decorative bubble cluster, clipped to the card -- the same
   color the site header uses for the selected nav link's own text/
   highlight (--cp-primary, 05_header.css's .cp-site-nav__link--active),
   at low opacity so it reads as texture, not a colored panel. Each
   pseudo-element covers the whole card (inset: 0) and layers several
   radial-gradient "circle Npx at X% Y%, COLOR, transparent" bubbles --
   a hard-edged circle since the color and transparent stops sit at (near
   enough) the same radius, rather than a soft blurred glow -- so many
   bubbles come from 2 elements without adding markup just for
   decoration. ::before clusters near the top-right corner, ::after near
   bottom-left, mirroring the two-corner layout before this but with more
   of them per corner. Negative z-index + isolation: isolate on the card
   above keeps every bubble behind the real content, contained to this
   card alone. */
.cp-panel-hero::before,
.cp-panel-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.cp-panel-hero::before {
    background-image:
        radial-gradient(circle 95px at 96% -6%, color-mix(in srgb, var(--cp-primary, #137A5A) 18%, transparent) 99%, transparent 100%),
        radial-gradient(circle 34px at 76% 10%, color-mix(in srgb, var(--cp-primary, #137A5A) 14%, transparent) 99%, transparent 100%),
        radial-gradient(circle 16px at 58% -4%, color-mix(in srgb, var(--cp-primary, #137A5A) 12%, transparent) 99%, transparent 100%),
        radial-gradient(circle 12px at 88% 32%, color-mix(in srgb, var(--cp-primary, #137A5A) 10%, transparent) 99%, transparent 100%);
}

.cp-panel-hero::after {
    background-image:
        radial-gradient(circle 68px at 3% 106%, color-mix(in srgb, var(--cp-primary, #137A5A) 14%, transparent) 99%, transparent 100%),
        radial-gradient(circle 26px at 21% 80%, color-mix(in srgb, var(--cp-primary, #137A5A) 11%, transparent) 99%, transparent 100%),
        radial-gradient(circle 14px at 42% 102%, color-mix(in srgb, var(--cp-primary, #137A5A) 9%, transparent) 99%, transparent 100%),
        radial-gradient(circle 10px at 8% 70%, color-mix(in srgb, var(--cp-primary, #137A5A) 8%, transparent) 99%, transparent 100%);
}

/* -- Row 1: avatar (col 1) beside name + contact stacked (col 2) -- */

.cp-panel-hero__row1 {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Same fallback the rest of the app actually uses when there's no real
   photo -- e.g. the Connections section's .pw-network-person__avatar/
   .pw-network-suggestion__avatar (workspace/28_personal_network.css):
   the shared placeholder PNGs (public/assets/images/placeholders/
   avatars/) as the background, company-default.png for the company's own
   avatar below and account-default.png for the individual people in the
   follower stack further down -- plus the initial letter centered on top
   of it (place-items: center below), which the Connections section's own
   version of this fallback doesn't carry but this card does. */
.cp-panel-hero__avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--cp-surface) url('/assets/images/placeholders/avatars/company-default.png') center / cover no-repeat;
    border-radius: var(--cp-radius-lg);
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
}

.cp-panel-hero__avatar--image { background-image: none; background-color: var(--cp-surface-soft); }

.cp-panel-hero__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cp-panel-hero__avatar-initial {
    color: var(--cp-primary, #137A5A);
    font-size: 32px;
    font-weight: 850;
    line-height: 1;
}

.cp-panel-hero__identity-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cp-panel-hero__name {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--cp-heading);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -- Contact line: icon + email, divider, icon + phone -- */

.cp-panel-hero__contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12.5px;
    color: var(--cp-text-muted);
}

.cp-panel-hero__contact-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-panel-hero__contact-icon {
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    background: var(--cp-text-faint);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.cp-panel-hero__contact-icon--mail {
    mask-image: url('/assets/images/tools/icons/mail-outline.svg');
    -webkit-mask-image: url('/assets/images/tools/icons/mail-outline.svg');
}

.cp-panel-hero__contact-icon--phone {
    mask-image: url('/assets/images/tools/icons/phone-outline.svg');
    -webkit-mask-image: url('/assets/images/tools/icons/phone-outline.svg');
}

.cp-panel-hero__contact-divider {
    display: inline-block;
    width: 1px;
    height: 11px;
    background: currentColor;
    opacity: .35;
}

/* -- Follower avatar stack: overlapping circles, one column row of its
   own directly under the identity/contact block. Rendered generously
   server-side (up to 10 -- see side_panel_hero.php); site.js's
   fitFollowerStack() measures the row's actual rendered width and hides
   whichever tail doesn't fit, replacing it with a single "+N" bubble --
   never a fixed count baked in at render time, since the panel's own
   width is themeable (--cp-panel-width, 25-50%). site.js runs this
   synchronously at the end of the document, so the up-to-10 rendered
   avatars only ever flash unclamped in a no-JS/JS-blocked scenario, not
   in normal loading. */

.cp-panel-hero__followers {
    display: flex;
    align-items: center;
    margin-top: 14px;
}

.cp-panel-hero__follower-avatar {
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--cp-surface);
    background: var(--cp-surface) url('/assets/images/placeholders/avatars/account-default.png') center / cover no-repeat;
}

.cp-panel-hero__follower-avatar--image { background-image: none; background-color: var(--cp-surface-soft); }

.cp-panel-hero__follower-avatar:not(:first-child) {
    margin-left: -16px;
}

.cp-panel-hero__follower-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cp-panel-hero__follower-avatar-initial {
    color: var(--cp-primary, #137A5A);
    font-size: 16px;
    font-weight: 850;
    line-height: 1;
}

/* Both circles above set their own `display`, which -- being an author
   rule -- beats the browser's built-in `[hidden] { display: none }`
   default regardless of specificity, so fitFollowerStack()'s `el.hidden =
   true` would silently do nothing without this: a higher-specificity
   selector that actually wins. */
.cp-panel-hero__follower-avatar[hidden],
.cp-panel-hero__follower-more[hidden] {
    display: none;
}

/* The "+N" bubble reuses the same circle geometry so it lines up exactly
   with the avatars it follows, but it isn't a person -- no placeholder
   photo, just a neutral count. */
.cp-panel-hero__follower-more {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    margin-left: -16px;
    border-radius: 50%;
    border: 2px solid var(--cp-surface);
    font-size: 14px;
    font-weight: 600;
    background: var(--cp-text-muted);
    color: var(--cp-inverse);
}

/* -- Message + Follow, side by side -- */

.cp-panel-hero__actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 14px;
}

.cp-panel-hero__actions .cp-follow-btn {
    flex: 1 1 0;
    margin-left: 0;
}

.cp-panel-hero__message-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--cp-text-muted);
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    padding: 8px 14px;
    text-decoration: none;
    cursor: default;
    transition: background var(--cp-transition), color var(--cp-transition);
}

/* Enabled (logged-in visitor -> real link, or logged-out -> opens the
   auth modal) -- only the still-inert no-companyUuid fallback (disabled
   attribute) keeps the muted/default-cursor treatment above. */
a.cp-panel-hero__message-btn,
button.cp-panel-hero__message-btn:not(:disabled) {
    color: var(--cp-text);
    cursor: pointer;
}

a.cp-panel-hero__message-btn:hover,
button.cp-panel-hero__message-btn:not(:disabled):hover {
    background: var(--cp-surface-muted, var(--cp-border));
}

.cp-panel-hero__message-icon {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    background: currentColor;
    mask-image: url('/assets/images/tools/icons/messages.svg');
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url('/assets/images/tools/icons/messages.svg');
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}