/*!
 * rss-feed.css  –  Darstellung der RSS-Feed-Liste
 * Ablage: fileadmin/rss/rss-feed.css
 *
 * Layouts werden über  data-layout  am <div> gesteuert:
 *   list     Einfache Liste mit Trennlinien (Standard)
 *   cards    Karten untereinander
 *   grid     Karten nebeneinander im Raster
 *   compact  Dichte Liste, Datum in eigener Spalte links
 *
 * Farben und Abstände lassen sich unten in einem Block anpassen.
 */

/* ============================================================
   Gestaltungswerte – hier zentral anpassen
   ============================================================ */
.rss-feed {
  --rss-accent:     #05509c;   /* Linkfarbe */
  --rss-date:       #000;      /* Veranstaltungsdatum */
  --rss-text:       #444;      /* Beschreibungstext */
  --rss-muted:      #777;      /* Nebeninformationen */
  --rss-border:     #e5e5e5;   /* Trennlinien */
  --rss-card-bg:    #fff;      /* Kartenhintergrund */
  --rss-card-brd:   #e0e0e0;   /* Kartenrahmen */
  --rss-radius:     8px;       /* Eckenrundung */
  --rss-gap:        14px;      /* Abstand im Raster */
  --rss-card-pad:   16px;      /* Innenabstand der Karten */

  font-family: inherit;
}

/* ============================================================
   Grundgerüst – gilt für alle Layouts
   ============================================================ */
.rss-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rss-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--rss-border);
}

.rss-item:last-child {
  border-bottom: none;
}

.rss-event {
  display: block;
  font-size: .85em;
  font-weight: 700;
  color: var(--rss-date);
  letter-spacing: .02em;
  margin-bottom: 2px;
}

.rss-title {
  text-decoration: none;
  font-weight: 600;
  color: #007a3d;
}

.rss-title:hover,
.rss-title:focus {
  text-decoration: underline;
}

.rss-date {
  color: var(--rss-muted);
  font-size: .85em;
  white-space: nowrap;
}

.rss-desc {
  color: var(--rss-text);
  font-size: .9em;
  margin: 4px 0 0;
  line-height: 1.45;
}

.rss-empty,
.rss-err {
  font-size: .9em;
}

.rss-err   { color: #b00020; }
.rss-empty { color: var(--rss-muted); }

/* ============================================================
   Layout: KARTEN  (data-layout="cards")
   ============================================================ */
.rss-layout-cards .rss-item {
  border: 1px solid var(--rss-card-brd);
  border-radius: var(--rss-radius);
  background: var(--rss-card-bg);
  padding: var(--rss-card-pad);
  margin-bottom: var(--rss-gap);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: box-shadow .16s ease, transform .16s ease;
}

.rss-layout-cards .rss-item:last-child {
  margin-bottom: 0;
  border-bottom: 1px solid var(--rss-card-brd);
}

.rss-layout-cards .rss-item:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
  transform: translateY(-1px);
}

.rss-layout-cards .rss-title {
  display: block;
  font-size: 1.05em;
  margin-bottom: 2px;
}

/* ============================================================
   Layout: RASTER  (data-layout="grid")
   Spaltenzahl über data-columns, sonst automatisch
   ============================================================ */
.rss-layout-grid .rss-list {
  display: grid;
  gap: var(--rss-gap);
  grid-template-columns: repeat(var(--rss-cols, auto-fill), minmax(240px, 1fr));
}

.rss-layout-grid .rss-item {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--rss-card-pad);
  border: 1px solid var(--rss-card-brd);
  border-radius: var(--rss-radius);
  background: var(--rss-card-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: box-shadow .16s ease, transform .16s ease;
}

.rss-layout-grid .rss-item:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
  transform: translateY(-1px);
}

.rss-layout-grid .rss-title {
  display: block;
  margin-bottom: 2px;
}

/* ============================================================
   Layout: KOMPAKT  (data-layout="compact")
   Datum in eigener Spalte links neben dem Titel
   ============================================================ */
.rss-layout-compact .rss-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  align-items: baseline;
  padding: 9px 0;
}

.rss-layout-compact .rss-event {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rss-layout-compact .rss-title { grid-column: 2; grid-row: 1; }
.rss-layout-compact .rss-date  { grid-column: 2; grid-row: 1; }
.rss-layout-compact .rss-desc  { grid-column: 2; grid-row: 2; margin-top: 2px; }

/* Ohne Datumsanzeige nicht künstlich einrücken */
.rss-layout-compact .rss-item:not(:has(.rss-event)) {
  grid-template-columns: 1fr;
}

@media (max-width: 560px) {
  .rss-layout-compact .rss-item {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
  .rss-layout-compact .rss-event,
  .rss-layout-compact .rss-title,
  .rss-layout-compact .rss-desc {
    grid-column: 1;
    grid-row: auto;
  }
}