/* Slice 30: factory and program pages, wave 3 (responsive pass for 320 to 1920).
   Builds on 10-factory.css and 20-factory.css. Scoped to the factory routes and to the
   ef10-/ef20- hooks used only in those templates. Layout only: no new motion. */

/* ---------- spec sheet: even rows at every width ----------
   auto-fit left orphan cells (5 + 1 at 1024, 3 + 2 with an empty slot at 768).
   A 6-track grid lets 4, 5 and 6 items fill every row with no gaps. */
@media (min-width: 561px) {
  .ef10-spec-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ef10-spec-grid > div { grid-column: span 2; }
  /* 4 items: 2 x 2 */
  .ef10-spec-grid > div:first-child:nth-last-child(4),
  .ef10-spec-grid > div:first-child:nth-last-child(4) ~ div { grid-column: span 3; }
  /* 5 items: 3 on top, 2 below */
  .ef10-spec-grid > div:first-child:nth-last-child(5) ~ div:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 1100px) {
  /* One row on desktop: 4, 5 or 6 equal columns. */
  .ef10-spec-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .ef10-spec-grid > div,
  .ef10-spec-grid > div:first-child:nth-last-child(4),
  .ef10-spec-grid > div:first-child:nth-last-child(4) ~ div,
  .ef10-spec-grid > div:first-child:nth-last-child(5) ~ div:nth-child(n+4) { grid-column: auto; }
}
.ef10-spec-grid dd { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 560px) {
  .ef10-spec-grid dd small { font-size: .9rem; }
  .ef10-spec-head { font-size: .66rem; }
}
@media (max-width: 380px) {
  .ef10-spec-head span:last-child { display: none; }
}

/* ---------- shared phone rules for every factory route ---------- */
@media (max-width: 560px) {
  :is(.route-about, .route-how-we-make-it, .route-quality-control, .route-certifications, .route-compliance,
      .route-sampling, .route-production-calendar, .route-who-we-serve, .route-private-label,
      .route-white-label, .route-shipping) main :is(.feature-grid p, .feature-grid .ticks, .steps4 span,
      .make-step p, .segment p, .segment .ticks, .process li > span:last-child, .caveat, .planner-steps li,
      .closures li, .kv div) {
    font-size: 1rem; /* 16px minimum for running text on phones */
  }
  :is(.route-about, .route-how-we-make-it, .route-quality-control, .route-certifications, .route-compliance,
      .route-sampling, .route-production-calendar, .route-who-we-serve, .route-private-label,
      .route-white-label, .route-shipping) .page-hero .display {
    font-size: clamp(1.9rem, 8.4vw, 2.4rem);
    line-height: 1.08;
    overflow-wrap: break-word;
  }
  :is(.route-about, .route-how-we-make-it, .route-quality-control, .route-certifications, .route-compliance,
      .route-sampling, .route-production-calendar, .route-who-we-serve, .route-private-label,
      .route-white-label, .route-shipping) .page-hero .lede { font-size: 1.02rem; }
  .route-private-label .page-hero .hero-cta { flex-direction: column; align-items: stretch; }
  .route-private-label .page-hero .hero-cta .btn { justify-content: center; width: 100%; }
  :is(.route-about, .route-how-we-make-it, .route-quality-control, .route-certifications, .route-compliance,
      .route-sampling, .route-production-calendar, .route-who-we-serve, .route-private-label,
      .route-white-label, .route-shipping) main .prose h2 { font-size: 1.3rem; }
}

/* Hero photo on a stacked layout: shorter crop so the spec sheet shows sooner. */
@media (max-width: 860px) {
  :is(.route-about, .route-private-label) .page-hero .media img { aspect-ratio: 16 / 9; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  :is(.route-about, .route-private-label) .page-hero .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; }
}

/* ---------- about: contact card and process ---------- */
/* Label above value at every width: a long email and a short phone no longer sit
   right-aligned on one row and wrapped left on the next. */
.route-about .sticky-card .kv div { flex-direction: column; align-items: flex-start; gap: 4px; }
.route-about .sticky-card .kv dd { min-width: 0; text-align: left; overflow-wrap: anywhere; }
.route-about .addr { overflow-wrap: anywhere; }
@media (min-width: 561px) and (max-width: 900px) {
  /* Article grid stacks here; keep the contact card from stretching to a long thin strip. */
  .route-about .article-grid .sticky-card { max-width: 520px; }
}
@media (min-width: 521px) and (max-width: 980px) {
  .route-about .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 700px) and (max-width: 980px) {
  .route-about .process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .route-about .process li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
  .route-about .process li > .dot { grid-row: span 2; }
}

