/* ==========================================================================
   AI Projects — grid + case study
   The ported case studies were authored against everflo's token names
   (--bg/--panel/--ice/--dim/--gold...). Rather than rewrite every rule, the
   .mc-case scope below rebinds those same names to MotionCircles values:
   dark #0f0f1e ground, purple->magenta->pink accent, Outfit type.
   ========================================================================== */

/* These pages deliberately avoid the theme's .mcs-page body class: it forces
   h1/h2/h3 sizes, weights and font-family with !important, which would flatten
   both the grid cards and the ported case-study type scales. The handful of
   base rules that class provided are restored here instead. */
.mcp-page {
  background: #0f0f1e;
  color: #fff;
  min-height: 100vh;
  margin: 0;
}
.mcp-page a { text-decoration: none; }

.mcp-scope {
  --mcp-bg: #0f0f1e;
  --mcp-panel: #1a1a2e;
  --mcp-panel-2: #231d3d;
  --mcp-text: #ffffff;
  --mcp-dim: #94a3b8;
  --mcp-faint: #6b7a90;
  --mcp-violet: #7c3aed;
  --mcp-magenta: #c026d3;
  --mcp-pink: #ec4899;
  --mcp-line: rgba(255, 255, 255, .09);
  --mcp-grad: linear-gradient(135deg, #7c3aed 0%, #9333ea 40%, #c026d3 70%, #ec4899 100%);
  /* .mcs-nav__inner is content-box: max-width 1320 + 24px padding, so its
     content (the logo, the Sign Up button) spans 1320 inside a 1368 outer box.
     These wrappers are border-box, so they need 1368 to put their content on
     the same 1320 — otherwise every section sits 24px inboard of the nav. */
  --mcp-col: 1368px;

  background: var(--mcp-bg);
  color: var(--mcp-text);
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.mcp-scope *,
.mcp-scope *::before,
.mcp-scope *::after { box-sizing: border-box; }

/* The theme applies global layout to bare element selectors (header is
   display:grid, for one). These pages are self-contained, so neutralise that
   before it rearranges the hero and section stack. */
.mcp-scope header,
.mcp-scope section,
.mcp-scope article { display: block; }
.mcp-scope figure { margin: 0; }

.mcp-wrap { max-width: var(--mcp-col); margin: 0 auto; padding: 0 24px; }
@media (max-width: 768px) { .mcp-wrap { padding: 0 16px; } }

/* The imported case studies each pin their own narrower container (1080px, or
   min(1060px,92vw)). Widen them to the site container so the case study body
   aligns with the nav exactly like the grid does. Needs to out-specify the
   .mc-case rules in the post's own <style>, which loads after this file. */
.mcp-scope .mc-case .wrap {
  width: auto;
  max-width: var(--mcp-col);
  margin-inline: auto;
  padding: 0 24px;
}
@media (max-width: 768px) { .mcp-scope .mc-case .wrap { padding: 0 16px; } }

/* The only pixel-capped block in the imported cases: a 4-up strip sized at
   680px against the old 1080px column (~63%). Rescaled to hold the same
   proportion in the wider container instead of stranding it on the left. */
.mcp-scope .mc-case .sys-more { max-width: 830px; }
.mcp-scope img, .mcp-scope video { max-width: 100%; display: block; }
.mcp-scope a { color: inherit; }

/* ───────────────────────────  archive hero  ─────────────────────────── */

/* Above-fold type mirrors the courses page: pill eyebrow in violet-300,
   Outfit 800 display heading, DM Sans body at 17px/1.7. */
.mcp-hero { padding: 84px 0 44px; }

.mcp-eyebrow {
  display: inline-block;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 1.65px;
  text-transform: uppercase; color: #a78bfa;
  background: rgba(124, 58, 237, .12);
  border-radius: 999px; padding: 6px 18px; margin: 0 0 22px;
}

.mcp-hero h1 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 5vw, 52px);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0 0 18px;
  text-wrap: balance;
  background: var(--mcp-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.mcp-lede {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 17px; font-weight: 400; line-height: 1.7;
  color: #d1d5db; max-width: 56ch; margin: 0;
}

/* ───────────────────────────  filters  ─────────────────────────── */

.mcp-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 30px 0 6px; border-bottom: 1px solid var(--mcp-line);
}
.mcp-filter {
  border: 1px solid var(--mcp-line); border-radius: 999px;
  padding: 9px 20px; font-size: .88rem; font-weight: 500;
  color: var(--mcp-dim); text-decoration: none; background: transparent;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
/* same hover as the site's filter pills */
.mcp-filter:hover {
  color: #fff; border-color: rgba(255, 255, 255, .12); background: #28284a;
}
.mcp-filter[aria-current="true"] {
  color: #fff; border-color: transparent; background: var(--mcp-grad);
}

/* ───────────────────────────  Behance-style grid  ─────────────────────── */

.mcp-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 44px 32px; padding: 44px 0 96px; list-style: none; margin: 0;
}
@media (max-width: 720px) { .mcp-grid { grid-template-columns: 1fr; gap: 30px; } }

.mcp-card { margin: 0; }

/* The whole card lifts as one unit — same as .mcs-product-card elsewhere on the
   site. Transforming only the thumbnail left the title and meta behind, which
   read as the image detaching from its own caption. */
.mcp-card a {
  text-decoration: none; display: block;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
.mcp-card a:hover,
.mcp-card a:focus-visible { transform: translateY(-6px); }

.mcp-thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px;
  overflow: hidden; background: var(--mcp-panel);
  border: 1px solid var(--mcp-line);
  transition: box-shadow .28s ease, border-color .28s ease;
}
.mcp-card a:hover .mcp-thumb,
.mcp-card a:focus-visible .mcp-thumb {
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
  border-color: rgba(192, 38, 211, .5);
}
.mcp-thumb img, .mcp-thumb video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}
.mcp-card a:hover .mcp-thumb img,
.mcp-card a:focus-visible .mcp-thumb img { transform: scale(1.05); }

