/* ==========================================================================
   FUSION CNC — COMPONENTS
   Buttons, cards, machine cards, spec table, forms, badges, breadcrumb,
   page banner, lightbox, floating actions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTONS
   Near-square, no gloss, no pill shapes — the brand guide forbids "overly
   rounded or playful button treatments".
   -------------------------------------------------------------------------- */
.btn{
  --btn-py: 1.05rem;
  --btn-px: 2rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--btn-py) var(--btn-px);
  min-height: 52px;                 /* touch target floor */
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background var(--dur-2) var(--ease-io),
              border-color var(--dur-2) var(--ease-io),
              color var(--dur-2) var(--ease-io),
              box-shadow var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}
/* Press feedback. The button must visibly answer the click, and it has to be
   fast — 120ms, not the 260ms used for hover — because this is the frame the
   user is watching most closely. scale() also shrinks the label and icon with
   it, which is what makes it read as a physical press. */
.btn:active{
  transform: scale(0.97);
  transition-duration: 120ms;
}
.btn svg{
  width: 16px; height: 16px; flex: none;
  transition: transform var(--dur-2) var(--ease);
}
/* Arrow slides on hover — the small motion that makes a button feel live. */
.btn:hover svg{ transform: translateX(4px); }
.btn--diag:hover svg{ transform: translate(3px, -3px); }

/* PRIMARY — orange fill carrying the brand glow at rest, lifting into a
   stronger glow on hover.

   Label is white, by client direction, matching the reference design.
   Measured contrast: white on --brand is 3.18:1, which clears WCAG AA for
   large text (3:1) but not for normal text (4.5:1). Button labels here are
   15px/600, so they sit below that threshold. Two ways to close the gap if
   it is ever raised in review: switch the label to var(--ink) (5.94:1), or
   deepen the fill toward #BB5522 and keep white (4.74:1). Both preserve the
   glow and lift. --brand-hover is intentionally darker, so the hover state
   is the better-contrasted of the two. */
.btn--primary{
  background: var(--brand);
  color: var(--on-dark);
  box-shadow: var(--glow);
}
.btn--primary:hover{
  background: var(--brand-hover);
  box-shadow: var(--glow-hover);
  transform: translateY(-3px);
}

/* INVERT — primary that flips to a solid dark slab on hover. Used for the
   hero, where the change of ground reads stronger over photography. */
.btn--invert{
  background: var(--brand);
  color: var(--on-dark);
  box-shadow: var(--glow);
}
.btn--invert:hover{
  background: #fff;
  color: var(--ink);
  box-shadow: 0 18px 40px -14px rgba(0,0,0,0.55);
  transform: translateY(-3px);
}

