@charset "utf-8";
/* ==========================================================================
   BECT Ltd — Equipment Template Stylesheet
   Phase 1B (approved 25 July 2026) · refactored Phase 1C, 25 July 2026

   THIS FILE EXTENDS bect-redesign-core.css AND DOES NOT REPLACE IT.
   The page must link them in this order:
       <link rel="stylesheet" href="style/bect-redesign-core.css" />
       <link rel="stylesheet" href="style/bect-redesign-equipment.css" />

   The deferred refactor noted in the Phase 1B header is now DONE. Tokens,
   typography, spacing, buttons, header, navigation, breadcrumb, cards,
   placeholders, enquiry band, footer and the shared responsive, reduced-motion
   and print rules have moved to bect-redesign-core.css. This file no longer
   depends on the homepage stylesheet, which is what allowed the split.

   What remains here is the equipment page template: hero, at-a-glance spec
   panel, specification and comparison tables, feature list, application tags,
   gallery and related-equipment grid.

   Nothing here overrides an approved core value; this file only ADDS.

   PROTOTYPE ONLY. Not published. Does not modify any X5 stylesheet.
   ========================================================================== */

/* ---------- 1. EQUIPMENT HERO ------------------------------------------- */
/* Same navy field and accent rule as the approved homepage hero, but a wider
   image column: the equipment photograph is the subject, not a supporting
   illustration. */
.eq-hero {
  background: var(--c-navy-deep);
  color: #fff;
  padding-block: var(--s-8);
  border-bottom: 4px solid var(--c-accent);
}
.eq-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-7); align-items: center; }
.eq-hero h1 { color: #fff; }
.eq-hero__lead { color: rgba(255,255,255,.92); font-size: var(--fs-lead); margin-top: var(--s-5); max-width: 52ch; }
.eq-hero__figure { margin: 0; }
/* Native asset is 600x449. Displayed at <=600px CSS width so it is never
   upscaled. */
.eq-hero__figure img {
  width: 100%; max-width: 600px;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.18);
}
/* Caption colour now comes from the core token --c-caption-on-dark (#B9C0CC,
   verified 8.52:1 on --c-navy-deep) — the same solid value this template
   already used, so the rendered colour is unchanged. Solid, not opacity, so
   the caption stays legible at any browser zoom.

   SIZE DELIBERATELY LEFT AT --fs-small (14px), NOT --fs-caption (15px).
   The Phase 1C instruction raised the caption to 15px on the homepage only,
   and this page is awaiting the owner's visual recheck, so its approved
   appearance is left untouched. That leaves the two templates one pixel
   apart. Raising this to var(--fs-caption) is a one-line change and is
   flagged for the owner's decision. */
.eq-hero__caption {
  font-size: var(--fs-small);
  color: var(--c-caption-on-dark);
  margin-top: var(--s-3); max-width: 600px;
}

/* ---------- 2. AT-A-GLANCE SPEC PANEL ----------------------------------- */
.spec-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--s-6);
}
.spec-panel h2 { font-size: var(--fs-h3); margin-bottom: var(--s-5); }
.spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.spec-grid > div { border-left: 3px solid var(--c-panel); padding-left: var(--s-4); }
.spec-grid dt, .spec-grid .k {
  display: block; font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted);
  margin-bottom: var(--s-2);
}
.spec-grid dd, .spec-grid .v {
  margin: 0; font-size: 1.375rem; line-height: 1.25; font-weight: 700;
  color: var(--c-navy); font-variant-numeric: tabular-nums;
}
/* Value / detail separation inside a specification cell.
   ⚠ CORRECTED 26 July 2026. This rule previously read ".spec-grid .v small",
   which required a class the markup never carries: every cell is written
   <dd>20&ndash;70 m<small>Without intermediate supports</small></dd>. The
   selector therefore matched nothing, <small> kept its default inline display,
   and the value ran straight into its description on screen:
   "20-70 mWithout intermediate supports". 24 cells across the six equipment
   pages were affected.
   The fix is the selector, not the markup: no approved page was edited, and the
   rule now matches the same pattern the approved service template already uses
   (.cap-grid dd small). Both markup forms are covered so the component stays
   reusable. margin-top raised from --s-1 to --s-2 to match the service
   template's proven spacing, so the two panels are typographically identical. */
.spec-grid dd small,
.spec-grid .v small {
  display: block;
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-body);
  margin-top: var(--s-2);
  font-variant-numeric: normal;   /* the detail line is prose, not tabular data */
  letter-spacing: normal;
}

