/* ==========================================================================
   Section: hero-page
   The interior-page hero. Simpler than the Startseite hero: a title and one
   decorative render, no stats and no CTA.

   Figma frame "Agentur" (213:32), band y 0..767 in a 1440 frame.

   Measured anchors, reproduced exactly at 1440:
     background     the same 1439 x 767 gradient the Startseite hero uses,
                    so it is the shared --gradient-hero token, not a copy
     h1             x = 143, y = 245, w = 532, 72 / 76, white,
                    "TOP-Websites" carries the brand gradient
     figure         box x = 350, y = -179, 1258.958 x 1173.697
                    inner render 1015 x 866 rotated -21.13deg, img at 117.21%

   The site-header overlays this section, exactly as it overlays the Startseite
   hero, which is why the top padding clears it.
   ========================================================================== */


  .hero-page {
    position: relative;
    isolation: isolate;
    background-image: var(--gradient-hero);
    color: var(--color-on-dark);
    /* Title line box opens at 245. The bottom padding is a floor for narrow
       viewports only: at 1440 the min-height below governs, which is what lets
       one section serve titles of three, four and five lines without each page
       needing its own bottom value. Tallest content is Blog's at 670. */
    padding-block: 245px 64px;
    padding-inline:
      calc(var(--stage-x) + clamp(1.25rem, 9.9306vw, 143px))
      calc(var(--stage-x) + 0px);
    min-block-size: 767px;
  }

  .hero-page__title {
    position: relative;
    z-index: 1;
    /* The drawn text box, per page. Agentur is 532 wide, Geld-Zurueck-Garantie
       725; both start at x=143. */
    max-inline-size: var(--title-measure, 532px);
    /* Figma paints ONE gradient across the whole text node, so an accent that
       falls on a later line restarts at the cyan end rather than continuing
       where the previous line stopped. Putting the gradient on the heading and
       clipping it to the glyphs reproduces that; scoping it to the accent span
       instead would map the ramp across the span's own box and render the
       second fragment violet. The white runs stay opaque and paint over it. */
    background-image: var(--gradient-brand);
    font-size: var(--text-4xl);
    line-height: var(--leading-h1);
    color: var(--color-on-dark);
  }

  .hero-page__accent {
    color: var(--color-brand-to);
  }

  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .hero-page__title {
      -webkit-background-clip: text;
      background-clip: text;
    }

    .hero-page__accent {
      color: transparent;
    }
  }

  /* Figma centres this in a 599px box, but the rendered line sits flush with
     the h1 at x=143, so it is left-aligned here to match what is drawn. */
  .hero-page__subtitle {
    position: relative;
    z-index: 1;
    /* Title closes at 473 (three lines of 76 from 245); subline opens at 532. */
    margin-block-start: 59px;
    font-size: var(--text-xl);
    font-weight: var(--weight-light);
    font-style: italic;
    line-height: var(--leading-lead);
    color: var(--color-on-dark);
  }

  .hero-page[data-variant="wide"] {
    --title-measure: 725px;
  }

  /* Same pill as the Startseite hero: the gradient sits at 70% but the label
     does not, so the fill lives on a pseudo-element. */
  .hero-page__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 195px;
    block-size: 37px;
    /* Blog's title runs to four lines, closing at 549; the pill opens at 633. */
    margin-block-start: 84px;
    border-radius: var(--radius-2xl);
    color: var(--color-on-dark);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-button);
    text-decoration: none;
    isolation: isolate;
    z-index: 1;
  }

  .hero-page__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image: var(--gradient-brand);
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease-out);
  }

  .hero-page__cta:hover::before,
  .hero-page__cta:focus-visible::before {
    opacity: 1;
  }

  .hero-page__figure {
    position: absolute;
    /* Drawn at 350 / -179. Frozen there and shifted onto the centred stage
       once the viewport is wider than the design. */
    inset-block-start: -179px;
    inset-inline-start: calc(var(--stage-x) + 350px);
    inline-size: 1258.958px;
    aspect-ratio: 1258.958 / 1173.697;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
  }

  /* The rotation lives on its own element so it cannot become a transform on
     a positioned ancestor, which would turn that ancestor into a containing
     block and quietly re-anchor the figure. */
  .hero-page__figure-frame {
    flex: none;
    inline-size: 80.622%;    /* 1015 / 1258.958 */
    aspect-ratio: 1015 / 866;
    rotate: -21.13deg;
    display: block;
    overflow: hidden;
  }

  .hero-page__figure-frame img {
    inline-size: 100%;
    block-size: 117.21%;     /* the source overflows its frame, as drawn */
    max-inline-size: none;
    object-fit: cover;
  }

  /* ------------------------------------------------------------------
     Below 1440 there is no comp. Decisions taken here:
       - the figure stops being an overlay and becomes a block, because a
         1258px render behind five lines of 72px type is unreadable once
         the column narrows
       - the hero's fixed height is released so it fits its content
     ------------------------------------------------------------------ */

  @media (width < 64rem) {
    .hero-page {
      padding-block: 160px 64px;
      min-block-size: 0;
      overflow: hidden;
    }

    .hero-page__title {
      max-inline-size: none;
    }

    .hero-page__accent {
    color: var(--color-brand-to);
  }

  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .hero-page__title {
      -webkit-background-clip: text;
      background-clip: text;
    }

    .hero-page__accent {
      color: transparent;
    }
  }

  /* Figma centres this in a 599px box, but the rendered line sits flush with
     the h1 at x=143, so it is left-aligned here to match what is drawn. */
  .hero-page__subtitle {
    position: relative;
    z-index: 1;
    /* Title closes at 473 (three lines of 76 from 245); subline opens at 532. */
    margin-block-start: 59px;
    font-size: var(--text-xl);
    font-weight: var(--weight-light);
    font-style: italic;
    line-height: var(--leading-lead);
    color: var(--color-on-dark);
  }

  .hero-page[data-variant="wide"] {
    --title-measure: 725px;
  }

  /* Same pill as the Startseite hero: the gradient sits at 70% but the label
     does not, so the fill lives on a pseudo-element. */
  .hero-page__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 195px;
    block-size: 37px;
    /* Blog's title runs to four lines, closing at 549; the pill opens at 633. */
    margin-block-start: 84px;
    border-radius: var(--radius-2xl);
    color: var(--color-on-dark);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-button);
    text-decoration: none;
    isolation: isolate;
    z-index: 1;
  }

  .hero-page__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image: var(--gradient-brand);
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease-out);
  }

  .hero-page__cta:hover::before,
  .hero-page__cta:focus-visible::before {
    opacity: 1;
  }

  .hero-page__figure {
      position: static;
      inline-size: 100%;
      margin-block-start: 32px;
    }
  }