/* REALDOT Timeline – Frontend Styles
   Schriften/Typo kommen vom Theme. Wir kümmern uns um Layout + Variablen. */

.rdtl {
  --rdtl-primary: #111111;
  --rdtl-accent:  #0ea5e9;
  --rdtl-line:    #e5e7eb;
  --rdtl-bullet:  #0ea5e9;
  --rdtl-bg:      #ffffff;
  color: var(--rdtl-primary);
}

.rdtl-header {
  margin-bottom: 1.5rem;
}
.rdtl-title {
  margin: 0 0 .25rem 0;
  line-height: 1.2;
}
.rdtl-intro { opacity: .9; }

.rdtl-list {
  position: relative;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

/* Vertikale Linie */
.rdtl-list:before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  width: 2px;
  height: 100%;
  background: var(--rdtl-line);
}

/* Item */
.rdtl-item {
  position: relative;
  margin: 0 0 1.5rem 0;
  padding-left: 56px;
}

/* Marker (Bullet) */
.rdtl-marker {
  position: absolute;
  top: .35rem;
  left: 10px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--rdtl-bullet);
  box-shadow: 0 0 0 4px var(--rdtl-bg), 0 2px 8px rgba(0,0,0,.08);
}

/* Card */
.rdtl-card {
  background: var(--rdtl-bg);
  border: 1px solid var(--rdtl-line);
  border-radius: 12px;
  padding: 1rem 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

.rdtl-year {
  display: inline-block;
  font-weight: 600;
  color: var(--rdtl-accent);
  background: color-mix(in srgb, var(--rdtl-accent) 12%, white);
  border: 1px solid color-mix(in srgb, var(--rdtl-accent) 35%, white);
  padding: .15rem .5rem;
  border-radius: 999px;
  margin-bottom: .5rem;
}

.rdtl-item-title {
  margin: .25rem 0 .5rem 0;
  line-height: 1.25;
}

.rdtl-content p { margin: 0 0 .75rem 0; }

.rdtl-media { margin-top: .75rem; }
.rdtl-thumb {
  display: block;
  border-radius: 10px;
  margin-bottom: .5rem;
  width: 100%;
  height: auto;
}

.rdtl-gallery {
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax(140px, 1fr) );
  gap: .5rem;
}
.rdtl-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Responsiv: auf großen Screens leicht breiter wirken */
@media (min-width: 900px) {
  .rdtl-item { padding-left: 72px; }
  .rdtl-list:before { left: 24px; }
  .rdtl-marker { left: 15px; }
}

/* ============================== */
/* Zweispaltig bei Beitragsbild   */
/* ============================== */

.rdtl-item.rdtl-has-thumb .rdtl-card {
  display: grid;
  grid-template-columns: minmax(180px, 320px) 1fr;
  gap: 1rem 1.25rem;
  align-items: start;
}

/* Linke Spalte: Medien (Thumb + Galerie) */
.rdtl-item.rdtl-has-thumb .rdtl-media {
  grid-column: 1;
  margin-top: 0; /* in Grid direkt oben an */
}

/* Rechte Spalte: Jahr, Titel, Content */
.rdtl-item.rdtl-has-thumb .rdtl-year,
.rdtl-item.rdtl-has-thumb .rdtl-item-title,
.rdtl-item.rdtl-has-thumb .rdtl-content {
  grid-column: 2;
}

/* Mobile Fallback: untereinander */
@media (max-width: 700px) {
  .rdtl-item.rdtl-has-thumb .rdtl-card {
    display: block;
  }
  .rdtl-item.rdtl-has-thumb .rdtl-media {
    margin-bottom: .75rem;
  }
}

/* Vertikal zentriert: rechter Textblock mittig neben dem Bild */
.rdtl-item.rdtl-has-thumb .rdtl-body {
  display: flex;              /* eigener Flex-Container */
  flex-direction: column;     /* Jahr, Headline, Content untereinander */
  justify-content: center;    /* vertikal zentriert innerhalb der Grid-Zeile */
  gap: .5rem;                 /* angenehmer Abstand zwischen den Elementen */
  align-self: center;         /* falls nötig zusätzlich mittig in der Grid-Zeile */
}

/* Headline im Grid-Kontext ohne extra oberen Abstand */
.rdtl-item.rdtl-has-thumb .rdtl-item-title {
  margin-top: 0;
}

/* Auf Mobile wieder Standard-Flow (untereinander) */
@media (max-width: 700px) {
  .rdtl-item.rdtl-has-thumb .rdtl-body {
    display: block;           /* keine Vertikal-Zentrierung im Mobile-Stack nötig */
  }
}

/* Jahreszahl-Badge soll nur Textbreite haben */
.rdtl .rdtl-year {
  display: inline-flex !important;       /* niemals block, sondern nur so breit wie nötig */
  max-width: max-content !important;     /* passt sich an Textinhalt an */
  white-space: nowrap !important;        /* kein Umbruch */
  box-sizing: border-box;
  padding: .25rem .75rem;                /* angenehme Innenabstände */
  border-radius: 999px !important;       /* runde Kapsel */
}