/* ==========================================================================
   Heltebildet som panel (09.10.2026, første side: /artister/uld/)

   Lastes bare av artistsider med heroBilde: "panel" i canonical (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.

   Hvorfor: fullflate-heroen er laget for liggende scenefoto. Et pressefoto av
   en gruppe er ofte kvadratisk og 640 px. Som bakgrunn ble det forstørret to
   ganger på desktop og beskåret til én person på mobil (ULD: eieren så bare
   den ene av tre). Her vises hele bildet:
   - desktop: tekst til venstre, bildet som panel til høyre (samme idé som
     Lyngs stående panel)
   - mobil: bildet som omslag øverst, tittelen i den nedre fadingen

   Bildet forstørres aldri: bredden er bildets egen (width: auto) eller
   mindre, så faktoren er høyst 1,0. Kravet var høyst ca. 1,1.
   ========================================================================== */

.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. */
  .artist-hero--panel img.artist-hero-image {
    inset: 0 max(48px, calc((100% - 1440px) / 2 + 48px)) 0 auto;
    margin: auto 0;
    width: auto;
    height: auto;
    max-width: 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: max(48px, calc((100% - 1440px) / 2 + 48px));
    padding-right: calc(44% + max(48px, calc((100% - 1440px) / 2 + 48px)) + 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,
  .artist-hero--panel .artist-hero-breadcrumb { flex-wrap: wrap; }
  .artist-hero--panel h1 { font-size: clamp(56px, 6.5vw, 112px); }
  /* 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: clamp(30px, calc(5.4vw - 14px), 64px); }
  .artist-hero--panel .artist-hero-intent-answer {
    width: 100%;
    max-width: 640px;
  }
  .artist-hero--panel .artist-hero-attribution {
    right: max(48px, calc((100% - 1440px) / 2 + 48px));
    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--panel { min-height: 0; }
  .artist-hero--panel 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--panel .artist-hero-overlay { background: none; }
  .artist-hero--panel .artist-hero-content {
    min-height: 0;
    margin-top: -132px;
    padding-top: 0;
    grid-template-rows: auto auto auto auto;
  }
  .artist-hero--panel .artist-hero-title-block { order: 1; }
  /* Malens 11vw ga «Stavangerkameratene» 43 px og 87 px overløp på 390. */
  .artist-hero--panel h1.artist-hero-title-long { font-size: clamp(28px, 8.4vw, 52px); }
  .artist-hero--panel .artist-hero-meta { order: 2; }
  .artist-hero--panel .artist-hero-bottom { order: 3; margin-top: 24px; }
  .artist-hero--panel .artist-hero-breadcrumb { order: 4; }
  .artist-hero--panel .artist-hero-attribution {
    top: 12px;
    bottom: auto;
    right: 14px;
  }
}

/* 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%; }