/**
 * Team Listing – klickbare Karten + Modal
 * Nutzt Brightlane-Variablen (aspect-ratio, border-radius, padding, overlay),
 * die in module.html via components.styles/fields.variable gesetzt werden.
 */

/* ===== Grid/Abstände wie im Original ===== */
.team-listing { --gutter: 2rem; }
.team-listing .row-fluid + .row-fluid { margin-top: var(--gutter); }

/* ===== Karte klickbar machen (Button-Reset) ===== */
.team-listing__member {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: inherit;
  cursor: pointer;
}
.team-listing__member:focus-visible {
  outline: 3px solid var(--accent-hover-color);
  outline-offset: 2px;
  border-radius: var(--border-radius, 10px);
}

/* ===== Bild + Overlay – nutzen Theme-Variablen ===== */
.team-listing__member-image,
.team-listing__member-info {
  grid-column: 1;
  grid-row: 1;
  border-radius: var(--border-radius, 10px);
  overflow: hidden;
}
.team-listing__member-image { aspect-ratio: var(--aspect-ratio, 17/20); }
.team-listing__member-image img { width: 100%; height: 100%; object-fit: cover; }

.team-listing__member-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--padding-card, 40px);
  background-image: var(--overlay, linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.75)));
}
.module-wrapper--light .team-listing__member-info {
  background-image: var(--overlay, linear-gradient(to bottom, rgba(255,255,255,.1), rgba(255,255,255,.75)));
}
.team-listing__member-info h3 { margin-bottom: 10px; }
.team-listing__member-info p { margin: 0; }
.team-listing__member-info .social-media { margin-top: 15px; margin-left: -5px; }

.team-listing .theme-ctas { margin-top: 5rem; }

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

.tl-modal[hidden] { display: none; }
.tl-modal { position: fixed; inset: 0; z-index: 2147483647; }

.tl-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: saturate(120%) blur(2px);
}

/* Dialog-Hintergrund als Gradient (Top -> Bottom) */
.tl-modal__dialog {
  position: relative;
  margin: 5vh auto;
  width: min(92vw, 1000px);
  max-width: 1000px;
  background: linear-gradient(to bottom, #ff5001, #d769ee);
  color: var(--base-text-color, #fff);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.tl-modal__close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: 0; font-size: 32px; line-height: 1;
  cursor: pointer; color: inherit; z-index: 2;
}

.tl-modal__content {
  display: grid;
  grid-template-columns: 1fr;
}

/* Bildblock im Dialog */
.tl-modal__image {
  background: transparent;
}
.tl-modal__image img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  max-height: 360px;
}

/* Textblock */
.tl-modal__text {
  padding: 24px;
  color: inherit; /* bleibt auf #fff durch Dialog-Farbe */
}
.tl-modal__block + .tl-modal__block { margin-top: 20px; }
.tl-modal__session-title { font-weight: 600; margin: 0 0 6px; }
.tl-modal__session-when { margin: 0 0 10px; opacity: .9; }

/* Akzentstreifen wie Featured Speaker */
.featured-speaker__name {
  padding-left: 30px;
  margin: 20px 0 24px;
  position: relative;
}
.featured-speaker__name::after {
  content:"";
  position:absolute; top:0; bottom:0; left:0; width:3px;
  border-radius:3px;
  background-color: var(--name-accent, var(--accent-hover-color));
}
.featured-speaker__name h3,
.featured-speaker__name .card-tag { margin: 0; }
.featured-speaker__name .card-tag:not(:first-child){ margin-top: 8px; }

/* Desktop 2-Spalten Layout */
@media (min-width: 992px) {
  .tl-modal__content {
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
  }
  .tl-modal__image img {
    max-height: none;
    height: 80%;
  }
  .tl-modal__text {
    padding: 36px 36px 28px;
  }
}

/* --- 2-zeiliges Grid: 1) Bild+Bio  2) Session full-width --- */
.tl-modal__content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "img"
    "bio"
    "session";
  gap: 20px;
  padding: 20px 24px; /* etwas Luft innen */
}

