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

/* Tablet / small laptop ------------------------------------------------ */
/* Desktop navigation — the French row is what sets these numbers ------------
   Measured, not guessed. At 1400px the French header needs:
     logo 122 + links 393 + 5 gaps + lang 38 + CTA 167 + 3 inner gaps 72
   = 792 + 5×gap of content width. At the shipped 48px gap that is 1032px,
   which only exists from about 1280px up — so French wrapped everywhere below
   it, and the CTA overflowed the row below ~900px in BOTH languages. Both were
   already true of the Nexora build (verified against v1.0-nexora-final, where
   the old lockup absorbed it by compressing 102px → 81px). PORTORO cannot
   absorb it that way: the wordmark is one image and is now correctly protected
   from flex compression, so the shortfall had to be solved in the layout.

   Two steps, each doing only what it must:
     1025–1279  gap drops 48 → 24px. Need 792 + 5×24 = 912; the narrowest point
                of the band offers ~930. Fits, with margin.
     ≤1024      no gap setting recovers the rest — 960px offers ~865 against a
                912 requirement — so the existing hamburger takes over here
                instead of squeezing the row further. This also removes the
                pre-existing clipped CTA at 769–1024.
   Above 1279 nothing changes: the header renders exactly as shipped. */
@media (max-width: 1279px) {
  .nav__links { gap: var(--space-md); }
}

@media (max-width: 1024px) {
  .nav__links     { display: none; }
  .nav__hamburger { display: flex; }
  .nav__cta       { display: none; }

  /* 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%; }
}