/* Styles für die Vogelarten-Liste (birding.php) — ausgelagert aus einem
   Inline-<style>-Block, um die restlichen Seitenstile (css/style.css) nicht
   mit birding-spezifischen Regeln aufzublähen. Die Lightbox selbst nutzt die
   gemeinsamen .lightbox-Klassen aus style.css (siehe js/lightbox.js). */

.birding-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 220px;
  max-height: 480px;
  overflow: hidden;
  background: var(--bg-frame);
}

.birding-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.birding-stage__top-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, oklch(0.1 0.01 250 / 0.7) 0%, oklch(0.1 0.01 250 / 0) 28%);
  pointer-events: none;
}

.birding-stage__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--bg) 0%, oklch(0.15 0.012 250 / 0) 45%);
  pointer-events: none;
}

.birding-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px 100px;
}

.birding-page__head {
  max-width: 740px;
  margin-bottom: 48px;
}

.birding-page__head h1 {
  font-size: 2rem;
  margin-bottom: 12px;
}

.birding-page__head p {
  color: var(--text-secondary-2);
  line-height: 1.7;
}

.birding-page__count {
  margin-top: 12px;
  font-weight: 600;
  color: var(--accent);
}

.birding-page__controls {
  margin-bottom: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.birding-page__sort {
  display: flex;
  align-items: center;
  gap: 10px;
}

.birding-page__sort label {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.birding-page__sort select {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--hairline);
  background: var(--bg-frame);
  color: var(--text-primary);
  font-size: 0.875rem;
}

.birding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 28px 20px;
}

.birding-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.birding-card[hidden] {
  display: none;
}

.birding-card__thumb-wrap {
  position: relative;
  width: 100%;
}

.birding-card__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-panel);
  border-radius: 50%;
  overflow: hidden;
}

.birding-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.birding-card__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border: 1px solid var(--hairline);
}

.birding-card__thumb--empty svg {
  width: 34%;
  height: 34%;
}

.birding-card__badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}

.birding-card__badge svg {
  width: 15px;
  height: 15px;
}

.birding-card__badge--confirmed {
  background: var(--accent2-hover);
  color: var(--text-primary);
}

.birding-card__badge--pending {
  background: var(--bg-panel);
  color: var(--text-muted);
}

.birding-card__body {
  padding: 12px 4px 0;
}

.birding-card__name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9375rem;
}

.birding-card__latin {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin-top: 2px;
}

.birding-card__meta {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.birding-card__meta-unknown {
  color: var(--text-muted);
  font-style: italic;
}

.birding-card__thumb-wrap--clickable {
  cursor: zoom-in;
}

.birding-page__empty {
  color: var(--text-muted);
}

.birding-page__disclaimer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  max-width: 640px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.birding-page__disclaimer a {
  color: inherit;
}

/* Lateinischer Name in der Lightbox-Bildunterschrift kursiv, wie auch in
   der Kartenansicht (.birding-card__latin) — .lightbox__meta selbst ist in
   style.css page-übergreifend nicht kursiv (dort steht Ort/Kamera-Info). */
.lightbox__meta {
  font-style: italic;
}

/* Zweite Zeile: Bundesland + Sichtungsdatum, wie schon auf der Karte
   (.birding-card__meta) — bewusst nicht kursiv, im Unterschied zum
   lateinischen Namen darüber. */
.lightbox__meta2 {
  display: block;
  font-size: var(--font-size-14);
  color: var(--text-muted);
  margin-top: 4px;
}

/* Bild bekommt eine eigene, schmale Zeile links, Text daneben — statt
   einer großen Kreis-Kachel wie im Grid der Desktop-Ansicht. */
@media (max-width: 520px) {
  .birding-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .birding-card {
    position: relative;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 14px;
    padding: 10px 44px 10px 4px;
    border-bottom: 1px solid var(--hairline);
  }

  .birding-card__thumb-wrap {
    position: static;
    flex-shrink: 0;
    width: 52px;
  }

  .birding-card__body {
    padding: 0;
  }

  /* Auf der Kreis-Kachel (Desktop) sitzt das Badge direkt am Foto —
     in der schmalen Listenzeile (mobil) bekommt es stattdessen eine
     eigene Spalte ganz rechts, relativ zur ganzen Zeile positioniert. */
  .birding-card__badge {
    top: 50%;
    right: 8px;
    bottom: auto;
    transform: translateY(-50%);
  }

  .birding-card__meta {
    flex-direction: row;
    gap: 8px;
  }

  .birding-card__meta span:not(:last-child)::after {
    content: '·';
    margin-left: 8px;
    color: var(--text-muted);
  }
}