/**
 * Team Grid Widget Styles — Mosaic / Collage Layout
 */

/* =========================================
   MOSAIC GRID
   6-column base grid with varied item sizes
   ========================================= */

.bew-team-grid {
    display: grid;
    grid-template-columns: repeat(19, 1fr);
    grid-template-rows: repeat(12, 30px);
    grid-auto-rows: 110px;
    grid-auto-flow: dense;
    gap: 12px;
}

/* Default card */
.bew-team-card {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    grid-column: span 1;
    grid-row: span 1;
    transition: box-shadow 0.3s ease;
}

.bew-team-card:hover {
    /* Removed box-shadow and z-index */
}

/* ---- MOSAIC LAYOUT (15 FIXED POSITIONS) ----
    6-column grid, exactly 3 rows on desktop.
    All 15 items stay within rows 1–3 (no wrap). */

/* Abspann 1 */
.bew-team-card:nth-child(15n+1) {
    grid-column: 1 / span 3;
    grid-row: 1 / span 7;
}

.bew-team-card:nth-child(15n+2) {
    grid-column: 1 / span 3;
    grid-row: 8 / span 5;
}

/* Abspann 2 */
.bew-team-card:nth-child(15n+3) {
    grid-column: 4 / span 2;
    grid-row: 1 / span 8;
}

.bew-team-card:nth-child(15n+4) {
    grid-column: 4 / span 2;
    grid-row: 9 / span 4;
}

/* Abspann 3 */
.bew-team-card:nth-child(15n+5) {
    grid-column: 6 / span 2;
    grid-row: 1 / span 6;
}

.bew-team-card:nth-child(15n+6) {
    grid-column: 6 / span 2;
    grid-row: 7 / span 3;
}

.bew-team-card:nth-child(15n+7) {
    grid-column: 6 / span 2;
    grid-row: 10 / span 3;
}

/* Abspann 4 */
.bew-team-card:nth-child(15n+8) {
    grid-column: 8 / span 4;
    grid-row: 1 / span 5;
}

.bew-team-card:nth-child(15n+9) {
    grid-column: 8 / span 2;
    grid-row: 6 / span 7;
}

.bew-team-card:nth-child(15n+10) {
    grid-column: 12 / span 2;
    grid-row: 1 / span 5;
}

.bew-team-card:nth-child(15n+11) {
    grid-column: 10 / span 4;
    grid-row: 6 / span 7;
}

/* Abspann 5 */
.bew-team-card:nth-child(15n+12) {
    grid-column: 14 / span 3;
    grid-row: 1 / span 7;
}

.bew-team-card:nth-child(15n+13) {
    grid-column: 14 / span 3;
    grid-row: 8 / span 5;
}

/* Abspann 6 */
/* Gleiche Breite wie die Kachel darunter (17–19), damit die rechte
   Spalte bündig abschließt. */
.bew-team-card:nth-child(15n+14) {
    grid-column: 17 / span 3;
    grid-row: 1 / span 4;
}

.bew-team-card:nth-child(15n+15) {
    grid-column: 17 / span 3;
    grid-row: 5 / span 8;
}


/* ---- IMAGE WRAPPER ---- */

.bew-team-card__image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background: #e8e8e8;
    overflow: hidden;

    /* Maßstab des Hover-Bildes: eigener Zoom, sonst der des Beitragsbildes. */
    --bew-tile-alt-scale: var(--bew-tile-alt-zoom, var(--bew-tile-zoom, 1));
}

/*
 * Ausschnitt und Zoom pro Person, als Inline-Variablen aus dem Team-Beitrag
 * (Team_Crop). Die Fotos stammen aus zwei Quellen mit verschiedenen Formaten;
 * ein fester Ausschnitt für alle lässt die Personen unterschiedlich groß
 * erscheinen. Ohne Eintrag bleibt es beim Kopf-Anker „center top".
 *
 * Der Fokuspunkt bedient object-position und transform-origin zugleich —
 * sonst schöbe der Zoom die eingestellte Augenhöhe wieder aus dem Bild.
 */
.bew-team-card__image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Kopf verankern statt mittig beschneiden — und für beide Bilder gleich,
       sonst säße die Person vor und nach dem Wechsel woanders. */
    object-position: var(--bew-tile-focus, center top);
    transform-origin: var(--bew-tile-focus, center top);
    transform: scale(var(--bew-tile-zoom, 1));
    transition: transform 0.5s ease, filter 0.4s ease, opacity 0.5s ease;
    /* Default: Grayscale */
    filter: grayscale(100%);
}

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

