/* ============================================================================
   STRATYLIX — RESPONSIVE
   ----------------------------------------------------------------------------
   FOUR breakpoints. The archived site used thirteen (480, 500, 600, 640, 700,
   760, 768, 800, 900, 980, 1000, 1024, 1100) with no system, plus two
   conflicting hero rule sets. Everything below uses only these four:

     sm   640px   phone landscape / small tablet
     md   900px   tablet
     lg  1024px   desktop — also the header's nav/drawer switch
     xl  1280px   wide desktop

   Most layout is intrinsic (auto-fit grids, clamp() type, flex-wrap), so this
   file stays small on purpose. Add a rule here only when intrinsic layout
   genuinely cannot express the change.

   Load order: this file comes last so it can adjust anything above it.
   ========================================================================== */

/* ── ≥ 640px — sm ────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .sx-footer__bottom { flex-wrap: nowrap; }
}

/* ── ≥ 900px — md ────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  /* editorial rows become two columns */
  .sx-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .sx-split--reverse > :first-child { order: 2; }

  .sx-hero h1 { max-width: 16ch; }
}

/* ── ≥ 1024px — lg (matches the header breakpoint) ───────────────────────── */
@media (min-width: 1024px) {
  :root { --section-pad: clamp(4.5rem, 6vw, 7rem); }

  .sx-hero { padding-block: clamp(5rem, 7vw, 8rem) clamp(4rem, 5vw, 6rem); }
  .sx-hero__stats { gap: var(--sp-8); }

  .sx-acrostic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── ≥ 1280px — xl ───────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .sx-grid--lg { --grid-min: 340px; }
}

/* ── narrow-phone safety net ─────────────────────────────────────────────── */
/* Not a layout breakpoint — only prevents overflow on very small screens. */
@media (max-width: 380px) {
  .sx-hero__stats { gap: var(--sp-4); }
  .sx-btn { width: 100%; }
}

/* ── coarse pointer ──────────────────────────────────────────────────────── */
/* Hover-only affordances do nothing on touch; remove the transform so cards
   don't "stick" in a hovered state after a tap. */
@media (hover: none) {
  .sx-card--interactive:hover { transform: none; }
}

/* ── tall-content safety ─────────────────────────────────────────────────── */
@supports (height: 100svh) {
  .sx-hero--full { min-height: calc(100svh - var(--header-h)); }
}

/* ── touch target sizing (Big Build 6) ────────────────────────────────────
   Inline text links inside cards, contact lines and the footer render at
   17-31px, which is below the ~44px comfortable tap target. On touch devices
   and narrow viewports we grow the hit area with padding, without changing
   type size or the desktop composition.
   ------------------------------------------------------------------------ */
@media (hover: none), (max-width: 899.98px) {
  .sx-solcard__link a,
  .sx-record__foot a,
  .sx-crosslink em,
  .sx-contactline a,
  .sx-footer a,
  .sx-indmore a,
  .sx-crumbs a,
  .sx-form__note a,
  .sx-contactinfo dd a,
  .sx-caps2 a,
  .sx-legal li > a,
  .sx-taglist a,
  .sx-job__body a:not(.sx-btn) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Footer columns: keep the list visually tight while the tap area grows. */
  .sx-footer li + li { margin-top: 0; }
  .sx-footer a { padding-block: 0.55rem; }
  /* An office address is a block of lines, not a link row. The touch-target
     rule above makes every footer link inline-flex, which turned the
     <br>-separated lines into flex items and laid the address out sideways:
     "Richmond, KY | 212 N 2nd St, Ste 100 | Richmond, KY 40475". It keeps the
     44px tap height as a block instead. */
  .sx-footer__offices a {
    display: block;
    align-items: initial;
    padding-block: 0.35rem;
  }
  .sx-contactline { gap: var(--sp-3) var(--sp-5); }
  /* Breadcrumb stays visually compact; only the hit area grows. */
  .sx-crumbs { align-items: center; }
  .sx-crumbs a { padding-inline: 0.15rem; }
  /* Legal contents lists and tag-style link lists: grow the row, not the type. */
  .sx-legal ol li + li, .sx-legal ul li + li { margin-top: 0; }
  .sx-taglist a { padding-block: 0.55rem; }
}

/* The honeypot must stay small, off-screen and untabbable — never enlarge it. */
.sx-hp, .sx-hp * { min-height: 0 !important; }