/* ==========================================================================
   Übersichtsseiten "Foto-Reisealben" und "Foto-Serien"
   Figma: reisealben (14:4930), serien (14:5109), Komponente "entrypoint / album" (18:318)
   Baut auf css/style.css (Tokens, Header, Schrift) und css/nav.css (Zurück-Pfeil) auf.
   ========================================================================== */

/* Zurück-Pfeil scrollt mit der Seite (Figma: absolut positioniert) */
.nav-back { position: absolute; }

/* Intro: zwei Absätze direkt untereinander (Figma) */
.intro__text p + p { margin-top: 0; }

/* --------------------------------------------------------------------------
   Album-Karte: Hintergrundbild + 50 % schwarze Ebene, 150px Mindesthöhe
   -------------------------------------------------------------------------- */
.album-entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 150px;
  padding: var(--space-3);
  border-radius: var(--radius-card);
  overflow: hidden;
  isolation: isolate;
  color: var(--color-white);
  background-color: rgb(255 255 255 / 0.06);     /* solange das Bild lädt */
  -webkit-tap-highlight-color: transparent;
}

.album-entry__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 50 % schwarz über dem Bild, damit die Schrift immer lesbar bleibt */
.album-entry::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-black-50-layer, rgb(0 0 0 / 0.5));
  transition: background-color 0.2s ease;
}
.album-entry:hover::before,
.album-entry:focus-visible::before { background-color: rgb(0 0 0 / 0.2); }   /* Hover: Abdunklung 50 % -> 20 % */
.album-entry:focus-visible {
  outline: 1px solid var(--color-white);
  outline-offset: 3px;
}

.album-entry__content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.album-entry__text {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Titel + NEU-Badge */
.album-entry__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-1);
  padding: var(--space-1) 0;
}
.album-entry__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  overflow-wrap: anywhere;
}

.badge--neu {
  padding: 2px 4px;
  background-color: #09d4b5;                     /* Figma: #09D4B5, ohne Transparenz */
  opacity: 1;
  font-size: 8px;
}
.badge--dark { background-color: var(--color-black-70-badge, rgb(0 0 0 / 0.7)); }

/* Beschreibung: höchstens zwei Zeilen */
.album-entry__desc {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  line-height: var(--leading-card);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.album-entry__desc:empty { display: none; }

.album-entry .entry__chevron { transition: transform 0.2s ease; }
.album-entry:hover .entry__chevron,
.album-entry:focus-visible .entry__chevron { transform: translateX(4px); }

/* Meldungen (Laden, leer, Fehler) */
.overview__message {
  margin: 0;
  padding: 40px 0;
  text-align: center;
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  color: var(--color-white-50);
}

@media (max-width: 560px) {
  .album-entry { padding: 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .album-entry::before, .album-entry .entry__chevron { transition: none; }
}