/* ============================================================
   RIK Netside — Instagram-seksjonen (stories + innlegg)
   Brukes på index.html (#nyheter) og nyheter.html (#instagram).
   Fallback (CTA-kort) ligger i HTML; js/instagram.js injiserer
   stories-rad og innleggskort når /api/instagram er konfigurert.
   Palett: navy/cream — aldri Instagrams rosa/oransje.
============================================================ */

/* ---------- Slot over news-grid ---------- */
.ig-stories-slot { margin-bottom: 20px; }

/* ---------- Fallback-CTA: "Følg @rik_linjeforening" ---------- */
.ig-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 28px;
  background: #ffffff;
  border: 1px solid rgba(51, 52, 75, 0.08);
  border-radius: 20px 26px 22px 28px;
  transition: transform 0.5s var(--ease), border-color 0.4s, box-shadow 0.4s;
}
.ig-cta:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 74, 173, 0.3);
  box-shadow: 0 26px 56px -22px rgba(0, 42, 102, 0.3);
}
.ig-cta:focus-visible {
  outline: 2px solid var(--rik-blue);
  outline-offset: 3px;
}
.ig-cta__ring {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    var(--rik-blue-dark),
    var(--rik-cream),
    var(--rik-blue),
    var(--rik-cream-2),
    var(--rik-blue-dark)
  );
}
.ig-cta__ring svg {
  width: 100%;
  height: 100%;
  padding: 12px;
  background: #ffffff;
  border-radius: 50%;
  color: var(--rik-blue-dark);
}
.ig-cta__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ig-cta__text strong {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--rik-slate-2);
}
.ig-cta__text strong em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.18em;
  color: var(--rik-blue);
}
.ig-cta__text > span {
  font-size: 14px;
  line-height: 1.5;
  color: var(--rik-gray);
}
.ig-cta__arrow {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 20px;
  color: var(--rik-blue);
  transition: transform 0.4s var(--ease);
}
.ig-cta:hover .ig-cta__arrow { transform: translateX(6px); }

/* ---------- Stories-rad (injisert av JS) ---------- */
.ig-stories__head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.ig-stories__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rik-blue);
  box-shadow: 0 0 0 0 rgba(0, 74, 173, 0.4);
  animation: soon-pulse 2.2s ease-in-out infinite;
}
.ig-stories__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rik-blue-dark);
}
.ig-stories__handle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--rik-blue);
}
.ig-stories__row {
  display: flex;
  gap: 20px;
  padding: 4px 2px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ig-stories__row::-webkit-scrollbar { display: none; }

.ig-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  transition: transform 0.5s var(--ease);
}
.ig-story:hover { transform: translateY(-4px); }
.ig-story:focus-visible {
  outline: 2px solid var(--rik-blue);
  outline-offset: 3px;
  border-radius: 14px;
}
.ig-story__ring {
  display: block;
  width: 76px;
  height: 76px;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    var(--rik-blue-dark),
    var(--rik-cream),
    var(--rik-blue),
    var(--rik-cream-2),
    var(--rik-blue-dark)
  );
}
.ig-story__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--rik-cream-soft);
  background: #ffffff;
}
.ig-story__time {
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--rik-gray);
  white-space: nowrap;
}

/* ---------- Innleggskort (bygger på .news__featured / .news__item) ---------- */
.ig-card__art { position: relative; }
.ig-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ig-card:focus-visible {
  outline: 2px solid var(--rik-blue);
  outline-offset: 3px;
}

/* Chip med lite Instagram-glyf */
.ig-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ig-chip svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ---------- Inntoning av injisert innhold ----------
   Bevisst IKKE .reveal/.reveal-stagger: IntersectionObserver i
   js/animations.js er allerede satt opp når dette injiseres, og
   ville latt innholdet stå usynlig. Egen animasjon i stedet. */
@keyframes ig-fade {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ig-in { animation: ig-fade 0.8s var(--ease) both; }

/* ---------- "Siste fra Instagram"-seksjonen på nyheter.html ---------- */
.slide--a-ig {
  background: var(--rik-cream-soft);
  display: block;
  padding: 60px 0 90px;
  overflow: clip;
}
.slide--a-ig .section-title { overflow-wrap: anywhere; }

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  .ig-cta { gap: 16px; padding: 18px 20px; }
  .ig-cta__ring { width: 48px; height: 48px; }
  .ig-cta__ring svg { padding: 10px; }
  .ig-cta__text strong { font-size: 15.5px; }
  .ig-cta__text > span { font-size: 13px; }
  .ig-stories-slot { margin-bottom: 16px; }
  .ig-stories__row { gap: 16px; }
  .ig-story__ring { width: 64px; height: 64px; }
  .slide--a-ig { padding: 40px 0 70px; }
}

/* ---------- Redusert bevegelse ---------- */
@media (prefers-reduced-motion: reduce) {
  .ig-in { animation: none !important; }
  .ig-cta,
  .ig-cta__arrow,
  .ig-story { transition: none !important; }
  .ig-cta:hover,
  .ig-story:hover { transform: none; }
  .ig-stories__dot { animation: none !important; }
}