/* ---------- 3. SPECIFICATION AND COMPARISON TABLES ---------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.spec {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-body); min-width: 480px;
}
table.spec caption {
  text-align: left; font-size: var(--fs-small); color: var(--c-muted);
  padding-bottom: var(--s-3);
}
table.spec th, table.spec td {
  text-align: left; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
table.spec thead th {
  background: var(--c-navy); color: #fff; font-weight: 600;
  font-size: var(--fs-small); letter-spacing: 0.02em;
  border-bottom: none;
}
table.spec tbody th { color: var(--c-body); font-weight: 600; width: 34%; }
table.spec td { font-variant-numeric: tabular-nums; color: var(--c-navy); font-weight: 600; }
table.spec tbody tr:last-child th, table.spec tbody tr:last-child td { border-bottom: none; }
table.spec tbody tr:nth-child(even) { background: var(--c-page); }
/* Highlight the column describing THIS page's configuration */
table.spec .is-this { background: rgba(192,57,43,.06); }
table.spec thead .is-this { background: var(--c-accent); }

/* ---------- 3b. IN-SECTION SPACING AND NOTES ---------------------------- */
/* A second H3 further down a section, after a table or list */
.eq-h3-spaced { margin-top: var(--s-7); margin-bottom: var(--s-4); }
/* Provenance note utility. Currently unused: the notes it carried were removed
   from visitor-facing text under the editorial rule. Retained for
   neutral technical notes on equipment pages built next. */
.eq-note { margin-top: var(--s-5); }

/* ---------- 4. FEATURE LIST --------------------------------------------- */
.feature-list { display: grid; gap: var(--s-5); }
.feature-list > li {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.feature-list h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.feature-list p { font-size: var(--fs-body); max-width: none; }
.feature-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- 5. APPLICATION TAGS ----------------------------------------- */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.tag-list li {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: var(--s-2) var(--s-5);
  font-size: var(--fs-small); font-weight: 600; color: var(--c-navy);
}

/* ---------- 6. GALLERY -------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.gallery figure {
  margin: 0; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
/* Native assets are ~600x450. Displayed at ~360px on desktop, so always
   downscaled - never blurred by upscaling. */
.gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-bottom: 1px solid var(--c-border);
}
.gallery figcaption {
  padding: var(--s-4); font-size: var(--fs-small);
  color: var(--c-body); line-height: 1.5;
}
/* Gallery note utility. Currently unused, for the same reason as .eq-note. */
.gallery__note {
  margin-top: var(--s-5); font-size: var(--fs-small);
  color: var(--c-muted); font-style: italic;
}

/* ---------- 7. RELATED EQUIPMENT ---------------------------------------- */
.related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.related a {
  display: flex; flex-direction: column; gap: var(--s-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--s-5);
  text-decoration: none;
  min-height: 44px;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.related a:hover { border-color: var(--c-navy-light); transform: translateY(-2px); }
.related strong { color: var(--c-navy); font-size: var(--fs-h4); }
.related span { font-size: var(--fs-small); color: var(--c-body); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   8. RESPONSIVE — X5 breakpoints 1162 / 720 / 480
   Shared responsive behaviour lives in the core stylesheet.
   ========================================================================== */
@media (max-width: 1161px) {
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eq-hero__grid { gap: var(--s-6); }
}

@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .eq-hero { padding-block: var(--s-7); }
  .eq-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .eq-hero__figure { order: -1; }          /* photograph first when stacked */
  .eq-hero__figure img { max-width: 100%; }
  .eq-hero__caption { max-width: none; }
  .spec-panel { padding: var(--s-5); }
  .feature-list--2 { grid-template-columns: minmax(0, 1fr); }
}

/* Mobile (480px) and Mobile Fluid below it — also covers 375px */
@media (max-width: 480px) {
  .spec-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .spec-grid dd, .spec-grid .v { font-size: 1.25rem; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .related { grid-template-columns: minmax(0, 1fr); }
  table.spec th, table.spec td { padding: var(--s-3); }
  .tag-list { gap: var(--s-2); }
  .tag-list li { padding: var(--s-2) var(--s-4); }
}

/* ---------- 9. REDUCED MOTION ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .related a:hover { transform: none; }
}

/* ---------- 10. PRINT --------------------------------------------------- */
@media print {
  .gallery { display: none; }
  .eq-hero { background: #fff; color: #000; border-bottom: 2px solid #000; }
  .eq-hero h1, .eq-hero__lead, .eq-hero__caption { color: #000; }
  .spec-panel, .feature-list > li, table.spec { border: 1px solid #999; break-inside: avoid; }
  table.spec thead th { background: #eee; color: #000; }
}


/* ---------- GRID ITEM SHRINK -------------------- */
/* A grid item's initial `min-width: auto` resolves to its MIN-CONTENT width,
   so an item refuses to shrink below its longest word even when its track is
   minmax(0, 1fr). At 200% text that made items overflow their own tracks and
   pushed the page sideways. `min-width: 0` releases the item; the text then
   wraps inside the track via the overflow-wrap rule in core section 5.
   No effect at normal text size, where nothing needs to shrink this far. */
.eq-hero__grid > *, .spec-grid > *, .feature-list > *,
.feature-list--2 > *, .gallery > *, .related > * { min-width: 0; }