@import url('/wp-content/themes/arsen-loco/assets/site-ui.css?v=20260821-5');
/* Unified alignment and typography layer — 2026-08-22 */
:root {
  --ui-control-height: 50px;
  --ui-control-padding: 20px;
  --ui-copy-line: 1.55;
}

html { text-size-adjust: 100%; }
body { text-align: left; }
p, li { line-height: var(--ui-copy-line); }
h1, h2, h3, .lead { text-wrap: balance; }
p, li, .lead { text-wrap: pretty; }

.topline .wrap,
.topbar .wrap,
.nav-in,
.nav > .wrap,
.hero-actions,
.form-actions,
.maintenance-action,
.doc-actions {
  align-items: center !important;
}

.btn,
a.open,
button.filter,
.model-actions a,
.card-action a {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--ui-control-height) !important;
  height: auto !important;
  padding: 10px var(--ui-control-padding) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: normal;
}

.nav-in > .btn,
.nav > .wrap > .btn {
  min-height: var(--ui-control-height) !important;
  height: var(--ui-control-height) !important;
  padding: 0 22px !important;
  white-space: nowrap;
}

.hero-actions { align-items: stretch !important; }
.hero-actions .btn { min-width: 220px; }

.grid,
.systems,
.fleet,
.maintenance-grid,
.steps,
.routegrid,
.footer-grid {
  align-items: stretch;
}

.grid > .card,
.maintenance-grid > .card,
.systems > .system,
.fleet > .loco,
.doc,
.wp-block-column {
  height: 100%;
}

.card,
.system,
.loco,
.doc,
.wp-block-column {
  text-align: left;
}

.grid > .card,
.card.fact,
.maintenance-grid > .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.grid > .card > p:last-of-type { margin-bottom: 20px; }
.grid > .card > .btn { margin-top: auto !important; }

.card-action {
  width: 100%;
  margin: auto 0 0 !important;
  padding-top: 20px;
}
.card-action .btn { width: 100%; }

.model-card { height: 100%; }
.model-card > h3,
.model-card > p { width: auto; text-align: left; }
.model-actions {
  align-self: stretch;
  align-items: stretch;
  margin-top: auto !important;
}
.model-actions .btn { width: 100%; min-height: var(--ui-control-height) !important; }

.fleet > .loco {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.fleet > .loco .btn { width: 100%; margin-top: auto !important; }

.section-head > * { align-self: end; }
.section-head p { max-width: 62ch; }
.eyebrow { line-height: 1.35 !important; }
.eyebrow::before { flex: 0 0 auto; }

.steps > .step { height: 100%; }
.series-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  line-height: 1.25;
  text-align: center;
}
.symptom { min-height: 54px; line-height: 1.3; }

.cta-actions { min-width: min(100%, 280px); }
.cta-actions .btn { width: 100%; }
.cta-actions .phone { display: block; text-align: center; line-height: 1.3; }

.filters {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: stretch;
}
.filters .filter { width: 100%; min-height: 46px !important; padding: 8px 10px !important; }

.request .form-actions .btn { text-align: center !important; }
.footer-grid > div { align-self: start; }

@media (max-width: 920px) {
  .section-head > * { align-self: start; }
  .filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  :root { --ui-control-height: 52px; --ui-control-padding: 16px; }

  h1 { font-size: clamp(38px, 11vw, 46px) !important; line-height: 1.04 !important; }
  h2 { font-size: clamp(30px, 8.5vw, 38px) !important; line-height: 1.08 !important; }
  h3 { line-height: 1.18 !important; }
  p, li { font-size: 16px; line-height: 1.55; }
  .lead, .hero p { font-size: 18px !important; line-height: 1.45 !important; }

  .hero-actions,
  .cta-actions,
  .maintenance-action,
  .form-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
  }
  .hero-actions .btn,
  .cta-actions .btn,
  .maintenance-action .btn,
  .form-actions .btn,
  .request .form-actions .btn {
    width: 100%;
    min-width: 0 !important;
  }

  .model-actions { grid-template-columns: 1fr !important; }
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filters .filter { min-width: 0; }

  .section-head { align-items: start !important; }
  .section-head p { max-width: none; }
  .cta-actions { min-width: 0; }
  .phone { text-align: center; }
}