/* ==========================================================================
   instagram-module — Insta-Post-Nachbildung
   Figma: node 1:3600 (Modul) / 1:3583 (Header, KEIN eigener Hintergrund --
   siehe Kommentar bei .insta-header unten). Referenziert nur Werte aus
   tokens.css, siehe ARCHITECTURE.md.

   Referenz-Maße: 340 x 520 (Desktop-Referenz 1280px) -- das ist der
   DEFAULT-Zustand, siehe DEFAULT_STATE in script.js. Das Modul ist per 8
   unsichtbaren Resize-Zonen (4 Kanten + 4 Ecken) frei in der Größe
   veränderbar: min. 260 x 360, max. 800 x 760. Position ist absolut
   (left/top in px, von script.js verwaltet), damit beim Ziehen einer
   Kante/Ecke die GEGENÜBERLIEGENDE Seite exakt an ihrer Bildschirm-
   position stehen bleibt (kein "zentriertes" Wachsen).

   Update (siehe Chat-Verlauf section-06):
   - .instagram-module-stage hat jetzt eine FESTE height:520px ("Hug" --
     entspricht exakt der initialen/Default-Modulhöhe aus script.js).
     Dadurch wächst die umgebende Spalte in section-06-text-social.css NIE
     mit, egal wie stark man das Modul reinzieht -- es ragt dann einfach
     visuell über die Stage hinaus (Modul ist position:absolute).
   - .instagram-module bekommt einen BASIS-z-index (2), nicht mehr nur
     während Drag/Resize -- damit es immer über benachbarten Sektionen
     liegt, falls es durch Resize dort hineinragt. Bleibt unter #site-nav
     (z-index: 10, siehe styles.css).
   - backdrop-filter: blur(16px) für einen Glass-Effekt -- reiner
     Effekt-Wert (wie die Box-Shadows unten), kein Farb-Token, daher hier
     direkt gesetzt statt in tokens.css. -webkit-Präfix für Safari/iOS.
   - Bilder/Videos im Content-Bereich kommen jetzt LIVE aus
     assets/images/insta/ (GitHub Contents API, siehe script.js) statt aus
     content.json -- flexible Anzahl, Til muss nur Dateien im Ordner
     hochladen/löschen. Videos: muted/loop/ohne Controls (siehe script.js).
   - NEU: jedes Bild/Video blendet einzeln ein, sobald es geladen ist
     (opacity 0 -> 1, siehe .insta-media/.is-loaded unten) statt instant
     zu erscheinen.

   Update 3 (Mobile: horizontaler statt vertikaler Scroll, siehe Chat):
   - Auf Mobile (<=768px) verhält sich der Content-Bereich komplett anders
     als auf Desktop: quadratisch (aspect-ratio 1/1, Breite = volle
     Modulbreite) statt fest 520px hoch, EINE Zeile statt gestapelter
     Sets/Spalten, Bilder in voller Höhe bei Original-Seitenverhältnis
     (height:100%, width:auto) statt voller Breite. Endloser Loop läuft
     entsprechend horizontal (scrollLeft statt scrollTop, siehe script.js
     measureAndReset()/scroll-Listener).
   - Damit die Höhe wirklich "hugt" (Header + quadratischer Bereich,
     nicht mehr die feste Default-Höhe), wird .instagram-module auf
     Mobile von position:absolute (Desktop: JS-verwaltete px-Werte für
     freies Draggen/Resizen) auf position:static umgestellt --
     applyState() in script.js setzt auf Mobile bewusst KEINE inline
     left/top/width/height mehr (siehe Kommentar dort), die Größe kommt
     dann vollständig aus dem normalen Content-Flow + dieser CSS.
   - Die 2-Spalten-Logik (.insta-set.is-row / .insta-col, siehe
     WIDE_BREAKPOINT in script.js) ist eine reine Desktop-Angelegenheit
     und wird auf Mobile per JS erzwungen deaktiviert (isWide bleibt
     immer false) -- entsprechend gibt es dafür keine Mobile-Regeln
     hier, .insta-set ist auf Mobile immer die flache Bild-Zeile.

   Update 2 (Bugfixes + Figma-Padding-Anpassung, siehe Chat):
   - BUGFIX: .insta-content-scroll fehlte margin:0 -- dadurch griff die
     globale a-Konvention (margin:-10px -6px, styles.css) durch und schob
     das Element unter den Header + ließ Bilder links über den Rand
     hinausragen. Siehe ausführlicher Kommentar bei .insta-content-scroll.
   - BUGFIX: .insta-header-link und .insta-content-scroll bekommen jetzt
     einen expliziten :hover-Override (opacity:1, filter:none), weil die
     globale a:hover-Konvention (Blur+Opacity) sonst ungewollt durchgriff.
   - Padding umstrukturiert (Figma-Node 1:3600 aktualisiert): .insta-header
     hat kein eigenes padding/gap mehr -- die Abstände wandern in die
     interaktiven Kind-Ebenen selbst (.insta-top-bar: pt/px 4px, kein pb;
     .insta-header-link: py 4px/px 8px), damit es keine "toten" Zonen
     zwischen Drag-Griff und Klick-Fläche gibt.

   Aufbau:
   - insta-header: insta-top-bar (Drag-Griff fürs ganze Modul, dekorativ:
     "Instagram" + 3 Punkte) + insta-header-link (Avatar + Handle +
     Follow-Button, komplett klickbar -> Instagram-Profil aus
     content.json, OHNE Hover-Effekt)
   - insta-content-scroll (scrollbar, ebenfalls komplett klickbar ->
     Instagram-Profil): Bilder/Videos behalten ihr Original-
     Seitenverhältnis, endlos wirkender Loop (3 Kopien, script.js setzt
     die Scroll-Position unsichtbar zurück, sobald ein Rand erreicht ist).
     Ab einer Modul-Breite von ca. 460px brechen die Elemente in zwei
     unabhängige Spalten um (echtes Masonry statt starrer Grid-Zeilen).
   - 8 unsichtbare Resize-Zonen (.resize-edge / .resize-corner) -- ab
     768px per pointer-events:none stillgelegt, siehe unten.
   ========================================================================== */

