/* ===================================================================
   Plugin „Social Media" — Beitrags-Karussell auf der Startseite.
   Baut ausschließlich auf den Theme-Tokens (style.css :root) auf, damit
   die Sektion nahtlos zwischen „Veranstaltungen" und „Landesvorstand" sitzt.
   =================================================================== */

.social-feed {
  background: var(--bg-soft);
  /* unten nur 4px: zusammen mit dem 32px-Padding der Landesvorstand-Sektion
     ergibt das denselben Leerraum (36px) wie oberhalb des Sliders. */
  padding: 6px 0 4px;
}

/* ---------- Kopfzeile (nur Navigation, rechts) ---------- */
.social-feed__head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.social-feed__controls { display: flex; align-items: center; gap: 16px; flex: none; }

.social-feed__nav { display: flex; gap: 10px; }
.social-feed__arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--blue-ink);
  display: grid; place-items: center;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}
.social-feed__arrow svg { width: 20px; height: 20px; }
.social-feed__arrow-flip { display: grid; place-items: center; transform: rotate(180deg); }
.social-feed__arrow:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
.social-feed__arrow:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.social-feed__arrow:disabled { opacity: .4; cursor: default; }

/* ---------- Track (scroll-snap; funktioniert ohne JS) ---------- */
.social-feed__track {
  --social-cards: 3.3;
  --social-gap: 18px;

  display: flex;
  gap: var(--social-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Bündig zum .wrap: die angeschnittene Karte endet exakt am Inhaltsrand,
     kein seitlicher Überhang. Oben/unten Raum für Karten- und Hover-Schatten
     (vertikal — wird vom horizontalen overflow-Clipping nicht abgeschnitten). */
  padding: 10px 0 30px;
  /* Scrollleiste ausgeblendet — Navigation per Pfeil, Punkt, Wischen, Tastatur. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab; /* Hinweis: Track ist mit der Maus ziehbar */
}
.social-feed__track::-webkit-scrollbar { display: none; }

/* Während des Maus-Ziehens: snap aus (sonst kämpft es gegen das Ziehen),
   sofortiges Scrollen, Greif-Cursor überall, keine Textauswahl. */
.social-feed__track.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
.social-feed__track.is-dragging,
.social-feed__track.is-dragging * { cursor: grabbing; }
/* Verhindert, dass die Maus beim Ziehen das native Bild-Dragging startet. */
.social-card__media img { -webkit-user-drag: none; user-select: none; }

/* ---------- Beitrags-Karte (erbt die .event-DNA) ---------- */
.social-card {
  /* Plattformneutrale Voreinstellung; je Plattform unten überschrieben. */
  --sp-color: var(--blue);

  flex: 0 0 calc((100% - (var(--social-cards) - 1) * var(--social-gap)) / var(--social-cards));
  scroll-snap-align: start;
  min-width: 0;
}
.social-card__link {
  position: relative; /* Bezug für das Angepinnt-Badge */
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  /* Bewusst kompaktere Schatten als die Theme-Tokens: Der scroll-Track clippt
     alles, was über sein Padding hinausragt — Schatten müssen also in den
     Schatten-Raum (--social-edge seitlich, Track-Padding oben/unten) passen. */
  box-shadow: 0 6px 18px -8px rgba(16, 42, 82, .16);
  overflow: hidden;
  color: inherit;
  transition: transform .15s ease, box-shadow .2s ease, border-color .15s ease;
}
a.social-card__link:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -16px rgba(16, 42, 82, .28);
  border-color: #d7deea;
}
.social-card__link:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- Angepinnte (hervorgehobene) Karte ---------- */
.social-card--pinned .social-card__link {
  border-color: var(--orange);
  box-shadow: 0 6px 20px -8px rgba(243, 146, 0, .38);
}
.social-card--pinned a.social-card__link:hover {
  border-color: var(--orange);
  box-shadow: 0 14px 30px -14px rgba(243, 146, 0, .48);
}
.social-card__pin {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .02em;
  box-shadow: 0 3px 10px -2px rgba(243, 146, 0, .55);
}
.social-card__pin svg { width: 13px; height: 13px; }

