/* ─────────────────────────────────────────────────────────────────
   PSYONARA — RESPONSIVE LAYER

   Die Kit-Komponenten stylen über Inline-Styles. Inline-Styles können
   keine Media Queries enthalten — jeder breakpoint-abhängige Wert muss
   deshalb hier liegen. Komponenten greifen auf zwei Wegen darauf zu:

     1. Custom Properties  → var(--psy-gutter) im Inline-Style
     2. Layout-Klassen     → className="psy-split-detail"

   Regel: Was sich mit der Viewport-Breite ändert, gehört in diese Datei.
   Was konstant bleibt, bleibt im Inline-Style der Komponente.
   ───────────────────────────────────────────────────────────────── */

/* ── Seitenränder ────────────────────────────────────────────────
   40px sind auf 390px Displaybreite 20 % der Fläche. Der Rand darf
   schmaler werden — aber nie auf null: die harte Kante zum Rand ist
   Teil der industriellen Anmutung, randlose Inhalte wirken billig. */
:root {
  --psy-gutter: 40px;
}

@media (max-width: 640px) {
  :root { --psy-gutter: 20px; }
}

@media (max-width: 380px) {
  :root { --psy-gutter: 16px; }
}

/* ── Editorial Split: Poster + Fließtext ─────────────────────────
   Die 1.35fr sind Absicht — das Poster ist der Anker, der Text das
   Gegengewicht. Symmetrisch gesetzt verliert das Layout seine
   Blickführung. Unterhalb von 900px stapelt es, Poster zuerst. */
.psy-split-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 900px) {
  .psy-split-detail { grid-template-columns: 1.35fr 1fr; }
}

/* ── Index-Rail + Textkörper (Protokolle) ────────────────────────
   Schmale Navigationsspalte gegen breiten Lesetext, 1:2. */
.psy-split-index {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 900px) {
  .psy-split-index { grid-template-columns: 1fr 2fr; }
}

/* Sticky ergibt nur Sinn, wenn daneben eine Spalte zum Scrollen liegt.
   Einspaltig würde die Rail den halben Viewport blockieren. */
.psy-rail { position: static; }

@media (min-width: 900px) {
  .psy-rail {
    position: sticky;
    top: 84px;
  }
}

/* ── Event-Listenzeile ───────────────────────────────────────────
   Desktop: Datum | Titel | Status | CTA in einer Zeile.
   Schmal: Datum + Titel oben, Status und CTA darunter — die Zeile
   bricht auf zwei Ebenen um, statt die Spalten zu zerquetschen. */
.psy-event-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  grid-template-areas:
    "date  title title"
    "badge .     cta";
  align-items: center;
  gap: 14px 16px;
  padding: 18px 18px;
}

.psy-event-row > *:nth-child(1) { grid-area: date; }
.psy-event-row > *:nth-child(2) { grid-area: title; min-width: 0; }
.psy-event-row > *:nth-child(3) { grid-area: badge; justify-self: start; }
.psy-event-row > *:nth-child(4) { grid-area: cta; }

@media (min-width: 720px) {
  .psy-event-row {
    grid-template-columns: 80px 1fr auto auto;
    grid-template-areas: "date title badge cta";
    gap: 20px;
    padding: 20px 24px;
  }
}

/* ── SectionHeading: Titel und Link stapeln ──────────────────────
   .psy-head aus dem DS-Bundle setzt flex + space-between ohne Umbruch,
   .psy-head__link trägt white-space: nowrap. Lange Beschriftungen
   ("All Field Recordings →" misst 190px) passen damit unterhalb von
   etwa 420px Viewportbreite nicht mehr neben den Titel und ragen aus
   dem Container. Unterhalb des Breakpoints stapelt der Link deshalb
   unter den Titel — mit Reserve für längere deutsche Beschriftungen. */
@media (max-width: 640px) {
  .psy-head {
    flex-wrap: wrap;
  }

  .psy-head__main {
    min-width: 0;
  }
}

/* ── Touch-Ziele ─────────────────────────────────────────────────
   Auf Zeigegeräten ohne Feinsteuerung (Finger) müssen interaktive
   Elemente die 44px-Marke erreichen. Auf der Maus bleibt die
   kompakte, dichte Optik erhalten. */
@media (pointer: coarse) {
  .psy-event-row button,
  .psy-event-row a {
    min-height: 44px;
  }
}