/* ==========================================================
   PUBLIC COMPANY PLATFORM -- HERO, Home's own first section
   (Company::public.home_sections.hero). Never uses .cp-shell/
   .cp-home-section__inner -- it's always its own edge-to-edge band,
   which is exactly why HomepageSectionRenderer never passes it a full-
   width flag the way every other section gets one.
========================================================== */

.cp-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 420px;
    padding: 32px 20px 40px;
    background: linear-gradient(135deg, var(--cp-primary, #137A5A), var(--cp-accent, #137A5A));
    background-size: cover;
    background-position: center;
    color: var(--cp-inverse);
    text-align: left;
}

/* The dark gradient this element used to paint has been removed: it was
   dimming every cover photo to keep white text legible, and the name now
   carries its own outline instead (see .cp-hero__name). The element is
   still rendered so anything that positions against it keeps working;
   it simply paints nothing. */
.cp-hero__scrim {
    position: absolute;
    inset: 0;
}

.cp-hero__content {
    position: relative;
    max-width: 640px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* The shared COMPANY mark, same as the site header's -- a bare
   surface square with a letter on it was a mark invented here. See
   CLAUDE.md, "Default Avatars". */
.cp-hero__logo {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    border-radius: var(--cp-radius-lg);
    background: var(--cp-surface) url('/assets/images/placeholders/avatars/company-default.png') center / cover no-repeat;
    border: 4px solid var(--cp-surface);
    box-shadow: 0 4px 18px rgba(0,0,0,.2);
    display: grid;
    place-items: center;
    font-size: 30px;
    font-weight: 800;
    color: var(--cp-primary, #137A5A);
    overflow: hidden;
}

/* A person's site (/u/{username}): the account ring in a circle, never the
   company squircle (CLAUDE.md, Default Avatars). After the base rule so its
   background-image wins; before --image so a real photo still clears it. */
.cp-hero__logo--person {
    border-radius: 50%;
    background-image: url('/assets/images/placeholders/avatars/account-default.png');
}

.cp-hero__logo--image { background-image: none; background-color: var(--cp-surface-soft); }
.cp-hero__logo img { width: 100%; height: 100%; object-fit: cover; }

.cp-hero__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* An outline in the company's own accent, which is what replaces the
   scrim: the name has to hold its own against a photograph of any
   brightness, and a drop shadow only works over dark areas.

   paint-order puts the stroke BEHIND the fill. Without it the stroke is
   drawn centred on the glyph edge and eats into the letterforms, which
   at this weight closes up the counters and turns the name to mush.

   -webkit-text-stroke is the only text stroke browsers actually
   implement (there is no unprefixed form), and it is supported
   everywhere this site runs. Where it is not, the name simply renders
   without an outline -- still legible, since it keeps its own colour and
   shadow. */
.cp-hero__name {
    margin: 0;
    font-weight: 800;
    letter-spacing: -.01em;
    paint-order: stroke fill;
    -webkit-text-stroke: 3px var(--cp-accent, #137A5A);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

/* The stroke is a fixed width, so it has to come down with the type or
   it swallows the smaller name on a phone. */
@media (max-width: 560px) {
    .cp-hero__name {
        -webkit-text-stroke-width: 2px;
    }
}

.cp-hero__tagline {
    margin: 0;
    font-size: 17px;
    opacity: .92;
    max-width: 52ch;
}

.cp-hero__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.cp-meta--hero {
    margin: 0;
}

/* The industry / size / location chips: a SOLID accent fill with a white
   outline -- the inverse of the base .cp-meta li, and of the translucent
   white fill these used to carry.

   With the scrim gone these sit directly on the cover photo, and a
   translucent fill takes on whatever is behind it: over the bright half
   of a photo the chips and their label washed out together. A solid fill
   is opaque, so the chip reads the same wherever it lands, and the white
   edge separates it from the image instead of trying to be the chip.

   The reset sets border-box (01_tokens.css), so the 2px edge does not
   change the chip's size. No text-shadow: the label sits on flat colour
   now, not on the photograph. */
.cp-meta--hero li {
    background: var(--cp-accent, #137A5A);
    border: 2px solid var(--cp-inverse);
    color: var(--cp-inverse);
}

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

/* No cover photo: the hero is the flat brand gradient, the same colour as
   the Follow button, which then vanished into it. The chips' own white
   outline gives it back an edge. A hero with a photo is unchanged. */
.cp-hero--no-cover .cp-follow-btn {
    border: 2px solid var(--cp-inverse);
}

@media (max-width: 560px) {
    .cp-hero { min-height: 320px; padding: 24px 20px 32px; }
}