/**
 * Team-Karte — gemeinsame Struktur-Styles
 *
 * Gehört zu includes/team-card.php und wird von jedem Widget geladen,
 * das Personen-Karten ausgibt. Farben, Größen, Abstände und Typografie
 * kommen ausschließlich aus den Elementor-Controls (selectors) —
 * hier steht nur, was die Karte strukturell zusammenhält.
 */

/* =========================================
   GRID
   ========================================= */

.bew-person-grid {
    display: grid;
    grid-template-columns: repeat(var(--person-columns, 4), 1fr);
    align-items: stretch;
}


/* =========================================
   KARTE

   Die Karte ist eine Flex-Spalte: Bild oben, Info darunter. Die Info
   wächst auf die Resthöhe, damit der Pfeil in allen Karten einer Zeile
   auf gleicher Höhe unten sitzt – unabhängig davon, wie viele Zeilen
   Name und Anwaltstyp brauchen.
   ========================================= */

.bew-person-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
}

.bew-person-card.is-hidden {
    display: none;
}

.bew-person-card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── Bild ── */
.bew-person-card__image {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    overflow: hidden;
    background: #e0e0e0;

    /*
     * Der wirksame Maßstab des Bildes, aus drei Quellen zusammengesetzt:
     *
     *   --bew-card-zoom        pro Person, Inline-Style aus dem ACF-Feld
     *                          „Bildzoom" (Team_Crop)
     *   --bew-card-hover-zoom  aus dem Elementor-Control „Hover-Zoom",
     *                          gesetzt nur im Hover-Zustand
     *
     * Sie multiplizieren sich, statt sich zu überschreiben. Vorher schrieben
     * beide ein fertiges `transform: scale()` – wer zuletzt in der Kaskade
     * stand, gewann, und der Zoom einer Person verschwand beim Überfahren.
     *
     * Die Rechnung steht hier am Container und nicht am Bild: --bew-card-zoom
     * kommt als Inline-Style genau an diesem Element an, und der Hover-Wert
     * ebenso. Beide Bilder erben das Ergebnis.
     */
    --bew-card-scale: calc(var(--bew-card-zoom, 1) * var(--bew-card-hover-zoom, 1));

    /*
     * Dasselbe für das Hover-Bild. Es darf einen eigenen Zoom haben, weil die
     * zweite Aufnahme nicht zwingend gleich gerahmt ist; ohne eigenen Wert
     * erbt es den der Person, und alles bleibt wie zuvor.
     */
    --bew-card-alt-scale: calc(var(--bew-card-alt-zoom, var(--bew-card-zoom, 1)) * var(--bew-card-hover-zoom, 1));
}

/*
 * Beide Bilder – Grundbild und Hover-Bild – teilen sich diese Regel. Die
 * Dauer kommt als Variable aus dem Control card_image_transition; der Wert
 * hier ist nur der Notnagel, falls ein Widget noch ohne generiertes
 * Elementor-CSS ausgeliefert wird.
 *
 * Ausschnitt und Zoom teilen sich denselben Fokuspunkt: object-position legt
 * fest, welcher Teil des Fotos im Ausschnitt landet, transform-origin, worauf
 * der Zoom zuläuft. Stünden sie auseinander, würde ein Zoom die mühsam
 * gesetzte Augenhöhe wieder aus dem Bild schieben.
 */
.bew-person-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: var(--bew-card-focus, center top);
    transform-origin: var(--bew-card-focus, center top);
    transform: scale(var(--bew-card-scale, 1));
    transition:
        filter var(--bew-card-image-transition, 0.4s) ease,
        transform var(--bew-card-image-transition, 0.5s) ease;
}

/*
 * Eigener Fokuspunkt fürs Hover-Bild. Der Selektor trägt eine Klasse mehr als
 * `.bew-person-card__image img`, sonst käme die Vorgabe des Beitragsbildes
 * zuletzt und gewönne.
 */
.bew-person-card__image img.bew-person-card__image-hover {
    object-position: var(--bew-card-alt-focus, var(--bew-card-focus, center top));
    transform-origin: var(--bew-card-alt-focus, var(--bew-card-focus, center top));
    transform: scale(var(--bew-card-alt-scale, 1));
}

