/**
 * Viewport Intelligence Engine v3 — companion CSS contract
 *
 * This stylesheet is additive. Existing components can consume the variables,
 * datasets, and utility attributes without surrendering their visual identity.
 */

:root {
  --vi-grid-columns: 3;
  --vi-local-grid-columns: var(--vi-grid-columns);
  --vi-max-width: 1340px;
  --vi-section-padding: 80px 10%;
  --vi-card-gap: 22px;
  --vi-local-grid-gap: var(--vi-card-gap);
  --vi-font-scale: 1.03;
  --vi-card-min-width: calc(33.333% - 15px);
  --vi-hero-height: 100vh;
  --vi-nav-height: 72px;
  --vi-orbit-scale: 1.08;
  --vi-stats-columns: 4;
  --vi-tech-stack-visible: 16;
  --vi-touch-target-size: 44px;
  --vi-viewport-width: 100vw;
  --vi-viewport-height: 100vh;
  --vi-visual-viewport-width: 100vw;
  --vi-visual-viewport-height: 100vh;
  --vi-visual-viewport-offset-top: 0px;
  --vi-scrollbar-width: 0px;
  --vi-vh: 1vh;
  --vi-dpr: 1;
  --vi-safe-top: env(safe-area-inset-top, 0px);
  --vi-safe-right: env(safe-area-inset-right, 0px);
  --vi-safe-bottom: env(safe-area-inset-bottom, 0px);
  --vi-safe-left: env(safe-area-inset-left, 0px);
}

:root[data-viewport-tier='mobile-sm'] {
  --vi-grid-columns: 1;
  --vi-max-width: 100%;
  --vi-section-padding: 44px 4.5%;
  --vi-card-gap: 14px;
  --vi-font-scale: 0.88;
  --vi-card-min-width: 100%;
  --vi-hero-height: auto;
  --vi-nav-height: 56px;
  --vi-orbit-scale: 0.55;
  --vi-stats-columns: 2;
  --vi-tech-stack-visible: 8;
}

:root[data-viewport-tier='mobile'] {
  --vi-grid-columns: 1;
  --vi-max-width: 100%;
  --vi-section-padding: 52px 5.5%;
  --vi-card-gap: 16px;
  --vi-font-scale: 0.92;
  --vi-card-min-width: 100%;
  --vi-hero-height: auto;
  --vi-nav-height: 60px;
  --vi-orbit-scale: 0.65;
  --vi-stats-columns: 2;
  --vi-tech-stack-visible: 10;
}

:root[data-viewport-tier='tablet'] {
  --vi-grid-columns: 2;
  --vi-max-width: 100%;
  --vi-section-padding: 64px 7%;
  --vi-card-gap: 18px;
  --vi-font-scale: 0.96;
  --vi-card-min-width: calc(50% - 9px);
  --vi-hero-height: 85vh;
  --vi-nav-height: 68px;
  --vi-orbit-scale: 0.78;
  --vi-stats-columns: 4;
  --vi-tech-stack-visible: 12;
}

:root[data-viewport-tier='laptop'] {
  --vi-grid-columns: 3;
  --vi-max-width: 1200px;
  --vi-section-padding: 72px 8%;
  --vi-card-gap: 20px;
  --vi-font-scale: 1;
  --vi-card-min-width: calc(33.333% - 14px);
  --vi-hero-height: 100vh;
  --vi-nav-height: 70px;
  --vi-orbit-scale: 1;
  --vi-stats-columns: 4;
  --vi-tech-stack-visible: 16;
}

:root[data-viewport-tier='desktop'] {
  --vi-grid-columns: 3;
  --vi-max-width: 1340px;
  --vi-section-padding: 80px 10%;
  --vi-card-gap: 22px;
  --vi-font-scale: 1.03;
  --vi-card-min-width: calc(33.333% - 15px);
  --vi-hero-height: 100vh;
  --vi-nav-height: 72px;
  --vi-orbit-scale: 1.08;
  --vi-stats-columns: 4;
  --vi-tech-stack-visible: 16;
}

