/* ============================================================
   Contello — mobile responsive layer
   Pure overrides keyed to the inline style patterns used across
   the pages. Loaded after motion.css; base inline styles still
   paint first, these kick in only under the breakpoints.
   ============================================================ */

/* ---- Mobile nav (hooks added at runtime by responsive.js) ---- */
.rnav-burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px;
  align-items: center; justify-content: center; background: transparent; border: 0;
  cursor: pointer; border-radius: 10px; padding: 0; }
.rnav-burger span { display: block; width: 22px; height: 2.5px; border-radius: 2px;
  background: #1B1B1C; transition: transform .22s ease, opacity .18s ease; }
[data-home-nav]:not(.scrolled) .rnav-burger span { background: #fff; }
.rnav-burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.rnav-burger.open span:nth-child(2) { opacity: 0; }
.rnav-burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.rnav-panel { position: absolute; top: 100%; left: 0; right: 0; display: none;
  flex-direction: column; gap: 2px; background: #fff; border-top: 1px solid #E2E2E8;
  box-shadow: 0 18px 44px rgba(17,17,20,0.14); padding: 12px 14px 16px;
  max-height: calc(100vh - 84px); overflow-y: auto; }
.rnav-panel.open { display: flex; }
.rnav-panel a { padding: 13px 14px; border-radius: 11px; font-size: 15.5px; font-weight: 600;
  color: #1B1B1C; text-decoration: none; font-family: var(--font-body); }
.rnav-panel a:active { background: #F4F4F7; }
.rnav-panel .rnav-grp { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: #9A9AA3; padding: 14px 14px 4px; }
.rnav-panel a.rnav-cta { margin-top: 8px; text-align: center; color: #fff; font-weight: 800;
  background: linear-gradient(120deg,#841BFF,#1CA6FF); box-shadow: 0 10px 24px rgba(132,27,255,0.30); }

@media (max-width: 820px) {
  /* Kill horizontal scroll from decorative absolute glow blobs / floating
     cards that intentionally extend past the layout edge. overflow-x:hidden
     on the root is safe with the position:fixed nav. */
  html, body { overflow-x: hidden !important; }

  .rnav-links { display: none !important; }
  .rnav-burger { display: flex !important; }

  /* ---- Section / nav / footer horizontal padding ---- */
  section[data-screen-label] { padding-left: 22px !important; padding-right: 22px !important; }
  footer { padding-left: 22px !important; padding-right: 22px !important; }
  [style*="padding: 0 56px"] { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="padding: 100px 56px 64px"] { padding: 96px 22px 48px !important; }

  /* ---- Two-column layouts → single column ---- */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 0.95fr 1.05fr"],
  [style*="grid-template-columns: 1fr 1.05fr"],
  [style*="grid-template-columns: 1.05fr 1fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 0.92fr 1.08fr"],
  [style*="grid-template-columns: minmax(0,1fr) 460px"],
  [style*="grid-template-columns: minmax(0px, 1fr) 460px"] {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  /* ---- Card grids ---- */
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  [data-postgrid] { grid-template-columns: repeat(4, 1fr) !important; gap: 7px !important; }

  /* ---- Inner panels with large uniform padding ---- */
  [style*="padding: 64px"] { padding: 30px !important; }
  [style*="padding: 52px"] { padding: 30px !important; }
  [style*="padding: 48px 56px"] { padding: 36px 24px !important; }

  /* ---- Hero floating cluster: decorative, hide on small screens ---- */
  [style*="height: 600px"] { display: none !important; }

  /* ---- Oversized hero headline: shrink floor so it doesn't break word-per-line ---- */
  [style*="clamp(46px, 5.6vw, 78px)"] { font-size: clamp(26px, 8vw, 50px) !important; }

  /* ---- Footer rows stack & left-align ---- */
  footer [style*="justify-content: space-between"] { justify-content: flex-start !important; }

  /* ============================================================
     HOME HERO — fix tall empty panel, oversized logo & CTA row
     ============================================================ */
  /* Hero panel & inner grid carry fixed pixel floors sized for the
     desktop floating visual (hidden on mobile). Drop the floors so the
     dark panel hugs its actual content instead of leaving dead space. */
  [style*="min-height: 800px"] { min-height: 0 !important; }
  [style*="min-height: 620px"] { min-height: 0 !important; }

  /* Mobile header: ALWAYS a solid, legible bar (no transparent state) so the
     logo + hamburger never wash out over light content. Both Contello PNGs are
     now the same source geometry, so they swap with zero shift. */
  [data-home-nav] {
    height: 64px !important;
    background: rgba(255,255,255,0.96) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid #E2E2E8 !important;
    box-shadow: 0 4px 18px rgba(17,17,20,0.05) !important;
  }
  /* Show the color logo on the light bar; hide the white twin. */
  [data-home-nav] .logo-white { opacity: 0 !important; }
  [data-home-nav] .logo-color { opacity: 1 !important; }
  [data-home-nav] .logo-white, [data-home-nav] .logo-color { height: 27px !important; }
  /* Dark hamburger lines on the light bar (override the on-dark white rule). */
  [data-home-nav] .rnav-burger span,
  [data-home-nav]:not(.scrolled) .rnav-burger span { background: #1B1B1C !important; }
  /* Otto page: drop the nav co-brand lockup on phones to keep the bar clean. */
  [data-home-nav] .cobrand-divider, [data-home-nav] .cobrand-divider ~ span { display: none !important; }

  /* Hero copy: tighten the top gap left by the shorter nav. */
  [style*="padding: 100px 56px 64px"] { padding: 84px 22px 52px !important; }

  /* Hero CTA pair: stack full-width so they don't overflow / crowd. */
  [style*="gap: 14px; margin-top: 32px"] { flex-direction: column !important; align-items: stretch !important; }
  [style*="gap: 14px; margin-top: 32px"] > a { justify-content: center !important; width: 100% !important; box-sizing: border-box !important; }

  /* Centered CTA button pairs (page headers & closing CTAs across the
     site). Their buttons are white-space:nowrap in a non-wrapping flex
     row — side-by-side they overflow narrow viewports and cause the
     horizontal "wobble". Stack them full-width instead. */
  [style*="justify-content: center; gap: 14px"] { flex-direction: column !important; align-items: stretch !important; }
  [style*="justify-content: center; gap: 14px"] > a { justify-content: center !important; width: 100% !important; box-sizing: border-box !important; }

  /* ---- AI media studio panel: stack rail above gallery ---- */
  [style*="grid-template-columns: 300px minmax(0,1fr)"],
  [style*="grid-template-columns: 300px minmax(0px, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 300px minmax(0,1fr)"] > div:first-child,
  [style*="grid-template-columns: 300px minmax(0px, 1fr)"] > div:first-child { border-right: 0 !important; border-bottom: 1px solid #E2E2E8 !important; }
  [style*="grid-template-columns: repeat(3, minmax(0,1fr))"],
  [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 520px) {
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr !important; }
  [data-postgrid] { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
  section[data-screen-label] { padding-left: 18px !important; padding-right: 18px !important; }
}