/* css/artist_hero.css — Künstler-Hero (content_inc/artist_hero.php, Daten: includes/site/site_artist.php)
   Zwei Varianten:  .artist-hero--page    Künstlerseite, ganz oben, groß, blendet beim Laden ein
                    .artist-hero--teaser  Startseite unter den Werken, etwas kleiner, mit Text + Button */

/* ── Hero: dunkel wie im Magazin — Foto rechts, Verlauf nach links, Name + Icons links ──
   Mobil: Foto oben, Verlauf nach unten, Name unten im Bild.
   Breit: Foto füllt rechts, Verlauf von links, Name links mittig. */
.artist-hero {
    --hero-bg:     #0c0d0e;               /* fast schwarz — in diese Farbe läuft der Verlauf */
    --hero-fg:     #f2f2ef;               /* Gesso */
    --hero-muted:  rgba(242, 242, 239, 0.62);
    --hero-accent: #c9a45c;               /* Gold wie im Magazin — nur hier */

    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 88svh;
    overflow: hidden;
    background: var(--hero-bg);
    color: var(--hero-fg);
}

.artist-hero-image {
    position: absolute;
    inset: 0;
    margin: 0;
}

.artist-hero-image picture,
.artist-hero-image img {
    display: block;
    width: 100%;
    height: 100%;
}

.artist-hero-image img {
    object-fit: cover;
    object-position: 68% 20%;   /* Gesicht im Bild halten, auch hochkant */
}

/* Einblenden beim Laden — nur die große Variante (Künstlerseite, ganz oben).
   Der Teaser auf der Startseite kommt beim Scrollen über js/stagger.js. */
.artist-hero--page .artist-hero-image img {
    animation: artist-hero-zoom 2.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* Verlauf: mobil von unten (Text steht unten im Bild) */
.artist-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
        var(--hero-bg) 0%,
        rgba(12, 13, 14, 0.85) 22%,
        rgba(12, 13, 14, 0.35) 48%,
        rgba(12, 13, 14, 0) 70%);
    pointer-events: none;
}

.artist-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0 var(--gutter) 40px;
}

.artist-hero--page .artist-hero-content {
    animation: artist-hero-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
}

.artist-hero-eyebrow {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--hero-accent);
}

.artist-hero-name {
    margin: 0 0 28px;
    font-size: clamp(64px, 17vw, 168px);
    font-weight: 800;
    font-stretch: 75%;
    line-height: 0.88;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.artist-hero-name-first,
.artist-hero-name-last {
    display: block;
}

.artist-hero-name-last {
    color: var(--hero-accent);
}

/* Folge-mir-Icons: rund, dünner Rahmen, beim Hover gefüllt */
.artist-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.artist-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(242, 242, 239, 0.35);
    border-radius: 50%;
    color: var(--hero-fg);
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.artist-social a:hover {
    border-color: var(--hero-fg);
    background: var(--hero-fg);
    color: var(--hero-bg);
}

.artist-social a:focus-visible {
    outline: 2px solid var(--ultramarine);
    outline-offset: 3px;
}

.artist-social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Kein Icon da → Name als Text (sichtbar statt leerer Kreis) */
.artist-social-text {
    font-size: 11px;
}

@keyframes artist-hero-in {
    from {
        opacity: 0;
        transform: translateY(48px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes artist-hero-zoom {
    from {
        opacity: 0;
        transform: scale(1.06);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .artist-hero--page .artist-hero-image img,
    .artist-hero--page .artist-hero-content {
        animation: none;
    }
}

/* Text + Button (Teaser auf der Startseite) */
.artist-hero-text {
    max-width: 38ch;
    margin: 0 0 28px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--hero-muted);
}

.artist-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 28px;
}

/* Button auf dunklem Grund: umgedreht — hell mit dunkler Schrift, gleiche Form wie überall */
.artist-hero .button {
    background: #c9a45c;
    color: var(--hero-bg);
}

.artist-hero .button:hover {
    background: var(--white);
    color: var(--hero-bg);
}

/* Teaser: etwas kleiner als auf der Künstlerseite, Abstand wie die anderen Sektionen.
   Mobil mit Text + Button zu hoch für "Text unten im Bild" — das Gesicht wäre verdeckt.
   Darum: Foto oben, Text darunter auf dunklem Grund, Verlauf nur am unteren Bildrand. */
.artist-hero--teaser {
    display: block;
    margin-top: var(--section-space);
}

.artist-hero--teaser::after {
    display: none;
}

.artist-hero--teaser .artist-hero-image {
    position: relative;
    height: 62svh;
}

.artist-hero--teaser .artist-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
        var(--hero-bg) 0%,
        rgba(12, 13, 14, 0.6) 20%,
        rgba(12, 13, 14, 0) 45%);
    pointer-events: none;
}

.artist-hero--teaser .artist-hero-content {
    margin-top: -56px;
    padding-bottom: 56px;
}

.artist-hero--teaser .artist-hero-name {
    font-size: clamp(52px, 14vw, 120px);
    margin-bottom: 20px;
}

/* Breit: Foto rechts, Verlauf von links, Name links mittig */
@media (min-width: 900px) {
    .artist-hero {
        align-items: center;
        min-height: min(92vh, 980px);
    }

    .artist-hero-image {
        left: 22%;
    }

    .artist-hero-image img {
        object-position: 60% 25%;
    }

    .artist-hero::after {
        background: linear-gradient(90deg,
            var(--hero-bg) 0%,
            var(--hero-bg) 22%,
            rgba(12, 13, 14, 0.75) 38%,
            rgba(12, 13, 14, 0.2) 58%,
            rgba(12, 13, 14, 0) 72%);
    }

    .artist-hero-content {
        max-width: 640px;
        padding: 80px var(--gutter);
    }

    .artist-hero-name {
        font-size: clamp(96px, 11vw, 176px);
        margin-bottom: 36px;
    }

    /* Breit: wie die Künstlerseite — Foto rechts, Verlauf von links, Text links mittig */
    .artist-hero--teaser {
        display: flex;
        min-height: min(78vh, 780px);
    }

    .artist-hero--teaser::after {
        display: block;
    }

    .artist-hero--teaser .artist-hero-image {
        position: absolute;
        height: auto;
    }

    .artist-hero--teaser .artist-hero-image::after {
        display: none;
    }

    .artist-hero--teaser .artist-hero-content {
        margin-top: 0;
        padding-bottom: 80px;
    }

    .artist-hero--teaser .artist-hero-name {
        font-size: clamp(80px, 8vw, 136px);
        margin-bottom: 24px;
    }

    .artist-hero-text {
        font-size: 18px;
    }
}