.bew-person-card__image--grayscale img {
    filter: grayscale(100%);
}

.bew-person-card:hover .bew-person-card__image--grayscale img {
    filter: grayscale(0%);
}

/*
 * Karten mit zweitem Bild setzen ihren Filter unten komplett neu — dort muss
 * die Entsättigung mit der Unschärfe in einer einzigen filter-Angabe stehen,
 * sonst überschreibt die eine die andere. Über die Variable bleibt die
 * Entsättigung trotzdem an den Schalter „Graustufen“ gekoppelt.
 */
.bew-person-card__image--grayscale {
    --bew-card-gray: grayscale(100%);
}

.bew-person-card:hover .bew-person-card__image--grayscale {
    --bew-card-gray: grayscale(0%);
}

/* =========================================
   HOVER-BILD

   Zweites Bild aus dem ACF-Feld „Hover-Bild“, deckungsgleich über dem
   Grundbild. Ohne zweites Bild rendert das Element gar nicht erst — dann
   bleibt schlicht das Beitragsbild stehen.

   Nur die obere Ebene wird eingeblendet. Das Grundbild bleibt stehen: würden
   beide gleichzeitig ihre Deckkraft ändern, schiene auf halber Strecke der
   Kartenhintergrund durch.
   ========================================= */

.bew-person-card__image-hover {
    position: absolute;
    inset: 0;
    /* Unter dem Overlay (z-index 1), über dem Grundbild im Textfluss. */
    z-index: 0;
}

/*
 * Schärfezug statt Überblendung: das Beitragsbild verliert die Schärfe und
 * blendet weg, das zweite Bild kommt aus der Unschärfe heran und zieht scharf.
 *
 * Der Grund für die Unschärfe ist nicht Dekoration. Eine reine Überblendung
 * legt auf halber Strecke zwei erkennbare Gesichter übereinander — solange
 * beide Fotos nicht ausschnittsgleich sind, sieht das nach Doppelbelichtung
 * aus. Verschwimmt das abtretende Bild dabei, hat das Auge nichts mehr, was
 * es als zweites Gesicht lesen könnte; die Überlagerung wird zur Fläche.
 *
 * Die Deckkraft läuft bewusst versetzt: das ankommende Bild steigt sofort an,
 * das abtretende hält seine Deckkraft noch und geht erst danach. Ohne diesen
 * Versatz wären beide gleichzeitig halb durchsichtig und der Kartengrund
 * schiene durch.
 *
 * Die Skalierung ist Pflicht, nicht Geschmack: `filter: blur()` greift beim
 * Weichzeichnen über die Elementkante hinaus und lässt die Ränder ausfransen.
 * Das etwas größer gezogene Bild schiebt diese weichen Ränder aus dem
 * sichtbaren Bereich heraus.
 */
.bew-person-card__image--has-hover img.bew-person-card__image-base {
    filter: var(--bew-card-gray, grayscale(0%)) blur(0);
    transform: scale(var(--bew-card-scale, 1));
    transition:
        filter var(--bew-card-image-fade, 0.35s) ease-out,
        transform calc(var(--bew-card-image-fade, 0.35s) * 1.3) ease-out,
        opacity calc(var(--bew-card-image-fade, 0.35s) * 0.6)
            ease-in calc(var(--bew-card-image-fade, 0.35s) * 0.45);
}

/* Der Faktor 1.12 des Schärfezugs multipliziert sich auf den Maßstab der
   Karte auf — als Summand würde er den Zoom einer Person aufheben. */
.bew-person-card__image--has-hover img.bew-person-card__image-hover {
    opacity: 0;
    filter: var(--bew-card-gray, grayscale(0%)) blur(10px);
    transform: scale(calc(var(--bew-card-alt-scale, 1) * 1.12));
    transition:
        filter var(--bew-card-image-fade, 0.35s) ease-out,
        transform calc(var(--bew-card-image-fade, 0.35s) * 1.3) ease-out,
        opacity calc(var(--bew-card-image-fade, 0.35s) * 0.9) ease-out;
}

