/* Cvit Solutions — Responsive Overrides */

/* Burger button (hidden on desktop) */
.cv-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10000;
  padding: 0;
}
.cv-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #FDFCF7;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .3s cubic-bezier(.22,.61,.36,1);
}
.cv-burger span + span { margin-top: 5px; }
.cv-burger.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.cv-burger.is-open span:nth-child(2) { opacity: 0; }
.cv-burger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile nav overlay (triggered by JS) */
.cv-nav-links.is-open {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(10,10,10,0.98) !important;
  backdrop-filter: blur(20px) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
  font-size: 22px !important;
  z-index: 55 !important;
  width: 100% !important;
  height: 100vh !important;
}
.cv-nav-links.is-open .cv-nav-link { color: #FDFCF7 !important; font-size: 22px; }

/* ── Tablet ── */
@media (max-width: 1024px) {
  .cv-nav-inner { padding: 16px 28px !important; }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  /* Nav */
  .cv-burger { display: flex; }
  .cv-nav-links { display: none !important; }
  .cv-nav-cta { display: none !important; }
  .cv-nav-inner { padding: 14px 20px !important; }
  .cv-nav-inner img { height: 24px !important; width: auto !important; }

  /* ── Force ALL grids to single column ── */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Force section header flex rows to stack ── */
  [style*="justify-content:space-between"][style*="margin-bottom"],
  [style*="justify-content: space-between"][style*="margin-bottom"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* Unstick sticky sidebars */
  [style*="position:sticky"], [style*="position: sticky"] {
    position: relative !important;
    top: auto !important;
  }


  /* Remove fixed dimensions on h1 */
  h1[style*="width"] { width: auto !important; height: auto !important; }

  /* Max-width overrides — let content fill mobile width */
  p[style*="max-width"], div[style*="max-width"]:not(.cv-nav-inner) {
    max-width: 100% !important;
  }

  /* ── Section padding ── */
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  section[style*="padding:140px"],
  section[style*="padding: 140px"] {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  section[style*="padding:120px"],
  section[style*="padding: 120px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  section[style*="padding:100px"],
  section[style*="padding: 100px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  section[style*="padding:80px"],
  section[style*="padding: 80px"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Inner containers padding */
  [style*="padding:0 56px"],
  [style*="padding: 0 56px"],
  div[style*="padding:0 56px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Footer padding */
  footer { padding: 32px 20px !important; }

  /* CTA box inner padding */
  [style*="padding:120px 72px"], [style*="padding:100px 72px"],
  [style*="padding: 100px 72px"], [style*="padding: 120px 72px"] {
    padding: 48px 24px !important;
  }

  /* CTA buttons — stack on mobile */
  [style*="padding:120px 72px"] [style*="display:flex"][style*="gap:16px"],
  [style*="padding: 120px 72px"] [style*="display:flex"][style*="gap: 16px"] {
    flex-wrap: wrap !important;
  }

  /* ── Gap reduction ── */
  [style*="gap:80px"], [style*="gap: 80px"] { gap: 24px !important; }
  [style*="gap:64px"], [style*="gap: 64px"] { gap: 24px !important; }
  [style*="gap:60px"], [style*="gap: 60px"] { gap: 20px !important; }
  [style*="gap:56px"], [style*="gap: 56px"] { gap: 20px !important; }
  [style*="gap:48px"], [style*="gap: 48px"] { gap: 20px !important; }
  [style*="gap:40px"], [style*="gap: 40px"] { gap: 16px !important; }

  /* Why Cvit section — switch to block layout on mobile */
  [style*="grid-template-columns: 380px"],
  [style*="grid-template-columns:380px"] {
    display: block !important;
  }
  [style*="grid-template-columns: 380px"] > [style*="position"],
  [style*="grid-template-columns:380px"] > [style*="position"] {
    width: 100% !important;
    margin-bottom: 32px !important;
  }

  /* ── Margin reduction ── */
  [style*="margin-bottom:80px"], [style*="margin-bottom: 80px"] { margin-bottom: 32px !important; }
  [style*="margin-bottom:72px"], [style*="margin-bottom: 72px"] { margin-bottom: 28px !important; }
  [style*="margin-bottom:64px"], [style*="margin-bottom: 64px"] { margin-bottom: 24px !important; }
  [style*="margin-bottom:56px"], [style*="margin-bottom: 56px"] { margin-bottom: 24px !important; }

  /* ── Hide complex hero elements ── */
  [data-hero-stage] { display: none !important; }
  [data-hero-3d] { display: none !important; }
  [data-hero-laptop] { display: none !important; }

  /* Hero headline grid — stack */
  [data-hero-text] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Service rows — stack to single column */
  .cv-srv {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding-left: 12px !important;
  }

  /* Project cards — auto height on mobile */
  .cv-proj[style*="aspect-ratio"] { aspect-ratio: auto !important; min-height: 260px; }

  /* Process steps — horizontal scroll */
  [style*="repeat(5, 1fr)"] {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 16px !important;
    padding-bottom: 16px !important;
  }
  [style*="repeat(5, 1fr)"] > .cv-step {
    min-width: 220px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
  [style*="repeat(5, 1fr)"] > [style*="position:absolute"] { display: none !important; }

  /* Testimonial cards — equal sizing when stacked */
  .cv-test { padding: 28px !important; }
  .cv-test [style*="font-size:30px"],
  .cv-test [style*="font-size: 30px"] {
    font-size: 20px !important;
  }

  /* Footer grid */
  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  footer [style*="grid-template-columns"] > div:first-child {
    grid-column: 1 / -1;
  }

  /* Footer bottom bar — stack */
  footer [style*="justify-content:space-between"][style*="font-family"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* CTA circles — hide on mobile */
  section[style*="padding:0 56px"] [style*="border-radius:50%"][style*="position:absolute"] {
    display: none !important;
  }

  /* About section inner padding */
  .cv-reveal-lg > div > [style*="padding:0 56px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Fixed-width elements */
  [style*="width:380px"], [style*="width: 380px"] {
    width: 100% !important;
  }
}

/* ── Small mobile ── */
@media (max-width: 480px) {
  .cv-nav-inner { padding: 12px 16px !important; }
  footer { padding: 24px 16px !important; }

  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}