/*
  Shared article cover-image styling for 1433hr.no.

  This is the canonical legibility layer for the article hero (the cover image
  with title, byline, kicker, intro and tags on top). It is loaded after each
  article's own <style> block so it wins the cascade, and it is designed to work
  with ANY cover image — light or dark — not one specific photo.

  Every article (existing and future) should link this file in <head>:
    <link rel="stylesheet" href="/artikkel.css" />

  Expected hero structure (all current articles already use it):
    .hero            – position:relative container that holds image + text
      .hero-bg       – the cover <img>, sits at the bottom (z-index 0)
      .hero-overlay  – dark gradient between image and text (this file)
      .hero-content  – the text block, must sit above the overlay (z-index 2)
*/

/* Container always tall enough to give the text a dark area to rest on,
   even when the cover image itself is short. */
.hero {
  position: relative;
  min-height: 520px;
}

/* Dark gradient overlay: darkest in the bottom-left corner where the text
   sits, fading out toward the opposite (top-right) corner. Non-interactive
   and layered below the text but above the image. */
.hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to top right,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.40) 45%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

/* Keep the text above the overlay. */
.hero-content {
  position: relative;
  z-index: 2;
}

/* White text stays white; a soft shadow is extra insurance over especially
   light areas of a cover image. */
.hero h1,
.hero .lead {
  color: #ffffff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* The kicker pill and tag pills keep their own fill and contrast — no shadow,
   so their solid backgrounds stay crisp. */
.hero-kicker,
.hero .tag {
  text-shadow: none;
}

@media (max-width: 900px) {
  .hero {
    min-height: 440px;
  }
}
