/* ==========================================================================
   Section: team
   Figma frame "Agentur" (213:32), band y 767..1820 in a 1440 frame.

   Measured anchors, reproduced exactly at 1440:
     h2            x = 143, y = 915, w = 881, 56 / 56, #1b1d36,
                   "Fachexperten" carries the brand gradient
     intro         x = 143, y = 1062, 17 / 19 light, manual break before "Power"
     cards         y = 1177, three columns at x = 143 / 542 / 941, w = 365,
                   photo panel 365 tall with the top corners rounded
     name bars     y = 1542, h = 121, bottom corners rounded, --shadow-card
     name          +33 / +34 inside the bar, 26 / 24 white
     role          +33 / +67 inside the bar, 17 / 19 white
     ornament      box x = -140, y = 1266, 679.488 x 574.225,
                   inner render 657 x 547 rotated -2.42deg, img at 120.14%

   Reproduced rather than tidied:
     - the first card's photo panel is drawn 367 tall against the other two at
       365, and its bar starts 2px into it. Normalised to one row; the 2px is
       manual-placement drift, not intent.
     - the third card is 366 wide where the others are 365.
     - "Zusamenschluss" and "Sichtbatkeit" are the source's spellings.
   ========================================================================== */


  .team {
    position: relative;
    /* No background: the ornament from this section overhangs into the next
       one, and the page's white already shows through. See CONVENTIONS 3. */
    padding-block: 148px
                   157px;
    padding-inline:
      calc(var(--stage-x) + clamp(1.25rem, 9.9306vw, 143px))
      calc(var(--stage-x) + clamp(1.25rem, 9.2361vw, 133px));
  }

  .team__title {
    position: relative;
    z-index: 1;
    /* The drawn text box. At 881px the copy breaks after "aus", which is the
       break the design shows. */
    max-inline-size: 881px;
    color: var(--color-heading-alt);
  }

  .team__intro {
    position: relative;
    z-index: 1;
    /* h2 occupies 915..1027 (two lines of 56); the intro opens at 1062. */
    margin-block-start: 35px;
  }

  .team__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 365px));
    /* Card left edges 143 / 542 / 941 give a uniform 34px gutter. */
    column-gap: 34px;
    /* Intro ends 1100; cards open at 1177. */
    margin-block-start: 77px;
  }

  .team__member {
    display: flex;
    flex-direction: column;
  }

  /* --- photo panel ------------------------------------------------------ */

  .team__photo {
    position: relative;
    display: block;
    block-size: 365px;
    overflow: hidden;
    border-start-start-radius: var(--radius-md);
    border-start-end-radius: var(--radius-md);
    background-color: var(--color-glass-light);
    box-shadow: var(--shadow-card);
  }

  .team__photo[data-fill="opaque"] {
    background-color: rgb(255 255 255 / 0.8);
  }

  /* Each cut-out sits in its own frame inside the panel, and inside that
     frame the source is scaled and offset — Figma's own crop, which is what
     gives the tight head-and-torso framing. Using object-fit instead renders
     the whole figure and reads as zoomed out.

     Frame box is a % of the panel; the image transform is a % of the frame.
     Both are straight from the design context, per card. A CMS swapping a
     photo invalidates these, which section.json flags. */
  .team__photo-frame {
    position: absolute;
    inset-inline-start: var(--frame-x);
    inset-block-start: var(--frame-y);
    inline-size: var(--frame-w);
    block-size: var(--frame-h);
    overflow: hidden;
    display: block;
  }

  .team__photo-frame img {
    position: absolute;
    inset-inline-start: var(--img-x, 0);
    inset-block-start: var(--img-y, 0);
    inline-size: var(--img-w, 100%);
    block-size: var(--img-h, 100%);
    max-inline-size: none;
    object-fit: cover;
  }

  .team__member:nth-child(1) .team__photo-frame {
    --frame-x: 3.836%;  --frame-y: 2.74%;   --frame-w: 89.863%; --frame-h: 97.808%;
    --img-x: -33.74%;   --img-y: -23.56%;   --img-w: 171.66%;   --img-h: 196.99%;
  }

  .team__member:nth-child(2) .team__photo-frame {
    --frame-x: 6.849%;  --frame-y: -0.274%; --frame-w: 89.041%; --frame-h: 100.274%;
    --img-x: -0.06%;    --img-y: 0;         --img-w: 100.12%;   --img-h: 124.73%;
  }

  .team__member:nth-child(3) .team__photo-frame {
    --frame-x: 13.115%; --frame-y: 1.644%;  --frame-w: 85.246%; --frame-h: 98.356%;
    --img-x: -14.98%;   --img-y: 0;         --img-w: 114.98%;   --img-h: 100%;
  }

  /* --- name bar --------------------------------------------------------- */

  .team__name-bar {
    block-size: 121px;
    padding-block-start: 34px;
    padding-inline: 28px;
    border-end-start-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
    color: var(--color-on-dark);
    box-shadow: var(--shadow-card);
    /* Another fill Figma's codegen omits entirely — a mesh, exported from the
       node at 2x and cropped off its drop shadow. background-color is the
       paint-time fallback. */
    background-color: #232348;
    background-image: url("../img/team-namebar-fill.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .team__name {
    font-size: var(--text-lg);
    line-height: var(--leading-h3);
  }

  .team__role {
    /* Name line box closes at 1600, role opens at 1609. */
    margin-block-start: 9px;
    font-size: var(--text-sm);
    line-height: var(--leading-body);
  }

  /* --- ornament --------------------------------------------------------- */

  .team__ornament {
    position: absolute;
    /* Enters from off-canvas left, so it is anchored to the viewport edge
       rather than the centred stage: it is meant to run off the screen. */
    inset-block-start: 499px;
    inset-inline-start: -140px;
    inline-size: 679.488px;
    aspect-ratio: 679.488 / 574.225;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
  }

  .team__ornament-frame {
    flex: none;
    inline-size: 96.691%;        /* 657 / 679.488 */
    aspect-ratio: 657 / 547;
    rotate: -2.42deg;
    display: block;
    overflow: hidden;
  }

  .team__ornament-frame img {
    inline-size: 100%;
    block-size: 120.14%;
    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 photo panel
         keeps its drawn aspect so the cut-outs stay grounded on the bar
       - the ornament is dropped below 64rem: its whole placement is a
         function of the 1440 composition and it lands on the cards
     ------------------------------------------------------------------ */

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

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

    .team__photo {
      block-size: auto;
      aspect-ratio: 365 / 365;
    }

    .team__ornament {
      display: none;
    }
  }

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