/* ==========================================================================
   FUSION CNC — MACHINE PAGES
   Listing + detail. Generated by build-machines.ps1 from the Google Sheet.

   DESIGN NOTE — the hero
   Same layout as the original: category chip, headline, tagline, actions,
   trust line on the left; the machine on a pale plinth on the right. Per
   client feedback the only thing that changed is the near-black background
   — it now sits on a plain light ground instead. Deliberately no added
   texture, glow or ornament beyond that colour swap. Scoped to .mhero only
   at the time — .dark-canvas itself (home CTA, this page's closing CTA,
   every other page's page-head/CTA) has since been repointed to a light
   ground too, in css/layout.css and css/pages.css — the whole site is off
   black now, not just this hero.

   Reuses the existing system throughout:
     .page-head / .crumbs   pages.css
     .machine-card          components.css   (listing grid)
     .spec-table            components.css   (specifications)
     .video-facade          pages.css        (click-to-load YouTube)
     .btn / .field / tokens components.css + tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.mhero{
  position: relative;
  padding-top: calc(var(--header-h) + var(--s-12));
  /* Fixed, not var(--section-y) (up to 9rem) — .mhero is only ever followed
     by the Specifications section, which already carries its own reduced
     section--tight-top. Keeping this side responsive too would let the
     combined gap grow back to ~200px on wide screens. */
  padding-bottom: var(--s-12);
  background: var(--surface-2);
  color: var(--ink-3);
  overflow: hidden;
  isolation: isolate;
}
.mhero > .container{ position: relative; z-index: 2; }

.mhero .crumbs{ color: var(--ink-4); }
.mhero .crumbs a:hover{ color: var(--ink); }
.mhero .crumbs [aria-current]{ color: var(--brand-ink); }

.mhero__grid{
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  align-items: center;
}
@media (max-width: 960px){
  .mhero__grid{ grid-template-columns: 1fr; gap: var(--s-10); }
}

/* --- Left: the argument ---------------------------------------------------- */
.mhero__cat{
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.4rem 0.8rem 0.4rem 0.6rem;
  margin-bottom: var(--s-6);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-ink);
  border: 1px solid rgba(var(--brand-rgb), 0.35);
  border-radius: var(--r-sm);
  background: var(--brand-wash);
}
.mhero__cat::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
}

.mhero h1{
  color: var(--ink);
  font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;   /* model numbers align properly */
}

/* The tagline is the page's promise, so it is set as a statement rather than
   as body copy — larger, lighter, and given room. */
.mhero__tagline{
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--ink-3);
  max-width: 26ch;
}

.mhero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

/* Trust points read as credentials, not a footnote — small bordered chips
   rather than a muted line under a divider, so they carry weight next to
   the buttons instead of trailing off the page. */
.mhero__trust{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-8);
}
.mhero__trust span{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.55rem 0.85rem;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.mhero__trust svg{ width: 14px; height: 14px; color: var(--brand); flex: none; }

/* --- Right: the machine on its plinth -------------------------------------- */
.mgallery{ position: relative; }

.mgallery__stage{
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: zoom-in;
  /* Pale, slightly warm ground: the machine photographs are cut-outs shot on
     white, so a soft plinth is the only honest way to show them. On a light
     page the separation comes from elevation and a hairline border rather
     than a dark backdrop, so the card still reads as a distinct object. */
  background:
    radial-gradient(ellipse 80% 70% at 50% 42%, #ffffff 0%, #fbfaf9 58%, #f2f0ee 100%);
  box-shadow:
    0 40px 70px -34px rgba(17,17,17,0.22),
    0 1px 0 rgba(17,17,17,0.02);
  transition: box-shadow var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease);
}
.mgallery__stage img{
  width: 100%; height: 100%;
  object-fit: contain;
  padding: clamp(1.25rem, 3vw, 2.75rem);
  transition: opacity 180ms var(--ease-io),
              filter 180ms var(--ease-io),
              transform var(--dur-3) var(--ease);
}
/* Blur bridges the crossfade — without it you briefly see two overlapping
   photographs, which reads as a glitch rather than one image changing. */
.mgallery__stage img.is-swapping{ opacity: 0; filter: blur(3px); }
@media (prefers-reduced-motion: reduce){
  .mgallery__stage img{ transition: none; }
  .mgallery__stage img.is-swapping{ filter: none; }
}

.mgallery__zoom{
  position: absolute;
  right: var(--s-4); bottom: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.45rem 0.7rem;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-3);
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  pointer-events: none;              /* the whole stage is the button */
  transition: background var(--dur-2) var(--ease-io),
              color var(--dur-2) var(--ease-io),
              border-color var(--dur-2) var(--ease-io);
}
.mgallery__zoom svg{ width: 14px; height: 14px; }

@media (hover: hover) and (pointer: fine){
  .mgallery__stage:hover{
    border-color: rgba(var(--brand-rgb), 0.4);
    box-shadow:
      0 48px 84px -30px rgba(17,17,17,0.28),
      0 0 0 1px rgba(var(--brand-rgb), 0.35);
  }
  .mgallery__stage:hover img{ transform: scale(1.03); }
  .mgallery__stage:hover .mgallery__zoom{
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
  }
}

/* Thumbnails now sit on the light ground, so they need real contrast of
   their own rather than opacity against a dark backdrop. */
