/* Social media examples page (social.html). Loaded only there. */

.soc-how { color: var(--slate); max-width: 46em; font-size: 1rem; margin-top: 16px; }

.soc-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px 48px; align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.soc-head h2 { margin: 10px 0 0; }
.soc-head .meta { margin: 0; color: var(--ink-2); }
.soc-head .soc-link { margin-top: 8px; }
.soc-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.8vw, 40px); align-items: start; }

.piece { margin: 0; min-width: 0; }
.piece-story, .piece-reel { width: min(100%, 320px); justify-self: center; }
.piece figcaption { margin-top: 12px; font-size: 0.9rem; color: var(--slate); }
.piece figcaption b { color: var(--ink); }

/* A plain phone-feed frame: avatar, handle, the piece, a caption. No counts on purpose. */
.ig { position: relative; background: var(--white); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(28, 35, 51, 0.05), 0 12px 32px rgba(28, 35, 51, 0.08); }
.ig-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 0.85rem; font-weight: 700; line-height: 1.2; }
.ig-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 500 0.95rem/1 var(--serif); box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--mark); }
.ig-media { position: relative; overflow: hidden; background: var(--paper-2); }
.r45 { aspect-ratio: 4 / 5; }
.r916 { aspect-ratio: 9 / 16; }
.ig-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ig-actions { display: flex; gap: 14px; padding: 11px 12px 0; }
.ig-actions svg, .seq-ui svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.ig-actions span { flex: 1; }
.ig-cap { margin: 0; padding: 8px 12px 14px; font-size: 0.86rem; line-height: 1.45; color: var(--ink-2); }
.ig-cap b { color: var(--ink); }

/* Carousel */
.car-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.car-track::-webkit-scrollbar { display: none; }
.car-track img { flex: 0 0 100%; scroll-snap-align: start; }
.car-track:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.car-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; padding: 0 0 3px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.94); color: #1C2333; font: 400 22px/1 var(--sans); cursor: pointer; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28); }
.car-btn.prev { left: 8px; }
.car-btn.next { right: 8px; }
.car-btn[hidden] { display: none; }
.no-js .car-btn { display: none; }
.car-dots { position: absolute; left: 0; right: 0; bottom: 9px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.car-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.65); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
.car-dots i.on { background: #fff; transform: scale(1.3); }

/* Stories and reels: frames that advance on their own, with a pause button */
.ig-tall { border-radius: 22px; background: #15171C; border-color: #15171C; }
.ig-tall .ig-head { position: absolute; z-index: 4; left: 0; right: 44px; top: 16px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); pointer-events: none; }
.ig-tall .ig-av { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); }
.ig-tall .ig-cap { color: #C9CCD4; }
.ig-tall .ig-cap b { color: #fff; }
.seq::before, .seq::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.seq::before { top: 0; height: 84px; background: linear-gradient(rgba(0, 0, 0, 0.42), transparent); }
.seq::after { bottom: 0; height: 76px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.46)); }
.seq img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease; }
.seq img.on { opacity: 1; }
.seq[data-seq="reel"] img.on { animation: soc-zoom 4s ease-out both; }
@keyframes soc-zoom { from { transform: scale(1.07); } to { transform: scale(1); } }
.seq-bars { position: absolute; z-index: 4; top: 8px; left: 10px; right: 10px; display: flex; gap: 4px; }
.seq-bars i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, 0.42); overflow: hidden; }
.seq-bars b { display: block; height: 100%; width: 0; background: #fff; }
.seq-bars i.done b { width: 100%; }
.seq-bars i.on b { animation: soc-fill var(--dur, 3.6s) linear forwards; }
.seq.paused .seq-bars i.on b { animation-play-state: paused; }
@keyframes soc-fill { to { width: 100%; } }
.seq-ui { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.seq-ui svg { stroke: #fff; }
.seq-ui span { flex: 1; height: 32px; border: 1.5px solid rgba(255, 255, 255, 0.85); border-radius: 999px; }
.seq[data-seq="reel"] .seq-ui { justify-content: flex-end; }
.seq-next { position: absolute; inset: 0; z-index: 3; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.seq-next:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.seq-toggle { position: absolute; z-index: 5; right: 10px; top: 16px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.4); cursor: pointer; }
.seq-toggle::before { content: ""; position: absolute; left: 12px; top: 11px; width: 10px; height: 12px; border-left: 3.5px solid #fff; border-right: 3.5px solid #fff; box-sizing: border-box; }
.seq-toggle[aria-pressed="true"]::before { left: 14px; top: 10px; width: 0; height: 0; border: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid #fff; }
.seq-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.no-js .seq-toggle, .no-js .seq-next { display: none; }

.soc-notes .steps { margin-top: 8px; }
.soc-credits { margin-top: 40px; max-width: 60em; }

@media (max-width: 900px) {
  .soc-head { grid-template-columns: 1fr; }
  .soc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .soc-row { grid-template-columns: 1fr; gap: 28px; }
  .piece { width: min(100%, 400px); justify-self: center; }
  .piece-story, .piece-reel { width: min(100%, 300px); }
}
@media (prefers-reduced-motion: reduce) {
  .seq img { transition: none; }
  .seq[data-seq="reel"] img.on { animation: none; }
}