/* Plattform-Header */
.social-card__head { display: flex; align-items: center; gap: 11px; padding: 15px 16px 13px; }
.social-card__badge {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--sp-color);
  background: color-mix(in srgb, var(--sp-color) 14%, #fff);
}
.social-card__badge svg { width: 21px; height: 21px; }
.social-card__meta { display: flex; flex-direction: column; min-width: 0; }
.social-card__author {
  font-family: var(--ff-head); font-weight: 700; font-size: 15px; color: var(--blue-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.social-card__handle { font-size: 13.5px; color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Medium (Bild / Video-Thumbnail) ----------------------------------------
   Zwei Ebenen aus derselben Bildquelle, damit jedes Seitenverhältnis
   (quadratisch, hoch, 16:9 …) VOLLSTÄNDIG sichtbar bleibt — nichts wird
   abgeschnitten — der 16:10-Rahmen aber trotzdem ohne leere Balken gefüllt ist.
   `isolation: isolate` kapselt die z-Reihenfolge (Hintergrund < Bild < Play),
   damit sie nicht mit dem Angepinnt-Badge der Karte kollidiert. */
.social-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg-softer);
  overflow: hidden;
  isolation: isolate;
}
.social-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Hintergrund: dasselbe Bild formatfüllend (cover), weichgezeichnet und leicht
   vergrößert — die Skalierung verdeckt die vom Blur ausgefransten Ränder. */
.social-card__media-bg {
  object-fit: cover;
  filter: blur(20px) saturate(1.2);
  transform: scale(1.15);
  z-index: 0;
}
/* Vordergrund: komplettes Bild, eingepasst (contain) — nie beschnitten. */
.social-card__media-img {
  object-fit: contain;
  z-index: 1;
  transition: transform .4s var(--ease-out-expo, ease);
}
a.social-card__link:hover .social-card__media-img { transform: scale(1.045); }
.social-card__play {
  position: absolute; inset: 0; margin: auto;
  z-index: 2; /* über dem eingepassten Vordergrundbild (z-index: 1) */
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(16, 42, 82, .62);
  color: #fff;
  backdrop-filter: blur(2px);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6);
  transition: transform .15s ease, background .15s ease;
}
.social-card__play svg { width: 26px; height: 26px; margin-left: 3px; }
a.social-card__link:hover .social-card__play { transform: scale(1.08); background: var(--sp-color); }

/* Text */
.social-card__body {
  margin: 0;
  padding: 14px 16px 4px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
/* Textbeiträge ohne Bild dürfen mehr zeigen */
.social-card__body--lg { -webkit-line-clamp: 8; line-clamp: 8; font-size: 16px; }

/* Fußzeile */
.social-card__foot {
  margin-top: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px 15px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
}
.social-card__date { color: var(--text-mid); }
.social-card__likes { display: inline-flex; align-items: center; gap: 5px; color: var(--text-mid); }
.social-card__likes svg { width: 15px; height: 15px; color: var(--sp-color); }
.social-card__cta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-head); font-weight: 700; font-size: 13.5px;
  color: var(--blue);
  transition: gap .15s ease, color .15s ease;
}
.social-card__cta svg { width: 15px; height: 15px; transition: transform .15s ease; }
a.social-card__link:hover .social-card__cta { color: var(--orange); }
a.social-card__link:hover .social-card__cta svg { transform: translateX(3px); }

/* ---------- Plattform-Akzentfarben ----------
   Default: erkennbare Marken-Töne, über das getönte Badge (color-mix oben)
   dezent in die CMS-Palette eingebettet. Hier zentral anpassbar — z. B. alle
   auf var(--blue) setzen für einen streng einheitlichen Look. */
