@import "./preview-phone.css";

/* An independent Instagram post floating to the right of one scrolling phone. */
.share-section { padding-block: 100px; }
.share-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 76px); }
.share-copy { position: relative; z-index: 2; }
.share-art.share-social-scene {
  container-type: inline-size; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; width: 100%; min-width: 0; min-height: 0;
  max-width: 540px; margin-inline: auto;
  font-family: Inter, Arial, sans-serif; line-height: 1.4; letter-spacing: 0;
}
.social-preview-card {
  container-type: inline-size; position: absolute; z-index: 5; top: 24%; right: 0; width: 45%; max-width: 244px;
  overflow: hidden; border: 1px solid #d8d8dc; border-radius: 20px;
  background: #fff; color: #191a1d;
  box-shadow: 0 2px 4px #00000014, 0 18px 36px #00000038, 0 38px 72px -12px #00000073;
}
.social-preview-card .social-preview-media { aspect-ratio: 4 / 3; }
/* the floating post mirrors the phone's current design (share-preview.js) */
.social-preview-card :is(.social-preview-media > img, .social-preview-caption, .social-preview-engagement b) { transition: opacity .26s ease; }
.social-preview-card.is-swapping :is(.social-preview-media > img, .social-preview-caption, .social-preview-engagement b) { opacity: 0; }
.social-preview-appbar { display: flex; align-items: center; flex: 0 0 12cqw; padding: 0 4.5cqw; border-bottom: 1px solid #efefef; }
.social-preview-wordmark { display: block; width: 35cqw; height: auto; }
.social-preview-feed { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; overflow-anchor: none; scrollbar-width: none; }
.social-preview-feed::-webkit-scrollbar { display: none; }
.social-preview-feed:focus-visible { outline: 2px solid #191a1d; outline-offset: -2px; }
.social-preview-feed-post { border-bottom: 1px solid #efefef; }
.social-preview-bottom-nav { display: flex; align-items: center; justify-content: space-between; flex: 0 0 13cqw; padding: 2cqw 6cqw 1cqw; border-top: 1px solid #eaeaea; }
.social-preview-bottom-nav > svg { width: 6.3cqw; height: 6.3cqw; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.social-preview-nav-avatar { display: grid; place-items: center; width: 6.5cqw; height: 6.5cqw; border-radius: 50%; background: #202722; color: #e6edb2; }
.social-preview-nav-avatar svg { width: 60%; height: 60%; fill: currentColor; }
.social-preview-head { display: flex; align-items: center; gap: 2.6cqw; min-height: 15cqw; padding: 2.5cqw 3.5cqw; }
.social-preview-avatar {
  display: grid; place-items: center; flex: 0 0 10cqw; height: 10cqw; border-radius: 50%;
  border: .55cqw solid transparent;
  background: linear-gradient(#202722, #202722) padding-box, conic-gradient(#bc28ab, #704bdb, #fa9f35, #ed4264, #bc28ab) border-box;
  color: #e6edb2; box-shadow: inset 0 0 0 .6cqw #fff;
}
.social-preview-avatar svg { width: 58%; height: 58%; fill: currentColor; }
.social-preview-owner { display: flex; flex-direction: column; gap: .6cqw; min-width: 0; }
.social-preview-owner strong { font-size: 4cqw; line-height: 1.2; font-weight: 600; }
.social-preview-owner small { font-size: 3.1cqw; line-height: 1.3; color: #777570; }
.social-preview-menu { display: flex; margin-left: auto; flex-shrink: 0; }
.social-preview-menu svg { display: block; width: 4.8cqw; height: 4.8cqw; fill: currentColor; }
.social-preview-media { position: relative; aspect-ratio: 1; width: 100%; overflow: hidden; background: #ece9e4; }
/* feed designs made at 3:4, Instagram's portrait grid ratio */
.social-preview-media.is-portrait { aspect-ratio: 3 / 4; }
.social-preview-media > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
.social-preview-engagement { display: flex; align-items: center; min-height: 11cqw; gap: 3.4cqw; padding: 0 3.5cqw; }
.social-preview-engagement > span { display: inline-flex; align-items: center; gap: 1.4cqw; }
.social-preview-engagement svg { width: 5.6cqw; height: 5.6cqw; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.social-preview-engagement .social-preview-liked svg { fill: #ff3040; stroke: #ff3040; }
.social-preview-engagement b { font-size: 3.5cqw; font-weight: 600; }
.social-preview-engagement .social-preview-save { margin-left: auto; }
.social-preview-caption { padding: 0 3.5cqw 3.5cqw; font-size: 3.5cqw; line-height: 1.45; }
.social-preview-caption > p:first-child { min-height: 2.9em; }
.social-preview-caption strong { font-weight: 600; }
.social-preview-hashtag { color: #234b70; }
.social-preview-comments { margin-top: 1.2cqw; color: #797979; }
.social-preview-time { margin-top: .7cqw; color: #797979; font-size: 2.8cqw; }
@media (max-width: 1000px) {
  .share-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; }
  .share-copy .display { font-size: clamp(36px, 4.7vw, 54px); }
}
@media (max-width: 800px) {
  .share-section { padding-block: 76px; }
  .share-layout { grid-template-columns: 1fr; gap: 40px; }
  .share-copy .display { font-size: clamp(40px, 6.4vw, 56px); }
  .share-copy .sub { max-width: 440px; }
}
@media (max-width: 480px) {
  .share-section { padding-block: 64px 54px; }
  .share-layout { gap: 34px; }
  .share-copy .display { font-size: clamp(36px, 9.8vw, 46px); }
  .preview-phone { width: 76%; }
  .social-preview-card { width: 48%; }
}
@keyframes social-post-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: no-preference) {
  .social-preview-card { animation: social-post-float 7s ease-in-out infinite; animation-play-state: paused; }
  .share-social-scene.is-preview-visible .social-preview-card { animation-play-state: running; }
}