/* ==========================================================================
   NEXUS — Page section styles
   Layouts belonging to specific page sections. Global components live in
   components.css. Every value comes from tokens.css — no raw hex, px, radius
   or duration. Rules: .design/DESIGN.md §7–§10, §19, §22.
   ========================================================================== */

/* Shared: a section's heading block, and the link that closes a section. */
.section-head { margin-bottom: var(--s-8); }
.section-head > h2 + .t-lead { margin-top: var(--s-5); }
.section-foot { margin-top: var(--s-8); }

/* ==========================================================================
   1. Hero — full-bleed photograph, text on a flat Ink scrim (DESIGN.md §10)
   ========================================================================== */
.hero {
  position: relative;
  display: grid;
  isolation: isolate;
  min-height: min(78vh, 720px);
  align-content: end;
}
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Pushes the machine right so the headline sits over the plain wall rather
     than over bright metal highlights, which white text cannot clear
     (DESIGN.md §10 requires 4.5:1 against the region behind the text). */
  object-position: 88% 50%;
  z-index: -2;
}
/* Flat Ink scrim — never a gradient (DESIGN.md §2). */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--c-ink);
  opacity: 0.66;
  z-index: -1;
}
@media (min-width: 1024px) { .hero__scrim { opacity: 0.60; } }

.hero__inner {
  padding-top: var(--s-11);
  padding-bottom: var(--s-9);
  color: var(--c-canvas);
}
/* The line break between the two statement lines is authored in the content
   file, so the title is not width-clamped — clamping would re-wrap it. The
   support line stays inside the quiet half of the photograph. */
.hero__title {
  color: var(--c-canvas);
  max-width: 100%;
  text-wrap: nowrap;      /* honour the authored break where there is room */
}
@media (max-width: 1023px) { .hero__title { text-wrap: balance; } }
.hero__support {
  margin-top: var(--s-5);
  max-width: 38ch;
  color: var(--c-canvas);
}
@media (min-width: 1024px) { .hero__support { max-width: min(46%, 42ch); } }
.hero__cta { margin-top: var(--s-7); }
/* On the scrim the secondary button needs the light treatment */
.hero__cta.btn--secondary { color: var(--c-canvas); border-color: var(--c-canvas); }
@media (hover: hover) and (pointer: fine) {
  .hero__cta.btn--secondary:hover { background: var(--c-canvas); color: var(--c-ink); }
}
.hero :focus-visible { outline-color: var(--c-blue-bright); }

/* ==========================================================================
   3. Product families — objects on the page ground, never cards
   ========================================================================== */
.family-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-8) var(--grid-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .family-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .family-grid { grid-template-columns: repeat(3, 1fr); } }

.family__link { display: block; text-decoration: none; }
.family__frame {
  display: block;
  overflow: hidden;          /* the frame never moves; the image scales inside */
  background: var(--c-mist);
  aspect-ratio: 3 / 2;
}
.family__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-media) var(--ease-state);
}
.family__name {
  display: block;
  margin-top: var(--s-4);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  border-bottom: 2px solid transparent;
  padding-bottom: var(--s-1);
  transition: border-color var(--dur-base) var(--ease-state);
}
.family__line { margin-top: var(--s-3); color: var(--c-steel); max-width: 34ch; }

/* A product that belongs to a group but keeps its own route — the Spiral Curve
   Conveyor under Curve Conveyors. Listed inside the group card so the category
   is visible, indented so it does not read as a fourth group. */
.family__variants {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: var(--s-3) 0 0;
  border-top: var(--hairline);
  display: grid;
  gap: var(--s-2);
}
.family__variants li { display: grid; gap: 2px; }
.family__variants a { color: var(--c-ink); text-decoration: none; border-bottom: 1px solid transparent; justify-self: start; }
.family__variants a:hover { border-bottom-color: var(--c-blue); }
@media (hover: hover) and (pointer: fine) {
  .family__link:hover .family__frame img { transform: scale(1.02); }
  .family__link:hover .family__name { border-bottom-color: var(--c-blue); }
}

/* ==========================================================================
   4. Spiral variants — a compact row list, not a card wall
   ========================================================================== */
