/* ─── Staffbuilder.fi · Responsive Overrides ─────────────────────
   Breakpoints mirror the design's 1280px canvas.
   Mobile-last: these rules override the desktop defaults above.
   Import order in HTML: tokens → base → components → responsive
   ─────────────────────────────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════
   1024px · Tablet landscape
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Nav */
  .sb-nav {
    padding: 20px 40px;
  }

  /* Section padding */
  .sb-section {
    padding: var(--sp-7) var(--sp-5);
  }

  /* Footer grid: compress */
  .sb-footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--sp-4);
  }

  /* Stat strip: allow wrap */
  .sb-stat-strip {
    flex-wrap: wrap;
  }

  .sb-stat {
    flex: 1 1 45%;
  }

  .sb-stat:nth-child(2) {
    border-right: none;
  }

  .sb-stat:nth-child(3) {
    border-top: 1px solid rgba(15, 35, 66, 0.1);
  }

  .sb-stat:nth-child(4) {
    border-top: 1px solid rgba(15, 35, 66, 0.1);
  }

}


/* ══════════════════════════════════════════════════════════════
   768px · Tablet portrait
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Nav: hide desktop links, show hamburger */
  .sb-nav {
    padding: 18px 24px;
    position: sticky;
  }

  .sb-nav__links {
    display: none;
  }

  .sb-nav__actions {
    gap: 12px;
  }

  .sb-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    width: 36px;
    height: 36px;
  }

  .sb-nav__mobile {
    padding: 24px;
    gap: 16px;
  }

  /* Hero: single column, reduce height */
  .sb-hero {
    min-height: 600px;
    height: auto;
    padding-bottom: 80px;
  }

  .sb-hero__arc {
    display: none;
  }

  /* Section padding */
  .sb-section {
    padding: var(--sp-6) var(--sp-3);
  }

  /* Section head title */
  .sb-section-head__title {
    font-size: clamp(36px, 7vw, 60px);
  }

  /* Services: 1-col stack */
  .sb-services__grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-3);
  }

  /* Sectors strip: 2-col */
  .sb-sectors__grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Process timeline: vertical stack */
  .sb-process__grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-3);
  }

  .sb-process__connector {
    display: none;
  }

  /* Benefits: 1-col */
  .sb-benefits__grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4);
  }

  /* Testimonial: stack */
  .sb-testimonial__grid {
    grid-template-columns: 1fr !important;
  }

  .sb-testimonial__photo {
    max-width: 240px;
    aspect-ratio: 1 / 1;
  }

  /* Logo bar: 2-col wrap */
  .sb-logo-bar {
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-5);
    justify-content: center;
  }

  /* Footer grid: 2-col */
  .sb-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
  }

  .sb-footer__col--brand {
    grid-column: 1 / -1;
  }

  /* FAQ: full width */
  .sb-faq__answer {
    max-width: 100%;
  }

  /* Stat strip: 2×2 grid */
  .sb-stat-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* Fix 8 — Hide absolute-positioned SVG timeline connector when steps stack vertically */
  [style*="position:relative"][style*="margin-bottom:64px"] > svg[style*="position:absolute"] {
    display: none !important;
  }

  /* Fix T1 — about.html contact: cap display-font sizes so phone fits a ~245px tablet column.
     The 480px block (Fix 7) re-applies with different clamp values for single-column layout. */
  #contact [style*="font-size:42px"] {
    font-size:   clamp(18px, 2.8vw, 22px) !important;
    line-height: 1.2 !important;
  }
  #contact [style*="font-size:32px"] {
    font-size: clamp(16px, 2.2vw, 20px) !important;
  }
  #contact [style*="font-size:28px"] {
    font-size:  clamp(14px, 2vw, 17px) !important;
    word-break: break-all !important;
  }

  /* Fix 1 — Collapse inline 64px side gutters */
  [style*="padding"][style*="64px"] {
    padding-left:  var(--sp-2) !important;
    padding-right: var(--sp-2) !important;
  }

  /* Fix 2 — Collapse inline multi-column asymmetric hero grids */
  [style*="grid-template-columns:1.5fr"],
  [style*="grid-template-columns: 1.5fr"],
  [style*="grid-template-columns:1.4fr"],
  [style*="grid-template-columns: 1.4fr"],
  [style*="grid-template-columns:1.3fr"],
  [style*="grid-template-columns: 1.3fr"],
  [style*="grid-template-columns:1.2fr"],
  [style*="grid-template-columns: 1.2fr"],
  [style*="grid-template-columns:0.7fr"],
  [style*="grid-template-columns: 0.7fr"],
  [style*="grid-template-columns:1fr 1.6fr"],
  [style*="grid-template-columns: 1fr 1.6fr"] {
    grid-template-columns: 1fr !important;
    gap:                   var(--sp-4) !important;
  }

  /* Fix 2b — Fixed-pixel column grids (e.g. 160px 1.4fr 1fr 1fr) */
  [style*="grid-template-columns"][style*="160px"],
  [style*="grid-template-columns"][style*="320px"] {
    grid-template-columns: 1fr !important;
    gap:                   var(--sp-3) !important;
  }

  /* Fix 3a — 3/4-column repeat grids → 2 columns at tablet */
  [style*="repeat(3,1fr)"],  [style*="repeat(3, 1fr)"],
  [style*="repeat(4,1fr)"],  [style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap:                   var(--sp-3) !important;
  }

  /* Fix 3b — 5/6/7/8-column repeat grids → 2 columns at tablet */
  [style*="repeat(5,1fr)"],  [style*="repeat(5, 1fr)"],
  [style*="repeat(6,1fr)"],  [style*="repeat(6, 1fr)"],
  [style*="repeat(7,1fr)"],  [style*="repeat(7, 1fr)"],
  [style*="repeat(8,1fr)"],  [style*="repeat(8, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap:                   var(--sp-3) !important;
  }

  .sb-stat {
    flex: unset;
    border-right: 1px solid rgba(15, 35, 66, 0.1);
    border-top: none;
  }

  .sb-stat:nth-child(2n) {
    border-right: none;
  }

  .sb-stat:nth-child(n+3) {
    border-top: 1px solid rgba(15, 35, 66, 0.1);
  }

  .sb-stat-strip--ink .sb-stat:nth-child(n+3) {
    border-top-color: rgba(250, 246, 236, 0.1);
  }

  .sb-stat-strip--ink .sb-stat:nth-child(2n) {
    border-right: none;
  }

  /* Lead magnet: stack */
  .sb-lead__grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  .sb-lead__book {
    margin: 0 auto;
  }

}


