/* CISTE Instagram Feed - estilo inspirado en Elfsight */
.ciste-igf-widget {
  position: relative;
  width: 100%;
  --ciste-igf-gap: 16px;
  --ciste-igf-cols: 5;
  --ciste-igf-bg: #dfe6c3;
  --ciste-igf-border: #cfd7a6;
  --ciste-igf-text: #111;
  --ciste-igf-muted: rgba(0,0,0,.65);
}

.ciste-igf-widget, .ciste-igf-widget * { box-sizing: border-box; }

@media (max-width: 1200px) { .ciste-igf-widget { --ciste-igf-cols: 3; } }
@media (max-width: 900px)  { .ciste-igf-widget { --ciste-igf-cols: 2; } }
@media (max-width: 600px)  { .ciste-igf-widget { --ciste-igf-cols: 1; } }

.ciste-igf-viewport { overflow: hidden; padding: 0; }

.ciste-igf-track {
  display: flex;
  user-select: none;
  gap: var(--ciste-igf-gap);
  padding: 0;
  margin: 0;
  will-change: transform;
  transition: transform 320ms ease;
  touch-action: pan-y;
}

.ciste-igf-card {
  flex: 0 0 calc((100% - (var(--ciste-igf-gap) * (var(--ciste-igf-cols) - 1))) / var(--ciste-igf-cols));
  max-width: 420px;
  border: 1px solid var(--ciste-igf-border);
  border-radius: 2px;
  color: var(--ciste-igf-text);
  background: var(--ciste-igf-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ciste-igf-card a { text-decoration: none; color: inherit; display: block; }
.ciste-igf-headlink .ciste-igf-user { color: #7b1b1b; }
.ciste-igf-headlink:hover .ciste-igf-user { text-decoration: underline; }

.ciste-igf-card-head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: var(--ciste-igf-bg);
}

.ciste-igf-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.06);
  object-fit: cover;
  flex: 0 0 34px;
}

.ciste-igf-meta { min-width: 0; }
.ciste-igf-user { font-weight: 700; font-size: 15px; line-height: 1.1; }
.ciste-igf-date {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ciste-igf-muted);
  letter-spacing: .4px;
}

.ciste-igf-media { position: relative; background: #000; }
.ciste-igf-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #eee;
}

.ciste-igf-igbadge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: rgba(255,255,255,.95);
  color: rgba(0,0,0,.55);
  display: grid;
  place-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

.ciste-igf-caption {
  padding: 12px;
  font-size: 14px;
  line-height: 1.25;
  background: var(--ciste-igf-bg);
  color: rgba(0,0,0,.85);
}

/* CTA final */
.ciste-igf-card--cta { cursor: pointer; }
.ciste-igf-cta-body { padding: 12px; background: var(--ciste-igf-bg); }
.ciste-igf-cta-text { font-size: 14px; line-height: 1.25; color: rgba(0,0,0,.85); font-weight: 600; }
.ciste-igf-cta-btn {
  margin-top: 10px;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.90);
  font-weight: 800;
  color: rgba(0,0,0,.75);
}

/* Flechas sobrepuestas */
.ciste-igf-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,.9);
  color: rgba(0,0,0,.7);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.ciste-igf-nav span { font-size: 24px; line-height: 1; margin-top: -2px; }
.ciste-igf-prev { left: 6px; }
.ciste-igf-next { right: 6px; }
.ciste-igf-nav[disabled] { opacity: .35; cursor: default; }

/* Mensajes */
.ciste-igf-error {
  padding: 10px 12px;
  border: 1px solid #d63638;
  background: #fff;
  color: #d63638;
  border-radius: 4px;
}
.ciste-igf-empty {
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  color: rgba(0,0,0,.75);
  border-radius: 4px;
}

/* Evitar overflow horizontal */
.ciste-igf-widget, .ciste-igf-viewport { overflow-x: hidden; }
.ciste-igf-card { min-width: 0; }
.ciste-igf-caption { word-break: break-word; overflow-wrap: anywhere; }

/* === Fallback mode (quan la connexió a Instagram falla) === */
.ciste-igf-widget--fallback { --ciste-igf-cols: 1; }
.ciste-igf-widget--fallback .ciste-igf-nav { display: none !important; }
.ciste-igf-card--fallback { flex: 0 0 100% !important; max-width: 100% !important; }

/* Debug discret (només admins) */
.ciste-igf-front-debug {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.9);
}
.ciste-igf-front-debug > summary {
  cursor: pointer;
  font-weight: 600;
}
.ciste-igf-front-debug-body {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(0,0,0,.78);
}