.variant-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .variant-list { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-8); } }

.variant { border-top: var(--hairline); }
.variant__link {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: var(--s-4);
  align-items: center;
  padding-block: var(--s-5);
  text-decoration: none;
}
@media (min-width: 480px)  { .variant__link { grid-template-columns: 148px 1fr; gap: var(--s-5); } }
@media (min-width: 1280px) { .variant__link { grid-template-columns: 180px 1fr; } }

.variant__frame {
  display: block;
  overflow: hidden;
  background: var(--c-hairline);
  aspect-ratio: 3 / 2;
}
.variant__frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-media) var(--ease-state);
}
.variant__text { display: block; min-width: 0; }
.variant__name {
  display: block;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur-base) var(--ease-state);
}
.variant__line { display: block; margin-top: var(--s-1); color: var(--c-steel); }
@media (hover: hover) and (pointer: fine) {
  .variant__link:hover .variant__frame img { transform: scale(1.03); }
  .variant__link:hover .variant__name { border-bottom-color: var(--c-blue); }
}

/* Optional video facade (renders only when a URL exists) */
.video-facade { position: relative; background: var(--c-mist); }
.video-facade__link { display: block; position: relative; text-decoration: none; }
.video-facade__label {
  position: absolute;
  left: var(--s-5); bottom: var(--s-5);
  background: var(--c-ink); color: var(--c-canvas);
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-body-sm);
}

/* ==========================================================================
   7. Engineering approach — numbered steps
   ========================================================================== */
.steps { list-style: none; margin: 0; padding: 0; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  align-items: start;
  padding-block: var(--s-5);
  border-top: var(--hairline);
}
.step__number { padding-top: var(--s-1); min-width: 2.5em; }
.step__text { display: block; }
.step__heading {
  display: block;
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
}
.step__text .t-body-sm { display: block; margin-top: var(--s-2); max-width: 56ch; }
.approach__figure { margin: 0; background: var(--c-mist); }
.approach__figure img { width: 100%; height: auto; }

/* ==========================================================================
   8. Applications — full-bleed evidence band, then contained blocks
   ========================================================================== */
.applications__band { margin-block: var(--s-8) var(--s-9); }
.applications__band img {
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: cover;
}
.applications__band figcaption { margin-top: var(--s-4); }

.application-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-8) var(--grid-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .application-grid { grid-template-columns: repeat(3, 1fr); } }
.application img { width: 100%; height: auto; background: var(--c-mist); }
.application__heading {
  margin-top: var(--s-4);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
}
.application p { margin-top: var(--s-3); max-width: 40ch; }

/* ==========================================================================
   9. Projects — hairline-separated rows, industry-led labels
   ========================================================================== */
.project-rows { list-style: none; margin: 0; padding: 0; }
.project-row {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-6);
  border-top: var(--hairline);
  align-items: center;
}
.project-row:last-child { border-bottom: var(--hairline); }
@media (min-width: 768px) {
  .project-row { grid-template-columns: 1fr 340px; gap: var(--s-9); padding-block: var(--s-8); }
}
.project-row__title {
  margin-top: var(--s-4);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-medium);
}
.project-row__text p:last-child { margin-top: var(--s-4); max-width: 52ch; }
.project-row__text > .t-body-sm { margin-top: var(--s-3); max-width: 52ch; }
.project-row__media { overflow: hidden; background: var(--c-hairline); }
.project-row__media img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   10. Updates — quiet rows (section absent when empty)
   ========================================================================== */