/* Secondary: outline + dark text, per the brand guide. */
.btn--secondary{ background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover{
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.btn--dark{ background: var(--ink); color: #fff; }
.btn--dark:hover{ background: #2c2c2c; transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* On dark backgrounds the outline flips to white. Without this the button
   renders --ink text on a near-black ground and disappears, so every dark
   context must be listed here. .dark-canvas isn't one any more (see
   layout.css), so it's not listed — its default light-mode style is
   already correct. */
.on-dark .btn--secondary,
.section--dark .btn--secondary{ color: #fff; border-color: rgba(255,255,255,0.32); }
.on-dark .btn--secondary:hover,
.section--dark .btn--secondary:hover{ background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 18px 40px -14px rgba(0,0,0,0.6); }

.btn--sm{ --btn-py: 0.7rem; --btn-px: 1.15rem; min-height: 42px; font-size: var(--t-xs); }
.btn--block{ width: 100%; }

/* WhatsApp keeps a green — it is a platform affordance, not a Fusion accent,
   so it does not violate the orange-only rule. The standard #25D366 gives
   only 1.9:1 with white text, so this is the darkened variant at 5.4:1. */
.btn--whatsapp{ background: var(--wa); color: #fff; }
.btn--whatsapp:hover{ background: var(--wa-hover); }

/* Text link with an animated underline. */
.link-arrow{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--brand-ink);
}
.link-arrow svg{ width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease); }
.link-arrow:hover svg{ transform: translateX(4px); }
.section--dark .link-arrow{ color: var(--brand-bright); }
/* Same fix as .gallery__item[hidden] (pages.css): author display:inline-flex
   otherwise beats the browser's own [hidden] rule on specificity, so a
   hidden link-arrow (e.g. the catalog download link with no PDF yet) would
   stay visible. */
.link-arrow[hidden]{ display: none; }

/* --------------------------------------------------------------------------
   BADGE / PILL
   -------------------------------------------------------------------------- */
.badge{
  display: inline-block;
  padding: 0.3rem 0.6rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--ink-3);
}
.badge--brand{ background: var(--brand); color: var(--ink); }
.badge--outline{ background: transparent; border: 1px solid var(--line-strong); }

/* --------------------------------------------------------------------------
   MACHINE CARD
   Used on category pages and the homepage rail.
   -------------------------------------------------------------------------- */
.machine-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-io),
              box-shadow var(--dur-3) var(--ease),
              transform var(--dur-2) var(--ease);
}
.machine-card:hover{
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.machine-card__media{
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  overflow: hidden;
}
.machine-card__media img{
  width: 100%; height: 100%;
  object-fit: contain;             /* machines are cut-outs — never crop them */
  padding: var(--s-5);
  transition: transform var(--dur-4) var(--ease);
}
.machine-card:hover .machine-card__media img{ transform: scale(1.04); }

.machine-card__axis{
  position: absolute;
  top: var(--s-3); left: var(--s-3);
  z-index: 2;
}

.machine-card__body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s-5) var(--s-5) var(--s-6);
  border-top: 1px solid var(--line);
}
.machine-card__model{
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
   display: -webkit-box;           /* Required: Triggers the old WebKit box model */
  -webkit-box-orient: vertical;   /* Required: Sets the layout orientation to vertical */
  -webkit-line-clamp: 2;          /* Required: Number of lines before truncation */
  overflow: hidden;    
}
.machine-card__title{
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--ink-3);
  flex: 1;
}
.machine-card__actions{
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-5);
  flex-wrap: wrap;
}
.machine-card__actions .btn{ flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   SPEC TABLE
   The credibility centrepiece of a machine page. Two-column key/value that
   collapses to stacked rows on mobile rather than scrolling sideways.
   -------------------------------------------------------------------------- */
.spec-table{
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.spec-table tr{ border-bottom: 1px solid var(--line); }
.spec-table tr:last-child{ border-bottom: 0; }
.spec-table tr:nth-child(odd){ background: var(--surface-2); }
.spec-table th,
.spec-table td{
  padding: var(--s-4) var(--s-5);
  text-align: left;
  vertical-align: top;
  font-size: var(--t-sm);
}
.spec-table th{
  width: 38%;
  font-weight: 600;
  color: var(--ink-3);
  font-family: var(--font-body);
}
.spec-table td{
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px){
  .spec-table th,
  .spec-table td{ display: block; width: 100%; }
  .spec-table th{ padding-bottom: 0; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; }
  .spec-table td{ padding-top: var(--s-1); }
}

/* --------------------------------------------------------------------------
   PAGE BANNER — inner-page header strip
   -------------------------------------------------------------------------- */
.page-banner{
  position: relative;
  padding-top: calc(var(--header-h) + var(--s-16));
  padding-bottom: var(--s-16);
  background: var(--ink);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.page-banner__img{
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.28;
}
.page-banner::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(17,17,17,0.94) 0%, rgba(17,17,17,0.62) 100%);
}
.page-banner h1{ color: #fff; max-width: 20ch; }
.page-banner p{ margin-top: var(--s-4); color: var(--on-dark-2); font-size: var(--t-lead); max-width: 60ch; }

/* Breadcrumb */
.crumb{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--t-xs);
  color: var(--on-dark-3);
  margin-bottom: var(--s-5);
}
.crumb a:hover{ color: #fff; text-decoration: underline; }
.crumb [aria-current]{ color: var(--brand); }
.crumb__sep{ opacity: 0.5; }

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.field{ display: block; margin-bottom: var(--s-5); }
.field__label{
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field__req{ color: var(--brand-ink); }
.field input,
.field select,
.field textarea{
  width: 100%;
  padding: 0.85rem var(--s-4);
  min-height: 48px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-size: var(--t-sm);
  color: var(--ink);
  transition: border-color var(--dur-1) var(--ease-io), box-shadow var(--dur-1) var(--ease-io);
}
.field textarea{ min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.18);
}
.field input::placeholder,
.field textarea::placeholder{ color: #A0A0A0; }
.field[data-invalid] input,
.field[data-invalid] select,
.field[data-invalid] textarea{ border-color: #B3261E; }
.field__error{
  display: none;
  margin-top: var(--s-2);
  font-size: var(--t-xs);
  color: #B3261E;
  font-weight: 500;
}
.field[data-invalid] .field__error{ display: block; }

.form-note{ font-size: var(--t-xs); color: var(--ink-4); margin-top: var(--s-4); }

.form-status{
  display: none;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r);
  font-size: var(--t-sm);
  margin-bottom: var(--s-5);
  border: 1px solid;
}
.form-status[data-state="ok"]{ display: block; background: #EDF7EE; border-color: #7FBF87; color: #14561D; }
.form-status[data-state="err"]{ display: block; background: #FDECEA; border-color: #E0A6A1; color: #8C1D18; }

/* --------------------------------------------------------------------------
   FLOATING ACTIONS — persistent WhatsApp + call
   -------------------------------------------------------------------------- */
.floats{
  position: fixed;
  left: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: var(--z-float);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.float-btn{
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  color: #fff;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease-io);
}
.float-btn:hover{ transform: translateY(-3px); }
.float-btn svg{ width: 25px; height: 25px; }
.float-btn--wa{ background: var(--wa); }
.float-btn--wa:hover{ background: var(--wa-hover); }
.float-btn--call{ background: var(--ink); }
.float-btn--call:hover{ background: var(--brand); color: var(--ink); }

/* --------------------------------------------------------------------------
   LIGHTBOX — gallery
   -------------------------------------------------------------------------- */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10,10,10,0.94);
}
.lightbox[open]{ display: grid; }
.lightbox img{
  max-width: min(1200px, 100%);
  max-height: 84vh;
  object-fit: contain;
  border-radius: var(--r);
}
.lightbox__caption{
  margin-top: var(--s-4);
  text-align: center;
  color: var(--on-dark-2);
  font-size: var(--t-sm);
}
.lightbox__close,
.lightbox__nav{
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  transition: background var(--dur-1) var(--ease-io);
}
.lightbox__close:hover,
.lightbox__nav:hover{ background: var(--brand); color: var(--ink); border-color: var(--brand); }
.lightbox__close{ top: var(--s-5); right: var(--s-5); }
.lightbox__nav--prev{ left: var(--s-5); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next{ right: var(--s-5); top: 50%; transform: translateY(-50%); }
.lightbox svg{ width: 22px; height: 22px; }
@media (max-width: 640px){
  .lightbox__nav--prev{ left: var(--s-3); }
  .lightbox__nav--next{ right: var(--s-3); }
}