/* Martvill v23 — Full-width + device-responsive system
   Load AFTER style.css, premium-layout.css, hero-3d.css
   Goal: edge-to-edge with consistent gutters, no horizontal scroll, fluid type/grids
*/

:root {
  --page-gutter: clamp(16px, 3.5vw, 48px);
  --content-max: min(100% - (var(--page-gutter) * 2), 1440px);
  --section-y: clamp(48px, 7vw, 100px);
  --text-fluid-xl: clamp(2rem, 4.5vw + 0.5rem, 3.75rem);
  --text-fluid-lg: clamp(1.35rem, 2vw + 0.5rem, 2.1rem);
  --text-fluid-md: clamp(1rem, 0.4vw + 0.9rem, 1.15rem);
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/* —— Containers: full available width, minor side gap only —— */
.container,
.container.hero-inner,
.cta-inner.container,
.container.cta-inner {
  width: 100% !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
  box-sizing: border-box !important;
}

/* Kill 100vw breakout (causes horizontal scroll on mobile) */
.section.full-width,
.hero.full-width,
.cta-banner.full-width,
.services-strip.full-width,
.trust-bar.full-width,
.page-hero.full-width,
.full-width {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  width: 100%;
}

/* Header full width */
.site-header .container,
.header-inner {
  max-width: 1440px !important;
  width: 100% !important;
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}

/* —— Hero: content stays wide, image in right column —— */
.hero {
  width: 100%;
  min-height: min(100vh, 900px);
  min-height: min(100dvh, 900px);
}
.hero-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) !important;
  gap: clamp(24px, 4vw, 64px) !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1440px !important;
}
.hero-content { min-width: 0; }
.hero-title {
  font-size: var(--text-fluid-xl) !important;
  line-height: 1.12;
}
.hero-desc {
  font-size: var(--text-fluid-md);
  max-width: min(36rem, 100%);
  line-height: 1.65;
}
.hero-visual {
  min-width: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* Grids fluid */
.services-grid,
.portfolio-grid,
.blog-grid,
.why-grid,
.values-grid {
  width: 100%;
  gap: clamp(14px, 2vw, 24px);
}
.services-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}
.portfolio-grid,
.blog-grid {
  /* fixed in ui-sections-fix.css — avoid min(100%, Npx) single-column bug */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}
.trust-grid {
  /* detailed layout in ui-fix.css */
  width: 100%;
}
.process-steps {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
}
.industries-grid {
  /* fixed in ui-sections-fix.css */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}
.footer-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  max-width: 100% !important;
  width: 100%;
}
.about-grid,
.contact-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: clamp(20px, 3vw, 40px);
}

.cta-inner {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  padding: clamp(28px, 4vw, 56px) clamp(16px, 3vw, 40px) !important;
}

.legal-content {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}
.browser-body.ui-shot img {
  height: 100%;
  object-fit: cover;
}

/* —— Breakpoints —— */

/* Large tablets / small laptops */
@media (max-width: 1100px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) !important;
    gap: 28px !important;
  }
}

/* Tablet */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 36px !important;
  }
  .hero-desc {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-meta {
    justify-content: center;
  }
  .hero-visual {
    order: -1;
    max-width: 420px;
    margin: 0 auto;
  }
  .hero {
    min-height: auto;
    padding-top: 96px;
    padding-bottom: 48px;
  }
  .section-header,
  .section-desc {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mobile */
@media (max-width: 640px) {
  :root {
    --page-gutter: 16px;
    --section-y: 40px;
  }
  .hero-title {
    font-size: clamp(1.85rem, 8vw, 2.4rem) !important;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .hero-meta {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .hero-visual {
    max-width: 100%;
  }
  .nav {
    width: min(100vw - 24px, 320px) !important;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .footer-legal {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Small phones */
@media (max-width: 380px) {
  :root { --page-gutter: 12px; }
  .trust-grid,
  .process-steps {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Ultra-wide */
@media (min-width: 1600px) {
  .container,
  .hero-inner {
    max-width: 1520px !important;
  }
}

/* Touch targets */
@media (pointer: coarse) {
  .admin-nav a,
  .nav a,
  .btn {
    min-height: 44px;
  }
}

/* Safe area (notched phones) */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .site-header .container {
    padding-left: max(var(--page-gutter), env(safe-area-inset-left)) !important;
    padding-right: max(var(--page-gutter), env(safe-area-inset-right)) !important;
  }
}