/* Customization hub, wave 3: responsive pass for 320 to 1920.
   Scoped to cz-* classes and the chain / fabric filter blocks that only these templates render. */

/* ---------- shared ---------- */
.cz-hero-main, .cz-sheet, .cz-method, .cz-card, .cz-fab { min-width: 0; }
.cz-hero h1.display, .cz-line, .cz-method-body h3, .cz-card .h3, .cz-fab-top .h3 { overflow-wrap: break-word; hyphens: manual; }
.cz-group, .cz-deco, .cz-fabrics { scroll-margin-top: calc(var(--head-h) + 72px); }
.cz-method-img img, .cz-fab-top img { max-width: 100%; }

/* Wide desktop: keep the hero balanced and the method grid at a calm 4-up. */
@media (min-width: 1600px) {
  .cz-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(380px, .8fr); }
  .cz-methods { gap: 18px; }
  .cz-method-body { padding: 16px 18px 18px; }
}

/* Small laptop / tablet landscape (1024): the sheet column needs room for its labels. */
@media (min-width: 961px) and (max-width: 1180px) {
  .cz-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 28px; }
  .cz-hero h1.display { font-size: clamp(2rem, 3.8vw, 2.8rem); }
  .cz-sheet dl div { grid-template-columns: 84px minmax(0, 1fr); }
}

/* Tablet portrait (768 to 960): hero stacks; lay the spec sheet out in two columns
   so it does not become a long single strip. */
@media (min-width: 640px) and (max-width: 960px) {
  .cz-sheet { max-width: none; }
  .cz-sheet dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cz-sheet dl div { border-top: 1px solid var(--rule); }
  .cz-sheet dl div:nth-child(2) { border-top: 0; }
  .cz-sheet dl div:nth-child(even) { border-left: 1px solid var(--rule); }
  .cz-hero h1.display { max-width: 22ch; }
}

/* Fabric cards up to small laptops: cards are ~300px wide, so a right-aligned value
   beside its label wraps to two words a line. Stack label over value and let the
   tag row sit under the code instead of squeezing beside it. */
@media (max-width: 1180px) {
  .cz-fab .kv div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cz-fab .kv dd { max-width: none; text-align: left; }
  .cz-fab-head { flex-wrap: wrap; }
  .cz-fab-head .tags { justify-content: flex-start; }
}

/* Tablets: the 9-stage chain reads better as 5 + 4 than 3 rows of 3. */
@media (min-width: 640px) and (max-width: 1000px) {
  .chain-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fabric-grid.cz-fgrid { gap: 14px; }
}

/* ---------- touch: tap targets ---------- */
@media (pointer: coarse), (max-width: 760px) {
  .cz-hero .crumbs a, .chain-panel .text-link, .cz-sec-h a, .cz-fabrics ~ .band .text-link { min-height: 44px; display: inline-flex; align-items: center; }
  .chain-steps button { min-height: 56px; }
  .cz-filter .chip, .cz-ffilter .chip { min-height: 44px; }
}

