/* MARCH AI — shared site chrome.
 * Layout, nav, footer, container, section, button primitives.
 * Page-specific styles go in site/_<page>.css.
 * Depends on colors_and_type.css for tokens.
 */

/* ── Container ──────────────────────────────────────────────────────── */
.m-wrap {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.m-wrap-narrow { max-width: 880px; }
.m-wrap-wide   { max-width: 1600px; }

@media (min-width: 768px) {
  .m-wrap, .m-wrap-narrow, .m-wrap-wide { padding-left: 32px; padding-right: 32px; }
}

/* ── Section primitives ─────────────────────────────────────────────── */
.m-section {
  padding-top: clamp(80px, 12vw, 160px);
  padding-bottom: clamp(80px, 12vw, 160px);
}
.m-section--dense {
  padding-top: clamp(60px, 8vw, 96px);
  padding-bottom: clamp(60px, 8vw, 96px);
}
.m-section--alt { background: var(--march-bg-alt); }
.m-section--dark {
  background: var(--march-bg-dark);
  color: var(--march-text-on-dark);
}

.m-row-meta {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: clamp(40px, 5vw, 72px);
  gap: 32px; flex-wrap: wrap;
}
.m-row-meta > div:first-child {
  display: flex; flex-direction: column; gap: 20px; max-width: 720px;
}

/* ── Top utility bar ────────────────────────────────────────────────── */
.m-topbar {
  background: var(--march-ink);
  color: var(--march-text-on-dark);
  font-size: 12px; letter-spacing: 0.04em;
}
.m-topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; gap: 24px; flex-wrap: wrap;
}
.m-topbar__left  { display: flex; gap: 20px; flex-wrap: wrap; color: var(--march-line-on-dark-strong); }
.m-topbar__right { display: flex; gap: 8px; align-items: center; }
.m-topbar a:hover { color: var(--march-amber); }
.m-lang { display: inline-flex; gap: 4px; }
.m-lang a { padding: 0 4px; color: rgba(245, 241, 232, 0.5); }
.m-lang a.is-current { color: var(--march-text-on-dark); }
.m-dot { color: rgba(245, 241, 232, 0.4); }

