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

/* Tablet / small laptop ------------------------------------------------ */
@media (max-width: 1024px) {
  /* Feature stacks: image over details, so the screenshot keeps its scale. */
  .work-card--feature { grid-template-columns: minmax(0, 1fr); }
  .work-card--feature .work-card__media {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .work-card--feature .work-card__body { padding: var(--space-md); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-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(--gold-border);
  }

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

  /* Both headings are fluid now (clamp in style.css) and reach 32px on their
     own below ~760px, so a hard override here would only reintroduce the jump
     the clamp exists to remove. */

  .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) {
  /* --container-pad is no longer overridden here. It resolves to the hero's
     --gut, which floors at 1.25rem (20px), and hardcoding 16px would put every
     section 4px inside the hero's own left edge on phones — the exact
     misalignment the rail work exists to remove. */

  .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%; }
}