/* about-careers-responsive.css — viewport breakpoints for the /about &
   /careers pages. Reproduces the page reflow against the real viewport. Load
   this AFTER about-careers.css. */

/* Horizontal padding for the whole sub-page. Scoped to <body class="ac-body">
   so it covers the shared header, the page content and the footer with one
   value — keeping the logo and content aligned — and a touch more generous than
   the homepage. (Desktop >1080px inherits the global 88px.) */
@media (max-width: 1080px) { .ac-body .wrap { padding: 0 56px; } }
@media (max-width: 600px)  { .ac-body .wrap { padding: 0 32px; } }

/* ── Tablet ─────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .acpage { --ac-pad: 56px; }
  .team-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 22px; }
  .ac-footer__grid { grid-template-columns: 1.4fr 1fr; gap: 40px 48px; }
}

/* ── Small tablet / large phone — nav collapses, columns merge ──────── */
@media (max-width: 820px) {
  .ac-nav { display: none; }
  .ac-hero__h { font-size: clamp(36px, 8vw, 56px); }
  .ac-hero__lead { grid-template-columns: 1fr; gap: 34px; }
  .empty { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* ── Phone ──────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .acpage { --ac-pad: 40px; }
  .ac-hero { padding: 64px 0 44px; }
  .ac-hero__h { font-size: 34px; }
  .ac-hero__lead-main p:first-child { font-size: 19px; }
  .ac-sec__h { font-size: 30px; }
  .ac-sec__head { margin-bottom: 40px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
  .empty { padding: 32px 26px; }
  .ac-cta__card { border-radius: 22px; }
  .ac-cta__row { flex-direction: column; }
  .ac-cta__row .btn { width: 100%; justify-content: center; }
  .ac-footer { padding: 60px 0 36px; }
  .ac-footer__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ── Very small phone ───────────────────────────────────────────────── */
@media (max-width: 380px) {
  .team-grid { grid-template-columns: 1fr; }
}