/* Social Post Mockups — X · Instagram post / story · LinkedIn · Facebook · Threads, light/dark. Shared root lives in mockup.css. */

.mk-post { min-height: 0; padding: 12px 16px 10px; gap: 10px; --bg: #fff; --fg: #0f1419; --meta: #536471; --hairline: #eff3f4; --link: #1d9bf0; --act: #536471; }
.mk-post.framed { border-radius: 16px; }
.mk-post .mk-credit { padding: 6px 0 0; }
.sp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sp-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sp-names { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sp-names b { font-weight: 700; display: inline-flex; align-items: center; gap: 3px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-names b small { font-weight: 400; color: var(--meta); font-size: 13px; }
.sp-names span { color: var(--meta); font-size: 14px; display: inline-flex; align-items: center; gap: 3px; }
.sp-logo { display: inline-flex; flex-shrink: 0; margin-top: 2px; }
.sp-logo svg { width: 100%; height: 100%; }
.sp-text { font-size: 17px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-img { display: block; width: 100%; max-height: 520px; object-fit: cover; border-radius: 16px; border: 1px solid var(--hairline); }
.sp-time { color: var(--meta); font-size: 14px; }
.sp-time b { color: var(--fg); font-weight: 700; }
.sp-actions { display: flex; align-items: center; gap: 4px; color: var(--act); font-size: 13px; padding-top: 8px; border-top: 1px solid var(--hairline); }
.sp-actions span { display: inline-flex; align-items: center; gap: 6px; }
.sp-actions .is-liked { color: #f91880; }
.sp-right { margin-left: auto; }
.mk-verified { flex-shrink: 0; }

/* X */
.sp-x.sp-actions { justify-content: space-between; }
.mk-post.sp-x.dark { --bg: #000; --fg: #e7e9ea; --meta: #71767b; --hairline: #2f3336; --act: #71767b; }

/* Instagram post */
.mk-post.sp-instagram { padding: 0; gap: 0; --meta: #737373; --hairline: #dbdbdb; --fg: #000; --link: #00376b; }
.sp-ig-head { padding: 10px 12px; align-items: center; }
.sp-ig-head .sp-names b { font-size: 14px; font-weight: 600; } .sp-ig-head .sp-names span { font-size: 12px; color: var(--fg); }
.sp-ig-ring { outline: 2px solid #fff; box-shadow: 0 0 0 2px #e1306c, 0 0 0 3px #f77737; }
.sp-ig-img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; border: 0; }
.sp-ig-empty { display: flex; align-items: center; justify-content: center; background: #efefef; color: var(--meta); font-size: 14px; }
.sp-ig.sp-actions { padding: 10px 12px 6px; border: 0; gap: 14px; color: var(--fg); }
.sp-ig-likes, .sp-ig-cap, .sp-ig-more, .sp-ig-time { padding: 0 12px; font-size: 14px; }
.sp-ig-likes b { font-weight: 600; }
.sp-ig-cap { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; } .sp-ig-cap b { font-weight: 600; }
.sp-ig-more { color: var(--meta); margin-top: 6px; } .sp-ig-time { color: var(--meta); font-size: 11px; text-transform: uppercase; letter-spacing: .02em; margin: 6px 0 10px; }
.mk-post.sp-instagram.dark { --bg: #000; --fg: #f5f5f5; --meta: #a8a8a8; --hairline: #262626; --link: #e0f1ff; } .sp-instagram.dark .sp-ig-empty { background: #262626; }

/* Instagram story (9:16) */
.mk-post.sp-story { padding: 0; --bg: #000; --fg: #fff; }
.mk-post.sp-story.framed { border-radius: 28px; }
.sp-story { position: relative; width: 100%; aspect-ratio: 9 / 16; background: linear-gradient(160deg, #833ab4, #fd1d1d 55%, #fcb045); color: #fff; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.sp-story-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-story-top, .sp-story-bottom { position: relative; padding: 12px 14px; }
.sp-story-bar { height: 2px; background: rgba(255, 255, 255, .4); border-radius: 2px; margin-bottom: 10px; } .sp-story-bar i { display: block; width: 62%; height: 100%; background: #fff; border-radius: 2px; }
.sp-story-top .sp-who { gap: 8px; font-size: 14px; } .sp-story-top b { font-weight: 600; } .sp-story-top span { color: rgba(255, 255, 255, .8); }
.sp-story-text { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; }
.sp-story-text span { font-size: 24px; font-weight: 700; line-height: 1.25; background: rgba(0, 0, 0, .35); padding: 8px 14px; border-radius: 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sp-story-bottom { display: flex; align-items: center; gap: 14px; }
.sp-story-input { flex: 1; border: 1px solid rgba(255, 255, 255, .7); border-radius: 22px; padding: 10px 14px; font-size: 14px; color: rgba(255, 255, 255, .85); }

/* LinkedIn */
.mk-post.sp-linkedin { --fg: #000000e6; --meta: #00000099; --hairline: #e8e8e8; --link: #0a66c2; --act: #00000099; padding: 12px 0 4px; }
.sp-linkedin .sp-head, .sp-linkedin .sp-text, .sp-linkedin .sp-li-stats { padding: 0 16px; }
.sp-li-av { border-radius: 50%; } .sp-linkedin .sp-text { font-size: 14px; }
.sp-li-img { border-radius: 0; border: 0; }
.sp-li-stats { display: flex; justify-content: space-between; color: var(--meta); font-size: 12px; padding-bottom: 6px; }
.sp-li-reacts i { font-style: normal; font-size: 12px; margin-right: -3px; }
.sp-li.sp-actions { justify-content: space-around; font-size: 14px; font-weight: 600; padding: 4px 8px 0; }
.mk-post.sp-linkedin.dark { --bg: #1b1f23; --fg: #ffffffe6; --meta: #ffffff99; --hairline: #38434f; --act: #ffffff99; }

/* Facebook */
.mk-post.sp-facebook { --fg: #050505; --meta: #65676b; --hairline: #ced0d4; --link: #216fdb; --act: #65676b; padding: 12px 0 4px; }
.sp-facebook .sp-head, .sp-facebook .sp-text, .sp-facebook .sp-fb-stats { padding: 0 16px; } .sp-facebook .sp-text { font-size: 15px; }
.sp-fb-img { border-radius: 0; border: 0; }
.sp-fb-stats { display: flex; justify-content: space-between; color: var(--meta); font-size: 14px; padding-bottom: 6px; }
.sp-fb-stats i { font-style: normal; font-size: 13px; margin-right: -4px; }
.sp-fb.sp-actions { justify-content: space-around; font-size: 15px; font-weight: 600; padding: 4px 8px 0; } .sp-fb .is-liked { color: #1877f2; }
.mk-post.sp-facebook.dark { --bg: #242526; --fg: #e4e6eb; --meta: #b0b3b8; --hairline: #3e4042; --act: #b0b3b8; }

/* Threads */
.mk-post.sp-threads { --fg: #000; --meta: #999; --hairline: #dbdbdb; --link: #0095f6; --act: #000; }
.sp-th { display: flex; gap: 12px; }
.sp-th-col { display: flex; flex-direction: column; align-items: center; gap: 8px; } .sp-th-line { flex: 1; width: 2px; background: var(--hairline); border-radius: 2px; }
.sp-th-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sp-th-names { flex-direction: row; align-items: baseline; gap: 8px; } .sp-th-names b { font-size: 15px; font-weight: 600; }
.sp-threads .sp-text { font-size: 15px; }
.sp-th-actions.sp-actions { border: 0; padding-top: 2px; gap: 18px; color: var(--act); }
.sp-th-stats { color: var(--meta); font-size: 14px; }
.mk-post.sp-threads.dark { --bg: #101010; --fg: #f3f5f7; --meta: #777; --hairline: #333; --act: #f3f5f7; }