/* ============================================================
   BLOCK: Teaser-Karten (Bild + Button) — Design Tokens
   Datei: page-builder/components/organisms/teaser-cards/block.css
   1:1-Übersetzung des Teufels-Patterns teaser-33-33-33 (SCSS)
   inkl. Akkordeon-Hover-Effekt: Karte wächst bei Hover von
   33,33333333 % auf 45 %, die anderen schrumpfen (nur Desktop).

   Fluid-Formeln exakt nach Theme-Funktion fluid-size($min,$max)
   (assets/scss/abstracts/_mixins.scss): clamp(min, min-20*f +
   100vw*f, max) mit f = (max-min)/100 [rem]. $customEase =
   cubic-bezier(0.22, 1, 0.36, 1).
   ============================================================ */
@import "../../../assets/tokens.css" layer(sdc-tokens);

/* ============================================================
   .as-teaser-cards — Sektion
   space-top/bottom-padding-large = fluid-size(50,100):
   clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem)  (50–100px)
   ============================================================ */
.as-teaser-cards {
    background: var(--as-color-white);
    padding-top: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem);
    padding-bottom: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem);
}

/* Eyebrow (Kategorie) — headline-section: Open Sans regular,
   fluid-size(14,16): clamp(0.875rem, 0.85rem + 0.125vw, 1rem),
   letter-spacing .05em, uppercase, #adadad */
.as-teaser-cards__eyebrow {
    font-family: var(--as-font-body);
    font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #adadad;
    margin: 0;
}

/* ============================================================
   Kopf-Zeile (.teaser-text) — H2 + Intro nebeneinander
   (Spalten 5/12 + 6/12 wie im Pattern), space-bottom-padding-
   extra-large = fluid-size(80,120):
   clamp(5rem, 4.5rem + 2.5vw, 7.5rem)  (80–120px)
   ============================================================ */
.as-teaser-cards__text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--bs-gutter-x, 1.5rem);
    padding-bottom: clamp(5rem, 4.5rem + 2.5vw, 7.5rem);
}

.as-teaser-cards__headline {
    flex: 0 0 41.66666667%;  /* col-md-5 */
    max-width: 41.66666667%;
}

/* H2 — headline-medium-2: Sora SemiBold, fluid-size(25,40):
   clamp(1.5625rem, 1.375rem + 0.9375vw, 2.5rem),
   line-height 54/40 = 1.35, $primary #056ab4, padding-bottom 30px.
   Überschreibt die Atom-Defaults (headline.css: md/font-weight 700). */
.as-teaser-cards__headline .as-headline {
    font-family: var(--as-font-sans);
    font-weight: 600; /* Sora SemiBold (headline-medium-2) */
    font-size: clamp(1.5625rem, 1.375rem + 0.9375vw, 2.5rem);
    line-height: 1.35; /* toEm(54,40) */
    color: var(--as-color-accent-brand); /* $primary #056ab4 */
    padding-bottom: 30px;
    margin-bottom: 0;
}

.as-teaser-cards__intro {
    flex: 0 0 50%;  /* col-md-6 */
    max-width: 50%;
    font-family: var(--as-font-body);
    font-size: clamp(0.875rem, 0.8409rem + 0.1042vw, 1rem);
    letter-spacing: 0.01em;
    line-height: 1.875;
    color: var(--as-color-text);
}
.as-teaser-cards__intro p {
    margin: 0 0 1em;
}
.as-teaser-cards__intro p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Karten-Reihe (.teaser-image)
   ============================================================ */
.as-teaser-cards__cards {
    display: flex;
    flex-wrap: wrap;
}

.as-teaser-cards__card {
    width: 100%;
    margin-bottom: 20px;
}

/* Karten-Innen-Gruppe — Hintergrundbild + Overlay.
   min-height = fluid-size(250,550):
   clamp(15.625rem, 11.875rem + 18.75vw, 34.375rem)  (250–550px) */
.as-teaser-cards__card-inner {
    min-height: clamp(15.625rem, 11.875rem + 18.75vw, 34.375rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
    border-radius: 25px;
    position: relative;
    background-size: cover;
    background-position: 50% 0;
}

/* Titel + Button liegen über dem Overlay (z-index 1) */
.as-teaser-cards__title,
.as-teaser-cards__link {
    position: relative;
    z-index: 1;
}

/* Titel — text-teaser: Open Sans regular, fluid-size(25,45):
   clamp(1.5625rem, 1.3125rem + 1.25vw, 2.8125rem),
   line-height 46/45 ≈ 1.02, weiß, padding-top/bottom 35px.
   white-space nowrap + overflow hidden + Ellipsis: wie das
   Original-SCSS (.headline { white-space: nowrap }), mit
   Überlauf-Schutz bei sehr langen Titeln. */
.as-teaser-cards__title {
    font-family: var(--as-font-body);
    font-weight: 400;
    font-size: clamp(1.5625rem, 1.3125rem + 1.25vw, 2.8125rem);
    line-height: 1.02;
    color: var(--as-color-white);
    padding-top: 35px;
    padding-bottom: 35px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Button (Text-Link mit Pfeil, weiß) — is-style-secondary des
   Patterns; die Atom-Defaults (blau) werden im Karten-Kontext
   auf Weiß überschrieben (wie .as-text--bg-dark im Button-Atom). */
.as-teaser-cards__link .as-btn--secondary-link,
.as-teaser-cards__link .as-btn--secondary-link:hover {
    color: var(--as-color-white);
}

/* Gradient-Overlay für Lesbarkeit — wie Pattern :after */
.as-teaser-cards__card-inner::after {
    content: "";
    background: linear-gradient(30deg, #223ab4 0%, rgba(84, 84, 84, 0) 100%);
    mix-blend-mode: multiply;
    opacity: 0.65;
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 25px;
}

/* ============================================================
   Desktop (lg ≥ 992px) — DAS Akkordeon
   width 33,33333333 % → hover 45 %, transition all 0.7s
   $customEase = cubic-bezier(0.22, 1, 0.36, 1); nowrap-Reihe,
   damit die anderen Karten beim Hover schrumpfen.
   ============================================================ */
@media (min-width: 992px) {
    .as-teaser-cards__cards {
        flex-wrap: nowrap;
        column-gap: var(--bs-gutter-x, 1.5rem);
    }

    .as-teaser-cards__card {
        width: 33.33333333%;
        transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Akkordeon nur, wenn aktiviert (hover_expand) */
    .as-teaser-cards--expand .as-teaser-cards__card:hover {
        width: 45%;
    }
}

/* ============================================================
   Mobil (< 992px) — Karten untereinander (wrap), kompakter
   ============================================================ */
@media (max-width: 991.98px) {
    .as-teaser-cards__eyebrow {
        padding-top: 30px;
    }

    .as-teaser-cards__headline,
    .as-teaser-cards__intro {
        flex-basis: 100%;
        max-width: 100%;
    }

    .as-teaser-cards__title {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .as-teaser-cards__card-inner {
        padding: 25px;
    }
}