/* Grid-Areas zuweisen */
.tl-modal__image   { grid-area: img; }
.tl-modal__bio     { grid-area: bio; }
.tl-modal__session { grid-area: session; }

/* Bild: moderat halten */
.tl-modal__image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 40vh;       /* mobil nicht zu groß */
  object-fit: cover;
  border-radius: 8px;
}

/* Bio- & Session-Blöcke */
.tl-modal__bio,
.tl-modal__session {
  color: inherit;
}
.tl-modal__block + .tl-modal__block { margin-top: 16px; }

/* Name mit gelbem Balken – etwas vom Bild abrücken */
.featured-speaker__name {
  position: relative;
  margin: 6px 0 14px;
  padding-left: 30px;
}
.featured-speaker__name::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px; border-radius: 3px;
  background-color: var(--name-accent, var(--accent-hover-color));
}

/* Desktop: 1/2 in Zeile 1, Session volle Breite in Zeile 2 */
@media (min-width: 992px) {
  .tl-modal__content {
    grid-template-columns: 1fr 1fr;           /* 50 / 50; bei Bedarf 0.9fr 1.1fr */
    grid-template-areas:
      "img bio"
      "session session";
    align-items: start;
    min-height: 480px;
  }
  .tl-modal__image img {
    max-height: none; height: 100%;
  }
}

/* Optional: noch etwas mehr Luft rechts/links bei breiten Modals */
@media (min-width: 1200px) {
  .tl-modal__content { gap: 24px; }
}

/* === Social-Icons im Modal: immer gleich groß === */
.tl-modal__socials { 
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* Falls die Socials aus der Karte kommen (Brightlane-Struktur) */
.tl-modal__socials .social-media { margin: 0; }
.tl-modal__socials .social-media__service {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;              /* einheitlicher Button */
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff;
}
.tl-modal__socials .social-media__service:hover { 
  background: rgba(255,255,255,.3);
}
.tl-modal__socials .social-media__service svg {
  width: 18px;              /* einheitliche Icongröße */
  height: 18px;
}

/* Falls du eigene Links/Icons nutzt (z.B. <a class="tl-modal__social">) */
.tl-modal__socials .tl-modal__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff; text-decoration: none;
}
.tl-modal__socials .tl-modal__social svg { width: 18px; height: 18px; }

/* === Speaker-Bild im Modal härter deckeln === */
.tl-modal__image { align-self: start; }
.tl-modal__image img {
  width: 100%;
  height: auto;
  max-height: 320px;        /* harte Obergrenze */
  object-fit: cover;
  border-radius: 8px;
}

@media (min-width: 992px) {
  /* Bild etwas kleiner halten auch auf Desktop */
  .tl-modal__image img { max-height: 480px; }
}

/* Karte füllt IMMER die ganze Spaltenbreite (iOS: Button shrink-to-fit verhindern) */
.team-listing__member {
  display: block;         /* statt inline-block / grid */
  width: 100%;
  position: relative;     /* für Overlay-Positionierung */
  box-sizing: border-box;
  border: 0;
  padding: 0;
}

/* Einheitlicher 4:5-Ratio für alle Bilder (Instagram Portrait) */
.team-listing__member-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--border-radius, 10px);
  overflow: hidden;
}
.team-listing__member-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay iOS-sicher: absolut über die gesamte Karte, Inhalt beeinflusst Größe NICHT */
.team-listing__member-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--padding-card, 40px);
  background-image: var(--overlay, linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.75)));
  border-radius: inherit;
  pointer-events: none;     /* Overlay schluckt keine Klicks */
}
.team-listing__member-info * { pointer-events: auto; }
.module-wrapper--light .team-listing__member-info {
  background-image: var(--overlay, linear-gradient(to bottom, rgba(255,255,255,.1), rgba(255,255,255,.75)));
}

