/* =====================================================================
   NEXORA WEB — responsive.css
   Mobile-first refinements. Loaded last so it overrides base layout.
   ===================================================================== */

/* Tablet / small laptop ------------------------------------------------ */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-lg); }
  .process-step:not(:last-child)::after { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Tablet portrait / large phone --------------------------------------- */
@media (max-width: 768px) {
  :root { --space-2xl: 80px; --space-xl: 56px; }

  .nav__links     { display: none; }
  .nav__hamburger { display: flex; }
  .nav__cta       { display: none; }

  .services-grid { grid-template-columns: 1fr; }
  .pricing-grid  { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .care__grid    { grid-template-columns: 1fr; }
  .price-card--featured { order: -1; }

  .process-steps { grid-template-columns: 1fr; }
  .process-step  { padding-left: var(--space-md); }
  /* vertical dashed connector on mobile */
  .process-step:not(:last-child)::after {
    display: block;
    top: 48px; left: 16px; right: auto; bottom: -32px;
    width: 0;
    border-top: none;
    border-left: 1px dashed var(--border-subtle);
  }

  .faq-grid { grid-template-columns: 1fr; gap: 0; }

  .section-heading { font-size: var(--font-size-2xl); }
  .final-cta__heading { font-size: var(--font-size-2xl); }

  .footer__grid { grid-template-columns: 1fr; gap: var(--space-md); text-align: left; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .addons__table { display: block; overflow-x: auto; }
}

/* Phone ---------------------------------------------------------------- */
@media (max-width: 480px) {
  :root { --container-pad: 16px; }

  .btn--lg { font-size: var(--font-size-base); padding: 12px 20px; min-height: 48px; }

  .pricing-toggle { width: 100%; }
  .pricing-toggle__btn { flex: 1; }

  .service-card, .price-card { padding: 24px; }

  .notfound__code { font-size: 84px; }

  .final-cta .btn { width: 100%; }
}