/* ============================================================
   social.css — Instagram/Facebook campaign pages.
   Adds platform icons + a phone "device" mockup on top of
   /style.css (tokens) and /examples.css (hero/badges/cta).
   ============================================================ */

/* platform icons: sensible default size everywhere */
.pi { width:20px; height:20px; flex:none; }

/* platform eyebrow + badges */
.plat-eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700; letter-spacing:.03em; color:var(--ink-2); background:#fff; border:1px solid var(--line); padding:6px 14px 6px 10px; border-radius:999px; margin-bottom:22px; }
.plat-eyebrow .pi { width:20px; height:20px; }
.pi-ig { color:#E1306C; }
.pi-fb { color:#1877F2; }
.plat-badges { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.plat-badge { display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 18px; font-weight:700; font-size:15px; color:var(--ink); box-shadow:var(--shadow-sm); }
.plat-badge .pi { width:22px; height:22px; }

/* phone device */
.device { width:300px; max-width:86vw; margin:46px auto 0; background:#0D1117; border-radius:40px; padding:10px; box-shadow:var(--shadow-lg); }
.device-screen { background:#fff; border-radius:31px; overflow:hidden; text-align:left; }

/* instagram-style post */
.ig-top { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid #f0eef0; }
.ig-ava { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#feda75,#d62976 55%,#962fbf); flex:none; }
.ig-meta { flex:1; line-height:1.2; }
.ig-meta strong { display:block; font-size:13.5px; color:var(--ink); }
.ig-meta span { font-size:11.5px; color:var(--ink-3); }
.ig-plat { width:20px; height:20px; }
.ig-top .pi { width:26px; height:26px; }
.ig-img { aspect-ratio:1/1; background:linear-gradient(135deg,#6366F1,#A855F7); display:flex; align-items:flex-end; padding:14px; }
.ig-img span { color:#fff; font-weight:700; font-size:15px; text-shadow:0 1px 8px rgba(0,0,0,.25); }
.ig-actions { display:flex; gap:16px; padding:11px 14px 4px; color:var(--ink); }
.ig-actions svg { width:23px; height:23px; }
.ig-caption { padding:2px 14px 12px; font-size:13px; color:var(--ink-2); line-height:1.45; }
.ig-caption strong { color:var(--ink); }
.ig-thread { border-top:1px solid #f0eef0; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.ig-row { display:flex; align-items:flex-start; gap:9px; }
.ig-cdot { width:8px; height:8px; border-radius:50%; margin-top:5px; flex:none; }
.ig-cdot.in { background:var(--ink-3); }
.ig-cdot.loop { background:var(--green); }
.ig-row strong { font-size:12.5px; color:var(--ink); display:block; }
.ig-row span { font-size:12.5px; color:var(--ink-2); }
.ig-badge { margin-left:auto; font-size:11px; font-weight:800; color:var(--green); background:#eafaf0; border-radius:999px; padding:3px 9px; align-self:center; flex:none; }

/* DM thread */
.dm-body { padding:14px; display:flex; flex-direction:column; gap:10px; min-height:230px; }
.dm-in { align-self:flex-start; background:#f1f0f2; color:var(--ink); padding:10px 13px; border-radius:16px 16px 16px 4px; font-size:13px; max-width:80%; }
.dm-draft { align-self:flex-end; background:var(--band-indigo); border:1px solid #e0ddfb; color:var(--ink); padding:11px 13px; border-radius:16px 16px 4px 16px; font-size:13px; max-width:85%; }
.dm-label { display:block; font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--indigo); margin-bottom:5px; }
.dm-approve { margin-top:9px; background:var(--indigo); color:#fff; text-align:center; font-weight:700; font-size:12.5px; padding:8px; border-radius:10px; }

/* content drafts list */
.content-head { padding:13px 14px; font-weight:800; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid #f0eef0; }
.content-item { display:flex; gap:11px; align-items:flex-start; padding:12px 14px; border-bottom:1px solid #f6f5f6; }
.ci-day { font-size:10.5px; font-weight:800; color:var(--indigo); background:var(--band-indigo); border-radius:7px; padding:4px 7px; flex:none; margin-top:2px; }
.content-item strong { display:block; font-size:13px; color:var(--ink); }
.content-item span { font-size:12px; color:var(--ink-2); line-height:1.4; }
.content-foot { padding:11px 14px; font-size:12px; font-weight:700; color:var(--indigo); text-align:center; }

@media (max-width:480px){ .device { margin-top:34px; } }