/* =========================================================
   DIMENXO — responsive overrides
   Most type/spacing is already fluid via clamp() in style.css.
   This file handles structural changes: layout shifts, nav
   collapse, and grids that need real column changes rather
   than just smaller numbers.
   ========================================================= */

/* ---------- ≤1024px : tablet ---------- */
@media (max-width: 1024px) {
  :root { --section-pad: clamp(72px, 14vw, 120px); }

  .nav-links, .nav-explore { display: none; }
  .nav-toggle { display: flex; }

  .venture-row {
    grid-template-columns: 40px 1fr auto;
    row-gap: 12px;
  }
  .venture-status { grid-column: 2; justify-self: start; }
  .venture-arrow { display: none; }

  .dimension-tile[data-size="lg"],
  .dimension-tile[data-size="md"],
  .dimension-tile[data-size="sm"] { grid-column: span 3; }

  .process-steps { grid-template-columns: repeat(5, minmax(160px, 1fr)); overflow-x: auto; padding-bottom: 8px; }
  .process-timeline { overflow-x: auto; }
}

/* ---------- ≤768px : mobile ---------- */
@media (max-width: 768px) {
  section { padding-left: var(--gutter); padding-right: var(--gutter); }

  .hero { padding-top: 140px; min-height: auto; padding-bottom: 100px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }

  .dimensions-grid { grid-template-columns: repeat(2, 1fr); }
  .dimension-tile,
  .dimension-tile[data-size="lg"],
  .dimension-tile[data-size="md"],
  .dimension-tile[data-size="sm"] { grid-column: span 2; min-height: 190px; }

  .process-steps { grid-template-columns: repeat(5, minmax(140px, 1fr)); }

  .venture-description { max-height: none; }
  .venture-row:hover { padding-left: clamp(16px, 2vw, 28px); }

  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-links { gap: 16px 24px; }

  .progression-stage { font-size: clamp(30px, 12vw, 56px); }
}

/* ---------- ≤480px : small phones ---------- */
@media (max-width: 480px) {
  :root { --gutter: 20px; }

  .hero-headline { font-size: clamp(38px, 11vw, 60px); }
  .hero-eyebrow { margin-bottom: 20px; }

  .venture-row { padding-left: 16px; padding-right: 16px; }
  .venture-name { font-size: clamp(21px, 6vw, 28px); }

  .dimensions-grid { grid-template-columns: 1fr; }
  .dimension-tile,
  .dimension-tile[data-size="lg"],
  .dimension-tile[data-size="md"],
  .dimension-tile[data-size="sm"] { grid-column: span 1; }

  .vision-line, .vision-final { font-size: clamp(22px, 7vw, 30px); }

  .mobile-menu-links a { font-size: clamp(30px, 11vw, 44px); }
}

/* ---------- ≤375px : smallest supported phones ---------- */
@media (max-width: 375px) {
  .cta-heading { font-size: clamp(30px, 9vw, 40px); }
  .btn { padding: 14px 20px; font-size: 14px; }
}

/* ---------- Touch devices: no hover-only reveals, no custom cursor ---------- */
@media (hover: none) and (pointer: coarse) {
  #cursor-dot, #cursor-ring { display: none !important; }

  .venture-description {
    max-height: none;
    opacity: 1;
    margin-top: 14px;
    overflow: visible;
  }
}