/*
 * Zweites Bild aus dem ACF-Feld „Hover-Bild“, deckungsgleich über dem
 * Beitragsbild. z-index 0 hält es unter dem grünen Overlay (::after,
 * z-index 1) und dem Namensbalken (z-index 3). Ohne zweites Bild steht das
 * Element nicht im Markup — dann bleibt das Beitragsbild einfach stehen.
 *
 * Schärfezug wie bei der Personen-Karte (siehe person-card.css): das
 * Beitragsbild verliert die Schärfe und blendet weg, das zweite kommt aus der
 * Unschärfe scharf herein. Eine reine Überblendung würde auf halber Strecke
 * zwei erkennbare Gesichter übereinanderlegen; verschwimmt das abtretende
 * Bild dabei, wird die Überlagerung zur Fläche statt zur Doppelbelichtung.
 *
 * Die Deckkraft läuft versetzt, damit nie beide gleichzeitig halb
 * durchsichtig sind und der Kartengrund durchscheint. Die Skalierung schiebt
 * die vom Weichzeichner ausgefransten Ränder aus dem sichtbaren Bereich.
 *
 * Der Wrapper steht im Selektor, weil .bew-team-card__image-wrapper img sonst
 * spezifischer wäre und diese Regeln überschreiben würde.
 */
