/* ==========================================================================
   Section: hero-article
   Figma frame "Blog Unterseite" (218:493), band y 0..767.

   The article hero: the post's cover photo full-bleed, the shared hero
   gradient over it, and a CENTRED title — the only heading in the project that
   is not left-aligned, which is why this is its own section rather than a
   variant of hero-page.

   Measured anchors, reproduced exactly at 1440:
     photo    x = -4, y = 0, 1444 x 767, source at 125.68% height
     gradient the same 1439 x 767 fill as every other hero (--gradient-hero)
     h1       box x = 314, y = 321, 814 wide, centred, 72 / 76, white
   ========================================================================== */


  .hero-article {
    position: relative;
    isolation: isolate;
    color: var(--color-on-dark);
    /* The site-header overlays this section, as on every other page. */
    padding-block: 321px 200px;
    /* 314 / 312, not symmetric: the drawn text box is 814 wide starting at
       314, which leaves 312 on the right. Two pixels off-centre in the
       design, reproduced rather than evened out. */
    padding-inline:
      calc(var(--stage-x) + clamp(1.25rem, 21.8056vw, 314px))
      calc(var(--stage-x) + clamp(1.25rem, 21.6667vw, 312px));
    min-block-size: 767px;
    overflow: hidden;
  }

  /* The gradient has to paint OVER the photo. A negative-z child sits above
     its parent's own background, so putting the gradient on the section would
     leave it underneath and the cover would render at full brightness. Two
     negative layers instead: photo at -2, gradient at -1, both below content. */
  .hero-article::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--gradient-hero);
  }

  .hero-article__cover {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: -4px;
    inline-size: calc(100% + 8px);
    block-size: 100%;
    overflow: hidden;
    display: block;
    z-index: -2;
    /* Figma wraps this in scaleY(-1) + rotate(180deg), which nets to a
       horizontal flip. */
    scale: -1 1;
  }

  /* Figma's own crop: the source overflows its frame vertically and is
     anchored to the top, which object-fit's centred cover does not reproduce. */
  .hero-article__photo {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: -0.01%;
    inline-size: 100.02%;
    block-size: 125.68%;
    max-inline-size: none;
    object-fit: cover;
  }

  .hero-article__title {
    position: relative;
    z-index: 1;
    /* The drawn text box: 814 wide and centred in the frame. */
    max-inline-size: 814px;
    margin-inline: auto;
    text-align: center;
    font-size: var(--text-4xl);
    line-height: var(--leading-h1);
    color: var(--color-on-dark);
  }

  /* ------------------------------------------------------------------
     Below 1440 there is no comp. The hero simply loses its fixed height
     and its inset narrows; a centred title needs no reflow.
     ------------------------------------------------------------------ */

  @media (width < 64rem) {
    .hero-article {
      padding-block: 200px 96px;
      min-block-size: 0;
    }
  }