/* Meta (CZ + RU) — элементы вне общего набора service.css */

/* стопка креативов в первом экране */
.mt-vis { position: relative; height: 470px; max-width: 480px; margin-left: auto; }
.mt-vis .sk-visual-bg { left: 12%; top: 8%; bottom: 0; }
.mt-ad { position: absolute; width: 46%; background: var(--bg); border-radius: 18px; padding: 10px; box-shadow: var(--shadow-float); }
.mt-ad img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }
.mt-ad-head { font: 400 11px 'IBM Plex Sans', system-ui, sans-serif; color: var(--text-muted); padding: 2px 2px 8px; }
.mt-ad-head b { color: var(--text); font-weight: 600; }
.mt-ad-1 { left: 0; top: 7%; transform: rotate(-4deg); z-index: 1; }
.mt-ad-3 { right: 0; top: 30%; transform: rotate(4deg); z-index: 1; }
.mt-ad-2 { left: 27%; top: 0; z-index: 2; box-shadow: var(--shadow-device); }
.mt-pill { left: 6%; bottom: 10px; }

/* тёмный блок с роликами */
.mt-video-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.mt-videos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mt-videos .sk-vid { background: var(--border-on-dark); }

/* примеры креативов */
.mt-creatives { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mt-creative { margin: 0; padding: 12px; }
.mt-creative img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }

@media (max-width: 1080px) {
  .mt-vis { margin: 0 auto; }
  .mt-video-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .mt-vis { height: 380px; max-width: 360px; }
  .mt-videos { grid-template-columns: repeat(2, 1fr); }
  .mt-creatives { grid-template-columns: 1fr 1fr; }
  .mt-creatives > :last-child { grid-column: 1 / -1; max-width: 50%; }
}

/* v2: в тёмной панели третий ролик в акцентной рамке, четвёртый — в абрикосовой */
.mt-videos > :nth-child(3) .sk-vid { box-shadow: 0 0 0 4px var(--accent); }
.mt-videos > :nth-child(4) .sk-vid { box-shadow: 0 0 0 4px var(--apricot); }
.mt-ad { background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.8); }
.mt-creative { background: var(--fill); }