/* =========================================================
   SAITECH RESPONSIVE CORE SYSTEM
   Fluid + Scalable + Device Independent
========================================================= */

/* BASE SCALE ENGINE */
:root {
  --base-width: 1440;
  --scale: calc(100vw / var(--base-width));
}

/* SAFETY LIMITS (prevents extreme scaling on ultra-wide screens) */
@media (min-width: 1920px) {
  :root {
    --scale: 1;
  }
}

/* GLOBAL FLUID TYPOGRAPHY SYSTEM */
html {
  font-size: clamp(14px, calc(16px * var(--scale)), 18px);
}

/* GLOBAL LAYOUT CONTAINER */
.container {
  width: min(100% - 48px, var(--container-max));
  margin-inline: auto;
}

/* Ultra-wide screens */
@media (min-width: 2000px) {
  .container {
    max-width: var(--container-wide);
  }
}



/* PREVENT HORIZONTAL OVERFLOW */
body {
  overflow-x: hidden;
}

/* IMAGE SAFETY SYSTEM */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   TABLET (1240px and below)
========================================================= */
@media (max-width: 1240px) {
  .cinematic-purpose__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MOBILE LARGE (425px)
========================================================= */
@media (max-width: 425px) {
  .cinematic-purpose__title {
    font-size: var(--text-3xl);
  }

  .cinematic-card {
    padding: var(--space-lg);
  }
}

/* =========================================================
   MOBILE SMALL (375px)
========================================================= */
@media (max-width: 375px) {
  .cinematic-purpose__subtitle {
    font-size: var(--text-sm);
  }
}

/* =========================================================
   SMALL DEVICES (320px)
========================================================= */
@media (max-width: 320px) {
  .cinematic-purpose__title {
    font-size: var(--text-2xl);
  }

  .cinematic-card__text {
    font-size: var(--text-sm);
  }
}

@media (min-width: 2000px) {
  .cinematic-purpose__grid {
    gap: 140px;
  }

  .cinematic-card {
    padding: 70px;
  }
}