/* =========================================================
   Advocate Travel Marketing — responsive.css
   Breakpoints: 1180 · 1024 · 860 · 640 · 460
   ========================================================= */

/* ---------- ≤1180px ---------- */
@media (max-width: 1180px) {
  .logo-wall { grid-template-columns: repeat(2, 1fr); align-items: center; }
}

/* ---------- ≤1024px ---------- */
@media (max-width: 1024px) {
  .caps { grid-template-columns: repeat(2, 1fr); }
  .cap:nth-child(2n) { border-right: 0; }
  .cap:nth-child(n+3) { border-top: 1px solid var(--line-dark); }

  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .client-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .fact-list { grid-template-columns: 1fr; }

  .svc { grid-template-columns: 1fr; gap: 2.25rem; }
  .svc--flip .svc__media { order: 0; }

  .partner { grid-template-columns: 1fr; gap: 2.25rem; }
  .industry, .pangaea { grid-template-columns: 1fr; gap: 1.75rem; }
  .industry__logos { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
  /* :where() so a Height or Width set on an individual Image widget in the
     sidebar is not re-capped on tablet. max-height is a different property
     from the sidebar's width, so at real specificity this was shrinking the
     logo back down even after a Width was applied. */
  :where(.industry__logos img) { max-height: 48px; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---------- ≤1100px : case studies stack ----------
   Raised from 1024px. Between roughly 1025 and 1100 the copy panel narrows to
   about 385px, and three single-line stat labels at the enlarged size need
   almost exactly that — no headroom at all. Stacking a little earlier gives
   the band the full card width instead, so the labels are never near the
   edge. */
@media (max-width: 1100px) {
  .case { grid-template-columns: 1fr; }
  /* The frame keeps its 4:3 from style.css when stacked, so the same image
     file is shown whole at every width. The earlier 16/9 here cropped it. */
  .case__media { order: -1; }
  .case-list .case--flip .case__media { order: -1; }
}

/* ---------- ≤1050px : mobile nav ----------
   Raised from 860px: the enlarged logo and menu (client request) no longer
   fit alongside the CTA below roughly 1050px. */
@media (max-width: 1050px) {
  .nav-toggle { display: block; }
  .header-cta { display: none; }

  .nav {
    position: fixed; inset: 0;
    background: rgba(7,13,24,.97);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 0; padding: 6rem var(--gutter) 3rem;
    transform: translateX(100%);
    transition: transform .5s var(--ease);
    overflow-y: auto;
  }
  body.nav-open .nav { transform: none; }
  .nav a {
    font-family: var(--f-display); font-size: 2rem; letter-spacing: -.02em;
    padding-block: .85rem; width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 2rem; border-bottom: 0; font-family: var(--f-mono); font-size: var(--t-small); }

  .hero { min-height: 88svh; padding-top: 6.5rem; }
  .hero__scroll { display: none; }
  .page-hero { min-height: 36vh; padding-block: 6.5rem 2.5rem; }
}

/* ---------- ≤640px ---------- */
@media (max-width: 640px) {
  :root { --sec-y: 2.4rem; }

  .caps { grid-template-columns: 1fr; }
  .cap { border-right: 0; border-top: 1px solid var(--line-dark); }

  .team-grid, .client-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }

  /* Three columns can't hold three single-line labels at phone widths, so the
     band stacks: one stat per row, figure and label side by side. Every label
     stays on one line, which is what was asked for. */
  .case .stats { grid-template-columns: 1fr; gap: .5rem; }
  .case .stats .stat { display: flex; align-items: baseline; gap: .55rem; }
  .case .stat__num { font-size: 1.35rem; }
  .case .stat__label { font-size: .7rem; letter-spacing: .01em; margin-top: 0; }
  .carousel__nav { width: 40px; height: 40px; }
  .carousel__nav--prev { right: calc(.85rem + 46px); }
  .carousel__foot { flex-direction: column; align-items: stretch; }
  .carousel__foot .btn { justify-content: center; }
  .svc__media { grid-template-columns: 1fr; }
  .svc__media img:not(:first-child) { aspect-ratio: 16/10; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }

  /* "Your Voice in America." must break as two lines — "Your Voice" /
     "in America." — not strand "America" on a third (client request). The
     15ch cap from style.css was a few px short of "in America." at phone
     widths; the column itself is the limit here, and a slightly smaller
     size gives the pair room. text-wrap: balance picks the even split in
     engines that support it; the   between "in" and "America" in the
     heading content makes it certain everywhere. */
  .hero__title { max-width: none; font-size: 2.5rem; text-wrap: balance; }

  .brand img { width: var(--brand-w-sm); }
  .footer-bottom { flex-direction: column; }
}

/* ---------- ≤460px ---------- */
@media (max-width: 460px) {
  .logo-wall { grid-template-columns: 1fr; }
  .statement blockquote { max-width: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .hero__scroll, .cta, .marquee { display: none; }
  body { color: #000; background: #fff; }
}

/* ---------- ≥861px : desktop nav tidy ---------- */
@media (min-width: 861px) {
  /* The in-nav CTA is a mobile-only duplicate of .header-cta */
  .nav .btn { display: none; }
}