/* ══════════════════════════════════════════════════════════════
   480px · Mobile
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Reduce section padding */
  .sb-section {
    padding: var(--sp-5) var(--sp-2);
  }

  /* Section head */
  .sb-section-head__title {
    font-size: clamp(32px, 9vw, 52px);
  }

  .sb-section-head__lede {
    font-size: 18px;
  }

  /* Sectors strip: 1-col */
  .sb-sectors__grid {
    grid-template-columns: 1fr !important;
  }

  /* Footer grid: 1-col */
  .sb-footer__grid {
    grid-template-columns: 1fr;
  }

  .sb-footer {
    padding: var(--sp-6) var(--sp-2) var(--sp-3);
  }

  .sb-footer__bottom {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  /* Buttons: full width on small mobile */
  .sb-btn--block-mobile {
    width: 100%;
    justify-content: center;
  }

  /* Nav: tighter */
  .sb-nav {
    padding: 14px 16px;
  }

  /* Card padding */
  .sb-card {
    padding: 28px 20px;
  }

  /* FAQ question text */
  .sb-faq__question {
    font-size: 17px;
  }

  /* Fix 3c — Nuclear catchall: every inline grid-template-columns → 1fr on mobile.
     Only matches elements with inline style attributes; class-based grids are unaffected. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* QA-1 — Nav CTA buttons must meet 44px tap target (apply.html nav button was 34px) */
  .sb-nav__actions .sb-btn {
    min-height: 44px;
  }

  /* QA-2 — Card bullet items below 14px threshold */
  .sb-card__list-item {
    font-size: 14px;
  }

  /* QA-3 — Footer address below 14px threshold */
  .sb-footer__address {
    font-size: 14px;
  }

  /* QA-4 — Inline 13px body text (card explanations, sector body paragraphs) */
  [style*="font-size:13px"] {
    font-size: 14px !important;
  }

  /* Fix 7 — about.html contact section: reduce oversized display-font values */
  #contact [style*="font-size:42px"] {
    font-size:   clamp(22px, 5.5vw, 28px) !important;
    line-height: 1.2 !important;
  }
  #contact [style*="font-size:32px"] {
    font-size: clamp(20px, 5vw, 24px) !important;
  }
  #contact [style*="font-size:28px"] {
    font-size:  clamp(14px, 3.8vw, 17px) !important;
    word-break: break-all !important;
  }

}