/* --- Eingebettete Instagram-Beiträge (js/ui/instagramEmbed.js) ------------

   Dieselben Regeln in zwei Ansichten: im Karten-Modal (css/detail.css) und
   auf der Zielseite (css/seo.css). Deshalb eine eigene Datei statt zweier
   Kopien - eingebunden in index.html und server/views/place.njk.

   Der Bereich hat zwei Zustände: den Platzhalter mit der Einwilligungsabfrage
   und, nach dem Klick, den geladenen Rahmen. Beide sollen gleich breit sein
   und gleich viel Platz einnehmen, damit nichts springt. */

.ig-embed {
  /* Instagram liefert die Einbettung mit 540 Pixeln Breite aus; darüber
     hinaus wird das Video nicht grösser, nur der graue Rand daneben. In der
     schmalen Detailspalte greift die Grenze ohnehin nie. */
  max-width: 540px;
}

.ig-embed__frame {
  display: block;
  width: 100%;
  /* Die Höhe setzt das Skript: als Startwert grosszügig, danach genau das,
     was Instagram für diesen Beitrag meldet. */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* Verweis und Widerruf unter dem geladenen Rahmen. Beide leise: Sie gehören
   zum Beitrag, sollen ihn aber nicht überstimmen. */
.ig-embed__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-xs);
  font-size: 0.8rem;
}

.ig-embed__link {
  color: var(--color-primary-dark);
  text-underline-offset: 3px;
}

.ig-embed__revoke {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ig-embed__revoke:hover {
  color: var(--color-text);
}

/* --- Der Platzhalter vor der Einwilligung -------------------------------
   Ein Kasten mit gestricheltem Rand: Er sieht sichtbar nach "hier fehlt noch
   etwas" aus und wird nicht mit einer Angabe zum Ausflugsziel verwechselt. */

.ig-embed__consent {
  padding: var(--space-md);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.ig-embed__consent-title {
  font-weight: 600;
  color: var(--color-text);
}

.ig-embed__consent-text {
  margin-top: var(--space-xs);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.ig-embed__consent-text a {
  color: var(--color-primary-dark);
  text-underline-offset: 3px;
}

.ig-embed__consent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
}

/* Der Hinweis, dass die Zustimmung dauerhaft gilt, steht UNTER dem Knopf,
   aber vor dem Klick - kleiner als der übrige Text, weil er die Einzelheit
   zur Entscheidung ist, nicht die Entscheidung selbst. */
.ig-embed__consent-note {
  margin-top: var(--space-sm);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* Auf der Zielseite steht der Bereich im Fliesstext einer Kachel und braucht
   etwas Luft nach oben - im Karten-Modal sitzt er bereits in einem eigenen
   Abschnitt mit Abstand. */
.place__section .ig-embed {
  margin-top: var(--space-sm);
}