.social-card--instagram { --sp-color: #d6336c; }
.social-card--facebook  { --sp-color: #1877f2; }
.social-card--x         { --sp-color: var(--blue-ink); }
.social-card--youtube   { --sp-color: #e0281e; }

/* ---------- Punkt-Navigation (von JS befüllt) ---------- */
/* hidden muss display gewinnen, sonst belegt der leere Container Platz. */
.social-feed__nav[hidden],
.social-feed__dots[hidden] { display: none; }
/* negativer Abstand zieht die Punkte in den (leeren) unteren Schatten-Raum
   des Tracks, damit sie nicht zu weit unter dem Karussell sitzen. */
.social-feed__dots { display: flex; justify-content: center; gap: 8px; margin-top: -6px; }
.social-feed__dot {
  appearance: none;
  -webkit-appearance: none; /* sonst rendert der Browser den nativen Button-Look */
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 0;
  background: #c2ccdb;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
/* aktiver Punkt: rund wie die anderen, nur blau und leicht vergrößert */
.social-feed__dot.is-active { background: var(--blue); transform: scale(1.4); }
.social-feed__dot:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .social-feed__track { --social-cards: 2.2; }
}
@media (max-width: 760px) {
  .social-feed__track { --social-cards: 1.15; --social-gap: 14px; }
}

/* ===================================================================
   Datenschutz-Hinweis-Modal (vor Weiterleitung zu externen Anbietern).
   Natives <dialog>: Top-Layer, Fokusfalle und ESC ohne Zusatz-JS.
   =================================================================== */
.social-modal {
  width: min(92vw, 460px);
  padding: 0;              /* Fläche liefert das Panel — so ist ein Klick
                              „auf den Dialog" eindeutig der Hintergrund. */
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -18px rgba(16, 42, 82, .5);
  overflow: visible;
}
.social-modal::backdrop {
  background: rgba(16, 42, 82, .55);
  backdrop-filter: blur(3px);
}
.social-modal[open] { animation: social-modal-in .2s var(--ease-out-expo, ease); }
.social-modal[open]::backdrop { animation: social-modal-fade .2s ease; }
@keyframes social-modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes social-modal-fade { from { opacity: 0; } }

.social-modal__panel {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  padding: 30px 28px 26px;
}

.social-modal__close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--bg-soft); color: var(--text-mid);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.social-modal__close:hover { background: var(--bg-softer); color: var(--blue-ink); }
.social-modal__close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.social-modal__close svg { width: 18px; height: 18px; }

.social-modal__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  margin-bottom: 16px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, #fff);
}
.social-modal__icon svg { width: 27px; height: 27px; }

.social-modal__title {
  margin: 0 0 10px;
  font-family: var(--ff-head); font-weight: 700; font-size: 20px;
  color: var(--blue-ink);
}
.social-modal__desc {
  margin: 0 0 16px;
  font-size: 15px; line-height: 1.55;
  color: var(--text-mid);
}
.social-modal__desc strong { color: var(--blue-ink); }

.social-modal__target {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.social-modal__target-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-mid);
}
.social-modal__target-url {
  font-size: 15px; font-weight: 600; color: var(--blue-ink);
  word-break: break-word;
}

.social-modal__hint {
  margin: 0 0 22px;
  font-size: 13px; line-height: 1.5;
  color: var(--text-mid);
}
.social-modal__hint a { color: var(--blue); text-decoration: underline; }
.social-modal__hint a:hover { color: var(--orange); }

.social-modal__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.social-modal__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  font-family: var(--ff-head); font-weight: 700; font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.social-modal__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.social-modal__btn--ghost {
  border: 1.5px solid var(--line);
  background: #fff; color: var(--blue-ink);
}
.social-modal__btn--ghost:hover { border-color: #cfd7e4; background: var(--bg-soft); }
.social-modal__btn--go {
  border: 1.5px solid var(--blue);
  background: var(--blue); color: #fff;
  text-decoration: none;
}
.social-modal__btn--go:hover { background: var(--blue-deep); border-color: var(--blue-deep); transform: translateY(-1px); }
.social-modal__btn--go svg { width: 16px; height: 16px; }

@media (max-width: 460px) {
  .social-modal__actions { flex-direction: column-reverse; }
  .social-modal__btn { justify-content: center; }
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce) {
  .social-feed__track { scroll-behavior: auto; }
  .social-card__link,
  .social-card__media-img,
  .social-card__play,
  .social-card__cta,
  .social-card__cta svg { transition: none; }
  a.social-card__link:hover { transform: none; }
  /* nur das Vordergrundbild zurücksetzen — der unscharfe Hintergrund muss seine
     Vergrößerung (scale) behalten, sonst werden die weichen Ränder sichtbar. */
  a.social-card__link:hover .social-card__media-img { transform: none; }

  .social-modal[open],
  .social-modal[open]::backdrop { animation: none; }
  .social-modal__btn,
  .social-modal__close { transition: none; }
}