/* ---- Stage/Anker fürs Modul ----
   .instagram-module braucht einen position:relative-Elternrahmen, damit
   sein position:absolute (left/top in px, siehe script.js) relativ dazu
   greift -- sonst würde es sich am Body orientieren. */
.instagram-module-stage {
  position: relative;
  width: 100%;
  height: 520px; /* Hug: exakt die Default-Modulhöhe, siehe script.js */
}

.instagram-module {
  position: absolute; /* left/top/width/height werden von script.js
                          gesetzt, siehe initInstagramModule() */
  background: var(--color-blue-05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-grey-50);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  z-index: 2; /* immer über anderen Sektionen, aber unter #site-nav (10) */
}

.instagram-module.is-dragging,
.instagram-module.is-resizing {
  z-index: 3; /* waehrend Drag/Resize minimal darüber, bleibt unter der Nav */
}

/* ---- Header ----
   BEWUSST KEIN eigener Hintergrund: im aktuellen Figma-Node 1:3583 ist
   kein bg-white (mehr) gesetzt -- das Modul-Grau (--color-blue-05) bzw.
   jetzt der Blur scheinen absichtlich auch hinter dem Header durch. */
/* Update (Figma-Anpassung, siehe Chat): kein padding/gap mehr HIER --
   Til hat die Abstände in Figma bewusst von der äußeren Ebene in die
   interaktiven Kind-Ebenen (Top-Bar/Header-Link) verschoben, damit es
   keine "toten" Zonen zwischen Drag-Griff und Klick-Fläche gibt --
   jeder Pixel Innenabstand gehört jetzt zu genau einer interaktiven
   Fläche statt zu einem neutralen Zwischenraum. */
.insta-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Drag-Griff fürs gesamte Modul (siehe initInstagramModule() in script.js).
   user-select:none + touch-action:none verhindern, dass der Browser beim
   Ziehen über den Text eine Textauswahl startet (Maus UND Touch). Ab
   768px nur noch cursor:default (siehe Mobile-Regel unten) -- die
   eigentliche Sperre passiert in script.js.
   Padding oben/links/rechts (kein unten) -- schließt direkt an
   .insta-header-link an, kein Gap dazwischen (siehe Kommentar oben). */
