/* ============================================================
   ALTIDA — Component styles
   Buttons, badges, inputs, cards, navigation, spec rows, etc.
   Depends on tokens.css.
   ============================================================ */

/* ─── Buttons ───────────────────────────────────────────── */
.btn {
  --_bg: var(--altida-yellow);
  --_fg: var(--ink-on-yellow);
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 22px;
  border: var(--border-rule) solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-15);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-0);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-mech),
              background var(--dur-fast) var(--ease-mech),
              box-shadow var(--dur-fast) var(--ease-mech),
              color var(--dur-fast) var(--ease-mech);
}
.btn:hover  { background: var(--altida-yellow-warm); transform: translateY(-1px); box-shadow: var(--shadow-yellow); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* Generic link focus ring — applies to any anchor missing a custom one */
a:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.btn--primary   { /* default */ }
.btn--inverse   { --_bg: var(--altida-black); --_fg: var(--altida-white); }
.btn--inverse:hover { --_bg: var(--grey-900); box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4); }

.btn--outline   { --_bg: transparent; --_fg: var(--ink-primary); --_bd: var(--altida-black); }
.btn--outline:hover { --_bg: var(--altida-black); --_fg: var(--altida-white); box-shadow: none; }

.btn--ghost     { --_bg: transparent; --_fg: var(--ink-primary); --_bd: transparent; padding: 10px 14px; }
.btn--ghost:hover { --_bg: var(--grey-100); box-shadow: none; }

.btn--lg { padding: 18px 28px; font-size: var(--fs-16); }
.btn--sm { padding: 10px 14px; font-size: var(--fs-13); }

.btn .arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .arrow { transform: translateX(3px); }

/* ─── Badges & Tags ─────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  background: var(--altida-black);
  color: var(--altida-white);
  border-radius: var(--radius-1);
}
.badge--yellow  { background: var(--altida-yellow); color: var(--altida-black); }
.badge--outline { background: transparent; color: var(--altida-black); border: 1.5px solid var(--altida-black); }
.badge--go      { background: var(--status-go);   color: white; }
.badge--warn    { background: var(--status-warn); color: var(--altida-black); }
.badge--stop    { background: var(--status-stop); color: white; }
.badge .dot {
  width: 6px; height: 6px; border-radius: 999px; background: currentColor;
}

/* ─── Inputs ────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--ink-primary);
}
.input,
.textarea,
.select {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-15);
  color: var(--ink-primary);
  background: var(--altida-white);
  border: 1.5px solid var(--grey-300);
  border-radius: var(--radius-3);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--grey-400); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--altida-black);
  box-shadow: var(--focus-ring);
}
.input:disabled, .textarea:disabled, .select:disabled {
  background: var(--grey-100);
  color: var(--ink-muted);
  cursor: not-allowed;
  border-color: var(--grey-200);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--status-stop);
}
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus, .select[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.25);
}
.textarea { min-height: 96px; resize: vertical; }

.field-help {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  color: var(--ink-muted);
  margin: 4px 0 0;
}
.field-error {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--track-wide);
  color: var(--status-stop);
  margin: 4px 0 0;
  display: inline-flex; align-items: center; gap: 6px;
}

/* Checkbox / Radio — square checkbox, square radio with inset square fill.
   Both squared to match the system's industrial radius rule. */