/* (optional) lange Titel/Tags umbrechen, ohne das Layout zu sprengen */
.team-listing__member-info h3,
.team-listing__member-info .card-tag {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Karte selbst: Rundung und Clipping erzwingen */
.team-listing__member {
  position: relative;
  border-radius: var(--border-radius, 16px);
  overflow: hidden; /* schneidet alles (inkl. Overlay) sauber ab */
  /* iOS/WebKit: sorgt für wirklich saubere Kanten bei overflow:hidden */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Bild-Container übernimmt die Rundung der Karte */
.team-listing__member-image {
  border-radius: inherit;
  overflow: hidden;
}

/* Overlay übernimmt die Rundung der Karte */
.team-listing__member-info {
  position: absolute;
  inset: 0;
  border-radius: inherit;   /* <- wichtig */
  background-image: var(--overlay, linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.75)));
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--padding-card, 40px);
}

/* Light-Variante weiterhin */
.module-wrapper--light .team-listing__member-info {
  background-image: var(--overlay, linear-gradient(to bottom, rgba(255,255,255,.1), rgba(255,255,255,.75)));
}

/* Damit Inhalte klickbar bleiben, aber das Overlay nicht blockt */
.team-listing__member-info * { pointer-events: auto; }

/* Wenn Modal offen: Seite nicht scrollen */
html.is-modal-open,
body.is-modal-open {
  overflow: hidden;
}
.tl-modal__dialog {
  max-height: 92vh;            /* Modal selbst bekommt eine Deckel-Höhe */
  display: flex;
  flex-direction: column;
}
.tl-modal__content {
  overflow: auto;               /* hier scrollt der Inhalt */
  -webkit-overflow-scrolling: touch;
}

/* 1) Safe-area berücksichtigen (unten + oben) */
.tl-modal__dialog {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-top: max(12px, env(safe-area-inset-top));
}

/* der scrollbare Bereich bekommt zusätzlich „Luft“ unten */
.tl-modal__content {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  scroll-padding-bottom: max(16px, env(safe-area-inset-bottom)); /* für Anchor/Fokus */
}

/* 2) Dynamic viewport units für verlässliche Höhe (mit Fallback) */
.tl-modal__dialog { max-height: 92vh; }              /* Fallback */
@supports (height: 1dvh) {
  .tl-modal__dialog { max-height: 92dvh; }          /* iOS/Chrome: UI einberechnet */
}

/* Optional: auch der Außenabstand nutzt dvh statt vh (mit Fallback) */
.tl-modal__dialog { margin: 5vh auto; }             /* Fallback */
@supports (height: 1dvh) {
  .tl-modal__dialog { margin: 5dvh auto; }
}

.team-listing__member-info-socials {
  display: none !important;
}
/* "Mehr Infos" Hinweis immer sichtbar */
.team-listing__more {
  display: inline-block;
  font-size: 0.8rem;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: #ff0;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  margin-top: 12px;
  opacity: 0.9;
  pointer-events: none;   /* Klick geht weiter auf die gesamte Karte */
}

/* ===== [ADD] Dialog nutzt volle Höhe + Safe-Area, Inhalt scrollt ===== */
.tl-modal__dialog {
  display: flex;                 /* neu: eigener Flex-Container */
  flex-direction: column;        /* Kopf/Content untereinander */
  max-height: 100vh;             /* Fallback */
  padding-top: env(safe-area-inset-top, 12px);
  padding-bottom: env(safe-area-inset-bottom, 16px);
}
@supports (height: 1dvh) {
  .tl-modal__dialog { max-height: 100dvh; } /* iOS/Chrome: UI einkalkuliert */
}

.tl-modal__content {
  flex: 1 1 auto;                /* neu: füllt den Dialog */
  overflow-y: auto;              /* neu: hier scrollt es */
  -webkit-overflow-scrolling: touch;
}

