/* MaintenanceSpec - static content page components (pages.css)
   Loaded alongside site.css on non-model pages only. Uses the same
   design tokens already defined in site.css (:root variables). */

.page-hero{padding:40px 0 36px; background:var(--bg); border-bottom:1px solid var(--line);}
.page-hero h1{font-size:32px; font-weight:800; letter-spacing:-0.02em; margin:0 0 12px; line-height:1.15;}
.page-hero p{font-size:15.5px; color:var(--ink-soft); line-height:1.6; max-width:640px; margin:0;}
.page-hero .eyebrow-tag{margin-bottom:10px;}

.page-section{padding:40px 0;}
.page-section + .page-section{border-top:1px solid var(--line);}
.page-section.alt{background:var(--bg);}
.page-section h2{font-size:20px; font-weight:800; margin:0 0 6px;}
.page-section > .wrap > p.section-sub{font-size:13.5px; color:var(--ink-soft); margin:0 0 20px; max-width:680px;}

.prose{max-width:720px; font-size:14.5px; line-height:1.7; color:var(--ink);}
.prose p{margin:0 0 16px;}
.prose h3{font-size:16px; font-weight:800; margin:28px 0 10px;}
.prose ul{margin:0 0 16px; padding-left:20px;}
.prose li{margin-bottom:6px; color:var(--ink-soft);}
.prose a{color:var(--primary); font-weight:600;}

/* Card grids - makes, models, resources */
.card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.card-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.card-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.info-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px;
  display:flex; flex-direction:column; gap:6px; min-height:44px;
}
.info-card:hover{border-color:var(--primary); box-shadow:0 8px 20px rgba(13,27,50,.06);}
.info-card strong{font-size:14px; color:var(--ink);}
.info-card span{font-size:12.5px; color:var(--ink-soft); line-height:1.4;}
.info-card .card-arrow{margin-top:auto; color:var(--primary); font-size:12.5px; font-weight:700;}

/* Make index (list of models under a make) */
.model-list{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff;}
.model-list-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px;
  min-height:44px; border-bottom:1px solid #edf0f3;
}
.model-list-row:last-child{border-bottom:none;}
.model-list-row:hover{background:var(--primary-soft);}
.model-list-row strong{font-size:14px; color:var(--ink);}
.model-list-row .model-status{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:4px 10px; border-radius:999px;}
.model-status.available{background:var(--primary-soft); color:var(--primary);}
.model-status.pending{background:#f1f2f5; color:var(--ink-soft);}

/* Forms - corrections, contact */
.form-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px; max-width:640px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-field{margin-bottom:14px;}
.form-field.full{grid-column:1/-1;}
.form-field label{display:block; font-size:12.5px; font-weight:700; margin-bottom:5px;}
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:13.5px; font-family:inherit;
  min-height:44px;
}
.form-field textarea{min-height:96px; resize:vertical;}
.form-note{font-size:12px; color:var(--ink-soft); margin:4px 0 18px;}
.form-submit-note{
  margin-top:16px; background:var(--primary-soft); border:1px solid var(--primary-soft-border);
  border-radius:10px; padding:12px 14px; font-size:12.5px; color:var(--ink-soft);
}

/* Find my vehicle - stepper selector */
.finder-flow{max-width:560px;}
.finder-flow-fields{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px;}
.finder-result{
  border:1px dashed var(--line); border-radius:12px; padding:18px; font-size:13.5px; color:var(--ink-soft); text-align:center;
}

/* Status list */
.status-list{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff;}
.status-list-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid #edf0f3; min-height:44px;}
.status-list-row:last-child{border-bottom:none;}
.status-tag{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:5px 12px; border-radius:999px;}
.status-tag.operational{background:#eef8f1; color:#2d7a46;}
.status-tag.review{background:#fff5d9; color:#a76a00;}
.status-tag.pending{background:#eef4ff; color:var(--primary);}

/* Methodology / publication workflow steps */
.workflow-strip{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:20px 0;}
.workflow-step{font-size:12.5px; font-weight:700; color:var(--ink-soft); background:var(--primary-soft); border:1px solid var(--primary-soft-border); border-radius:999px; padding:8px 14px; white-space:nowrap;}
.workflow-arrow{color:var(--primary);}

/* Search */
.search-box{display:flex; gap:10px; max-width:560px; margin-bottom:24px;}
.search-box input{flex:1; padding:12px 14px; border:1px solid var(--line); border-radius:10px; font-size:14px; min-height:48px;}

/* 404 */
.error-404{padding:64px 0; text-align:center;}
.error-404 .code{font-size:13px; font-weight:800; color:var(--primary); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px;}
.error-404 h1{font-size:30px; margin:0 0 12px;}
.error-404 p{color:var(--ink-soft); font-size:14.5px; margin:0 0 24px;}
.error-404-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* Contact category chips */
.contact-categories{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px;}
.contact-category{border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-size:12.5px; font-weight:700; min-height:44px; display:flex; align-items:center;}

@media (max-width:980px){
  .card-grid{grid-template-columns:1fr 1fr;}
  .card-grid.cols-3{grid-template-columns:1fr 1fr;}
  .form-grid, .finder-flow-fields{grid-template-columns:1fr;}
}
@media (max-width:650px){
  .card-grid, .card-grid.cols-3, .card-grid.cols-2{grid-template-columns:1fr;}
  .page-hero h1{font-size:26px;}
  .form-card{padding:20px;}
  .search-box{flex-direction:column;}
}