/* ==========================================================================
   Aktuelles — Termine, Programme und Projekte (Unterseite der Hauptseite)
   Baut auf otmar.css auf; hier nur die Bausteine, die es sonst nicht gibt.
   ========================================================================== */

/* Nächster Termin: eine Karte, links das Datum als Block, rechts Bild + Text */
.next-card {
  display: grid; grid-template-columns: 1fr;
  background: var(--white); box-shadow: var(--shadow-soft); overflow: hidden;
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.next-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.next-date {
  background: var(--navy); color: var(--sand-50);
  padding: var(--s5) var(--s4); text-align: center;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
.next-date .d-kicker { font-size: 10px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.next-date .d-day { font-family: var(--font-display); font-size: clamp(56px, 7vw, 88px); line-height: 0.95; }
.next-date .d-day small { font-size: 0.42em; letter-spacing: 0.02em; }
.next-date .d-month { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 28px); font-style: italic; color: var(--sand-100); }
.next-date .d-time { margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand-200); }
.next-media { position: relative; min-height: 240px; }
.next-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.next-body { padding: var(--s5) var(--s4); }
.next-body h3 { font-size: clamp(26px, 3vw, 38px); margin-bottom: var(--s2); }
.next-body p { color: var(--ink-muted); font-size: 16px; }
.next-body .course-meta { margin: var(--s3) 0 var(--s4); }
.badge-free {
  display: inline-block; margin-bottom: var(--s3);
  background: var(--gold); color: var(--navy);
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 8px 14px;
}

/* Programme: drei gleich hohe Karten */
.programs { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
.program {
  display: flex; flex-direction: column;
  background: var(--white); box-shadow: var(--shadow-soft); overflow: hidden;
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.program:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.program-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.program-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 1.2s var(--ease); }
.program:hover .program-media img { transform: scale(1.04); }
.program-body { padding: var(--s4); display: flex; flex-direction: column; flex: 1; }
.program-body h3 { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 10px; }
.program-body p { color: var(--ink-muted); font-size: 15.5px; flex: 1; }
.program-body .course-meta { margin: var(--s3) 0; }
.program-body .course-link { align-self: flex-start; }

/* In Verbindung bleiben: schlichte Zeilen */
.stay { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
.stay-item {
  display: grid; grid-template-columns: 52px 1fr auto; gap: var(--s3); align-items: center;
  padding: var(--s3) var(--s4); background: var(--white); box-shadow: var(--shadow-soft);
  color: inherit; text-decoration: none;
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.stay-item:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.stay-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--sand-100); color: var(--navy); display: grid; place-items: center; }
.stay-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.stay-item h4 { font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); margin-bottom: 4px; }
.stay-item p { font-size: 14.5px; color: var(--ink-muted); margin: 0; }
.stay-arrow { font-size: 20px; color: var(--gold); transition: transform 0.35s var(--ease); }
.stay-item:hover .stay-arrow { transform: translateX(5px); }

@media (min-width: 700px) {
  .next-card { grid-template-columns: 220px 1fr; }
  .next-media { grid-column: 2; }
  .next-body { grid-column: 2; }
  .next-date { grid-row: 1 / span 2; }
  .programs { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .next-card { grid-template-columns: 240px 1.05fr 1fr; }
  .next-media { grid-column: auto; min-height: 100%; }
  .next-body { grid-column: auto; padding: var(--s5); }
  .next-date { grid-row: auto; }
  .stay { grid-template-columns: repeat(3, 1fr); }
  .stay-item { grid-template-columns: 52px 1fr; grid-template-rows: auto auto; padding: var(--s4); }
  .stay-item .stay-icon { grid-row: 1 / span 2; }
  .stay-arrow { display: none; }
}

/* Handy (30.09.2026): Kanal-Karten mit breiterer Textspalte, ohne Pfeil */
@media (max-width: 699px) {
  .stay-item { grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 18px; }
  .stay-icon { width: 44px; height: 44px; }
  .stay-icon svg { width: 21px; height: 21px; }
  .stay-arrow { display: none; }
}