/* Momnt case study, part 2: admin panel band, results chat and
   the responsive rules for the whole page. Tokens live in case-momnt.css. */

/* ---------- admin panel: full-bleed band + profile tabs ---------- */
.mo-admin { background: linear-gradient(180deg, var(--mo-night), #1d0b05 55%, var(--mo-black)); }
.mo-admin .cs-head { align-items: end; }
.mo-admin__lead { max-width: 520px; margin: 0; font-size: 17px; line-height: 1.65; color: var(--mo-text); }
.mo-admin__band { margin: clamp(40px, 5vw, 72px) calc(var(--gutter) * -1) 0; }
.mo-admin__band img { display: block; width: 100%; height: auto; mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%); }

/* ---------- results: a conversation ---------- */
.mo-out { background: radial-gradient(70% 60% at 80% 100%, rgb(255 106 19 / 24%), transparent 70%), var(--mo-night); }
.mo-out__head { display: grid; justify-items: center; gap: 16px; text-align: center; }
.mo-out__head .cs-kicker { margin: 0; }
.mo-out__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(40px, 5vw, 72px); }
.mo-chat { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mo-chat__msg { display: grid; gap: 6px; max-width: 86%; }
.mo-chat__msg p { margin: 0; padding: 16px 20px; border-radius: 22px 22px 22px 6px; background: var(--mo-brown); font-size: 16px; line-height: 1.55; color: var(--mo-cream); }
.mo-chat__who { padding-left: 6px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 244 236 / 50%); }
.mo-chat__msg--me { align-self: flex-end; justify-items: end; }
.mo-chat__msg--me p { border-radius: 22px 22px 6px; background: var(--accent); color: var(--mo-black); }
.mo-chat__msg--me .mo-chat__who { padding: 0 6px 0 0; }
.mo-chat__typing { display: flex; gap: 5px; align-self: flex-start; padding: 16px 18px; border-radius: 22px 22px 22px 6px; background: var(--mo-brown); }
.mo-chat__typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--mo-amber); animation: mo-dot 1.2s ease-in-out infinite; }
.mo-chat__typing i:nth-child(2) { animation-delay: .15s; }
.mo-chat__typing i:nth-child(3) { animation-delay: .3s; }
.mo-out__shot { margin: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 106 19 / 30%); }
.mo-out__shot img { display: block; width: 100%; height: auto; }
@keyframes mo-dot { 30% { transform: translateY(-4px); opacity: .5; } }
.mo-out__shot--scroll { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 4% 0; background: radial-gradient(60% 70% at 50% 55%, rgb(255 106 19 / 22%), rgb(255 106 19 / 6%) 70%), #fff5ee; }
.mo-sc__phone { position: relative; height: 100%; aspect-ratio: 9 / 19.5; padding: 2.2%; border-radius: 13% / 6%; background: #16110e; box-shadow: 0 0 0 1px rgb(255 255 255 / 8%) inset, 0 30px 60px -20px rgb(60 20 0 / 45%), 0 12px 24px -12px rgb(60 20 0 / 30%); }
.mo-sc__phone::after { content: ""; position: absolute; top: 3.4%; left: 50%; width: 30%; height: 3.2%; transform: translateX(-50%); border-radius: 99px; background: #16110e; z-index: 2; }
.mo-sc__screen { position: relative; height: 100%; overflow: hidden; border-radius: 11% / 5.2%; background: #fff; }
.mo-out__shot--scroll .mo-sc__screen img { width: 100%; height: auto; will-change: transform; animation: mo-scroll 16s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes mo-scroll {
  0%, 8% { transform: translateY(0); }
  22%, 30% { transform: translateY(-16%); }
  44%, 52% { transform: translateY(-33%); }
  66%, 76% { transform: translateY(-49%); }
  94%, 100% { transform: translateY(0); }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .mo-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mo-hero__meta { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
  .mo-out__grid { grid-template-columns: 1fr; }
  .mo-chat { max-width: 640px; width: 100%; margin: 0 auto; }
}
@media (max-width: 720px) {
  .mo-hero { padding-top: 112px; }
  .mo-hero__grid { grid-template-columns: 1fr; gap: 8px; }
  .mo-hero__phone { margin: 0 -12px; }
  .mo-hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .mo-two__shot { border-radius: 20px; }
  .mo-two__sides { grid-template-columns: 1fr; gap: 20px; text-align: left; }
  .mo-two__sides > div:last-child { text-align: left; justify-items: start; }
  .mo-two__heart { width: 44px; height: 44px; background-size: 20px; }
  .mo-chat__msg { max-width: 92%; }
  .mo-chat__msg p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .mo-mark__wave i, .mo-chat__typing i, .mo-out__shot--scroll .mo-sc__screen img { animation: none; }
}

.mo-out__shot--ad { aspect-ratio: auto; padding: 0; background: none; overflow: hidden; border-radius: 28px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 22%); }
.mo-out__shot--ad::after { content: ""; position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / 22%); border-radius: inherit; pointer-events: none; }
.mo-out__shot--ad { position: relative; }
.mo-out__shot--ad img { display: block; width: 100%; max-width: 1536px; height: auto; }