.update-rows { list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.update-row { padding-block: var(--s-4); border-top: var(--hairline); }
.update-row a { display: inline-block; margin-top: var(--s-2); }

/* ==========================================================================
   11. Closing CTA
   ========================================================================== */
.closing-cta__inner { max-width: 52ch; }

/* ==========================================================================
   Hero — eyebrow added (DESIGN.md §4 scale contrast)
   ========================================================================== */
.hero__eyebrow {
  display: block;
  margin-bottom: var(--s-5);
  color: var(--c-canvas);
  opacity: 0.85;
}

/* ==========================================================================
   6. Connection band
   The homepage carries the only connection band on the site and styles it in
   home.css. The rules that used to live here belonged to the first homepage
   layout and were removed with it; a `.band--deep .t-label--blue` override is
   all that is still shared.
   ========================================================================== */
.band--deep .t-label--blue { color: var(--c-blue-bright); }

/* ==========================================================================
   Page header (M01) — shared by every page except the homepage
   ========================================================================== */
.page-head .heading-block h1 { max-width: 16ch; }

/* Family line-up with a "typical use" line (products overview, T2) */
.family-grid--detailed .family__typical {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: var(--hairline);
  display: grid;
  gap: var(--s-2);
}
.family-grid--detailed .family__typical .t-body-sm { color: var(--c-steel); }

/* ==========================================================================
   Selection aid — "if you need X, look at Y" (T2)
   ========================================================================== */
.selection-list { margin: 0; }
.selection-row {
  display: grid;
  gap: var(--s-2) var(--s-6);
  padding-block: var(--s-5);
  border-top: var(--hairline);
}
@media (min-width: 768px) {
  .selection-row { grid-template-columns: 1fr 1fr; align-items: baseline; }
}
.selection-row dt {
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}
.selection-row dd { margin: 0; display: grid; gap: var(--s-2); }
.selection-row__answer {
  font-weight: var(--fw-medium);
  text-decoration-thickness: 1.5px;
}

/* ==========================================================================
   Product detail (T4)
   ========================================================================== */
.product-hero { margin-bottom: var(--s-10); }
.product-hero img { width: 100%; height: auto; }

.glance-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 60ch;
}
.glance-list li {
  border-top: var(--hairline);
  padding-block: var(--s-4);
  font-size: var(--fs-body);
}

.application-grid--two { grid-template-columns: 1fr; }
@media (min-width: 700px) { .application-grid--two { grid-template-columns: repeat(2, 1fr); } }

/* Project index rows + detail */
.project-row__date { display: block; margin-top: var(--s-3); }
.project-row__title a { text-decoration: none; }
.project-row__title a:hover { text-decoration: underline; text-decoration-color: var(--c-blue); }
.product-hero__caption { display: block; margin-top: var(--s-4); }

/* Prev / next pager */
.pager { border-block: var(--hairline); }
.pager__inner { display: grid; gap: var(--s-6); }
@media (min-width: 700px) { .pager__inner { grid-template-columns: 1fr 1fr; } }
.pager__link { display: block; text-decoration: none; }
.pager__link--next { text-align: right; }
.pager__title { display: block; margin-top: var(--s-2); font-size: var(--fs-4); line-height: 1.25; }
.pager__link:hover .pager__title { color: var(--c-blue); }

/* Updates — rows, category chips, and the empty state */
.update-row { display: block; }
.update-row:last-child { border-bottom: var(--hairline); }
.update-row__title {
  margin-top: var(--s-3);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-medium);
}
.update-row__title a { text-decoration: none; margin: 0; }
.update-row__title a:hover { text-decoration: underline; text-decoration-color: var(--c-blue); }
.update-row > p:last-child { margin-top: var(--s-2); max-width: 60ch; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0 0 var(--s-6); padding: 0; }
.chip {
  display: inline-block;
  padding: var(--s-2) var(--s-3);
  border: var(--hairline);
  border-radius: var(--radius-ui);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-graphite);
}

.empty-state { padding-block: var(--s-6) var(--s-8); border-top: var(--hairline); }

/* Prose — Markdown bodies (updates, privacy). Deliberately narrow. */
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { margin-top: var(--s-9); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.prose h3 { margin-top: var(--s-8); font-size: var(--fs-h4); line-height: var(--lh-h4); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--s-2); }
.prose img { width: 100%; height: auto; }
/* 404 route list — no thumbnail column */
.variant__link--plain { grid-template-columns: 1fr; }
@media (min-width: 480px)  { .variant__link--plain { grid-template-columns: 1fr; } }
@media (min-width: 1280px) { .variant__link--plain { grid-template-columns: 1fr; } }
.prose > :first-child { margin-top: 0; }