/* ------------------------------------------------------------------ *
 *  INSTAGRAM FEED CARD — one component, used everywhere a client's
 *  finished reel is shown (home hero, work case studies, portal page).
 *
 *  Built to match a real feed post: header row (avatar, handle, verified
 *  tick, menu), the video, then the ACTION ROW UNDER the video — heart,
 *  comment, repost, share, each with its count, and the bookmark pushed
 *  to the right. Caption last, handle in bold.
 *
 *  Why CSS and not baked into the video: the old case-study clips had the
 *  chrome rendered into the mp4, so it squashed whenever the container
 *  wasn't exactly 480x854, the icons sat at whatever size the render used,
 *  and fixing a wrong icon meant re-encoding video. Everything here is
 *  vector, scales with --igw, and is edited in one place.
 * ------------------------------------------------------------------ */

.ig-card {
  --igw: 240px;                 /* the one dial: card width */
  width: var(--igw);
  flex: 0 0 var(--igw);
  background: #000;
  border-radius: calc(var(--igw) * 0.055);
  overflow: hidden;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .08);
}

/* ---- header ---- */
.ig-top {
  display: flex;
  align-items: center;
  gap: calc(var(--igw) * .038);
  padding: calc(var(--igw) * .045) calc(var(--igw) * .05);
}
.ig-av {
  width: calc(var(--igw) * .125);
  height: calc(var(--igw) * .125);
  border-radius: 50%;
  flex: none;
  background: linear-gradient(135deg, #f09433, #dc2743, #bc1888) center/cover;
  border: 1.5px solid #fff;
}
.ig-handle {
  font-size: calc(var(--igw) * .062);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ig-tick { width: calc(var(--igw) * .058); height: calc(var(--igw) * .058); flex: none; }
.ig-menu {
  margin-left: auto;
  color: #fff;
  font-size: calc(var(--igw) * .075);
  line-height: 0;
  letter-spacing: .5px;
  flex: none;
}

/* ---- video ---- */
.ig-media {
  position: relative;
  aspect-ratio: 9 / 16;          /* every card identical, whatever the source */
  background: #000;
  overflow: hidden;
}
.ig-media video,
.ig-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ig-mute {
  position: absolute;
  right: calc(var(--igw) * .045);
  bottom: calc(var(--igw) * .045);
  width: calc(var(--igw) * .105);
  height: calc(var(--igw) * .105);
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  display: grid;
  place-items: center;
  z-index: 2;
}
.ig-mute svg { width: 55%; height: 55%; }

/* ---- action row: the bit that was wrong ---- */
.ig-acts {
  display: flex;
  align-items: center;
  gap: 0;
  padding: calc(var(--igw) * .042) calc(var(--igw) * .042) calc(var(--igw) * .02);
}
.ig-act {
  display: flex;
  align-items: center;
  gap: calc(var(--igw) * .018);
  margin-right: calc(var(--igw) * .032);
}
.ig-act:last-of-type { margin-right: 0; }
.ig-ico {
  width: calc(var(--igw) * .066);
  height: calc(var(--igw) * .066);
  stroke: #fff;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.ig-n {
  font-size: calc(var(--igw) * .046);
  font-weight: 600;
  color: #fff;
  font-style: normal;
  white-space: nowrap;
}
.ig-save { margin-left: auto; margin-right: 0; }

/* ---- caption ---- */
.ig-cap {
  padding: 0 calc(var(--igw) * .05) calc(var(--igw) * .06);
  font-size: calc(var(--igw) * .058);
  line-height: 1.35;
  color: #d7dce3;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ig-cap b { color: #fff; font-weight: 700; }

/* ---- pairs ---- */
.ig-pair {
  display: flex;
  justify-content: center;
  align-items: flex-start;       /* tops align; no more one card floating higher */
  gap: 18px;
  flex-wrap: nowrap;
}
.ig-pair .ig-card:nth-child(2) { transform: translateY(20px); }

@media (max-width: 900px) {
  .ig-card { --igw: 200px; }
  .ig-pair { gap: 12px; }
}
@media (max-width: 560px) {
  .ig-card { --igw: 40vw; }
  .ig-pair { gap: 10px; }
  .ig-pair .ig-card:nth-child(2) { transform: translateY(12px); }
}