/* Auf Touch-Geräten bliebe der Hover-Zustand nach dem Antippen kleben. */
@media (hover: hover) and (pointer: fine) {
    .bew-person-card:hover .bew-person-card__image--has-hover img.bew-person-card__image-base {
        opacity: 0;
        filter: var(--bew-card-gray, grayscale(0%)) blur(10px);
        transform: scale(calc(var(--bew-card-scale, 1) * 1.12));
    }

    .bew-person-card:hover .bew-person-card__image--has-hover img.bew-person-card__image-hover {
        opacity: 1;
        filter: var(--bew-card-gray, grayscale(0%)) blur(0);
        transform: scale(var(--bew-card-alt-scale, 1));
    }
}

@media (prefers-reduced-motion: reduce) {
    .bew-person-card__image--has-hover img {
        transition-duration: 0.01ms !important;
    }
}

/* Hover-Overlay – Verlauf von unten, Farbe kommt aus dem Control */
.bew-person-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--bew-card-image-transition, 0.4s) ease;
    z-index: 1;
    pointer-events: none;
}

.bew-person-card:hover .bew-person-card__image::after {
    opacity: 1;
}

/* ── Textbereich ── */
.bew-person-card__info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    transition: background-color 0.3s ease;
}

.bew-person-card__name {
    margin-top: 0;
    transition: color 0.25s ease;
}

.bew-person-card__title,
.bew-person-card__lawyer-types,
.bew-person-card__tech-areas {
    display: block;
    transition: color 0.25s ease;
}

/* Letzte sichtbare Textzeile: der Abstand nach unten macht der Pfeil. */
.bew-person-card__info > *:last-of-type {
    margin-bottom: 0;
}

/* ── Pfeil ──
   margin-top:auto schiebt ihn an den unteren Rand der Info, der
   Innenabstand oben kommt aus dem Control „Mindestabstand nach oben“. */
/* Im Ruhezustand ein waagerechter Pfeil in Grundgröße. Wachsen und Neigen
   passiert erst beim Überfahren der Karte – aus der Mitte heraus, sonst
   wandert der Pfeil beim Drehen sichtbar zur Seite. */
.bew-person-card__arrow {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: auto;
    margin-left: auto;
    line-height: 0;
    transition: color 0.25s ease;
}

.bew-person-card__arrow svg {
    width: 22px;
    height: 22px;
    display: block;
    transform-origin: 50% 50%;
    transition: transform 0.25s ease;
}

.bew-person-card:hover .bew-person-card__arrow svg {
    transform: rotate(var(--bew-arrow-rotate, -45deg)) scale(var(--bew-arrow-scale, 1.3));
}

@media (prefers-reduced-motion: reduce) {
    .bew-person-card:hover .bew-person-card__arrow svg {
        transform: none;
    }
}


/* =========================================
   MOBIL: Bild links, Text rechts

   Aktiv nur mit .bew-person-grid--mobile-row (Control „Mobil: Bild links
   neben dem Text“). Das Bild streckt sich auf die Kartenhöhe, damit auch
   Karten mit vier Textzeilen sauber schließen – deshalb hier statt der
   aspect-ratio eine feste Breite plus align-self.
   ========================================= */

@media (max-width: 767px) {
    .bew-person-grid--mobile-row .bew-person-card {
        flex-direction: row;
    }

    /* align-self:stretch macht die Höhe definit; damit greift das
       aspect-ratio aus dem Elementor-Control hier nicht mehr – genau so
       gewollt, sonst bliebe unter langen Karten ein Loch. */
    .bew-person-grid--mobile-row .bew-person-card__image {
        width: 38%;
        max-width: 160px;
        align-self: stretch;
    }

    .bew-person-grid--mobile-row .bew-person-card__image img {
        position: absolute;
        inset: 0;
    }
}


