/* Detailansicht: Vollbild-Overlay auf Mobile, ab 1024px eine Spalte anstelle
   der Ergebnisliste (Breakpoint in css/responsive.css). Struktur wird von
   js/ui/detail.js in #detail-modal eingehängt. */

.detail-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
}

.detail-modal[hidden] {
  display: none;
}

.detail-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.detail-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--color-surface);
  overflow-y: auto;
}

/* Werkzeuge in der oberen Ecke: Schließen, Merken, Teilen - gleich
   gestaltet und übereinander, damit sie als eine Gruppe lesbar sind. Sie
   liegen über dem Bild, deshalb der abgedunkelte Kreis: er trägt das Symbol
   auf hellen wie auf dunklen Fotos. */

/* Klebt beim Blättern oben und ist dabei null Pixel hoch - der Inhalt
   darunter beginnt also unverändert am oberen Rand.

   Der z-index muss über allem liegen, was Leaflet in der Positionskarte
   aufbaut: dessen Ebenen reichen bis 700, die Bedienelemente bis 1000.
   Vorher stand hier 1, weshalb die Karte beim Blättern über die Knöpfe
   wanderte. Die Zahl wirkt nur innerhalb der Detailansicht - sie bildet
   über ihren eigenen z-index einen abgeschlossenen Stapelkontext. */
.detail-modal__tools {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 1050;
}

/* Trägt die Knöpfe. Der Bezug ist die Hülle darüber, deren Breite der
   Inhaltsbreite des scrollenden Panels entspricht - die Bildlaufleiste
   gehört nicht dazu, weshalb "right" davor endet statt darunter. */
.detail-modal__tools-inner {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Hülle für die Knöpfe, die bei jedem Öffnen neu entstehen (Herz und
   Ausflugsplan). Sie ist ein einzelnes Kind der Leiste und bekäme deren
   Abstand nur einmal - ihre eigenen Knöpfe lägen ohne diese Regel direkt
   aufeinander. Darum dieselbe Spalte mit demselben gap. */
.detail-modal__tool-slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.detail-modal__tool {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.detail-modal__tool:hover,
.detail-modal__tool:focus-visible {
  background: rgba(0, 0, 0, 0.75);
}

/* Das Herz kommt aus js/ui/favoriteButton.js und bringt eigene Farben mit -
   im Werkzeugkreis gelten die hier. Gemerkt wird durch ein kräftiges Rot
   angezeigt, das auch auf dem dunklen Kreis trägt. */
.detail-modal__tool.favorite-btn {
  color: #fff;
}

.detail-modal__tool.favorite-btn:hover,
.detail-modal__tool.favorite-btn:focus-visible {
  color: #fff;
  transform: none;
}

.detail-modal__tool.favorite-btn--active,
.detail-modal__tool.favorite-btn--active:hover {
  color: #ff5a5f;
}

@media (prefers-reduced-motion: reduce) {
  .detail-modal__tool {
    transition: none;
  }
}

/* Höhe liegt auf dem Bild selbst, nicht auf dem Rahmen: darunter steht der
   Herkunftsnachweis, der bei fester Rahmenhöhe abgeschnitten würde. */
.detail-image {
  width: 100%;
  flex-shrink: 0;
  background: var(--color-border);
}

.detail-image__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.detail-image__credit {
  padding: var(--space-xs) var(--space-lg);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  background: var(--color-surface);
}

.detail-image__credit a {
  color: inherit;
}

.detail-image__placeholder {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  color: #fff;
}

.detail-image__placeholder-icon {
  font-size: 2.5rem;
}

.detail-image__placeholder-text {
  font-size: 0.85rem;
}

.detail-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.detail-name {
  font-size: 1.3rem;
  font-weight: 700;
}

.detail-category {
  align-self: flex-start;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 2px var(--space-sm);
  border-radius: 999px;
}

.detail-section__label {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.detail-description {
  line-height: 1.5;
  white-space: pre-line;
}

.detail-address {
  font-style: normal;
  line-height: 1.4;
}

.detail-value {
  line-height: 1.4;
}

.detail-value--muted {
  color: var(--color-text-muted);
}

.detail-minimap {
  width: 100%;
  height: 220px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-border);
}

.detail-minimap__note {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.detail-facilities {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.detail-facility {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.9rem;
}

.detail-facility--no {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.detail-facility--no .detail-facility__icon {
  filter: grayscale(1);
}

.detail-facility--no .detail-facility__label {
  text-decoration: line-through;
}

.detail-facility__state {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.detail-family-notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
  line-height: 1.4;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.detail-tag {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px var(--space-sm);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.detail-website-link {
  color: var(--color-primary-dark);
  word-break: break-word;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

/* Ab 1024px ist die Detailansicht kein Modal mehr, sondern eine Spalte an
   der Stelle der Ergebnisliste - die Karte bleibt daneben sichtbar und
   unverdunkelt. Die Regeln dazu stehen bei den übrigen Spalten in
   css/responsive.css, damit das Desktop-Raster an einer Stelle steht. */

.detail-actions[hidden] {
  display: none;
}