:root[data-viewport-tier='wide'] {
  --vi-grid-columns: 4;
  --vi-max-width: 1560px;
  --vi-section-padding: 88px clamp(80px, 12%, 200px);
  --vi-card-gap: 24px;
  --vi-font-scale: 1.06;
  --vi-card-min-width: calc(25% - 18px);
  --vi-hero-height: 100vh;
  --vi-nav-height: 74px;
  --vi-orbit-scale: 1.15;
  --vi-stats-columns: 4;
  --vi-tech-stack-visible: 20;
}

:root[data-viewport-tier='ultra-wide'] {
  --vi-grid-columns: 4;
  --vi-max-width: 1720px;
  --vi-section-padding: 96px clamp(100px, 14%, 280px);
  --vi-card-gap: 28px;
  --vi-font-scale: 1.08;
  --vi-card-min-width: calc(25% - 21px);
  --vi-hero-height: 95vh;
  --vi-nav-height: 76px;
  --vi-orbit-scale: 1.22;
  --vi-stats-columns: 4;
  --vi-tech-stack-visible: 24;
}

:root[data-viewport-tier='super-ultra'] {
  --vi-grid-columns: 5;
  --vi-max-width: 1920px;
  --vi-section-padding: 100px clamp(120px, 16%, 360px);
  --vi-card-gap: 30px;
  --vi-font-scale: 1.12;
  --vi-card-min-width: calc(20% - 24px);
  --vi-hero-height: 90vh;
  --vi-nav-height: 80px;
  --vi-orbit-scale: 1.28;
  --vi-stats-columns: 5;
  --vi-tech-stack-visible: 28;
}

/* Existing grid hooks from v2.5 plus the new explicit data hook. */
:where(
  .team-grid,
  .service-list,
  .package-grid,
  .project-grid,
  [data-vi-grid]
):not([data-vi-layout='preserve']) {
  display: grid;
  grid-template-columns: repeat(var(--vi-local-grid-columns, var(--vi-grid-columns)), minmax(0, 1fr));
  gap: var(--vi-local-grid-gap, var(--vi-card-gap));
  min-inline-size: 0;
}

[data-viewport-columns='1'] { --vi-local-grid-columns: 1; }
[data-viewport-columns='2'] { --vi-local-grid-columns: 2; }
[data-viewport-columns='3'] { --vi-local-grid-columns: 3; }
[data-viewport-columns='4'] { --vi-local-grid-columns: 4; }
[data-viewport-columns='5'] { --vi-local-grid-columns: 5; }
[data-viewport-columns='6'] { --vi-local-grid-columns: 6; }

:where(
  .team-grid,
  .service-list,
  .package-grid,
  .project-grid,
  [data-vi-grid]
) > * {
  min-inline-size: 0;
}

/* Opt-in layout primitives. */
:where(.vi-container, [data-vi-container]) {
  inline-size: min(100%, var(--vi-max-width));
  margin-inline: auto;
}

:where(.vi-section, [data-vi-section]) {
  padding: var(--vi-section-padding);
}

:where(.vi-screen, [data-vi-screen]) {
  min-block-size: var(--vi-visual-viewport-height, 100dvh);
}

:where(.vi-hero, [data-vi-hero]) {
  min-block-size: var(--vi-hero-height);
}

:where(.vi-nav, [data-vi-nav]) {
  min-block-size: var(--vi-nav-height);
}

:where(.vi-safe-area, [data-vi-safe-area]) {
  padding-block-start: max(var(--vi-safe-top), var(--vi-safe-area-top, 0px));
  padding-inline-end: max(var(--vi-safe-right), var(--vi-safe-area-right, 0px));
  padding-block-end: max(var(--vi-safe-bottom), var(--vi-safe-area-bottom, 0px));
  padding-inline-start: max(var(--vi-safe-left), var(--vi-safe-area-left, 0px));
}