/* ── Nav ────────────────────────────────────────────────────────────── */
.m-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--march-glass);
  backdrop-filter: var(--march-glass-blur);
  -webkit-backdrop-filter: var(--march-glass-blur);
  border-bottom: 1px solid var(--march-line);
}
.m-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 80px; gap: 32px;
}
.m-nav__logo {
  font-family: var(--march-font-sans);
  font-weight: 600; font-size: 14px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--march-ink);
}
.m-nav__links { display: none; gap: 36px; }
@media (min-width: 1024px) { .m-nav__links { display: flex; } }
.m-nav__link {
  font-size: 15px; font-weight: 500;
  color: var(--march-text); padding: 8px 0;
  transition: color var(--march-dur-fast) var(--march-ease);
}
.m-nav__link:hover, .m-nav__link.is-active { color: var(--march-terracotta); }
.m-nav__cta {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 22px;
  background: var(--march-ink); color: var(--march-text-on-dark);
  font-size: 14px; font-weight: 500;
  border-radius: var(--march-radius-pill);
  transition: background var(--march-dur) var(--march-ease);
}
.m-nav__cta:hover { background: var(--march-terracotta); }
.m-nav__cta::after { content: "→"; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.m-btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 32px;
  font-family: var(--march-font-sans);
  font-size: 15px; font-weight: 500;
  border: 0; cursor: pointer;
  border-radius: var(--march-radius-pill);
  transition: background var(--march-dur) var(--march-ease),
              color var(--march-dur) var(--march-ease),
              border-color var(--march-dur) var(--march-ease),
              transform var(--march-dur) var(--march-ease);
}
.m-btn::after { content: "→"; }
.m-btn--no-arrow::after { content: none; }
.m-btn--primary { background: var(--march-terracotta); color: var(--march-text-on-accent); }
.m-btn--primary:hover { background: var(--march-terracotta-hover); transform: translateY(-1px); }
.m-btn--ghost { background: transparent; color: var(--march-text); border: 1px solid var(--march-line-strong); }
.m-btn--ghost:hover { border-color: var(--march-ink); color: var(--march-ink); }
.m-btn--ghost-dark { background: transparent; color: var(--march-text-on-dark); border: 1px solid var(--march-line-on-dark-strong); }
.m-btn--ghost-dark:hover { border-color: var(--march-text-on-dark); }
.m-btn--secondary { background: var(--march-ink); color: var(--march-text-on-dark); }
.m-btn--secondary:hover { background: var(--march-terracotta); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.m-footer {
  background: var(--march-ink); color: var(--march-text-on-dark);
  padding: clamp(80px, 12vw, 120px) 0 48px;
}
.m-footer__brand {
  font-family: var(--march-font-display);
  font-size: clamp(80px, 14vw, 200px); line-height: 0.9;
  font-weight: 400; letter-spacing: -0.04em;
  margin-bottom: clamp(48px, 8vw, 80px);
}
.m-footer__brand .dot { color: var(--march-terracotta); font-style: italic; }
.m-footer__grid {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  padding-top: 48px; border-top: 1px solid var(--march-line-on-dark);
}
@media (min-width: 768px) { .m-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } }
.m-footer__col h4 {
  font-size: 11px; font-weight: 600;
  color: rgba(245, 241, 232, 0.5);
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 16px;
}
.m-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; }
.m-footer__col a { color: var(--march-text-on-dark); font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.m-footer__col a:hover { color: var(--march-amber); }

/* Icon registry (B-06). Used via <MarchSite.Icon name="..." />.
   Default 1em × 1em, currentColor stroke, room for explicit pixel size. */
.m-icon { display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }
.m-footer__tag { color: var(--march-text-on-dark); opacity: 0.7; font-size: 15px; max-width: 38ch; line-height: 1.55; }
.m-footer__bottom {
  margin-top: 64px; padding-top: 24px;
  border-top: 1px solid var(--march-line-on-dark);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-size: 12px; color: rgba(245, 241, 232, 0.5); letter-spacing: 0.04em;
}

/* ── Skip link ──────────────────────────────────────────────────────── */
.m-skip {
  position: absolute; top: -100px; left: 16px;
  background: var(--march-ink); color: var(--march-text-on-dark);
  padding: 12px 20px; border-radius: var(--march-radius);
  z-index: 1000;
  transition: top var(--march-dur-fast) var(--march-ease);
}
.m-skip:focus { top: 16px; }

/* ── Film-strip frame utility ───────────────────────────────────────── */
/* Adds perforation strips top + bottom to any rectangular frame.        */
/* Applied to placeholder video frames so they read as intentional       */
/* «film frame» mockups, not generic gradients.                          */
.m-film {
  position: relative;
}
.m-film::before,
.m-film::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 14px;
  background-image:
    linear-gradient(to right, #0a0a0a 0, #0a0a0a 12px, transparent 12px, transparent 28px,
                              #0a0a0a 28px, #0a0a0a 40px, transparent 40px, transparent 56px);
  background-repeat: repeat-x;
  background-size: 56px 14px;
  background-color: #0a0a0a;
  z-index: 2;
  pointer-events: none;
}
.m-film::before { top: 0; }
.m-film::after  { bottom: 0; }

/* Timecode label, used inside .m-film frames */
.m-timecode {
  position: absolute; bottom: 24px; left: 32px;
  z-index: 3;
  font-family: var(--march-font-mono), monospace;
  font-size: 11px; letter-spacing: 0.12em;
  color: rgba(245, 241, 232, 0.65);
  background: rgba(10, 10, 10, 0.6);
  padding: 4px 10px; border-radius: 2px;
}

/* ── Film grain overlay — applied to ALL placeholder video frames ─── */
/* Uses inline SVG feTurbulence; no extra HTTP request. Mix-blend gives  */
/* the «filmed» texture on top of any background, adds intentionality.   */
.h-hero__sample::after,
.h-showreel__frame::after,
.r-frame::after,
.c-video__frame::after,
.s-hero__sample::after,
.x-frame::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.94 0 0 0 0 0.91 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
}

/* Make sure frame content (meta, play button) stays above grain. */
.h-hero__sample-meta,
.h-showreel__frame-meta,
.r-frame__meta,
.r-frame__play,
.r-frame__corner,
.c-video__meta,
.c-video__play,
.s-hero__sample-meta,
.x-frame__center,
.x-frame__corner { z-index: 2; }

/* ── Reveal ─────────────────────────────────────────────────────────── */
.m-reveal {
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--march-dur-slow) var(--march-ease),
              transform var(--march-dur-slow) var(--march-ease);
}
.m-reveal.is-visible { opacity: 1; transform: translateY(0); }