/* MotionClients — shared responsive styles */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

video[data-vid-lazy] {
  background: #1A1815;
  transition: opacity .35s ease;
}

video[data-vid-lazy]:not([data-started="1"]) {
  opacity: 0.55;
}

video[data-vid-lazy][data-started="1"] {
  opacity: 1;
}

h1, h2, h3, p, li, a, span, td, th {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Hover helpers (from style-hover conversion) */
.mc-hover-link:hover { color: #D9482B !important; }
.mc-hover-btn-ink:hover { background: #1A1815 !important; color: #FFFFFF !important; }
.mc-hover-btn-ink-only:hover { background: #1A1815 !important; }
.mc-hover-btn-cream:hover { background: #FAF7F2 !important; color: #1A1815 !important; }
.mc-hover-btn-ink-cream:hover { background: #1A1815 !important; color: #FAF7F2 !important; }
.mc-hover-border:hover { border-color: #1A1815 !important; }
.mc-hover-border-ink:hover { border-color: #1A1815 !important; color: #1A1815 !important; }
.mc-hover-btn-ink-border:hover {
  background: #1A1815 !important;
  color: #FFFFFF !important;
  border-color: #1A1815 !important;
}

.mc-field:focus {
  border-color: #D9482B !important;
  outline: none !important;
}

/* Mobile nav */
.mc-nav-toggle {
  display: none;
  background: #1A1815;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
  padding: 0;
}

.mc-nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: #FAF7F2;
  transition: transform .2s ease, opacity .2s ease;
}

.mc-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mc-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.mc-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mc-nav-mobile {
  display: none;
  border-top: 1px solid #D9D4CC;
  background: rgba(250, 247, 242, 0.98);
  padding: 8px 20px 20px;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mc-nav-mobile a {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #1A1815;
  padding: 14px 6px;
  border-bottom: 1px solid #E2DDD5;
}

.mc-nav-mobile a:last-child {
  border-bottom: none;
  margin-top: 10px;
  background: #D9482B;
  color: #FFFFFF !important;
  text-align: center;
  border-radius: 6px;
  padding: 14px 18px;
}

body.mc-nav-open {
  overflow: hidden;
}

/* ========== Tablet / small laptop ========== */
@media (max-width: 980px) {
  .mc-nav-desktop {
    display: none !important;
  }

  .mc-nav-toggle {
    display: inline-flex !important;
  }

  header {
    position: sticky;
  }

  .mc-nav-mobile.is-open {
    display: block;
  }
}

@media (max-width: 900px) {
  [data-gallery] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [data-stack] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  /* Fixed 2-col layouts → stack */
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 1fr 1.05fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 0.95fr 1.05fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [style*="position: sticky"] {
    position: static !important;
  }

  /* Wide auto-fit cards: force single column before they overflow */
  [style*="minmax(320px"],
  [style*="minmax(300px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ========== Phones / large phones ========== */
@media (max-width: 720px) {
  /* Nested content containers */
  section > div,
  footer > div,
  header > div {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  /* Direct-padded sections (heroes, legal, page intros) */
  body > div > section[style*="padding"] {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  /* Misc padded wrappers (blog media, etc.) */
  body > div > div[style*="padding: 0 24px"],
  body > div > div[style*="padding:0 24px"] {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  [data-slider] {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  h1, h2 {
    letter-spacing: -0.04em !important;
  }

  /* Lead / supporting copy */
  p[style*="font-size: 19px"],
  p[style*="font-size: 18px"],
  p[style*="font-size: 16.5px"] {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  [data-gallery] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [data-slider] [data-slide] {
    width: min(78vw, 320px) !important;
  }

  .mc-marquee-text {
    font-size: 18px !important;
  }

  /* Remaining wide card grids */
  [style*="minmax(290px"],
  [style*="minmax(280px"],
  [style*="minmax(270px"],
  [style*="minmax(260px"],
  [style*="minmax(250px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Hero / section vertical space */
  section [style*="padding: 96px"],
  section[style*="padding: 96px"],
  section [style*="padding: 88px"],
  section[style*="padding: 88px"],
  section [style*="padding: 80px"],
  section[style*="padding: 80px"],
  section[style*="padding: 76px"],
  section [style*="padding: 72px"],
  section[style*="padding: 72px"],
  section [style*="padding: 64px"],
  footer [style*="padding: 64px"] {
    padding-top: 48px !important;
    padding-bottom: 40px !important;
  }

  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer: 2-col then stacks via minmax(180) */
  footer [style*="minmax(180px"] {
    gap: 28px !important;
  }

  /* Soften oversized display numbers */
  [style*="font-size: 78px"] {
    font-size: 56px !important;
  }

  [style*="font-size: 54px"] {
    font-size: 40px !important;
  }
}

/* ========== Small phones ========== */
@media (max-width: 520px) {
  .mc-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .mc-cta-row a {
    text-align: center;
    width: 100%;
  }

  /* Any remaining multi-col auto-fit */
  [style*="minmax(200px"],
  [style*="minmax(190px"],
  [style*="minmax(180px"],
  [style*="minmax(150px"],
  [style*="minmax(130px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Primary CTA groups that aren't tagged */
  div[style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 12px"] > a[style*="padding: 16px"],
  div[style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 12px"] > a[style*="padding: 17px"] {
    width: 100%;
    text-align: center;
  }

  /* Preview ratio controls wrap cleanly */
  div[style*="display: flex"][style*="gap: 8px"][style*="margin-bottom: 14px"] {
    flex-wrap: wrap;
  }

  /* Figcaptions / meta rows */
  figcaption,
  [style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .mc-marquee-text,
  [style*="white-space: nowrap"][style*="Bricolage"] {
    font-size: 16px !important;
  }

  /* Contact / form cards */
  .mc-field,
  input,
  textarea {
    font-size: 16px !important; /* avoid iOS zoom */
  }

  section [style*="padding: 48px"],
  section[style*="padding: 48px"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}