/* ==========================================================================
   Section: guarantees
   Figma frame "Geld-Zurück-Garantie" (217:25), band y 767..1610.

   Measured anchors, reproduced exactly at 1440:
     h2          x = 143, y = 915, 56 / 56, #1b1d36, "wir liefern." gradient
     intro       x = 143, y = 1013, 17 / 19 light
     cards       y = 1144, x = 121 / 540 / 959, 365 wide, 310 tall, radius 15
     card 3      y = 1148 with a 137-tall dark note bar at y = 1458
     names       +26 inside the card, y = 1240 / 1244 / 1244, 26 / 24 dark-navy
     texts       +26 inside the card, y = 1312 / 1316 / 1311, 272 wide, 17 / 19
     icons       overlap the card tops: 288 sq at 74/1066, 228 sq at 524/1034,
                 205 x 172 at 943/1068
     ornament    box x = -129, y = 1034, 697.498 x 663.378,
                 inner render 523.278 x 573.553 rotated 106.32deg, img 129.3% / 117.96%

   Reproduced rather than tidied:
     - cards 1 and 2 open at y=1144, card 3 at 1148. Normalised to one row.
     - "Gatantie" in the first card's name is the source's spelling.
   ========================================================================== */


  .guarantees {
    position: relative;
    /* No background: the ornament overhangs into the next section, and a white
       fill here would slice it. See CONVENTIONS section 3. */
    padding-block: 148px 19px;
    padding-inline:
      calc(var(--stage-x) + clamp(1.25rem, 8.4028vw, 121px))
      calc(var(--stage-x) + clamp(1.25rem, 8.0556vw, 116px));
  }

  .guarantees__title,
  .guarantees__intro,
  .guarantees__grid {
    position: relative;
    z-index: 1;
  }

  .guarantees__title {
    /* h2 and intro sit 22px inside the card grid's left edge (143 vs 121). */
    margin-inline-start: 22px;
    max-inline-size: 881px;
    color: var(--color-heading-alt);
  }

  .guarantees__intro {
    margin-block-start: 42px;   /* h2 closes at 971, intro opens at 1013 */
    margin-inline-start: 22px;
  }

  .guarantees__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 365px));
    /* Card left edges 121 / 540 / 959 give a uniform 54px gutter. */
    column-gap: 54px;
    align-items: start;
    margin-block-start: 112px;  /* intro closes at 1032, cards open at 1144 */
  }

  .guarantees__item {
    position: relative;
  }

  /* The badges overhang the card's TOP edge rather than displacing it: the
     card tops align on the drawn row at y=1144 and the icons rise out of it.
     Offsets are measured from each card's own top-left. */
  .guarantees__icon {
    position: absolute;
    inset-block-start: var(--icon-y);
    inset-inline-start: var(--icon-x);
    inline-size: var(--icon-w);
    aspect-ratio: var(--icon-ar, 1);
    overflow: hidden;
    display: block;
    z-index: 1;
  }

  /* Card 3's badge is a zoomed crop of its source in Figma, not a straight
     fit; rendering the whole image instead shows a glyph a third of the drawn
     size. Card 2's is a straight fit and needs no transform. */
  .guarantees__icon img {
    position: absolute;
    inset-inline-start: var(--icon-img-x, 0);
    inset-block-start: var(--icon-img-y, 0);
    inline-size: var(--icon-img-w, 100%);
    block-size: var(--icon-img-h, 100%);
    max-inline-size: none;
    object-fit: cover;
  }

  .guarantees__item:nth-child(2) {
    --icon-y: -110px; --icon-x: -4.384%; --icon-w: 62.466%;
  }

  .guarantees__item:nth-child(3) {
    --icon-y: -80px; --icon-x: -4.384%; --icon-w: 56.164%; --icon-ar: 205 / 172;
    --icon-img-x: -116.59%; --icon-img-y: -152.91%;
    --icon-img-w: 334.15%;  --icon-img-h: 398.26%;
  }

  .guarantees__card {
    position: relative;
    block-size: 310px;
    padding: 96px 26px 0;
    border-radius: var(--radius-md);
    /* Cards 1 and 2 are white at 0.8; card 3 is fully opaque and squares off
       its bottom corners because the note bar continues beneath it. */
    background-color: rgb(255 255 255 / 0.8);
    box-shadow: var(--shadow-card);
  }

  .guarantees__item[data-variant="noted"] .guarantees__card {
    background-color: var(--color-surface);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  .guarantees__name {
    /* Figma H3: 26 / 24. The ratio below 1 is the design's, not a mistake. */
    color: var(--color-surface-dark);
    max-inline-size: 313px;
  }

  .guarantees__text {
    margin-block-start: 26px;
    max-inline-size: 272px;
  }

  .guarantees__note {
    /* 218:140 / 218:144. Sits directly under card 3, 137 tall, bottom corners
       rounded. Same mesh fill as the team name bars on the Agentur page. */
    block-size: 137px;
    padding: 21px 26px 0;
    border-end-start-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
    color: var(--color-on-dark);
    box-shadow: var(--shadow-card);
    background-color: #232348;
    background-image: url("../img/team-namebar-fill.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }


  .guarantees__ornament {
    position: absolute;
    inset-block-start: 267px;      /* 1034 - 767 */
    inset-inline-start: -129px;
    inline-size: 697.498px;
    aspect-ratio: 697.498 / 663.378;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
  }

  .guarantees__ornament-frame {
    flex: none;
    inline-size: 75.022%;          /* 523.278 / 697.498 */
    aspect-ratio: 523.278 / 573.553;
    rotate: 106.32deg;
    display: block;
    overflow: hidden;
  }

  .guarantees__ornament-frame img {
    inline-size: 129.3%;
    block-size: 117.96%;
    max-inline-size: none;
    object-fit: cover;
  }

  /* ------------------------------------------------------------------
     Below 1440 there is no comp. Decisions taken here:
       - three columns to two at 64rem, then one at 40rem
       - the card's fixed 310px height is released once the text can wrap,
         and the note bar follows suit
       - the ornament is dropped below 64rem: its placement is a function
         of the 1440 composition and it lands on the cards
     ------------------------------------------------------------------ */

  @media (width < 64rem) {
    .guarantees {
      padding-block: 96px 64px;
    }

    .guarantees__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: 120px;
    }

    .guarantees__card,
    .guarantees__note {
      block-size: auto;
      min-block-size: 0;
    }

    .guarantees__card { padding-block-end: 26px; }
    .guarantees__note { padding-block-end: 21px; }

    .guarantees__ornament {
      display: none;
    }
  }

  @media (width < 40rem) {
    .guarantees__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }