/* Taskronize marketing site — responsive override layer (tablet + mobile).
   -------------------------------------------------------------------------
   The prototype's components style themselves with inline React styles, so
   every rule here needs !important to win. In production these are NOT
   overrides: fold each block into the component's own styles at the same
   breakpoint. Read this file top-to-bottom as the responsive spec.

   Breakpoints
     <= 1024px   tablet landscape  (iPad landscape) — TabletBar nav
     <=  900px   tablet portrait   (iPad Air 834, iPad mini 768)
     <=  768px   drawer nav        (MobileBar full-screen sheet)
     <=  640px   mobile            (iPhone 390 / 430)

   Hook classes (added to the components, see RESPONSIVE.md)
     .tkz-r-g2 / g3 / g4 / g6   n-column card grids
     .tkz-r-split               asymmetric two-column splits
     .tkz-r-stickyrow           the home sticky-stacking service rows
     .tkz-r-stackgap            the scroll spacer between those rows
     .tkz-r-box                 BigServiceBox tile (+ boxtitle/num/foot)
     .tkz-r-footer .tkz-r-cta .tkz-r-pagehero .tkz-r-flowcard .tkz-r-ticker
*/

/* ---------------- tablet landscape and below ---------------- */
@media (max-width: 1024px) {
  body { --section-padding-y: 96px; }
  .tkz-r-g6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .tkz-r-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .tkz-r-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Scroll-driven sticky stacking is off from tablet down: rows become plain
     stacked blocks so touch scrolling stays 1:1 with the finger. */
  .tkz-r-stickyrow { position: static !important; min-height: 0 !important; padding-top: 0 !important; margin-bottom: 24px; }
  .tkz-r-stackgap { display: none !important; }

  /* Section head + its trailing action link stack instead of sitting apart. */
  [data-section-head] { align-items: flex-start !important; gap: 22px !important; }
  [data-section-head] > div { flex: 1 1 100% !important; }

  .tkz-r-footer { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 36px !important; }
  .tkz-r-footer > div:first-child { grid-column: 1 / -1; max-width: 560px !important; }
  .tkz-r-cta { padding: 48px 32px !important; }
}

/* ---------------- tablet portrait and below ---------------- */
@media (max-width: 900px) {
  .tkz-r-split { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  .tkz-r-flowcard { padding: 26px !important; }
  .tkz-r-ticker { margin-top: -90px !important; }
}

/* ---------------- mobile ---------------- */
@media (max-width: 640px) {
  body {
    --fs-body: 17px;
    --fs-body-lg: 19px;
    --fs-label: 11px;
    --fs-h1-fluid: clamp(34px, 9.6vw, 44px);
    --fs-h2-fluid: clamp(27px, 7.4vw, 34px);
    --fs-h3-fluid: clamp(22px, 5.8vw, 27px);
    --section-padding-y: 64px;
  }
  .tkz-r-g6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .tkz-r-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
  .tkz-r-g3, .tkz-r-g2 { grid-template-columns: minmax(0, 1fr) !important; }
  .tkz-r-g2 { gap: 20px !important; }

  .tkz-r-pagehero { padding-top: 52px !important; padding-bottom: 52px !important; }
  .tkz-r-cta { padding: 40px 22px !important; }
  .tkz-r-flowcard { padding: 22px !important; }
  .tkz-r-ticker { margin-top: -70px !important; }

  /* Footer: identity block full width, link columns two-up. */
  .tkz-r-footer { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px 24px !important; }

  /* Service tiles: shorter than the desktop 4:4.15 square, tighter insets. */
  .tkz-r-box { aspect-ratio: 4 / 3.5 !important; }
  .tkz-r-boxtitle { font-size: clamp(34px, 10vw, 46px) !important; }
  .tkz-r-boxnum { left: 22px !important; top: 22px !important; }
  .tkz-r-boxfoot { left: 22px !important; right: 22px !important; bottom: 22px !important; }
  .tkz-r-boxfoot > span:first-child { font-size: 16px !important; max-width: 100% !important; }
  .tkz-r-boxfoot > span:last-child { width: 38px !important; height: 38px !important; }

  /* Full-bleed project marquee: one card fills the screen width. */
  .tkz-r-projcard { width: calc(100vw - 48px) !important; }

  /* Fields carry no border at rest on mobile — separation is fill only. The two
     states that MUST be visible override that: an error draws a 1.5px brick-red
     border, and focus draws its ring. They coexist; a field in error keeps a
     focus indicator (tinted brick so the two states read as one). */
  input, textarea, select { border: 0 !important; box-shadow: none !important; }
  input:focus-visible, textarea:focus-visible, select:focus-visible { box-shadow: var(--focus-ring) !important; }
  [aria-invalid="true"] { border: 1.5px solid var(--color-error) !important; }
  [aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px rgba(190, 45, 25, 0.26) !important; }

  /* iOS Safari zooms the page when a field under 16px is focused. */
  input, textarea, select { font-size: max(16px, 1rem) !important; }

  /* Legal / long-form pages: sidebar under the article. */
  .tkz-r-doc { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; }
}

/* Touch devices never get the hover-only decor drift or magnetic pull. */
@media (hover: none) {
  .tkz-decor-in:hover { transform: none; }
}

/* ---------------- touch + keyboard states (all widths) ----------------
   The desktop build has hover states and nothing else: on touch none of the
   lift / underline / nudge transitions ever fire, and a keyboard user gets a
   focus ring on inputs only. These two blocks are the missing halves. */

/* Keyboard: one visible focus treatment for every interactive thing that is
   not a field. Same dark-teal halo the fields use, plus a 2px offset outline so
   it reads on both the off-white and near-black grounds. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
figure:focus-visible,
.tkz-r-box:focus-visible,
.tkz-r-projcard:focus-visible {
  outline: 2px solid var(--color-dark-teal);
  outline-offset: 3px;
  border-radius: 3px;
  box-shadow: var(--focus-ring);
}
/* On the dark sections the teal halo disappears — invert to off-white there. */
.tkz-on-dark a:focus-visible,
.tkz-on-dark button:focus-visible,
footer a:focus-visible,
footer button:focus-visible {
  outline-color: var(--color-soft-teal);
  box-shadow: 0 0 0 3px rgba(180, 214, 211, 0.34);
}

/* Touch: the pressed state replaces hover. Cards settle instead of lifting,
   buttons darken one step, arrows nudge on press rather than on pointer-over. */
@media (hover: none) {
  a:active,
  button:active,
  [role="button"]:active { opacity: 0.72; transition: opacity 90ms linear; }
  .tkz-r-projcard:active,
  .tkz-r-box:active,
  .tkz-card:active { transform: translateY(1px); transition: transform 110ms var(--ease-standard); }
  .tkz-r-box:active .tkz-arw,
  a:active .tkz-arw,
  button:active .tkz-arw { transform: translateX(4px); transition: transform 140ms var(--ease-standard); }
}

/* Minimum 44px targets. The desktop sizes are text-height only — footer links,
   FAQ rows and tag pills were all well under. Padding grows, type does not. */
@media (max-width: 1024px) {
  footer a,
  footer button { min-height: 44px; display: inline-flex; align-items: center; }
  [data-faq-row] { min-height: 56px; }
  .tkz-tag,
  [data-tag-pill] { min-height: 44px; display: inline-flex; align-items: center; }
  /* Tag pills inside a case-study figcaption stay compact — they are labels,
     not controls, so they are exempt from the target rule. */
  figcaption .tkz-tag,
  figcaption [data-tag-pill] { min-height: 0; }
}