/* SetFile — responsive.css (heredado del sitio de SetGantt)
   Mobile-first base lives in layout.css/components.css. This file adds
   progressive enhancements at wider breakpoints: small mobile (<480px),
   mobile (480-699px), tablet (700-959px), desktop (960-1279px), wide
   desktop (>=1280px). The primary nav (mobile menu vs. full bar) uses its
   own 1240px breakpoint, independent of this scale. */

/* ---- Small mobile tightening ---- */
@media (max-width: 479px) {
  :root {
    --container-padding: var(--space-4);
  }

  .section {
    padding-block: var(--space-8);
  }

  .button {
    width: 100%;
  }

  .cta-group {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---- Contact form: Name + Phone share a row once there's room ---- */
@media (min-width: 480px) {
  .form-row-group {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer nav columns: 3 stacked lists on the smallest phones read fine,
     but from here on there's room to let them sit side by side instead of
     one long scroll of links. */
  .site-footer__columns {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-6) var(--space-12);
  }

  .cert-card {
    grid-template-columns: 180px 1fr;
    align-items: start;
  }
}

/* ---- Tablet and up ---- */
@media (min-width: 700px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
  }

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

  .service-grid,
  .sector-grid,
  .team-grid,
  .testimonial-grid,
  .reason-grid,
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .integration-columns {
    grid-template-columns: repeat(3, 1fr);
  }

  .cert-track {
    grid-template-columns: 168px 1fr;
    align-items: start;
  }

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

  /* Legal pages footer only (brand | legal links) — the commercial footer
     row (.site-footer__row, en/es/ca/index.html) has its own rule right
     below. */
  .site-footer__top--legal {
    grid-template-columns: 1.2fr 1fr;
  }

  /* Commercial footer: brand block on the left, nav columns on the right
     (confirmed grouping) — .site-footer__top already caps this row's
     available width at --container-max, so space-between spreads the two
     groups only across that fixed page-width, not the raw browser window.
     `gap` sets a guaranteed minimum (never crowds together) even though
     space-between is doing the actual left/right positioning. flex-wrap
     stays on as a safety net: if a future translation makes either group
     too wide to fit, it drops to a stacked column instead of overflowing
     or forcing a horizontal scrollbar. */
  .site-footer__row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
  }
}

/* ---- Desktop and up ---- */
@media (min-width: 960px) {
  .demo-block {
    grid-template-columns: 1fr 1fr;
  }

  .demo-block--reverse .demo-block__text {
    order: 2;
  }

  .demo-block--reverse .demo-block__asset {
    order: 1;
  }

  /* Give the visual more room than the copy for the assets Nico flagged as
     needing more real presence (A02, A12). Grid auto-placement follows
     order-modified document order, so a --reverse block needs the fractions
     mirrored: its asset lands in the first track, not the second. */
  .demo-block--asset-heavy {
    grid-template-columns: 0.85fr 1.15fr;
  }

  .demo-block--reverse.demo-block--asset-heavy {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .capability-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .service-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-layout {
    grid-template-columns: 1fr 1.2fr;
    align-items: start;
  }

  .sector-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .reason-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .process-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- Wide desktop ---- */
@media (min-width: 1280px) {
  :root {
    --container-padding: var(--space-6);
  }
}

/* ---- Primary nav: full bar vs. mobile menu ----
   Deliberately its own breakpoint, separate from the 960px one above.
   .site-header__inner is capped at --container-max (1180px) like every
   other section, so its available width never grows past
   1180px - 2×--container-padding no matter how wide the viewport gets —
   that ceiling is reached once viewport >= 1180 + 2×24 = 1228px (padding
   is still --space-5/24px below the 1280px breakpoint above). Below that,
   the container is narrower than its own maximum, which is exactly the
   range where brand + 7 nav links + lang switch + theme toggle + header
   CTA didn't fit and "Contact" was dropping to a second row (confirmed
   with screenshots at 1092px). 1240px gives a small safety margin past
   that calculated 1228px ceiling, so the full bar only ever appears once
   it's guaranteed to fit; anything narrower gets the mobile menu instead
   of a broken wrap. Left unchanged (not lowered) after the header CTA
   button was later removed — freed up room, doesn't need to be spent. */
@media (min-width: 1240px) {
  .nav-toggle {
    display: none;
  }

  .primary-nav {
    position: static;
    max-height: none;
    overflow: visible;
    background: none;
    border-bottom: none;
  }

  .primary-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    gap: var(--space-4);
  }

  .primary-nav li {
    border-top: none;
  }

  .primary-nav a {
    padding: 0;
    font-weight: 500;
  }

  .header-controls {
    gap: var(--space-3);
  }

  .lang-switch {
    gap: var(--space-1);
  }
}