/* ════════════════════════════════════════════════════════
   sidami.html — only the Instagram phone mockup.
   The page itself reuses the site's design system (style.css);
   this file just adds the IG UI, which style.css has no rules for.
   ════════════════════════════════════════════════════════ */

.ig-mockup-outer {
  width: clamp(240px, 78vw, 320px);
  max-width: 100%;
  flex-shrink: 0;
  border-radius: 2.6rem;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.ig-mockup { width: 100%; border-radius: 2.6rem; overflow: hidden; clip-path: inset(0 round 2.4rem); }
.ig-phone {
  background: #fff;
  border-radius: 2.6rem;
  border: 8px solid #111;
  position: relative;
  overflow: hidden;
  clip-path: inset(0 round 2.1rem);
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  height: clamp(540px, 62vw, 640px);
  isolation: isolate;
}
.ig-status-bar { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 1.1rem 0.3rem; background: #fff; flex-shrink: 0; }
.ig-time { font-size: 0.72rem; font-weight: 600; color: #141210; letter-spacing: -0.01em; }
.ig-status-icons { display: flex; align-items: center; gap: 0.3rem; }
.ig-header { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0.9rem 0.4rem; background: #fff; border-bottom: 1px solid #efefef; flex-shrink: 0; }
.ig-logo { font-size: 0.95rem; font-weight: 700; color: #141210; letter-spacing: -0.01em; }
.ig-header-icons { display: flex; gap: 0.8rem; align-items: center; color: #141210; }
.ig-stories { display: flex; gap: 0.6rem; padding: 0.55rem 0.7rem; overflow-x: hidden; background: #fff; flex-shrink: 0; }
.ig-story { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; flex-shrink: 0; }
.ig-story__ring { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); padding: 2px; display: flex; align-items: center; justify-content: center; }
.ig-story__ring--you { background: #dbdbdb; }
.ig-story__avatar { width: 100%; height: 100%; border-radius: 50%; background: #141210; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; color: #fff; }
.ig-story__avatar--add { background: #fff; color: #0095F6; font-size: 0.8rem; font-weight: 400; }
.ig-story__name { font-size: 0.42rem; color: #262626; white-space: nowrap; max-width: 2.4rem; overflow: hidden; text-overflow: ellipsis; }
.ig-tabs { display: flex; gap: 1.5rem; padding: 0.3rem 0.9rem 0; background: #fff; flex-shrink: 0; }
.ig-tab { font-size: 0.62rem; font-weight: 500; color: #8e8e8e; padding-bottom: 0.3rem; }
.ig-tab.is-active { color: #262626; font-weight: 600; border-bottom: 1.5px solid #262626; }
.ig-tabs-bar { height: 1px; background: #efefef; flex-shrink: 0; }
.ig-feed-wrap { flex: 1; overflow: hidden; background: #fff; min-height: 0; position: relative; }
@keyframes ig-feed-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.ig-feed { width: calc(100% + 2px); margin-left: -1px; animation: ig-feed-scroll 26s linear infinite; }
.ig-feed-wrap:hover .ig-feed { animation-play-state: paused; }
.ig-post { border-bottom: 1px solid #efefef; }
.ig-post-header { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.7rem; }
.ig-post-avatar { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #000; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; padding: 0.28rem; }
.ig-post-avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ig-post-meta { flex: 1; display: flex; flex-direction: column; gap: 0.05rem; }
.ig-username { font-size: 0.6rem; font-weight: 600; color: #262626; }
.ig-post-time { font-size: 0.5rem; color: #8e8e8e; }
.ig-more-btn { font-size: 0.75rem; color: #262626; letter-spacing: 0.05em; }
.ig-post-image { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #1a1a1a; }
.ig-post-image img, .ig-post-image video { width: calc(100% + 2px); height: calc(100% + 2px); margin: -1px; object-fit: cover; object-position: center; display: block; outline: none; border: none; }
.ig-actions { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0.7rem 0.2rem; }
.ig-actions-left { display: flex; gap: 0.7rem; align-items: center; }
.ig-icon { width: 1.15rem; height: 1.15rem; color: #262626; display: block; flex-shrink: 0; }
.ig-likes, .ig-caption, .ig-comments-link, .ig-timestamp { padding: 0 0.7rem; font-size: 0.55rem; color: #262626; line-height: 1.5; }
.ig-likes { padding-top: 0.15rem; font-weight: 600; font-size: 0.52rem; }
.ig-caption { padding-top: 0.1rem; }
.ig-caption strong { font-weight: 600; }
.ig-more-link { color: #8e8e8e; }
.ig-comments-link { color: #8e8e8e; padding-top: 0.1rem; font-size: 0.5rem; }
.ig-timestamp { color: #8e8e8e; font-size: 0.45rem; letter-spacing: 0.06em; text-transform: uppercase; padding-bottom: 0.5rem; }

/* Bewegtbild — three portrait (9:16) reels in a row, reusing the
   site's .video-card styling. 3 cols desktop, 2 tablet, 1 phone. */
.sidami-videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.sidami-videos .video-card { aspect-ratio: 9 / 16; }
@media (max-width: 600px) {
  .sidami-videos { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; }
}

/* Instagram block layout (reuses .about-split grid from style.css) */
.sidami-ig { align-items: center; }
.sidami-ig__phone { display: flex; justify-content: center; min-width: 0; }

@media (prefers-reduced-motion: reduce) { .ig-feed { animation: none; } }
/* .about-split collapses to one column at <=768px (style.css) */
@media (max-width: 768px) {
  .sidami-ig__phone { margin-top: 2.5rem; }
}