/* ==========================================================================
   Section: process
   Figma band y 1000..1870 in a 1440 frame.

   Measured anchors, all reproduced exactly at 1440:
     content inset      x = 125 left, 77 right  (the design is asymmetric)
     h2                 y = 1046, 56/56, #1b1d36, manual break after "Ablauf",
                        "Effizienz & Leads" on the brand gradient
     intro              y = 1193, 17/19 weight 300, black, one line
     card grid          y = 1264, four 290px columns at x = 125/441/757/1073,
                        gap 26, total 1238
     card               290 x 524, radius 20, shadow 0 4px 4px rgb(0 0 0 / .25)
     card overlay       180deg: transparent 0%, rgb(35 35 72 / .9) 50%, .9 100%
     app icon           y = 1513, 54 x 54, radius 10
     card title         y = 1591, 17/19 weight 400, white
     card text          y = 1641, 17/19 weight 300, white, 215px measure
     ornament           x = -242, y = 1426, frame 657 x 547, image at 120.14%

   Vertical rhythm: 1046 - 1000 = 46 top, 1870 - 1788 = 82 bottom.
   ========================================================================== */


  .process {
    position: relative;
    isolation: isolate;
    /* Stated, not inherited from the page: the section has to look the same
       wherever it is ordered. */
    /* No background on purpose.

       This is the page's own white, so painting it here changes nothing
       visually — but it DOES occlude the previous section's decorative
       overhang. Each of these sections is isolated, so it paints atomically
       over whatever came before it, and a 3D shape that is drawn bleeding
       across the boundary gets a hard horizontal cut instead.

       Confirmed against the Figma render: the hero's disc overhangs 40px onto
       the white below it, and the process ring overhangs 103px. Both were
       being sliced off. See CONVENTIONS section 3. */
    padding-block: 46px 82px;
    /* 125/1440 = 8.681vw, 77/1440 = 5.347vw. Both resolve to the Figma pixel
       at 1440. The design's own inset is asymmetric because the 1238px card
       grid was placed from the left; reproduced rather than centred. */
    padding-inline:
      calc(var(--stage-x) + clamp(1.25rem, 8.681vw, 125px))
      calc(var(--stage-x) + clamp(1.25rem, 5.347vw, 77px));
  }

  .process__title {
    /* h2 element style supplies 56/56. Colour is the raw #1b1d36 the design
       uses here, not dark-navy. */
    max-inline-size: 881px;      /* Figma text box */
    color: var(--color-heading-alt);
  }

  .process__intro {
    /* h2 box ends at 1158, intro sits at 1193. */
    margin-block-start: 35px;
    max-inline-size: 765px;      /* Figma text box, one line at 1440 */
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    color: var(--color-text);
  }

  .process__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;                   /* 441 - (125 + 290) */
    /* intro box ends at 1212, cards start at 1264. */
    margin-block-start: 52px;
  }

  .process__card {
    position: relative;
    isolation: isolate;
    min-block-size: 524px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    color: var(--color-on-dark);
    /* Clips the oversized backdrop photo to the rounded frame. */
    overflow: hidden;
  }

  /* The dark scrim over the photo. Figma draws it as its own rectangle per
     card with the same gradient, so it is a pseudo-element here. */
  .process__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      180deg,
      rgb(0 0 0 / 0) 0%,
      rgb(35 35 72 / 0.9) 50%,
      rgb(35 35 72 / 0.9) 100%
    );
    pointer-events: none;
  }

  /* Figma scales each backdrop into the card with its own crop transform, and
     several of them are non-uniform (the source is stretched). Reproduced as
     measured, per card, via the custom properties below. Deliberately no
     object-fit: `fill` is what Figma renders. */
  .process__photo {
    position: absolute;
    inset-block-start: var(--photo-y);
    inset-inline-start: var(--photo-x);
    inline-size: var(--photo-w);
    block-size: var(--photo-h);
    max-inline-size: none;
  }

  /* Crop per card, plus the card's own text inset. These belong to the photo
     and the text as they were placed in Figma; a replacement image from the
     CMS will need its own values or a fallback to cover.

     The insets are NOT uniform in the design: the text column starts 25px
     from the card edge on the first card, 33px on the second and 24px on the
     last two, and the body copy of the first card is indented 2px further
     than its own title while the second card's body sits 6px lower than
     everyone else's. That is misalignment, not intent: reproduced under the
     fidelity rule and reported, not corrected. */
  .process__card[data-photo="strategy"] {
    --photo-x: 0.12%;
    --photo-y: -6.87%;
    --photo-w: 193.1%;
    --photo-h: 106.87%;
    --inset: 25px;        /* icon + title at x = 150 */
    --text-indent: 2px;   /* body at x = 152 */
  }

  .process__card[data-photo="design"] {
    --photo-x: -69.35%;
    --photo-y: -17.39%;
    --photo-w: 211.87%;
    --photo-h: 117.26%;
    --inset: 33px;        /* icon + title + body at x = 474 */
    --text-drop: 6px;     /* body at y = 1647, not 1641 */
  }

  .process__card[data-photo="infrastructure"] {
    --photo-x: 0.11%;
    --photo-y: -0.03%;
    --photo-w: 204.83%;
    --photo-h: 113.36%;
  }

  .process__card[data-photo="build"] {
    --photo-x: -42.75%;
    --photo-y: -30.54%;
    --photo-w: 235.7%;
    --photo-h: 130.45%;
  }

  .process__card-inner {
    position: relative;
    z-index: 1;                  /* above the photo and the scrim */
    /* Icon top sits 249px below the card top (1513 - 1264). The left inset is
       per card, see the blocks above; 24px is what three of the four use.
       The bottom padding is a gutter for longer CMS copy only: at 1440 with
       the drawn copy the card is 515px tall and min-block-size takes it to
       the 524 in the design. */
    padding-block: 249px 24px;
    padding-inline: var(--inset, 24px) 24px;
  }

  .process__icon {
    inline-size: 54px;
    block-size: 54px;
    border-radius: var(--radius-sm);
    object-fit: cover;
  }

  .process__card-title {
    /* Icon ends at 1567, title at 1591. */
    margin-block-start: 24px;
    max-inline-size: 215px;      /* Figma text box: it sets the line breaks */
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    color: var(--color-on-dark);
  }

  .process__card-text {
    /* Two-line title ends at 1629, body at 1641. --text-drop and
       --text-indent carry the second and first card's own offsets. */
    margin-block-start: calc(12px + var(--text-drop, 0px));
    margin-inline-start: var(--text-indent, 0px);
    max-inline-size: 215px;
    font-size: var(--text-sm);
    line-height: var(--leading-body);
  }

  .process__ornament {
    position: absolute;
    z-index: -1;                 /* behind the cards, above the background */
    /* Figma x = -242, y = 1426, i.e. 426 below the top of the band. It bleeds
       past the bottom of the section on purpose: the next section declares it
       as bleeding in and does not draw it. Horizontal overflow is contained by
       body { overflow-x: clip } in base/reset.css. */
    inset-block-start: 426px;
    inset-inline-start: -242px;
    inline-size: 657px;
    block-size: 547px;
    overflow: hidden;
    pointer-events: none;
  }

  .process__ornament img {
    /* Square source in a shorter frame: the bottom of the ring is cropped. */
    inline-size: 100%;
    block-size: 120.14%;
    max-inline-size: none;
  }

  /* ------------------------------------------------------------------
     Below 1440 there is no comp. Decisions made here:
       - four columns hold to 1200, then two, then one at 640. Four 290px
         cards cannot narrow much further before the 17px copy shreds.
       - the 215px text measure is a Figma text box, not a design intent for
         wider cards, so it is dropped once the cards stop being 290 wide.
       - the ornament is hidden below 768: stacked cards sit exactly where it
         is drawn and it reads as an artefact rather than as decoration.
     ------------------------------------------------------------------ */

  @media (width < 1200px) {
    .process__steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process__card {
      /* The per-card inset jitter is reproduced only at the width it was
         drawn at. Once the cards are not 290px wide it reads as a bug, so the
         four cards align. */
      --inset: 24px;
      --text-indent: 0px;
      --text-drop: 0px;
    }

    .process__card-title,
    .process__card-text {
      max-inline-size: none;
    }
  }

  @media (width < 768px) {
    .process__ornament {
      display: none;
    }
  }

  @media (width < 640px) {
    .process__steps {
      grid-template-columns: minmax(0, 1fr);
    }

    .process__card-inner {
      /* The photo band keeps its proportion of a shorter card. */
      padding-block-start: 200px;
    }

    .process__card {
      min-block-size: 0;
    }
  }