.insta-top-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 4px 4px 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.insta-top-bar:active {
  cursor: grabbing;
}

.insta-top-bar-label {
  flex: 1 0 0;
  min-width: 0;
  padding: 0 4px;
  font-family: var(--font-copy-xs-family);
  font-size: var(--font-copy-xs-size);
  line-height: var(--font-copy-xs-line-height);
  letter-spacing: var(--font-copy-xs-letter-spacing);
}

/* Dekorative Punkte -- rein visuell (pointer-events:none), Teil der
   drag-baren Top-Bar-Fläche, nicht einzeln klickbar. */
.insta-fake-button {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 24px;
  background: var(--color-blue-05);
  box-shadow: inset 2px -3px 3px 0 var(--color-white), inset 4px 2px 7px 0 rgba(0, 43, 72, 0.31);
  pointer-events: none;
  flex-shrink: 0;
}

/* Komplett klickbar -> Instagram-Profil (content.json follow_url).
   Bewusst OHNE Hover-Effekt -- die globale a:hover-Konvention
   (opacity:0.6 + blur(4px), siehe styles.css) ist für Inline-Text-Links
   gedacht und wird hier über den :hover-Block unten explizit
   neutralisiert (siehe Bugfix-Kommentar dort). Padding jetzt py-4/px-8
   (Figma-Update: Abstand zur Top-Bar entsteht durch DIESES padding-top,
   nicht mehr durch einen Gap auf .insta-header). */
.insta-header-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 4px 8px;
  margin: 0;
  border-radius: 2px;
  overflow: hidden;
}

.insta-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}

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

.insta-handle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  flex: 1 0 0;
  min-width: 0;
}

.insta-handle p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.insta-handle-name {
  font-family: var(--font-copy-s-family);
  font-size: var(--font-copy-s-size);
  line-height: var(--font-copy-s-line-height);
  letter-spacing: var(--font-copy-s-letter-spacing);
}

.insta-handle-caption {
  font-family: var(--font-copy-xs-family);
  font-size: var(--font-copy-xs-size);
  line-height: var(--font-copy-xs-line-height);
  letter-spacing: var(--font-copy-xs-letter-spacing);
}

/* eatme-button (Figma-Komponente 1:3459), hier als Follow-Button.
   Referenziert --gradient-buttons-footer wie in tokens.css dokumentiert. */
.eatme-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 16px 2px;
  border-radius: 999px;
  background: var(--gradient-buttons-footer);
  box-shadow: inset 2px -3px 3px 0 var(--color-white), inset 4px 2px 7px 0 rgba(0, 43, 72, 0.31);
  flex-shrink: 0;
  font-family: var(--font-copy-s-family);
  font-size: var(--font-copy-s-size);
  line-height: var(--font-copy-s-line-height);
  letter-spacing: var(--font-copy-s-letter-spacing);
  white-space: nowrap;
}

/* ---- Content-Bereich: scrollbar, komplett klickbar -> Instagram-Profil
   (gleiches Link-Ziel wie der Header). Eigene Scrollbar ausgeblendet,
   damit der Endlos-Loop nicht sichtbar "ruckelt".

   BUGFIX (siehe Chat): margin:0 fehlte hier -- dadurch griff die globale
   a-Konvention aus styles.css (margin: -10px -6px, für Inline-Text-Links
   gedacht) ungebremst durch und hat das Element 10px nach oben (unter
   den Header) und 6px nach links/rechts verschoben/verbreitert -> Ursache
   für den Header-Überlapp UND das linksseitige Bild-Bleeding. Jedes
   <a>-Element, das hier als Fläche/Block genutzt wird (nicht als
   Inline-Text-Link), braucht IMMER ein eigenes margin:0 (oder einen
   anderen expliziten Wert), sonst wirkt die globale Konvention ungewollt
   nach. Gleiche Regel gilt für :hover, siehe unten. */
