/* =============================================================================
   Bild Sektion — geskewter Vollbild-Block (ACF: acf/image-section)
   -----------------------------------------------------------------------------
   Der GANZE Block wird per skewY(--skew) gekippt, das Bild fuellt ihn full-bleed
   und wird per Gegen-skewY wieder gerade gedreht. Weil alle Bloecke denselben
   Winkel haben, schliessen ihre schrägen Kanten auf jeder Breite ohne Knick an.
   ========================================================================== */

@scope (.image-section) {
  :scope {
    position: relative;
    /* block-size: 750px; */
    /* Fallback-Grund hinter dem Bild, falls eine schräge Ecke nicht ganz deckt. */
    background-color: var(--color-blue-light);
    overflow: hidden;
    /* Ganzer Block geskewt, identisch zu den Nachbarn (durchgehende Diagonale). */
    transform: skewY(var(--skew));
  }

  .image-section-wrap {
    position: relative;
    aspect-ratio: 16/6;
    max-width: 1920px;
    margin-inline: auto;
    overflow: hidden;
  }

  /* Handy + Tablet: hoeheres Format, da das 16/6-Band sonst bei stehenden
     Motiven (Team-Bild) kaum mehr als ein Streifen bleibt und die schraege
     Oberkante in den Kopf schneidet. */
  @media (width <= 900px) {
    .image-section-wrap {
      aspect-ratio: 16/10;
    }
  }

  @media (width <= 601px) {
    .image-section-wrap {
      aspect-ratio: 5/4;
    }
  }

  /* Bild fuellt den geskewten Block full-bleed, ueberdimensioniert per negativem
     inset, damit das zurueckgedrehte Bild die schrägen Block-Ecken randlos deckt
     (sonst blitzt an den spitzen Ecken der hellblaue Grund durch). */
  .image-section-media {
    position: absolute;
    /* Ueberhang auf allen Seiten: nur vertikal reicht nicht, da die
       zurueckgedrehten Bild-Ecken sonst horizontal zurueckweichen und die
       Block-Spitzen freilegen. */
    inset: -10vw 0;
    /* Standard-Ausschnitt, ueberschrieben von .focus-top / .focus-bottom (ACF
       "image_focus" -> functions/image_focus.php). */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: skewY(calc(-1 * var(--skew)));
  }

  /* Bildausschnitt (ACF-Feld "image_focus"). Prozentwerte statt Schluesselwoerter
     wie "top"/"bottom", weil die Media-Box durch den 10vw-Ueberhang oben/unten
     groesser ist als der sichtbare Bereich — bei 0%/100% bleibt so trotzdem ein
     Sicherheitsstreifen, der die schraegen Ecken deckt. */
  :scope.focus-top .image-section-media {
    background-position: center -70%;
  }

  :scope.focus-center .image-section-media {
    background-position: center center;
  }

  :scope.focus-bottom .image-section-media {
    background-position: center 100%;
  }

  /* Titel unten-links, liegt im geskewten Block -> zurueckdrehen. Groesserer
     Puffer nach unten, damit auch lange Titel nicht in die schräge Unterkante
     rutschen. */
  .image-section-caption {
    position: absolute;
    inset-block-end: 5.5rem;
    inset-inline: 0;
    z-index: 1;
    transform: skewY(calc(-1 * var(--skew)));
  }

  @media (width <= 900px) {
    .image-section-caption {
      inset-block-end: 3.5rem;
    }
  }

  .image-section-caption h1,
  .image-section-caption h2 {
    color: var(--color-white);
    margin: 0;
  }
}