/* Slice: order, wave 3 (responsive pass).
   Targets 320 / 360 / 375 / 390 / 414 / 768 / 820 / 1024 / 1280 / 1440 / 1920.
   Scoped to o-* and ef-form classes that only the order, contact, pricing,
   trade-account and line-sheet templates output. */

/* ---------- guards: nothing in these templates may widen the page ---------- */
.o-hero, .o-body, .o-grid > *, .o-ph-grid > *, .o-ph-copy > * { min-width: 0; }
.o-hero .lede, .o-ch-v, .o-who-list, .o-facts dd { overflow-wrap: break-word; }
.ef-form textarea.input { resize: vertical; max-width: 100%; }
.ef-form .input { min-height: 48px; font-size: 16px; } /* 16px stops iOS zoom on focus */

/* ---------- 4-fact rails (trade account, line sheet gate) ----------
   One row of four down to 561px; below that the shared 2-column rules in
   10-order.css take over unchanged. */
.o-terms.o-terms-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 561px) and (max-width: 900px) {
  .o-terms.o-terms-4 > div:nth-child(n) { padding-left: 16px; border-left: 1px solid var(--rule); border-top: 0; }
  .o-terms.o-terms-4 > div:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .o-terms.o-terms-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- sticky side column: only where it fits the viewport ----------
   A sticky aside taller than the screen hides its own bottom card on 1024x768
   and 1280x800 screens, so it only sticks on tall viewports. */
@media (min-width: 861px) and (max-height: 999px) {
  .o-side { position: static; }
}

/* ---------- tap targets (44px) for small inline links ---------- */
.o-ch-v a, .o-ch-n a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; }
.o-ch-n a { min-height: 40px; margin-block: -9px; }
.o-more { min-height: 44px; }
.o-talk .contact-list a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; overflow-wrap: anywhere; }
.o-gate-cta .btn { min-height: 52px; }

/* ---------- pricing hero: show the five tiers in the first phone screen ----------
   Under 960px the copy column dissolves into the grid so the ladder can sit
   directly under the lede, before the in/out lists. */
@media (max-width: 960px) {
  .o-ph-grid { gap: 0; }
  .o-ph-copy { display: contents; }
  .o-ph-copy > .eyebrow, .o-ph-copy > h1, .o-ph-copy > .lede { order: 0; }
  .o-ph-grid > .o-ladder { order: 1; margin-top: 24px; }
  .o-ph-copy > .o-basis { order: 2; }
}
@media (min-width: 600px) and (max-width: 960px) {
  .o-ph-grid > .o-ladder { max-width: 640px; }
}

/* ---------- tablets (768 / 820 / 1024) ---------- */
@media (min-width: 861px) and (max-width: 1100px) {
  .o-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .o-ch { padding: 14px 14px 16px; column-gap: 10px; }
}
@media (min-width: 561px) and (max-width: 860px) {
  /* Side cards sit two-up under the form instead of one tall stack. */
  .o-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-side > .o-next { grid-column: 1 / -1; }
  /* Contact and trade account have only one card after it: no half-empty row. */
  .o-side > .o-next + .card:last-child { grid-column: 1 / -1; }
}

/* ---------- phones (320 to 560) ---------- */
@media (max-width: 560px) {
  .o-hero h1.display { font-size: clamp(1.85rem, 8.4vw, 2.3rem); line-height: 1.08; }
  .o-hero .eyebrow { line-height: 1.5; }
  .o-hero .lede { font-size: 1rem; }
  .o-terms { margin-top: 22px; }

  /* Body copy at 16px minimum. */
  .o-steps li, .o-facts > div, .o-basis ul, .o-rule p, .o-caveat p:last-child,
  .o-ch-n, .o-ladder-eg, .ef-form-sub, .o-side .hint.small, .ef-form-foot .hint.small { font-size: 1rem; }
  .o-ladder-note { font-size: .9rem; }
  .o-facts > div { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }

  /* Form: full width, roomy fields, one column. */
  form.ef-form { gap: 20px; }
  .ef-form .form-grid { gap: 14px; }
  .ef-form-foot { gap: 12px; }
  .ef-form-foot .hint { max-width: none; }

  /* Tier ladder: tighter rows, price never wraps under the quantity. */
  .o-ladder figcaption { padding: 14px 16px 12px; }
  .o-ladder-rows li { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 12px 16px; }
  .o-ladder-q { font-size: 1.12rem; }
  .o-ladder-p { font-size: 1rem; white-space: nowrap; }
  .o-ladder-note { padding: 12px 16px 14px; }

  .o-basis-col { padding-right: 0; }
  .o-caveat { padding: 16px 16px 16px 18px; }
  .o-rule { padding-right: 0; }
}

/* Smallest phones (320 / 360): give fields the full card width. */
@media (max-width: 400px) {
  form.ef-form > *:not(.hp) { margin-inline: 16px; }
  .ef-form-head { padding-inline: 16px; }
  .o-side .card { padding: 16px; }
  /* :nth-child(n) matches the specificity of the 10-order.css phone rule. */
  .o-terms > div { padding-right: 8px; }
  .o-terms > div:nth-child(n) { padding-left: 10px; }
  .o-terms > div:nth-child(2n+1) { padding-left: 0; }
  .o-terms dd { font-size: .92rem; }
  .ef-fs legend { font-size: 1rem; }
}

/* ---------- large desktop (1440 / 1920) ---------- */
@media (min-width: 1400px) {
  .o-grid { gap: 32px; }
  .o-ladder-rows li { padding-block: 15px; }
}

/* ---------- wave 2 additions (calculator, quick-add, pill) ---------- */
/* The form card hugs its content (a stretched card left a blank band under the
   submit row on phones). */
.o-grid > form.ef-form { align-self: start; height: auto; min-height: 0; }
@media (max-width: 400px) {
  .o-calc { padding-inline: 16px; }
  .o-calc-row { gap: 10px; }
  .o-calc-range { flex-basis: 100%; }
  .o-calc-sum b { font-size: 1.2rem; }
  .o-meter { flex-wrap: wrap; gap: 6px; }
  .o-meter-bar { flex-basis: 100%; }
}
@media (max-width: 560px) {
  .o-calc-tag, .o-calc-next { font-size: .92rem; }
  /* Quick-add row bleeds exactly to the card edge (form inset is 18px here). */
  .o-quick { margin-inline: -18px; padding-inline: 18px; scroll-padding-inline: 18px; }
}
@media (max-width: 400px) {
  .o-quick { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
}
/* Pill clears the form area: keep the last card readable above it. */
@media (max-width: 860px) {
  body.route-order .o-body, body.route-contact .o-body, body.route-trade-account .o-body { padding-bottom: 84px; }
}