/* etwas zusätzlicher Bodenabstand im scrollbaren Bereich (über UI-Leisten) */
.tl-modal__content {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  scroll-padding-bottom: max(16px, env(safe-area-inset-bottom));
}
/* === Modal: soften in/out ========================================== */
/* Grundzustand: Kinder startbereit für Transition */
.tl-modal__backdrop {
  opacity: 0;
  transition: opacity .24s ease;
}

.tl-modal__dialog {
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition:
    opacity .28s ease,
    transform .28s cubic-bezier(.22,.61,.36,1); /* smooth-ish spring */
  will-change: opacity, transform;
}

/* Aktiv-Zustand: wenn JS .is-open setzt */
.tl-modal.is-open .tl-modal__backdrop {
  opacity: 1;
}
.tl-modal.is-open .tl-modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ===== Modal Transition & Position Fix ===== */

/* Grundzustand: Dialog ist leicht nach unten versetzt und transparent */
.tl-modal__dialog {
  opacity: 0;
  margin-top: 5vh; /* kleiner Start-Offset */
  transition: opacity 0.3s ease, margin-top 0.3s ease;
}

/* Wenn Modal offen: sichtbar und an Zielposition */
.tl-modal.is-open .tl-modal__dialog {
  opacity: 1;
  margin-top: 0;
}

/* Mobile (unter 992px): kein transform, margin-top Slide bleibt,
   damit iOS Chrome/Safari Scroll nicht abschneidet */
@media (max-width: 991px) {
  .tl-modal {
    display: block;
  }
  .tl-modal__dialog {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Desktop (ab 992px): zentriert mit Flexbox */
@media (min-width: 992px) {
  .tl-modal {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tl-modal__dialog {
    margin: 0;              /* Zentrierung durch Flex */
    transform: translateY(20px); /* kleiner Start-Offset */
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .tl-modal.is-open .tl-modal__dialog {
    transform: translateY(0);
  }
}

/* ===== iOS Scroll-Fix: transform auf Mobile neutralisieren + echte Vollhöhe ===== */
@media (max-width: 991px) {
  /* Modal-Root: kein Scroll-Chaining zum Body */
  .tl-modal {
    overflow: hidden;
    overscroll-behavior: contain;
  }

  /* Dialog: 100% Viewport-Höhe + KEIN transform (wichtig!) */
  .tl-modal__dialog {
    height: 100vh !important;                   /* Fallback */
    transform: none !important;                 /* neutralisiert frühere translate/scale */
    will-change: auto !important;
    margin-left: auto;
    margin-right: auto;

    /* Slide per margin statt transform */
    margin-top: 12px;
    transition: opacity .28s ease, margin-top .28s ease !important;
  }
  @supports (height: 1dvh) {
    .tl-modal__dialog { height: 100dvh !important; } /* Browser-UI eingerechnet */
  }
  @supports (-webkit-touch-callout: none) {
    .tl-modal__dialog { height: -webkit-fill-available !important; } /* älteres iOS */
  }
  .tl-modal.is-open .tl-modal__dialog { margin-top: 0; }

  /* Nur der Content scrollt, mit Puffer unten gegen Browser-Leisten */
  .tl-modal__content {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 64px) !important;
    scroll-padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 64px) !important;
  }
  .tl-modal__content::after {
    content: "";
    display: block;
    height: calc(env(safe-area-inset-bottom, 0px) + 24px);
  }
}

/* Desktop weiter hübsch zentriert (Flex), mit kleinem translateY-Slide */
@media (min-width: 992px) {
  .tl-modal {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tl-modal__dialog {
    /* Desktop darf transform benutzen, Mobile oben überschrieben */
    margin: 0;
    transform: translateY(20px);
    transition: opacity .3s ease, transform .3s ease;
  }
  .tl-modal.is-open .tl-modal__dialog { transform: translateY(0); }
}