/* readability pass: +2px on every font-size (applied) */
/* =========================================================================
   Carousel media slot (Variant B). The phone shell, iOS and Instagram chrome
   come from ../../static-ad/phone.css; this file only styles the slide stage
   the way Instagram renders a sponsored carousel.
   ========================================================================= */
.post-media--car { aspect-ratio: 1080 / 1350; }

.cstage { position: relative; width: 100%; height: 100%; overflow: hidden; background: #070a09; touch-action: pan-y; user-select: none;
  -webkit-user-select: none; cursor: grab; }
.cstage.is-drag { cursor: grabbing; }
.ctrack { display: flex; height: 100%; transition: transform .42s cubic-bezier(.25, .8, .25, 1); will-change: transform; }
.ctrack.no-anim { transition: none; }
.cslide { flex: 0 0 100%; height: 100%; margin: 0; }
.cslide img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; pointer-events: none; }

/* Instagram's small white arrow discs, hidden at either end */
.cnav { position: absolute; top: 50%; z-index: 3; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; background: rgba(255, 255, 255, .84); color: #262626; cursor: pointer;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .22); transition: opacity .2s ease, transform .2s ease; }
.cnav svg { width: 12px; height: 12px; }
/* QA pass 3: bigger invisible hit area for the swipe arrows (the visible chip stays Instagram-sized) */
.cnav::after { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
.cnav:hover { transform: scale(1.06); }
.cnav--prev { left: 8px; }
.cnav--next { right: 8px; }
.cnav[disabled] { opacity: 0; pointer-events: none; }

/* n/N counter, fades out when the carousel sits still (like the app) */
.ig-count { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 4px 8px; border-radius: 13px; background: rgba(0, 0, 0, .62);
  color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: .02em; transition: opacity .45s ease; pointer-events: none; }
.ig-count.is-idle { opacity: 0; }

/* dots sit centred inside the action row, exactly where Instagram puts them */
.cdots { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; }
.cdots button { width: 6px; height: 6px; border-radius: 50%; border: 0; padding: 0; background: #c7c7c7; cursor: pointer;
  transition: background-color .2s ease; }
.cdots button.is-on { background: #0095f6; }

/* the callout bows out the moment they swipe */
.phone-wrap:has(#cprev:not([disabled])) .callout { opacity: 0; transition: opacity .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .ctrack, .cnav, .ig-count { transition: none; }
}

/* ---- mobile hardening (references/mobile.md) ---- */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
p, li, td, th, blockquote, figcaption, h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }
table, pre { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 700px) {
  [class*="row"], [class*="stack"] > *, [class*="item"], .it { flex-wrap: wrap; }
  .tag, [class*="badge"], [class*="pill"] { margin-left: 0; }
  [style*="grid-template-columns"], [class*="grid"] { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .tok-merge, .tok-link, code { white-space: normal; }
}
.cslide img { height: 100%; }
.cnav svg { height: 12px; }