/* ==========================================================================
   Heltebildet: omslag og panel (canonical heroBilde), og fokuspunkt (heroFokus)

   Lastes bare av artistsider med heroBilde eller et fokuspunkt som ikke er
   malens standard. Eget filnavn fordi css/* caches i et år: en ny fil når
   alle lesere med en gang uten versjonsbump på de andre artistsidene.

   «omslag» (14.10.2026, eierkrav): desktop er malens fullflate med samme
   overtoning som Karpe (/artister/karpe/); denne fila rører ikke desktop.
   Mobil viser hele bildet som omslag øverst, med tittelen i den nedre
   fadingen. Pressefoto er ofte kvadratiske, og fullflaten beskar dem på
   mobil til én person (ULD: eieren så bare den ene av tre, 09.10.2026).

   «panel» (09.10.2026) er samme omslag på mobil, men på desktop står bildet
   som panel til høyre i egen størrelse (forstørres aldri). Malen gir panelet
   begge klassene. Eieren vil ha fullflate som standard; Lyngs stående panel
   (css/artist-lyng.css) er unntaket.
   ========================================================================== */

.artist-hero--panel .artist-hero-scroll { display: none; }
.artist-hero--panel .artist-hero-meta { opacity: 1; }
.artist-hero--panel img.artist-hero-image {
  object-fit: contain;
  object-position: 50% 50%;
}

@media (min-width: 820px) {
  /* Absolutt plassert erstatningselement med top/bottom 0, høyde auto og
     margin auto: høyden kommer fra bildets eget forhold, og panelet står
     midt i heroen. Ingen transform, for parallaksen i malen skriver den. */
  /* Sidemargen er toppmenyens (--helt-marg i artist-page.css, F60
     14.10.2026), og panelet tar 44 prosent av bredden innenfor den. */
  .artist-hero--panel img.artist-hero-image {
    inset: 0 var(--helt-marg) 0 auto;
    margin: auto 0;
    width: auto;
    height: auto;
    max-width: calc((100% - 2 * var(--helt-marg)) * 0.44);
    max-height: calc(100% - 128px);
  }
  /* Teksten står på heltebakgrunnen (blekk), ikke på fotoet, så scrimen trengs
     ikke og ville bare mørknet bildet. */
  .artist-hero--panel .artist-hero-overlay { background: none; }
  .artist-hero--panel .artist-hero-content {
    max-width: none;
    padding-left: var(--helt-marg);
    padding-right: calc((100% - 2 * var(--helt-marg)) * 0.44 + var(--helt-marg) + 40px);
    /* Kolonnen skal aldri bli bredere enn plassen foran panelet: metalinja og
       brødsmulene brytes i stedet for å skyve teksten inn i bildet (820 px). */
    grid-template-columns: minmax(0, 1fr);
  }
  .artist-hero--panel .artist-hero-meta { flex-wrap: wrap; }
  .artist-hero--panel h1 { font-size: min(clamp(3.5rem, 6.5vw, 7rem), var(--ord-tak)); }
  /* Lange navn står på én linje: «Stavangerkameratene» er 10 ganger skriftstørrelsen
     bred, og tekstkolonnen er 56 % av bredden minus 136 px. */
  .artist-hero--panel h1.artist-hero-title-long { font-size: min(clamp(1.875rem, calc(5.4vw - 0.875rem), 4rem), var(--ord-tak)); }
  .artist-hero--panel .artist-hero-intent-answer {
    width: 100%;
    max-width: 640px;
  }
  .artist-hero--panel .artist-hero-attribution {
    right: var(--helt-marg);
    bottom: 12px;
  }
}

/* Mellom 820 og 1199 px er tekstkolonnen smal; metaen i Raskt svar legger seg
   under teksten (samme grep som Lyng). */
@media (min-width: 820px) and (max-width: 1199px) {
  .artist-hero--panel .artist-hero-intent-answer {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .artist-hero--panel .artist-hero-intent-meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
  }
}

@media (max-width: 819px) {
  /* Bildet ligger i flyten øverst i sin egen bredde (aldri bredere enn
     fila), og innholdet trekkes opp i den nedre fadingen. Da trengs ingen
     fast høyde, og alle bildeformater virker. */
  .artist-hero--omslag { min-height: 0; }
  .artist-hero--omslag .artist-hero-scroll { display: none; }
  .artist-hero--omslag .artist-hero-meta { opacity: 1; }
  /* Broedsmulen ligger i flyten over bildet, ikke oppaa det (F32). */
  .artist-hero--omslag .artist-hero-brodsmule {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    padding: 14px var(--helt-marg) 12px;
  }
  .artist-hero--omslag img.artist-hero-image {
    position: relative;
    inset: auto;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }
  .artist-hero--omslag .artist-hero-overlay { background: none; }
  .artist-hero--omslag .artist-hero-content {
    min-height: 0;
    margin-top: -132px;
    padding-top: 0;
    grid-template-rows: auto auto auto;
  }
  .artist-hero--omslag .artist-hero-title-block { order: 1; }
  /* Malens 11vw ga «Stavangerkameratene» 43 px og 87 px overløp på 390. */
  .artist-hero--omslag h1.artist-hero-title-long { font-size: min(clamp(1.75rem, 8.4vw, 3.25rem), var(--ord-tak)); }
  .artist-hero--omslag .artist-hero-meta { order: 2; }
  .artist-hero--omslag .artist-hero-bottom { order: 3; margin-top: 24px; }
  /* Krediteringen staar i bildets oeverste hjoerne, under broedsmuleraden
     (14 + 18 + 12 px), saa de to aldri deler linje paa smale skjermer. */
  .artist-hero--omslag .artist-hero-attribution {
    top: 56px;
    bottom: auto;
    right: 14px;
    /* Paa et lyst pressefoto (Shakira) forsvant teksten i bildet. */
    padding: 2px 6px;
    background: rgba(10, 10, 10, 0.6);
  }
}

/* Paa nettbrett ble et staaende foto i naturlig hoeyde 960 px (ADÉLA, 768 x 900),
   og tittelen havnet under folden (designgaten 14.10.2026). Bildet krymper i
   riktig forhold til 70 prosent av skjermhoeyden, og sidekantene fades, saa det
   smalere bildet leses som et bevisst panel. Telefonen er uendret. */
@media (min-width: 500px) and (max-width: 819px) {
  .artist-hero--omslag img.artist-hero-image {
    max-height: 70vh;
    max-height: 70svh;
    -webkit-mask-image:
      linear-gradient(180deg, #000 62%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(180deg, #000 62%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-composite: intersect;
  }
}

/* Fokuspunkt i fullflate-heroen (heroFokus i canonical). «midt» er malens
   standard (center 25 %) og trenger ingen regel. */
.artist-hero--fokus-venstre img.artist-hero-image { object-position: 25% 25%; }
.artist-hero--fokus-hoyre img.artist-hero-image { object-position: 75% 25%; }
.artist-hero--fokus-topp img.artist-hero-image { object-position: 50% 0%; }