.mgallery__thumbs{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.mgallery__thumb{
  aspect-ratio: 1 / 1;
  padding: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  opacity: 0.62;
  transition: opacity var(--dur-2) var(--ease-io),
              border-color var(--dur-2) var(--ease-io),
              transform var(--dur-2) var(--ease);
}
.mgallery__thumb img{ width: 100%; height: 100%; object-fit: contain; }
.mgallery__thumb[aria-current="true"]{
  opacity: 1;
  border-color: var(--brand);
}
@media (hover: hover) and (pointer: fine){
  .mgallery__thumb:hover{ opacity: 1; transform: translateY(-2px); }
}

/* --------------------------------------------------------------------------
   SPECIFICATIONS
   Two columns: a short standing heading on the left, the table on the right.
   Stops a twelve-row table from being a wall that starts at the page edge.
   -------------------------------------------------------------------------- */
.mspecs{
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
@media (max-width: 900px){ .mspecs{ grid-template-columns: 1fr; } }
.mspecs__head{ position: sticky; top: calc(var(--header-h-sm) + var(--s-10)); }
@media (max-width: 900px){ .mspecs__head{ position: static; } }

/* --------------------------------------------------------------------------
   TECHNICAL SPECIFICATIONS
   A plain bullet list (sheet: technical_specifications, one line per
   bullet) — engineering highlights in the manufacturer's own words,
   alongside the structured spec table rather than inside it.
   -------------------------------------------------------------------------- */
.mtechspecs{
  display: grid;
  gap: var(--s-4);
  max-width: 74ch;
}
.mtechspecs li{
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-2);
}
.mtechspecs li::before{
  content: "\00BB";           /* » */
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--brand);
}

/* --------------------------------------------------------------------------
   APPLICATION PHOTOS
   sheet: application_image — comma-separated list (same convention as
   gallery_images), so this is a grid, not a single framed photo. Real-world
   "in use" shots, so plain cover-fit tiles rather than the pale
   product-plinth treatment used for the cut-out gallery (.mgallery__stage).
   -------------------------------------------------------------------------- */
.mapp{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--s-4);
}
.mapp__item{
  display: block;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-3);
}
.mapp__item img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
@media (hover: hover) and (pointer: fine){
  .mapp__item:hover img{ transform: scale(1.06); }
}

/* --------------------------------------------------------------------------
   VIDEO — container width, native 16:9
   -------------------------------------------------------------------------- */
.mvideo{
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  background: var(--ink);
}
.mvideo .video-facade,
.mvideo iframe{
  border-radius: var(--r-lg);
  aspect-ratio: 16 / 9;
}
.mvideo .video-play span{ width: 88px; height: 88px; }
.mvideo .video-play svg{ width: 30px; height: 30px; }
@media (max-width: 640px){
  .mvideo .video-play span{ width: 60px; height: 60px; }
  .mvideo .video-play svg{ width: 22px; height: 22px; }
}

/* --------------------------------------------------------------------------
   ZOOM VIEWER
   Reuses .lightbox, but machine photographs are cut-outs on plain grounds,
   so they are contained on a light panel rather than floating on black.
   -------------------------------------------------------------------------- */
[data-mlightbox] img{
  background: #fff;
  border-radius: var(--r-lg);
  padding: clamp(1rem, 3vw, 2.5rem);
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   INQUIRY MODAL
   -------------------------------------------------------------------------- */
.modal{
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(10,10,10,0.72);
}
.modal[open]{ display: grid; }

.modal__panel{
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  animation: modalIn var(--dur-3) var(--ease) both;
}
@keyframes modalIn{
  from{ opacity: 0; transform: translateY(14px) scale(0.98); }
  to  { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){ .modal__panel{ animation: none; } }

.modal__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.modal__head h2{ font-size: var(--t-h3); }
.modal__head p{ margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-3); }
.modal__close{
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: var(--r);
  border: 1px solid var(--line);
  color: var(--ink-3);
  transition: background var(--dur-1) var(--ease-io), color var(--dur-1) var(--ease-io);
}
.modal__close:hover{ background: var(--ink); color: #fff; border-color: var(--ink); }
.modal__close svg{ width: 18px; height: 18px; }

.modal__machine{
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  margin-bottom: var(--s-6);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.modal__machine img{
  width: 56px; height: 56px;
  flex: none;
  object-fit: contain;
  background: var(--surface);
  border-radius: var(--r-sm);
}
.modal__machine b{ display: block; font-family: var(--font-display); font-size: 0.9375rem; color: var(--ink); }
.modal__machine span{ display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--ink-4); }

body[data-modal-open]{ overflow: hidden; }

/* --------------------------------------------------------------------------
   LISTING PAGE
   -------------------------------------------------------------------------- */
.machine-card[hidden]{ display: none; }
.machine-card__cat{
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: var(--s-2);
}
@keyframes machineIn{
  from{ opacity: 0; transform: translateY(16px) scale(0.97); }
  to  { opacity: 1; transform: none; }
}
.machine-card.is-entering{
  animation: machineIn 0.5s var(--ease) both;
  animation-delay: calc(var(--fi, 0) * 30ms);
}
@media (prefers-reduced-motion: reduce){ .machine-card.is-entering{ animation: none; } }

/* --------------------------------------------------------------------------
   RELATED MACHINES
   -------------------------------------------------------------------------- */
.mrelated{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--s-5);
}

/* --------------------------------------------------------------------------
   TOUCH DEVICES
   Every hover lift is a transform, and a tap fires :hover on a touchscreen —
   cards were lifting and staying lifted. Hover movement is for pointers only.
   -------------------------------------------------------------------------- */
@media (hover: none){
  .machine-card:hover,
  .mgallery__thumb:hover,
  .location:hover,
  .pillar:hover,
  .contact-card:hover,
  .cat:hover,
  .quote-card:hover,
  .mega__col:hover,
  .industry:hover,
  .story-range__item:hover,
  .btn:hover,
  .quotes-btn:hover:not(:disabled){ transform: none; }

  .gallery__item:hover img,
  .video-facade:hover img,
  .cat:hover .cat__img,
  .mgallery__stage:hover img,
  .machine-card:hover .machine-card__media img{ transform: none; }
}