/* =========================================
   MODAL

   Aufbau: Bild links, blauer Textblock darüber. Der Block greift über die
   rechte Bildkante, sitzt tiefer und steht unten über – die beiden Flächen
   verzahnen sich, statt bündig aneinanderzustoßen. Der grüne Ring liegt
   auf der Überlappung. Unter 768 px dreht sich dieselbe Verzahnung um 90°:
   Bild oben, Textblock von unten darübergeschoben.

   Damit das Bild dabei nicht verloren geht, ist die Bildspalte breiter als
   der sichtbare Rest – wieviel verdeckt wird, sagt das Control
   „Überlappung über das Bild".

   Gescrollt wird nur der Text, nicht das Modal: der Block ist gedeckelt
   (Control „Maximale Höhe des Textblocks") und scrollt innen ohne
   sichtbare Leiste. Sonst wanderte bei langen Lebensläufen das Bild mit
   aus dem Bild.

   Farben, Abstände, Bildformat und Typografie kommen aus den
   Elementor-Controls in Team_Card::modal_controls().
   ========================================= */

body.bew-person-modal-open {
    overflow: hidden;
}

.bew-person-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.bew-person-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.bew-person-modal__backdrop {
    position: absolute;
    inset: 0;
}

.bew-person-modal__content {
    position: relative;
    width: 90%;
    max-height: 90vh;
    z-index: 10;
}

/*
 * Der Schließer sitzt in der oberen rechten Ecke des blauen Blocks –
 * dort steht er auf ruhigem Grund und bleibt beim Scrollen des Textes
 * stehen (der scrollt eine Ebene tiefer, siehe __scroll).
 *
 * hello-elementor gibt jedem <button> einen pinken Rahmen und beim Hover
 * einen pinken Grund; der Hover-Selektor dort ist `button:hover`, weshalb
 * hier zwei Klassen nötig sind (siehe team-filter-grid.css).
 */
.bew-person-modal__close,
.bew-person-modal__close:hover,
.bew-person-modal__close:focus {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    line-height: 0;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.bew-person-modal__close:hover {
    background-color: rgba(255, 255, 255, 0.24);
    transform: rotate(90deg);
}

.bew-person-modal__close svg {
    width: 18px;
    height: 18px;
    display: block;
}

.bew-person-modal__inner {
    display: flex;
    align-items: flex-start;
    max-height: 90vh;
    /* Notausgang für sehr flache Fenster. Im Normalfall scrollt der
       Textblock in sich und hier gibt es nichts zu scrollen. */
    overflow-y: auto;
}

.bew-person-modal__image-col {
    width: 46%;
    flex-shrink: 0;
    position: relative;
    /* Deckel für den Zoom aus dem ACF-Feld: ohne ihn ragte das vergrößerte
       Foto über die Spalte hinaus unter den blauen Block. Der grüne Ring und
       der Textblock sind Geschwister, keine Kinder – die bleibt das nicht. */
    overflow: hidden;
}

/*
 * Feste Höhen sind hier vorbei: das Bild bringt sein Format über
 * aspect-ratio aus dem Control mit und beschneidet über object-position.
 * Vorher streckte `height: 100%` das Foto auf die Höhe des Textblocks –
 * bei langen Lebensläufen wurde daraus ein Ausschnitt aus der Bildmitte,
 * bei kurzen ein flacher Streifen.
 */
.bew-person-modal__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #e0e0e0;
    /* Ausschnitt und Zoom der Person – person-card.js setzt die Variablen
       beim Öffnen, die Vorgabe kommt aus dem Control modal_image_position. */
    object-position: var(--bew-modal-focus, center top);
    transform-origin: var(--bew-modal-focus, center top);
    transform: scale(var(--bew-modal-zoom, 1));
}

/*
 * Der Block liegt über dem Bild: er ist positioniert, das Bild daneben
 * nicht – damit malt er ohne z-index darüber. Der negative linke Rand
 * (Control „Überlappung") zieht ihn auf das Bild; Flexbox rechnet ihn in
 * die freie Breite ein, Bild und Block füllen zusammen also weiterhin
 * genau die Modalbreite.
 *
 * display:flex ist kein Layout-Schmuck, sondern trägt den Deckel: nur in
 * einer Flex-Spalte schrumpft das scrollende Kind unter die max-height
 * des Elternteils.
 */