.insta-content-scroll {
  flex: 1 0 0;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 0 4px 4px;
  overflow-y: scroll;
  overflow-x: hidden;
  display: block;
  scrollbar-width: none;
}
.insta-content-scroll::-webkit-scrollbar {
  display: none;
}

/* BUGFIX (siehe Chat): die globale a:hover-Konvention (opacity:0.6 +
   blur(4px), siehe styles.css) hatte hier gegriffen, weil bisher keine
   spezifischere :hover-Regel existierte, die sie überschreibt -- Klick-
   Flächen wie diese sollen aber ausdrücklich OHNE den Hover-Effekt
   bleiben. transition wird mit auf "none" gesetzt, damit auch kein
   kurzes Auf-/Abblenden beim Hinein-/Heraushovern sichtbar wird. */
.insta-header-link:hover,
.insta-content-scroll:hover {
  opacity: 1;
  filter: none;
  transition: none;
}

/* .insta-grid hält die 3 "Sets" (Kopien der geladenen Bilder/Videos) für
   den Endlos-Loop übereinander gestapelt, einheitlicher 4px-Gap. */
.insta-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Ein Set = eine der 3 Kopien. Schmal (< WIDE_BREAKPOINT in script.js):
   normale vertikale Liste. Breit (.is-row): zwei UNABHÄNGIGE Spalten
   nebeneinander (kein CSS-Grid, siehe Begründung: Grid würde beide
   Spalten in dieselbe Zeilenhöhe zwingen). */
.insta-set {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.insta-set.is-row {
  flex-direction: row;
  align-items: flex-start;
}

.insta-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 0 0;
  min-width: 0;
}

/* Bilder/Videos behalten ihr Original-Format (kein erzwungener
   Square-Crop) -- Höhe ergibt sich aus dem intrinsischen
   Seitenverhältnis der jeweiligen Datei. */
.insta-image {
  position: relative;
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
  background: var(--color-white); /* scheint als "Ladeplatzhalter" durch,
                                       solange .insta-media noch opacity:0 ist */
}

/* NEU: jedes Bild/Video ist zunächst unsichtbar (opacity:0) und blendet
   individuell ein, sobald es geladen ist (Klasse is-loaded wird von
   script.js gesetzt, siehe waitForMedia()/makeMediaEl()) -- kein
   Batch-Reveal, jedes Element für sich, kein Warten auf die anderen. */
.insta-media {
  width: 100%;
  height: auto;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.insta-media.is-loaded {
  opacity: 1;
}

/* Einzige Ausnahme von "Original-Format": das jeweils letzte Element
   einer Spalte kann per JS auf eine explizite Höhe gestreckt werden,
   damit beide Spalten eines Sets bündig enden. Gilt gleichermaßen für
   Bilder und Videos. */
.insta-image.is-stretched .insta-media {
  height: 100%;
  object-fit: cover;
}

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

/* ---- Resize-Zonen: 4 Kanten + 4 Ecken, komplett unsichtbar (kein Icon --
   nur der Cursor zeigt an, dass hier gezogen werden kann). Ecken liegen
   über den Kanten (höherer z-index), damit dort die diagonalen Cursor
   greifen statt der Kanten-Cursor. ---- */
.resize-edge,
.resize-corner {
  position: absolute;
  touch-action: none;
}

.resize-edge.n { top: -4px; left: 8px; right: 8px; height: 8px; cursor: ns-resize; z-index: 5; }
.resize-edge.s { bottom: -4px; left: 8px; right: 8px; height: 8px; cursor: ns-resize; z-index: 5; }
.resize-edge.e { right: -4px; top: 8px; bottom: 8px; width: 8px; cursor: ew-resize; z-index: 5; }
.resize-edge.w { left: -4px; top: 8px; bottom: 8px; width: 8px; cursor: ew-resize; z-index: 5; }

.resize-corner.nw { top: -4px; left: -4px; width: 14px; height: 14px; cursor: nwse-resize; z-index: 6; }
.resize-corner.ne { top: -4px; right: -4px; width: 14px; height: 14px; cursor: nesw-resize; z-index: 6; }
.resize-corner.sw { bottom: -4px; left: -4px; width: 14px; height: 14px; cursor: nesw-resize; z-index: 6; }
.resize-corner.se { bottom: -4px; right: -4px; width: 14px; height: 14px; cursor: nwse-resize; z-index: 6; }

/* ---- Empty-State (siehe script.js: wird eingefügt, falls der
   Insta-Ordner leer ist oder die GitHub-API nicht erreichbar war) ---- */
.insta-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  text-align: center;
  font-family: var(--font-copy-xs-family);
  font-size: var(--font-copy-xs-size);
  line-height: 1.6;
  letter-spacing: var(--font-copy-xs-letter-spacing);
  color: var(--color-black);
}