/* ---------- phones ---------- */
@media (max-width: 639px) {
  /* Readable copy: 16px for anything that is a sentence. */
  .cz-line { font-size: 1.08rem; }
  .cz-lede, .cz-how .t, .cz-card > p, .cz-list li, .cz-fab-top p, .chain-panel p, .cz-guide .caveat { font-size: 1rem; }
  .cz-sheet dd { font-size: .95rem; }
  /* "PRODUCTION" is the longest label: keep it inside its column with room to spare. */
  .cz-sheet dt { font-size: .64rem; letter-spacing: .05em; }
  .cz-hero h1.display { font-size: clamp(1.75rem, 7.6vw, 2.3rem); max-width: none; }

  /* Decoration filter: one sticky row that scrolls sideways instead of
     three wrapped rows that cover the cards under the header. */
  .filter-bar.cz-filter {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; scroll-snap-type: x proximity;
    margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px;
    padding-block: 8px; margin-bottom: 8px;
    box-shadow: 0 1px 0 var(--rule);
  }
  .filter-bar.cz-filter::-webkit-scrollbar { display: none; }
  .filter-bar.cz-filter .chip { flex: none; scroll-snap-align: start; white-space: nowrap; }
  .filter-bar.cz-filter::after { content: ""; flex: none; width: 1px; }

  /* Method cards: body copy at 16px. */
  .cz-method-body h3 { font-size: 1.06rem; }
  .cz-method-body dd { font-size: 1rem; line-height: 1.45; }
  .cz-method-body dt { font-size: .64rem; }
  .cz-group-h { flex-wrap: wrap; gap: 6px 12px; }

  /* Choosing-a-method table: restack to labelled rows, no sideways scroll. */
  .cz-guide .tiers-scroll { overflow: visible; }
  .cz-table, .cz-table tbody, .cz-table tr, .cz-table td { display: block; width: 100%; }
  table.tiers.cz-table { min-width: 0; }
  .cz-table td { white-space: normal; font-family: var(--f-body); }
  .cz-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cz-table tr { padding: 12px 14px; border-top: 1px solid var(--rule); }
  .cz-table tr:first-child { border-top: 0; }
  .cz-table td { padding: 0; border: 0; font-size: 1rem; line-height: 1.45; }
  .cz-table td:first-child { font: 600 1rem/1.3 var(--f-display); margin-bottom: 4px; }
  .cz-table td:last-child { color: var(--ink-2); }

  /* Fabric filters: label on its own line, chips scroll sideways. */
  .fabric-filters.cz-ffilter { padding: 12px; gap: 12px; }
  .cz-ffilter .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px; }
  .cz-ffilter .chip-row::-webkit-scrollbar { display: none; }
  .cz-ffilter .opt-label { position: sticky; left: -12px; flex: none; min-width: 0; align-self: center; padding: 0 8px 0 0; background: var(--surface); }
  .cz-ffilter .chip { flex: none; white-space: nowrap; }
  .cz-ffilter .hint { font-size: .9rem; }

  /* Fabric card: rows already stack (see 1180 rule); phone sizes and padding. */
  .cz-fab .kv div { font-size: 1rem; }
  .cz-fab-head { padding: 10px 14px; }
  .cz-fab-top { padding: 14px 14px 4px; }
  .cz-gsm { padding: 10px 14px; }
  .cz-fab .kv { padding: 0 14px 10px; }

  /* Production chain: tabs become a swipe row so the panel stays near the top. */
  .chain-steps {
    display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    scroll-snap-type: x mandatory; margin-inline: -16px; padding: 2px 16px 6px; scroll-padding-inline: 16px;
  }
  .chain-steps::-webkit-scrollbar { display: none; }
  .chain-steps li { flex: 0 0 auto; width: 128px; scroll-snap-align: start; }
  .chain-panel .h3 { font-size: 1.3rem; }

  /* Spec cards. */
  .cz-card .h3, .cz-card h3 { font-size: 1.12rem; }
  .cz-list li { padding: 10px 0; }
}

/* Thumbnail-row method cards (10-customize switches to them at 560): the photo stays a
   true square at the top of the card instead of stretching into a tall strip. */
@media (max-width: 560px) {
  .cz-method { align-items: start; }
  .cz-method-img { aspect-ratio: 1; min-height: 0; margin: 10px 0 10px 10px; border-radius: 6px; }
}

/* Narrow phones (320 to 400). */
@media (max-width: 400px) {
  .cz-method { grid-template-columns: 100px minmax(0, 1fr); }
  .cz-method-body { padding: 10px 12px; }
  .cz-sheet dl div { grid-template-columns: 80px minmax(0, 1fr); gap: 8px; }
  .cz-fab-top { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .fabric-card.cz-fab .cz-fab-top img, .cz-swatch { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .filter-bar.cz-filter, .chain-steps, .cz-ffilter .chip-row { scroll-behavior: auto; }
}