.check, .radio {
  display: inline-flex; align-items: flex-start; gap: 10px;
  font-family: var(--font-body); font-size: var(--fs-15);
  color: var(--ink-primary); cursor: pointer; line-height: 1.4;
}
.check input, .radio input { position: absolute; opacity: 0; pointer-events: none; }
.check__box, .radio__box {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
  background: var(--altida-white);
  border: 1.5px solid var(--grey-500);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.check__box { border-radius: var(--radius-1); }
.radio__box { border-radius: var(--radius-1); }
.check input:checked + .check__box {
  background: var(--altida-yellow); border-color: var(--altida-black);
}
.check input:checked + .check__box::after {
  content: ''; width: 10px; height: 6px;
  border-left: 2px solid var(--altida-black);
  border-bottom: 2px solid var(--altida-black);
  transform: rotate(-45deg) translate(1px, -1px);
}
.radio input:checked + .radio__box {
  border-color: var(--altida-black);
}
.radio input:checked + .radio__box::after {
  content: ''; width: 8px; height: 8px; background: var(--altida-yellow);
}
.check input:focus-visible + .check__box,
.radio input:focus-visible + .radio__box {
  box-shadow: var(--focus-ring); border-color: var(--altida-black);
}
.check input:disabled ~ *, .radio input:disabled ~ * {
  opacity: 0.5; cursor: not-allowed;
}

/* Toggle — a horizontal track + sliding square. Squared, no pill. */
.toggle {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: var(--fs-15); cursor: pointer;
}
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle__track {
  width: 40px; height: 22px; background: var(--grey-300);
  position: relative; flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.toggle__track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; background: var(--altida-white);
  transition: transform var(--dur-fast) var(--ease-mech);
}
.toggle input:checked + .toggle__track { background: var(--altida-black); }
.toggle input:checked + .toggle__track::after { transform: translateX(18px); background: var(--altida-yellow); }
.toggle input:focus-visible + .toggle__track { box-shadow: var(--focus-ring); }
.toggle input:disabled + .toggle__track { opacity: 0.5; cursor: not-allowed; }

/* Fieldset — grouped fields with a caps legend */
.fieldset {
  border: 1px solid var(--hairline);
  padding: var(--space-5);
  margin: 0;
}
.fieldset legend {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--ink-primary);
  padding: 0 var(--space-3);
}

/* ─── Tables ───────────────────────────────────────────── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--ink-primary);
}
.table thead th {
  text-align: left;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--ink-secondary);
  border-bottom: 2px solid var(--altida-black);
  background: var(--altida-bone);
}
.table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.table tbody tr:hover td { background: var(--grey-50); }
.table--num td:last-child,
.table--num th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* List row — for stacked items (fleet rows, jobs, contacts) */
.list-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--hairline);
}
.list-row:last-child { border-bottom: 0; }
.list-row__lead {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-14);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-primary);
  min-width: 96px;
}
.list-row__body { font-family: var(--font-body); font-size: var(--fs-14); color: var(--ink-secondary); }
.list-row__body strong { color: var(--ink-primary); font-weight: 700; }

/* ─── Card ──────────────────────────────────────────────── */
.card {
  background: var(--altida-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-3);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-mech),
              box-shadow var(--dur-base) var(--ease-mech),
              border-color var(--dur-base) var(--ease-mech);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--hairline-strong);
}
.card__media {
  aspect-ratio: 4 / 3;
  background: var(--grey-100);
  position: relative;
  overflow: hidden;
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-mech);
}
.card:hover .card__media img { transform: scale(1.04); }

.card__body { padding: var(--space-5); }
.card__eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin: 0 0 var(--space-2);
}
.card__title {
  /* Inter caps — Lovelo at 24px in a dense card grid feels shouty.
     Inter 800 caps reads more premium and lets the section title above
     stay the loudest thing on the page. */
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-20);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
  color: var(--ink-primary);
}
.card__desc {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--ink-secondary);
  margin: 0;
}

/* Spec card — used to display crane / equipment data */
.spec-card {
  background: var(--altida-black);
  color: var(--altida-white);
  padding: var(--space-6);
  border-radius: var(--radius-3);
  position: relative;
  overflow: hidden;
}
.spec-card::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--altida-yellow);
}
.spec-card .spec-card__model {
  /* Inter caps — was Lovelo at 40px which competed with section titles.
     Inter 800 keeps the model number clearly legible and lets the
     yellow accent on the model digits do the brand work. */
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-32);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.spec-card .spec-card__model em {
  font-style: normal;
  color: var(--altida-yellow);
}
.spec-card__rows {
  list-style: none; margin: var(--space-5) 0 0; padding: 0;
  display: grid; gap: 0;
}
.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--grey-700);
  gap: var(--space-4);
}
.spec-row:last-child { border-bottom: 1px solid var(--grey-700); }
.spec-row__label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--grey-400);
}
.spec-row__value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-16);
  color: var(--altida-white);
}
.spec-row__value em {
  font-style: normal;
  color: var(--altida-yellow);
}

