/* =============================================================
   PRANAV TECHY — responsive.css
   Breakpoints: 1180 / 1024 / 768 / 560 / 420
   Mobile-first overrides layered on top of style.css
   ============================================================= */

/* ---- Large laptop ---- */
@media (max-width: 1180px) {
  .stack-grid { grid-template-columns: repeat(4, 1fr); }
  .ind-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Tablet landscape / small laptop ---- */
@media (max-width: 1024px) {
  :root { --header-h: 70px; }

  .nav__menu, .nav__actions .btn--primary { display: none; }
  .nav__toggle { display: block; }

  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__eyebrow { margin-inline: auto; }
  .hero__sub { margin-inline: auto; }
  .hero__cta, .hero__trust { justify-content: center; }
  .hero__visual { order: -1; max-width: 380px; margin-bottom: 1rem; }

  .about__grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(4) { border-top: 1px solid var(--border); }
  .stat:nth-child(5) { border-top: 1px solid var(--border); }

  .feature-grid, .svc-grid, .portfolio-grid { grid-template-columns: repeat(2, 1fr); }

  .detail, .detail--rev .detail__media { grid-template-columns: 1fr; order: initial; }
  .detail__media { order: -1 !important; }

  .timeline { grid-template-columns: repeat(2, 1fr); }
  .timeline::before { display: none; }

  .contact__grid { grid-template-columns: 1fr; }

  .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer__brand { grid-column: 1 / -1; }
}

/* ---- Tablet portrait ---- */
@media (max-width: 768px) {
  .stack-grid { grid-template-columns: repeat(3, 1fr); }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }

  .hero__trust-divider:nth-of-type(2) { display: none; }

  .testi__inner { padding: 1.8rem; }
  .testi__stars { width: 100%; margin: 0.8rem 0 0; order: 3; }
  .testi__person { flex-wrap: wrap; }

  .sticky-cta { display: flex; }
  .float-stack { bottom: 78px; }
  .cookie { bottom: 78px; }
}

/* ---- Large phone ---- */
@media (max-width: 560px) {
  :root { --radius: 18px; --radius-lg: 24px; }

  .feature-grid, .svc-grid, .portfolio-grid, .form-grid, .detail__list { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-top: 1px solid var(--border); }
  .stat:nth-child(5) { grid-column: 1 / -1; }

  .stack-grid { grid-template-columns: repeat(2, 1fr); }

  .hero__trust { gap: 1rem; }
  .hero__trust-divider { display: none; }
  .hero__trust-stat b { font-size: 1.3rem; }

  .marquee__item { font-size: 1.1rem; }

  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .cookie { max-width: calc(100vw - 28px); }
  .modal { padding: 1.6rem; }
}

/* ---- Small phone ---- */
@media (max-width: 420px) {
  .btn { padding: 0.85rem 1.3rem; font-size: 0.9rem; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .filters { gap: 0.4rem; }
  .filter { padding: 0.5rem 0.95rem; font-size: 0.82rem; }
}

/* ---- Landscape phones (short viewport) ---- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 3rem); padding-bottom: 3rem; }
  .hero__visual { max-width: 300px; }
}

/* ---- Print ---- */
@media print {
  .site-header, .float-stack, .sticky-cta, .cookie, .hero__canvas, .scroll-progress { display: none !important; }
  body { background: #fff; color: #000; }
}