/* ---- Mobile (siehe tokens-notes.md: 768px ist der verbindliche,
   fest verdrahtete Breakpoint für alle Sektionen) ----
   Modul wird JS-seitig auf Default-Größe/-Position zurückgesetzt (siehe
   script.js applyMobileReset()); hier zusätzlich die Interaktion
   stillgelegt, damit auf Touch-Geräten kein versehentliches Ziehen/
   Resizen an den (unsichtbaren) Zonen passiert. */
@media (max-width: 768px) {
  .instagram-module .resize-edge,
  .instagram-module .resize-corner {
    pointer-events: none;
  }

  .insta-top-bar {
    cursor: default;
  }

  /* ---- Modul: statt frei positioniert (Desktop) jetzt normaler
     Block-Fluss, volle Breite. Höhe ergibt sich aus Header + dem
     quadratischen Content-Bereich unten (kein "Hug" auf feste 520px
     mehr -- das war die Default-Modulhöhe fürs freie Resizen, die es
     auf Mobile gar nicht gibt). script.js setzt hier bewusst KEINE
     inline left/top/width/height mehr (siehe applyState()), sonst
     würden die von Desktop übernommenen px-Werte diese Regeln
     überschreiben. */
  .instagram-module-stage {
    height: auto;
  }

  .instagram-module {
    position: static;
    width: 100%;
  }

  /* ---- Content-Bereich: quadratisch statt vertikal scrollend.
     aspect-ratio 1/1 auf der vollen Modulbreite ersetzt die feste
     Höhe -- overflow-x scrollt, overflow-y ist gesperrt (nur noch eine
     Zeile, kein vertikaler Inhalt mehr).
     BUGFIX (siehe Chat, Live-Check 28.08.2026): die Desktop-Basisregel
     setzt `flex: 1 0 0` -- also eine explizite flex-basis:0, die dann
     in den freien Platz des fest-hohen Desktop-Moduls (520px) reinwächst.
     Auf Mobile ist das Modul aber height:auto (hugt nur den Header,
     siehe oben) -- es gibt keinen freien Platz zum Reinwachsen, und die
     flex-basis:0 überschreibt dabei die eigentlich gewünschte
     aspect-ratio-Höhe, wodurch der Bereich auf ~0 Höhe zusammenklappte.
     `flex: none` hier hebt das auf, erst dann greift aspect-ratio. */
  .insta-content-scroll {
    flex: none;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 4px;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  /* Sets liegen jetzt NEBENEINANDER (statt gestapelt) -- jedes Set ist
     wie im schmalen Desktop-Fall (isWide:false, siehe script.js) eine
     flache Liste ohne Spalten, hier per flex-direction:row einfach zu
     einer Bild-Zeile gedreht. */
  .insta-grid {
    flex-direction: row;
    height: 100%;
  }

  .insta-set {
    flex-direction: row;
    width: auto;
    height: 100%;
    flex-shrink: 0;
  }

  /* Kein width:100% mehr -- die Breite jedes Bildes ergibt sich jetzt
     aus seiner Höhe (=volle Containerhöhe) x Original-Seitenverhältnis,
     nicht umgekehrt wie auf Desktop. */
  .insta-image {
    width: auto;
    height: 100%;
    flex-shrink: 0;
  }

  .insta-media {
    width: auto;
    height: 100%;
  }
}