/* hover-play preview sits above the still */
.mcp-thumb video {
  position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease;
}
.mcp-card a:hover .mcp-thumb video,
.mcp-card a:focus-visible .mcp-thumb video { opacity: 1; }

.mcp-badge {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  background: rgba(15, 15, 30, .78); backdrop-filter: blur(8px);
  border: 1px solid var(--mcp-line); border-radius: 999px;
  padding: 5px 12px; font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mcp-text);
}
.mcp-badge--gated { background: var(--mcp-grad); border-color: transparent; }

.mcp-card h2 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1.5rem; font-weight: 700; margin: 22px 0 8px;
  color: var(--mcp-text); line-height: 1.3;
  transition: color .18s ease;
}
.mcp-card a:hover h2 { color: #f0abfc; }
.mcp-meta {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--mcp-faint); margin: 0;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.mcp-meta span::after { content: '·'; margin-left: 8px; color: var(--mcp-line); }
.mcp-meta span:last-child::after { content: ''; }
.mcp-card p.mcp-tagline {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px; line-height: 1.65; color: #d1d5db;
  margin: 12px 0 0; max-width: 46ch;
}

.mcp-empty { padding: 60px 0 120px; color: var(--mcp-dim); }

/* ───────────────────────────  single: shell  ─────────────────────────── */

.mcp-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 26px 0 0; font-size: .88rem; color: var(--mcp-dim); text-decoration: none;
}
.mcp-back:hover { color: var(--mcp-text); }

/* The ported case-study markup lives inside .mc-case. Everflo's variable names
   are rebound here, so its original rules render in MotionCircles colours. */
.mc-case {
  --bg: #0f0f1e;
  --panel: #1a1a2e;
  --panel2: #231d3d;
  --ice: #ffffff;
  --dim: #94a3b8;
  --faint: #6b7a90;
  --gold: #c026d3;
  --gold-bright: #ec4899;
  --line: rgba(255, 255, 255, .09);
  --col: 1080px;
  color: var(--ice);
}
.mc-case h1 b, .mc-case .grad {
  background: var(--mcp-grad); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}

/* ───────────────────────────  single: email gate  ────────────────────── */

.mcp-gate-section { padding: 84px 0; border-top: 1px solid var(--mcp-line); }
.mcp-gate-card {
  display: grid; grid-template-columns: 300px 1fr; gap: 34px;
  background: var(--mcp-panel); border: 1px solid var(--mcp-line);
  border-radius: 16px; padding: 30px; align-items: center;
}
@media (max-width: 760px) { .mcp-gate-card { grid-template-columns: 1fr; } }
/* height is pinned so a theme img rule cannot stretch the poster out of ratio */
.mcp-gate-card img {
  border-radius: 10px;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.mcp-gate-card h2 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: clamp(28px, 3.5vw, 40px); font-weight: 800;
  line-height: 1.3; margin: 0 0 12px;
}
.mcp-gate-card h2 b {
  font-weight: 800; background: var(--mcp-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mcp-gate-card > div > p {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 17px; line-height: 1.7; color: #d1d5db;
  margin: 0 0 22px; max-width: 52ch;
}

.mcp-gate-form { display: flex; gap: 10px; flex-wrap: wrap; }
.mcp-gate-form input {
  flex: 1; min-width: 230px; background: var(--mcp-bg);
  border: 1px solid var(--mcp-line); border-radius: 999px;
  padding: 13px 20px; color: var(--mcp-text);
  font-family: inherit; font-size: .95rem;
}
.mcp-gate-form input::placeholder { color: var(--mcp-faint); }
.mcp-gate-form input:focus { outline: 2px solid var(--mcp-magenta); outline-offset: 1px; border-color: transparent; }
.mcp-gate-form button {
  background: var(--mcp-grad); background-size: 200% auto; color: #fff;
  border: 0; border-radius: 999px; padding: 13px 28px;
  font-family: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: box-shadow .25s ease, transform .2s ease, background-position .5s ease;
  box-shadow: 0 4px 22px rgba(124, 58, 237, .3);
}
.mcp-gate-form button:hover:not(:disabled) {
  background-position: 100% center; transform: translateY(-1px);
  box-shadow: 0 8px 30px rgba(124, 58, 237, .45);
}
.mcp-gate-form button:disabled { opacity: .55; cursor: not-allowed; }
.mcp-gate-note { font-size: .78rem; color: var(--mcp-faint); margin-top: 12px; }
.mcp-gate-status { margin-top: 10px; font-size: .88rem; min-height: 18px; }
.mcp-gate-status.is-error { color: #f87171; }

.mcp-gate-done {
  display: none; background: var(--mcp-panel-2);
  border: 1px solid var(--mcp-magenta); border-radius: 12px;
  padding: 18px 22px; font-size: .96rem;
}
.mcp-gate-done.is-visible { display: block; }
.mcp-gate-done b { color: #f0abfc; }
.mcp-gate-done a { color: #f0abfc; font-weight: 600; }

/* ───────────────────────────  single: next projects  ─────────────────── */

.mcp-next { padding: 0 0 96px; }
.mcp-next h2 {
  font-size: 1rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mcp-faint);
  margin: 0 0 26px; padding-top: 40px; border-top: 1px solid var(--mcp-line);
}