@charset "utf-8";
/* ==========================================================================
   BECT Ltd — Equipment Hub Template Stylesheet
   Phase 3B · 26 July 2026
   Design system:

   THIS FILE EXTENDS bect-redesign-core.css AND DOES NOT REPLACE IT.
   Load order, without exception:
       <link rel="stylesheet" href="style/bect-redesign-core.css" />
       <link rel="stylesheet" href="style/bect-redesign-equipment-hub.css" />

   Nothing here overrides an approved core value; this file only ADDS. No
   approved stylesheet was modified to build this page.

   Reused from core, with no new CSS written: .container, .section,
   .section--surface, .section--tight, .section__head, .section__intro,
   .eyebrow, .grid, .grid--3, .card, .card__foot, .spec-list, .btn,
   .link-arrow, .site-header, .nav, .breadcrumb, .band, .site-footer,
   .proto-banner, .skip-link, .visually-hidden, plus every responsive,
   reduced-motion and print rule those carry.

   WHY THIS IS A SEPARATE TEMPLATE, NOT THE EQUIPMENT ONE
   The equipment template describes ONE machine: hero photograph beside a
   headline-figure panel, then specification and comparison tables, feature
   list, tag list and gallery. A hub describes SIX and sends the visitor
   onward, so its primary component is a card grid with media, and it needs
   neither a spec panel, nor a feature list, nor a tag list, nor a gallery.
   Loading the equipment stylesheet here would have imported five components
   this page does not use.

   ⚠ DELIBERATE DUPLICATION, recorded in
   .table-wrap and table.spec below are copied VALUE FOR VALUE from the
   approved bect-redesign-equipment.css, so the rendered table is identical.
   The owner deferred consolidating these into core, so they are
   duplicated rather than moved. Only the two components this page actually
   uses were copied: .tag-list and .gallery were NOT reproduced, because the
   hub uses neither.

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

/* ---------- 1. HUB HERO -------------------------------------------------- */
/* Same navy field and accent rule as the approved homepage, equipment,
   service and contact heroes, so the page reads as one site. The image column
   is narrower than the equipment template's: on a hub the photograph sets
   context, it is not the subject of the page. */
.hub-hero {
  background: var(--c-navy-deep);
  color: #fff;
  padding-block: var(--s-8);
  border-bottom: 4px solid var(--c-accent);
}
.hub-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: center; }
.hub-hero h1 { color: #fff; }
.hub-hero__lead { color: rgba(255,255,255,.92); font-size: var(--fs-lead); margin-top: var(--s-5); max-width: 56ch; }
.hub-hero__figure { margin: 0; }
/* Native asset is 600x450. Displayed at <=600px CSS width, so it is never
   upscaled. */
.hub-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 uses the solid token --c-caption-on-dark (#B9C0CC, verified 8.52:1
   on --c-navy-deep) at --fs-caption (15px), which is the direction design
   system sets for new templates. Never an alpha value: its contrast would
   depend on whatever composites behind it. */
.hub-hero__caption {
  font-size: var(--fs-caption);
  color: var(--c-caption-on-dark);
  margin-top: var(--s-3); max-width: 600px;
}

/* ---------- 2. SCOPE PANEL ----------------------------------------------- */
/* Three short statements of what is provided. Not cards: nothing here links
   anywhere, and a card that cannot be followed is a false affordance. */
.hub-scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); }
.hub-scope > div {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.hub-scope h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.hub-scope p { font-size: var(--fs-body); max-width: none; color: var(--c-body); }

/* ---------- 3. CARD MEDIA VARIANT ---------------------------------------- */
/* Design system defines the card as optionally carrying 16:9 media, but no
   approved stylesheet had implemented it, because no approved page used it.
   Implemented here rather than in core, since core must not be modified.
   Candidate for promotion to core at the next approved core revision. */
.card--media { padding: 0; overflow: hidden; }
.card--media .card__media {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-bottom: 1px solid var(--c-border);
}
/* The body re-establishes the column flow that core's .card provides, so
   .card__foot { margin-top: auto } still pins the link to the card foot and
   every card in a row ends at the same baseline. */
.card--media .card__body {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: var(--s-6);
}

/* ---------- 4. SELECTION TABLE ------------------------------------------- */
/* Copied value for value from the approved bect-redesign-equipment.css.
   See the duplication note in the file header and */
.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); }
/* Hub-specific: the middle column names equipment rather than a figure, so it
   reads as body text rather than as a value. */
table.spec td.t-name { font-weight: 400; color: var(--c-body); font-variant-numeric: normal; }

/* ---------- 5. SELECTION NOTES ------------------------------------------- */
.hub-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); margin-top: var(--s-5); }
.hub-notes li {
  position: relative; padding-left: var(--s-5);
  font-size: var(--fs-body); color: var(--c-body);
  max-width: 58ch;
}
.hub-notes li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-accent);
}
.hub-notes strong { color: var(--c-navy); }

/* ---------- 6. EQUIPMENT ENGINEERING SERVICES ---------------------------- */
.hub-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.hub-services > 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);
}
.hub-services h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.hub-services p { font-size: var(--fs-body); max-width: none; color: var(--c-body); }

/* ---------- 7. SUB-SECTION SPACING --------------------------------------- */
.hub-h3-spaced { margin-top: var(--s-7); margin-bottom: var(--s-4); }

/* ==========================================================================
   8. RESPONSIVE — X5 breakpoints 1162 / 720 / 480
   Shared responsive behaviour lives in the core stylesheet. Core already
   steps .grid--3 to 2 columns at 900px and to 1 at 480px, so the category
   grid needs no rule of its own.
   ========================================================================== */
@media (max-width: 1161px) {
  .hub-hero__grid { gap: var(--s-6); }
  .hub-scope { gap: var(--s-4); }
}

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

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

/* Mobile (480px) and Mobile Fluid below it — also covers 375px */
@media (max-width: 480px) {
  /* Core reduces .card padding to --s-5 at this width; the media card carries
     its padding on the body instead, so it is matched here. */
  .card--media .card__body { padding: var(--s-5); }
  .hub-notes li { max-width: none; }
  table.spec th, table.spec td { padding: var(--s-3); }
}

/* ---------- 9. REDUCED MOTION -------------------------------------------- */
/* Core already suppresses the .card hover lift and transitions site-wide.
   Nothing in this file animates beyond that, so no additional rule is needed;
   the block is kept as the documented place for one. */
@media (prefers-reduced-motion: reduce) {
  .card--media { transition: none; }
}

/* ---------- 10. PRINT ---------------------------------------------------- */
@media print {
  .hub-hero { background: #fff; color: #000; border-bottom: 2px solid #000; }
  .hub-hero h1, .hub-hero__lead, .hub-hero__caption { color: #000; }
  .hub-hero__figure { display: none; }
  .card--media .card__media { display: none; }
  .hub-scope > div, .hub-services > 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. */
.hub-hero__grid > *, .hub-scope > *, .hub-notes > *, .hub-services > * { min-width: 0; }