/* ============================================
   ECX 40 - "Fachwissen für unterwegs"
   Social-Media-Sektion der Startseite, nach dem
   Entwurf der Grafikerin (section.ig-gallery).
   Nur auf der deutschen Startseite geladen.
   ============================================ */

.ecx-social { background: var(--surface); padding: 80px 0; }

/*
 * Folgt die Sektion direkt auf "Aus der Redaktion" - beide weiss -,
 * liefert deren Innenabstand unten schon die Luft. Ein zweiter oben
 * waere eine 160px-Luecke ohne Farbwechsel, die wie ein Fehler aussieht.
 */
.ecx-redaktion + .ecx-social { padding-top: 0; }

@media (max-width: 720px) {
  .ecx-social { padding: 56px 0; }
  .ecx-redaktion + .ecx-social { padding-top: 0; }
}

/* ---- Kopf: Text links, Profil rechts unten buendig ---- */
.ecx-social__kopf {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.ecx-social__intro { min-width: 0; max-width: 60ch; }

.ecx-social__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ec-red);
}

/* font-size und color ausdruecklich: der Altbestand faerbt Ueberschriften. */
.ecx-social .ecx-social__titel {
  font-size: var(--t-h2); font-weight: 700; color: var(--ink);
  line-height: 1.2; margin: 14px 0 0;
}
.ecx-social__text { color: var(--ink-3); font-size: 14px; line-height: 1.55; margin: 10px 0 0; }

/*
 * Profil-Link als Pille wie im Entwurf. 44px hoch nach den
 * Responsive-Regeln (Entwurf: rund 34). Schrift und Grund fuer :hover
 * wiederholt, sonst gewinnt das fremde a:hover - DECISIONS Punkt 18.
 */
.ecx-social .ecx-social__profil {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--bg); color: var(--ink);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ecx-social .ecx-social__profil:hover,
.ecx-social .ecx-social__profil:focus-visible { background: var(--ec-red); color: #fff; }
.ecx-social__profil .ecx-icon { width: 16px; height: 16px; }

/* ---- Karten: sechs in einer Reihe ---- */
.ecx-social__reihe {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px;
}
.ecx-social__eintrag { min-width: 0; }

/*
 * 4:5 wie Instagram-Beitraege - alle sechs Bilder haben genau dieses
 * Format (500 x 625, eines 800 x 1000), cover schneidet also nichts ab.
 * Erst ein Bild in anderem Format wuerde beschnitten.
 */
.ecx-social__karte {
  position: relative; display: block;
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ecx-social__karte:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.ecx-social__karte:focus-visible { outline: 2px solid var(--ec-red); outline-offset: 3px; }

.ecx-social__karte img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}

.ecx-social__chip {
  position: absolute; left: 8px; top: 8px;
  background: rgba(255,255,255,.92);
  color: var(--ec-red); font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 8px; border-radius: 4px;
  pointer-events: none;
}

/*
 * ---- Bis 1080: waagerechte Wischreihe ----
 *
 * Seit 06.10.2026 schon ab 1080 abwaerts, vorher erst unter 640. Davor
 * stand zwischen 641 und 1080 das 3x2-Raster aus dem Entwurf - die
 * Sektion wurde damit fast 1000px hoch (bei 1000: 976px).
 *
 * Bewusst und nicht als Notloesung (DECISIONS Punkt 15 erlaubt
 * waagerechtes Scrollen nur, wo es gestalterisch gewollt ist): die
 * angeschnittene letzte Karte zeigt, dass es weitergeht - die Geste, die
 * man von Instagram kennt.
 *
 * WIE VIELE SICHTBAR: 3,5 zwischen 641 und 1080, 2,5 darunter. Mit 2,5
 * auch auf dem Tablet waere eine Karte bei 1000 rund 370 x 460 gross -
 * hoeher als das Raster vorher. Punkt 46.
 *
 * Die Reihe laeuft bis an den Bildschirmrand: negativer Rand in Hoehe
 * des .ecx-wrap-Polsters (32px, unter 720 18px), der erste Eintrag
 * beginnt trotzdem buendig mit der Ueberschrift. scroll-snap rastet an
 * Kartenkanten ein. Kein JavaScript: Wischen auf dem Touchscreen, mit
 * der Tastatur fuehrt Tab von Karte zu Karte und scrollt sie ins Bild.
 */
@media (max-width: 1080px) {
  .ecx-social__reihe {
    display: flex; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin: 0 -32px; padding: 0 32px 4px;
    scroll-padding-inline: 32px;
    scrollbar-width: none;
  }
  .ecx-social__reihe::-webkit-scrollbar { display: none; }

  /* 3,5 sichtbar: (Breite - drei Abstaende) / 3,5. */
  .ecx-social__eintrag {
    flex: 0 0 calc((100% - 36px) / 3.5);
    scroll-snap-align: start;
  }
}

/* Unter 720 ist das .ecx-wrap-Polster 18px - der Rand folgt ihm. */
@media (max-width: 720px) {
  .ecx-social__reihe { margin: 0 -18px; padding: 0 18px 4px; scroll-padding-inline: 18px; }
}

/* ---- Unter 640: 2,5 sichtbar ---- */
@media (max-width: 640px) {
  .ecx-social__kopf { margin-bottom: 20px; }

  /* (Breite - zwei Abstaende) / 2,5. */
  .ecx-social__eintrag { flex-basis: calc((100% - 24px) / 2.5); }
}

@media (prefers-reduced-motion: reduce) {
  .ecx-social__karte, .ecx-social__profil { transition-duration: 0s; }
  .ecx-social__karte:hover { transform: none; }
}