/* ─── Navigation ────────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  padding: var(--space-4) var(--gutter);
  background: var(--altida-white);
  border-bottom: 1px solid var(--hairline);
}
.nav__brand img { display: block; height: 28px; }
.nav__links {
  display: flex; gap: var(--space-6);
  list-style: none; margin: 0; padding: 0;
}
.nav__link {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-14);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-primary);
  text-decoration: none;
  position: relative;
  padding: 8px 0;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: var(--border-rule);
  background: var(--altida-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-mech);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* ─── Section header ────────────────────────────────────── */
.section-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.section-head .altida-rule { width: 36px; }

/* ─── Marketing tile (the JEKKO 545 / GMK 3060 layout) ──── */
.product-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--altida-white);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--space-6);
}
.product-tile::before,
.product-tile::after {
  content: '';
  position: absolute;
  width: 22%;
  aspect-ratio: 1;
  background: var(--altida-yellow);
  z-index: 0;
}
.product-tile::before {
  top: 0; left: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.product-tile::after {
  bottom: 0; right: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.product-tile__head,
.product-tile__media,
.product-tile__foot { position: relative; z-index: 1; }
.product-tile__title {
  /* Marketing tile keeps Lovelo — this is hero-scale display type and
     where Lovelo earns its keep. */
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, var(--fs-64));
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  margin: 0;
}
.product-tile__title em {
  font-style: normal;
  color: var(--altida-yellow);
}
.product-tile__media {
  display: flex; align-items: center; justify-content: center;
}
.product-tile__media img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ─── Footer / Contact band ─────────────────────────────── */
.contact-strip {
  background: var(--altida-black);
  color: var(--altida-white);
  padding: var(--space-6) var(--gutter);
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  align-items: center; justify-content: space-between;
}
.contact-strip a:not(.btn) { color: inherit; text-decoration: none; }
.contact-strip__pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  letter-spacing: var(--track-wide);
}
.contact-strip__pill .label {
  font-family: var(--font-sans); font-size: var(--fs-12);
  letter-spacing: var(--track-widest); text-transform: uppercase;
  color: var(--grey-400);
}

/* ─── Hero (homepage band) ──────────────────────────────── */
.hero {
  position: relative;
  min-height: 70vh;
  background: var(--altida-black);
  color: var(--altida-white);
  display: grid;
  align-items: end;
  padding: var(--space-9) var(--gutter) var(--space-8);
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0; z-index: 0;
}
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0.55;
}
.hero__inner { position: relative; z-index: 1; max-width: 980px; }
.hero__title {
  font-family: var(--font-display);
  color: var(--altida-yellow);
  font-size: clamp(2.5rem, 7vw, var(--fs-128));
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tightest);
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
.hero__sub {
  font-size: var(--fs-20);
  max-width: 640px;
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-6);
}

/* ─── Stat tile ─────────────────────────────────────────── */
.stat {
  padding: var(--space-5);
  background: var(--altida-bone);
  border-top: var(--border-bold) solid var(--altida-yellow);
}
.stat__num {
  font-family: var(--font-display);
  font-size: var(--fs-64);
  line-height: 1;
  letter-spacing: var(--track-tightest);
  margin: 0;
}
.stat__label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin: 8px 0 0;
}

/* ─── Status pill (operational) ─────────────────────────── */
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: rgba(43, 182, 115, 0.12);
  color: var(--status-go);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}
.status-pill .dot {
  width: 8px; height: 8px; border-radius: 999px; background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse 1.8s var(--ease-out) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  70%  { box-shadow: 0 0 0 8px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}