/* Instagram-feed — bouwt alleen op tokens uit varve.css, geen eigen kleuren.
   Zet dit ná varve.css. De klassen beginnen met ig- zodat ze niets van de hub
   (.v-*) overschrijven; de vormen zijn expres dezelfde als .v-tile/.v-shot. */

.ig-feed { display: flex; flex-direction: column; gap: var(--space-4); }

/* Rijen op hun eigen inhoud, net als .v-grid bij de andere banden op de hub.
   Hier stond grid-auto-rows:1fr, zodat een tegel zonder onderschrift even hoog
   bleef als zijn buren. Dat werkte zolang de band één rij was, maar 1fr maakt
   álle rijen even hoog als de langste tegel in de héle band: met tientallen
   posts trok één lang onderschrift elke rij op tot een hoge grijze plaat onder
   het beeld. Binnen een rij rekken de tegels zich nog steeds naar de hoogste —
   dat doet grid vanzelf — en dat is precies zo ver als het moest gaan. */
.ig-lijst { display: grid; gap: var(--space-4); }
.ig-feed--band .ig-lijst   { grid-template-columns: repeat(3, 1fr); }
.ig-feed--raster .ig-lijst { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.ig-feed--strip .ig-lijst {
  grid-auto-flow: column;
  grid-auto-columns: 220px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-2);
}
.ig-feed--strip .ig-tegel { scroll-snap-align: start; }

/* ---- tegel --------------------------------------------------------------- */

.ig-tegel {
  text-decoration: none;
  color: var(--text-primary);
  background: var(--surface-card);
  border: var(--border-hair, 1px solid var(--border-hairline));
  display: flex;
  flex-direction: column;
  transition: var(--transition-control, 120ms ease);
}
.ig-tegel:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hard-accent);
  color: var(--text-primary);
}
.ig-feed--raster .ig-tegel { border: 0; background: none; }
.ig-feed--raster .ig-tegel:hover { box-shadow: none; }
.ig-feed--raster .ig-tegel:hover .ig-beeld { outline: 2px solid var(--red-600); outline-offset: -2px; }

.ig-beeld {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface-sunken);
  aspect-ratio: 1/1;
}
.ig-feed--band .ig-beeld {
  aspect-ratio: 16/9;
  border-bottom: var(--border-hair, 1px solid var(--border-hairline));
}
.ig-beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  z-index: 1;
}

/* Staand beeld in een liggende tegel: niet croppen maar centreren op een
   donker veld — dezelfde keuze als .v-shot--reel op de hub. Een reel die je
   tot 16:9 bijsnijdt is een reel zonder onderwerp. */
.ig-beeld--pillar { background: var(--ink-900); }
.ig-beeld--pillar img {
  inset: 0 auto;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translateX(-50%);
}

/* Ligt onder de foto: zichtbaar zolang die niet geladen is, en het vangnet
   als een bestand ontbreekt. */
.ig-cap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  text-align: center;
  background-image: var(--grid-overlay);
  background-size: var(--grid-overlay-size);
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.ig-beeld.heeft-beeld .ig-cap { opacity: 0; }
.ig-beeld--venster.heeft-beeld iframe { opacity: 1; }
/* Zolang hij laadt: hetzelfde rustige ademen als de skeletten hierboven. */
.ig-beeld--venster:not(.heeft-beeld) { animation: ig-adem 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ig-beeld--venster:not(.heeft-beeld) { animation: none } }
.ig-beeld.is-stuk img { display: none; }

.ig-merk {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 2px 5px;
  background: var(--red-600);
  color: var(--paper-000);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
}

/* Het vierkantje van het IG-glyph, zoals .v-shot--ig al op de hub staat. */
.ig-beeld--video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10, 10, 10, .35), transparent 45%);
}

.ig-lijf { display: flex; flex-direction: column; gap: 6px; padding: 14px var(--space-4); flex: 1; }
.ig-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ig-tekst { font: var(--type-body-sm); color: var(--text-secondary); }

.ig-tegel--wacht { pointer-events: none; }
.ig-tegel--wacht .ig-beeld { animation: ig-adem 1.4s ease-in-out infinite; }
@keyframes ig-adem { 0%, 100% { opacity: .5 } 50% { opacity: .85 } }
@media (prefers-reduced-motion: reduce) { .ig-tegel--wacht .ig-beeld { animation: none } }