/* ---------- how we make it ---------- */
@media (max-width: 560px) {
  /* Number sits level with the step title instead of floating mid-card on tall steps. */
  .route-how-we-make-it .make-step { gap: 12px 14px; padding: 16px; align-items: start; }
  .route-how-we-make-it .make-step .approve { grid-column: 1 / -1; }
  .ef20-filter { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: var(--radius); }
  .ef20-filter button { border-radius: calc(var(--radius) - 2px); padding-inline: 8px; }
}

/* ---------- who we serve: buyer nav scrolls instead of wrapping onto 2 sticky rows ---------- */
@media (min-width: 861px) and (max-width: 1240px) {
  .ef20-segnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .ef20-segnav::-webkit-scrollbar { display: none; }
  .ef20-segnav .chip { flex: none; }
}
@media (pointer: coarse) {
  .ef20-segnav .chip { min-height: 44px; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .route-who-we-serve .segment { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}

/* ---------- swipe steps: bleed to the screen edge so the next card peeks in ---------- */
@media (max-width: 719px) {
  .steps4.ef20-swipe {
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }
}
@media (min-width: 720px) and (max-width: 860px) {
  .steps4.ef20-swipe {
    margin-inline: -32px;
    padding-inline: 32px;
    scroll-padding-inline: 32px;
  }
}
@media (max-width: 360px) {
  .steps4.ef20-swipe { grid-auto-columns: 86%; }
}

/* ---------- shipping: mid widths keep the table readable without sideways scroll ---------- */
@media (min-width: 641px) and (max-width: 900px) {
  .ef20-ship .tiers th, .ef20-ship .tiers td { padding: 12px; font-size: .9rem; }
  .ef20-ship .tiers td:first-child { white-space: normal; min-width: 110px; }
}
@media (max-width: 640px) {
  /* Stacked cards: drop main.css's 480px table minimum, which pushed the cards past the
     screen edge on phones and clipped every line of text. */
  .ef20-ship table.tiers { min-width: 0; }
  .ef20-ship td { font-size: 1rem; }
}

/* ---------- production calendar ---------- */
.route-production-calendar .planner .input { min-width: 0; max-width: 100%; }
.route-production-calendar .planner input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-height: 46px; }
@media (max-width: 560px) {
  .route-production-calendar .planner-result b { font-size: 1.35rem; }
}
@media (max-width: 420px) {
  .route-production-calendar .closures li { grid-template-columns: 1fr; gap: 2px; }
  .closures li.is-next { margin-inline: -8px; padding-inline: 8px; }
}
@media (min-width: 640px) and (max-width: 900px) {
  /* Stacked: planner fields sit 2-up again, which main.css allows above 560px. */
  .route-production-calendar .planner-grid { gap: 16px; }
}

/* ---------- certifications: certificate rows line up across a card row ----------
   A two-line name (WRAP) no longer pushes its ID and verify rows below its neighbors. */
@media (min-width: 561px) {
  .route-certifications .cert-card { grid-template-rows: auto auto 1fr auto; }
}
/* Type tag sizes to its word instead of stretching into a bar across the card. */
.route-certifications .cert-card > .badge { justify-self: start; }

/* ---------- certifications and quality control: badge rows ---------- */
@media (max-width: 560px) {
  :is(.route-certifications, .route-quality-control) .cert-badges-lg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.route-certifications, .route-quality-control) .cert-badges-lg a { min-width: 0; min-height: 44px; }
  .route-certifications .cert-card .kv div { flex-wrap: wrap; }
}

/* ---------- sampling, white label, compliance: 3-up cards at tablet ---------- */
@media (min-width: 561px) and (max-width: 980px) {
  :is(.route-sampling, .route-white-label, .route-compliance, .route-shipping) .feature-grid.three > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- wide screens: keep line lengths in check ---------- */
@media (min-width: 1600px) {
  :is(.route-about, .route-how-we-make-it, .route-quality-control, .route-certifications, .route-compliance,
      .route-sampling, .route-production-calendar, .route-who-we-serve, .route-private-label,
      .route-white-label, .route-shipping) .page-hero .lede { max-width: 60ch; }
}

/* ---------- no sideways scroll from long words or wide media ---------- */
:is(.route-about, .route-how-we-make-it, .route-quality-control, .route-certifications, .route-compliance,
    .route-sampling, .route-production-calendar, .route-who-we-serve, .route-private-label,
    .route-white-label, .route-shipping) main :is(img, svg, video) { max-width: 100%; }
:is(.route-about, .route-how-we-make-it, .route-quality-control, .route-certifications, .route-compliance,
    .route-sampling, .route-production-calendar, .route-who-we-serve, .route-private-label,
    .route-white-label, .route-shipping) main :is(h1, h2, h3, p, li, dd) { overflow-wrap: break-word; }