:where(.vi-fluid-type, [data-vi-fluid-type]) {
  font-size: calc(1em * var(--vi-font-scale));
}

:where(.vi-orbit, [data-vi-orbit]) {
  transform: scale(var(--vi-orbit-scale));
  transform-origin: center;
}

:where(.vi-stats-grid, [data-vi-stats-grid]) {
  display: grid;
  grid-template-columns: repeat(var(--vi-stats-columns), minmax(0, 1fr));
  gap: var(--vi-card-gap);
}

/* Accessibility corrections applied only to elements audited by the engine. */
:where(
  button,
  [role='button'],
  input[type='button'],
  input[type='submit'],
  input[type='reset'],
  .btn,
  .nav__link,
  .featured-case-link,
  .team-card__btn,
  [data-vi-touch-target]
).vi-touch-target {
  min-inline-size: var(--vi-touch-target-size);
  min-block-size: var(--vi-touch-target-size);
  touch-action: manipulation;
}

:where(
  a,
  span,
  [role='button'],
  .nav__link,
  .featured-case-link,
  .team-card__btn,
  [data-vi-touch-target]
).vi-touch-target {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vi-readable-text {
  font-size: max(0.8125rem, 1em);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: max(2px, 0.12em) solid currentColor;
  outline-offset: 3px;
}

/* Decorative motion/effects remain opt-in, so core content is never hidden. */
:root[data-effects-mode='minimal'] [data-vi-motion='decorative'],
:root.vi-reduced-motion [data-vi-motion='decorative'] {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

:root.vi-reduced-motion *,
:root.vi-reduced-motion *::before,
:root.vi-reduced-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

:root:is(.vi-low-performance, .vi-runtime-degraded) [data-vi-expensive='true'] {
  backdrop-filter: none !important;
  filter: none !important;
  box-shadow: none !important;
}

:root.vi-reduced-transparency [data-vi-transparency='decorative'] {
  backdrop-filter: none !important;
  background-image: none !important;
}

:root[data-media-mode='lite'] [data-vi-media='nonessential'] {
  display: none !important;
}

:root[data-media-mode='lite'] img[data-vi-media='adaptive'] {
  image-rendering: auto;
}

:root[data-viewport-tier='mobile-sm'] [data-vi-floating],
:root[data-viewport-tier='mobile'] [data-vi-floating] {
  display: none !important;
}

:root.vi-keyboard-open [data-vi-hide-on-keyboard] {
  display: none !important;
}

:root.vi-keyboard-open [data-vi-keyboard-safe] {
  max-block-size: var(--vi-visual-viewport-height);
  overflow: auto;
  overscroll-behavior: contain;
}

:where([data-vi-defer], .vi-defer) {
  content-visibility: auto;
  contain-intrinsic-size: auto var(--vi-intrinsic-size, 600px);
}

:where([data-vi-overflow-safe], .vi-overflow-safe) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

:root.vi-high-contrast :where(a, button, input, select, textarea, [role='button']) {
  border-color: currentColor;
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, [role='button']):focus-visible {
    outline-color: Highlight;
  }

  [data-vi-motion='decorative'],
  [data-vi-transparency='decorative'] {
    forced-color-adjust: auto;
  }
}

@supports (height: 100dvh) {
  :root {
    --vi-viewport-height-fallback: 100dvh;
  }
}

@media print {
  :root {
    --vi-max-width: none;
    --vi-section-padding: 12mm 0;
    --vi-card-gap: 6mm;
  }

  [data-vi-floating],
  [data-vi-motion='decorative'],
  [data-vi-media='nonessential'] {
    display: none !important;
  }

  :where(.vi-screen, [data-vi-screen], .vi-hero, [data-vi-hero]) {
    min-block-size: auto;
  }
}