/* =============================================================
   GLOBAL — layout helpers, buttons, section rhythm, utilities
   Reusable primitives that every section can rely on.
   ============================================================= */

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---- Section rhythm ---- */
.section { padding-block: var(--space-9); }

.section-eyebrow {
  color: var(--color-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.section-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  transition: background var(--transition), color var(--transition), transform var(--transition);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-primary);
  color: var(--color-dark);
  text-transform: uppercase;
}
.btn--primary:hover { background: var(--color-primary-dark); }

.btn--dark {
  background: var(--color-dark);
  color: var(--color-white);
}
.btn--dark:hover { background: #000; }

/* ---- Utilities ---- */
.u-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.u-text-primary { color: var(--color-primary); }
.u-flex { display: flex; }
.u-items-center { align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-gap-4 { gap: var(--space-4); }

.fleet-page {
  min-height: calc(var(--space-9) + var(--space-7));
  background: var(--color-white);
}

.car-details-page {
  min-height: calc(var(--space-9) + var(--space-9));
  background: var(--color-white);
}

.services-page {
  min-height: calc(var(--space-9) + var(--space-9));
  background: var(--color-white);
}

/* ---- Loading placeholder (shown before JS injects a section) ---- */
[data-loading]::after {
  content: 'Loading…';
  display: block;
  padding: var(--space-6);
  text-align: center;
  color: var(--color-body);
  font-size: var(--fs-sm);
}