.bew-person-modal__info-col {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    margin-top: 40px;
    max-height: 450px;
}

/*
 * Der scrollende Bereich. Er sitzt innerhalb des Innenabstands, damit der
 * Ring – der über die linke Kante hinausragt – nicht abgeschnitten wird:
 * ein overflow auf der Spalte selbst würde ihn kappen.
 *
 * Die Leiste bleibt unsichtbar; der angeschnittene Absatz am unteren Rand
 * ist der Hinweis, dass es weitergeht.
 */
.bew-person-modal__scroll {
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bew-person-modal__scroll::-webkit-scrollbar {
    display: none;
}

/* Der Ring liegt zur Hälfte auf dem Bild, zur Hälfte auf dem blauen
   Block – er klammert die beiden Flächen zusammen. */
.bew-person-modal__accent {
    position: absolute;
    top: 24px;
    left: -30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 5;
    border-width: 12px;
    border-style: solid;
    opacity: 0.6;
}

/* ── Kopf: Name und Standort in einer Zeile ──
   baseline richtet den kleineren Standort an der Grundlinie des Namens
   aus; bei schmalen Blöcken rutscht er in die nächste Zeile. */
.bew-person-modal__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    /* Platz für den Schließer, der auf Höhe des Blockkopfs liegen kann. */
    padding-right: 34px;
    margin-bottom: 10px;
}

.bew-person-modal__name {
    margin: 0;
    line-height: 1.2;
}

/* Absolute Größe statt em: der Name daneben ist ein Geschwisterelement,
   ein relativer Wert bezöge sich auf den Textblock und nicht auf ihn.
   Der echte Wert kommt aus dem Control „Standort Typografie". */
.bew-person-modal__location {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
}

/* Ohne Standort bliebe sonst die Lücke aus dem gap stehen. */
.bew-person-modal__location:empty {
    display: none;
}

/* ── Meta: Titel, Anwaltstypen, technische Gebiete – je eine Zeile ── */
.bew-person-modal__meta {
    margin-bottom: 25px;
}

.bew-person-modal__meta p {
    margin: 0 0 6px 0;
    line-height: 1.5;
}

.bew-person-modal__title,
.bew-person-modal__lawyer-types {
    font-style: italic;
}

.bew-person-modal__technical-areas {
    margin-top: 10px;
    font-size: 0.9em;
    opacity: 0.9;
}

/* Leere Felder verschwinden restlos – ein Mitglied ohne Titel oder ohne
   Fachgebiete bekommt keine Leerzeile. */
.bew-person-modal__meta p:empty {
    display: none;
}

.bew-person-modal__description p {
    margin-bottom: 1em;
}

.bew-person-modal__description p:last-child {
    margin-bottom: 0;
}


/* =========================================
   RESPONSIVE — nur Modal.
   Die Grid-Spalten steuert Elementor.

   767 px ist der Mobil-Breakpoint des Elementor-Kits. Breite, Format und
   Versatz kommen auch hier aus den Controls (mobile_default), damit das
   nachgeladene Elementor-CSS diese Regeln nicht überstimmt.
   ========================================= */

@media (max-width: 767px) {
    .bew-person-modal__inner {
        flex-direction: column;
        max-height: 90vh;
    }

    .bew-person-modal__image-col {
        width: 100%;
    }

    /*
     * Der Textblock schiebt sich von unten über das Bild (negativer
     * margin-top aus dem Control). Damit er dabei über dem Bild liegt
     * und nicht darunter, braucht er hier einen z-index: in der Spalte
     * ist er zwar weiterhin das spätere Geschwister, das Bild bekommt
     * durch die Überlappung aber einen eigenen Stapelkontext-Nachbarn.
     */
    .bew-person-modal__info-col {
        z-index: 2;
    }

    /* Der Ring wandert auf die nun waagerechte Überlappung. */
    .bew-person-modal__accent {
        top: -30px;
        right: 28px;
        left: auto;
    }
}