.bew-team-card__image-wrapper .bew-team-card__image-hover {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/*
 * Eigener Ausschnitt fürs Hover-Bild: die zweite Aufnahme ist nicht immer
 * gleich gerahmt wie das Beitragsbild. Ohne eigene Werte erbt sie dessen, der
 * bisherige Zustand bleibt also die Vorgabe. Die zusätzliche Klasse im
 * Selektor ist nötig, damit die allgemeine Bildregel oben nicht gewinnt.
 */
.bew-team-card__image-wrapper img.bew-team-card__image-hover {
    object-position: var(--bew-tile-alt-focus, var(--bew-tile-focus, center top));
    transform-origin: var(--bew-tile-alt-focus, var(--bew-tile-focus, center top));
    transform: scale(var(--bew-tile-alt-scale, 1));
}

.bew-team-card__image-wrapper--has-hover img.bew-team-card__image-base {
    filter: grayscale(100%) blur(0);
    transform: scale(var(--bew-tile-zoom, 1));
    transition:
        filter 0.35s ease-out,
        transform 0.46s ease-out,
        opacity 0.2s ease-in 0.16s;
}

.bew-team-card__image-wrapper--has-hover img.bew-team-card__image-hover {
    opacity: 0;
    filter: grayscale(100%) blur(10px);
    transform: scale(calc(var(--bew-tile-alt-scale, 1) * 1.12));
    transition:
        filter 0.35s ease-out,
        transform 0.46s ease-out,
        opacity 0.32s ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .bew-team-card:hover .bew-team-card__image-wrapper--has-hover img.bew-team-card__image-base {
        opacity: 0;
        filter: grayscale(0%) blur(10px);
        transform: scale(calc(var(--bew-tile-zoom, 1) * 1.12));
    }

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

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

/* ---- VISUAL OVERLAYS (Green / Dark) ---- */

/* Green overlay — class-based for JS cycling */
.bew-team-card .bew-team-card__image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top right, #E7FBE5, #3FA535);
    mix-blend-mode: multiply;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    filter: blur(12px);
    transform: scale(1.08);
    transition:
        opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.9s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fully visible & sharp */
.bew-team-card.bew-green-active .bew-team-card__image-wrapper::after {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1);
}

/* Fade-out phase: blur out + dissolve before removal */
.bew-team-card.bew-green-fading .bew-team-card__image-wrapper::after {
    opacity: 0;
    filter: blur(14px);
    transform: scale(1.12);
    transition:
        opacity 1s cubic-bezier(0.4, 0, 0.6, 1),
        filter 1s cubic-bezier(0.4, 0, 0.6, 1),
        transform 1s cubic-bezier(0.4, 0, 0.6, 1);
}

/* Remove overlays on hover.
   Hier wird bewusst nur die Deckkraft animiert. Vorher liefen zusätzlich
   filter und transform über 0.9s mit — eine Weichzeichnung, die sich pro
   Einzelbild ändert, muss jedes Mal neu gerastert werden. Zusammen mit dem
   Bildwechsel war das der Grund für den stockenden Hover. Blur und Skalierung
   bleiben stehen und blenden einfach mit aus; das ist visuell dasselbe und
   kostet nur noch eine Compositor-Operation. */
.bew-team-card:hover .bew-team-card__image-wrapper::after {
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
}

/* Name overlay (shown on hover) */
.bew-team-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.bew-team-card:hover .bew-team-card__overlay {
    opacity: 0;
}

.bew-team-card__overlay-name {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

/* Modal Styles */
body.bew-modal-open {
    overflow: hidden;
}

.bew-team-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    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-team-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.bew-team-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.bew-team-modal__content-wrapper {
    position: relative;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    background: transparent;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

/*
 * 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-team-modal__close,
.bew-team-modal__close:hover,
.bew-team-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-team-modal__close:hover {
    background-color: rgba(255, 255, 255, 0.24);
    transform: rotate(90deg);
}

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

/*
 * Bild links, blauer Block darüber: er greift über die rechte Bildkante,
 * sitzt tiefer und steht unten über. Gescrollt wird nur der Text im Block
 * – das Bild bleibt stehen. Unter 768 px dreht sich dieselbe Verzahnung
 * um 90°.
 */
.bew-team-modal__inner {
    display: flex;
    align-items: flex-start;
    color: #fff;
    max-height: 90vh;
    /* Notausgang für sehr flache Fenster. */
    overflow-y: auto;
}

/* Modal Columns */
.bew-team-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 unter den blauen Block hinaus. */
    overflow: hidden;
}

/* Festes Format statt `height: 100%`: gestreckt auf die Höhe des
   Textblocks wurde aus dem Foto bei langen Lebensläufen ein Ausschnitt
   aus der Bildmitte, bei kurzen ein flacher Streifen. */
.bew-team-modal__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #e0e0e0;
    /* Ausschnitt und Zoom der Person, gesetzt von team-grid.js beim Oeffnen. */
    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 ist positioniert, das Bild daneben nicht – damit malt er ohne
 * z-index darüber. Den negativen linken Rand rechnet Flexbox in die freie
 * Breite ein, Bild und Block füllen zusammen also weiterhin genau die
 * Modalbreite.
 *
 * display:flex trägt den Deckel: nur in einer Flex-Spalte schrumpft das
 * scrollende Kind unter die max-height des Elternteils.
 */
.bew-team-modal__info-col {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 35px 60px;
    background: #1F3566;
    margin-top: 40px;
    margin-left: -70px;
    max-height: 450px;
}

/*
 * Der scrollende Bereich 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.
 */
.bew-team-modal__scroll {
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

/* Green Circle Graphic — liegt zur Hälfte auf dem Bild, zur Hälfte auf
   dem blauen Block und klammert die beiden Spalten zusammen. */
.bew-team-modal__green-circle {
    position: absolute;
    top: 24px;
    left: -30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 5;
    border: 12px solid #3FA435;
    opacity: 0.6;
}

/* ── Kopf: Name und Standort in einer Zeile ── */
.bew-team-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-team-modal__name {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: #fff;
}

/* Absolute Größe statt em: der Name daneben ist ein Geschwisterelement,
   ein relativer Wert bezöge sich auf den Textblock und nicht auf ihn. */
.bew-team-modal__location {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.5);
}

.bew-team-modal__location:empty {
    display: none;
}

/* ── Meta: Titel, Anwaltstypen, technische Gebiete – je eine Zeile ── */
.bew-team-modal__meta {
    margin-bottom: 25px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
}

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

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

.bew-team-modal__title {
    color: #EC6608;
}

.bew-team-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-team-modal__meta p:empty {
    display: none;
}

.bew-team-modal__description {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

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

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


/* Unter 768 px kippt das Modal in die Senkrechte: Bild oben, Textblock
   darunter, Ring auf der nun waagerechten Naht. */
@media (max-width: 767px) {
    .bew-team-modal__inner {
        flex-direction: column;
        max-height: 90vh;
    }

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

    /* Der Block schiebt sich von unten über das Bild – dieselbe
       Verzahnung wie auf dem Desktop, um 90° gedreht. */
    .bew-team-modal__info-col {
        z-index: 2;
        margin-top: -70px;
        margin-left: 0;
        padding: 28px 24px;
    }

    .bew-team-modal__green-circle {
        top: -30px;
        right: 28px;
        left: auto;
    }

    .bew-team-modal__name {
        font-size: 26px;
    }
}

/* =========================================
   HORIZONTAL SCROLL WRAPPER
   On tablet & below the desktop grid keeps
   its natural size and auto-scrolls on X.
   ========================================= */

/*
 * Prevent the 1800px-wide inner grid from inflating
 * the Elementor widget wrapper, its parent flex containers,
 * and ultimately other absolutely-positioned siblings
 * (like the decorative "C" image).
 *
 * 1. Break the flex min-width:auto default so flex parents
 *    do not grow with the oversized grid.
 * 2. overflow:hidden clips the grid to the container width.
 * 3. contain:inline-size tells the browser the element's
 *    intrinsic inline size does not depend on its contents.
 */
.elementor-widget-team-grid {
    overflow: hidden;
    max-width: 100%;
    min-width: 0;       /* 1 */
}

.elementor-widget-team-grid > .elementor-widget-container {
    overflow: hidden;
    max-width: 100%;
    min-width: 0;       /* 1 */
}

.bew-team-grid-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;    /* 2 */
    box-sizing: border-box;
    contain: inline-size; /* 3 */
    min-width: 0;        /* 1 */
}

/* ---- Scroll keyframes (used by inline responsive styles) ---- */
@keyframes bewTeamScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% + 100vw));
    }
}