.ig-voet {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
/* Niet --text-link: rood op de paginakleur haalt in donkere modus 2,7:1 en zakt
   daarmee door de AA-grens die deze stylesheet elders wél bewaakt. Zelfde
   afspraak als .v-social op de hub: inkt, en rood pas bij hover. */
.ig-voet a { color: var(--text-primary); text-decoration: none; }
.ig-voet a:hover { color: var(--text-accent); }
.ig-stempel { color: var(--text-muted); }

.ig-stuk {
  border: var(--border-hair, 1px solid var(--border-hairline));
  background: var(--surface-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ig-stuk-k {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ig-stuk-t { margin: 0; font: var(--type-body-sm); color: var(--text-secondary); }
.ig-stuk-a {
  color: var(--text-link);
  text-decoration: none;
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ---- overlay ------------------------------------------------------------- */

body.ig-vast { overflow: hidden; }

.ig-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  background: rgba(10, 10, 10, .72);
  overflow-y: auto;
  padding: var(--space-6);
}
.ig-overlay.is-open { display: grid; align-items: flex-start; }
.ig-ov-box {
  margin: auto;
  width: min(560px, 100%);
  background: var(--surface-page);
  border: var(--border-block, 2px solid var(--border-strong));
  box-shadow: var(--shadow-hard-accent);
}
.ig-ov-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: 10px var(--space-4);
  border-bottom: var(--border-hair, 1px solid var(--border-hairline));
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ig-ov-sluit {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.ig-doek { background: var(--ink-900); display: grid; place-items: center; }
.ig-doek img, .ig-doek video { display: block; max-width: 100%; max-height: 70vh; }
.ig-ov-lijf { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.ig-ov-tekst { margin: 0; font: var(--type-body-sm); color: var(--text-secondary); white-space: pre-wrap; }
.ig-ov-link {
  color: var(--text-link);
  text-decoration: none;
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .ig-feed--band .ig-lijst { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ig-feed--band .ig-lijst { grid-template-columns: 1fr; }
  .ig-feed--raster .ig-lijst { grid-template-columns: repeat(2, 1fr); }
}

/* ---- live insluiten in een gewone tegel ---------------------------------- */
/* Geen bestand, alleen de post-URL. De tegel blijft de tegel van de hub: vaste
   16:9, zelfde rand, zelfde hover, zelfde onderschrift. Alleen het beeld komt
   uit een frame.

   De bijsnede: Instagram zet een kopbalk van 54px boven het beeld. Het frame
   staat op een vaste 400px breed, wordt 54px omhoog geschoven en daarna op
   tegelbreedte geschaald (100cqw / 400px) — precies dezelfde container-query-
   schaal die .v-shot iframe op de hub al gebruikt voor de live previews. Wat
   overblijft in de tegel is het beeld zelf. */

.ig-beeld--venster {
  container-type: inline-size;
  background: var(--ink-900);
}
/* Het frame blijft onzichtbaar tot Instagram klaar is met tekenen; daaronder
   ademt de plaatshouder. Zo zie je niet meer hóe een tegel wordt opgebouwd,
   alleen dát hij verschijnt. */
.ig-beeld--venster iframe {
  opacity: 0;
  transition: opacity var(--dur-slow, 320ms) var(--ease-out, ease-out);
  position: absolute;
  top: 0;
  left: 0;
  width: 900px;               /* = FRAME_B in feed.js */
  height: 1500px;             /* ruim genoeg voor een 4:5-kader op 900 breed */
  border: 0;
  display: block;
  z-index: 1;
  background: var(--ink-900);
  transform-origin: top left;
  /* De transform zelf komt uit feed.js (snede): die hangt af van de verhouding
     van de post, en dat weet CSS niet. */
  /* De tegel is de link, niet het frame. Zonder dit vangt Instagram de klik en
     opent hij zijn eigen pagina in plaats van onze overlay. */
  pointer-events: none;
}

/* Titelrij, zoals .v-titlerow op de hub. */
.ig-titelrij { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.ig-titel { font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: -.01em; }
.ig-pijl { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--red-600); }
.ig-tekst[hidden] { display: none; }

/* De ingesloten kaart in de overlay: licht vlak in plaats van het zwarte doek,
   want Instagram's kaart is wit. De hoogte komt van meetMee(); loopt hij toch
   voorbij het scherm, dan scrollt de overlay eromheen. */
.ig-doek--insluit {
  background: var(--white);
  display: block;
  max-height: 78vh;
  overflow: auto;
}
.ig-doek--insluit iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
}
.ig-ov-tekst[hidden] { display: none; }

/* ---------- mozaïek ------------------------------------------------------- */
/* De regels staan niet hier maar in varve.css, onder `.v-mozaiek`. Het is een
   opmaakpatroon van de hub — de Projecten-, YouTube-, SoundCloud- en
   Spotify-band gebruiken het net zo goed — en twee kopieën die uit elkaar lopen
   is precies het soort fout dat je pas maanden later ziet. Met `mozaiek: true`
   zet montageFeed de klassen `v-mozaiek` en `is-staand|is-vierkant|is-liggend`
   neer; de vormgeving komt dan van varve.css, die elke pagina hier toch laadt. */