/* Spare parts and after-sales */

/* parts plates: one wide, two stacked */
.sp-plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sp-plates .c2-fig.plate img{aspect-ratio:4/3}
.sp-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;margin-top:32px;border-top:2px solid var(--ink)}
.sp-index div{padding:16px 0}
.sp-index h3{font:600 1.3rem/1.05 var(--d);text-transform:uppercase}
.sp-index p{margin-top:6px;font-size:.92rem;color:var(--ink-2)}
.sp-note{max-width:80ch}

/* spares: wide frame */
.sp-frame{height:clamp(460px,52vw,640px)}
.sp-frame .wide-card .c2-h{max-width:16ch}
.sp-why{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(36px,4vw,56px)}
.sp-why li{padding:20px 22px;background:var(--asphalt-2);border-top:3px solid var(--amber)}
.sp-why b{display:block;font:600 1.45rem/1.05 var(--d);text-transform:uppercase}
.sp-why p{margin-top:8px;color:var(--haze);font-size:.95rem}

/* fault report card */
.sp-report{margin-top:28px;background:#fff;box-shadow:0 24px 48px -32px rgba(31,36,39,.55)}
.sp-report-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;background:var(--asphalt);color:var(--white)}
.sp-report-top b{font:600 1.3rem/1 var(--d);text-transform:uppercase}
.sp-report-top span{font-size:.8rem;color:var(--haze)}
.sp-report ol{list-style:none;padding:6px 20px 12px;counter-reset:sr}
.sp-report li{display:grid;grid-template-columns:36px 130px minmax(0,1fr);gap:10px;align-items:baseline;padding:12px 0;border-bottom:1px dashed var(--rule);color:var(--ink-2);font-size:.93rem;counter-increment:sr}
.sp-report li:last-child{border-bottom:0}
.sp-report li::before{content:counter(sr);font:600 1.3rem/1 var(--d);color:var(--amber)}
.sp-report li b{font:600 1.15rem/1.1 var(--d);text-transform:uppercase;color:var(--ink)}

/* diagnosis: five stops across, three images under */
.sp-flow{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:sf;position:relative}
.sp-flow::before{content:"";position:absolute;left:20px;right:20px;top:20px;height:3px;background:var(--asphalt-3)}
.sp-flow li{position:relative;padding:60px 20px 0 0;counter-increment:sf}
.sp-flow li::before{content:counter(sf);position:absolute;left:0;top:0;width:43px;height:43px;border-radius:50%;display:grid;place-items:center;font:600 1.1rem/1 var(--d);background:var(--asphalt);border:3px solid var(--amber);color:var(--white)}
.sp-flow b{display:block;font:600 1.4rem/1.05 var(--d);text-transform:uppercase}
.sp-flow p{margin-top:8px;color:var(--haze);font-size:.93rem}
.sp-diag-media{display:grid;grid-template-columns:4fr 4fr 5fr;gap:10px;margin-top:clamp(40px,5vw,64px)}
.sp-diag-media figure{margin:0;position:relative;height:clamp(200px,20vw,280px);overflow:hidden;background:#fff}
.sp-diag-media img{width:100%;height:100%;object-fit:cover}
.sp-diag-media figure:first-child img{object-fit:contain;padding:12px}
.sp-diag-media figcaption{position:absolute;left:10px;bottom:10px;font-size:.78rem;color:var(--white);background:rgba(43,48,52,.78);padding:3px 8px}

/* matching */
.sp-colors img{aspect-ratio:auto}
#spares{padding-top:0}
.sp-ticks{margin-top:26px}

/* delivery lanes */
.sp-lane-p{margin-top:12px;color:var(--haze-2)}

/* scope */
.sp-not{margin-top:40px}
.sp-models{margin-top:clamp(48px,6vw,80px)}

@media (max-width:1000px){
  .sp-plates{grid-template-columns:1fr 1fr}
  .sp-plates .a{grid-column:1/-1}
  .sp-index{grid-template-columns:1fr 1fr}
  .sp-flow{grid-template-columns:1fr;row-gap:0}
  .sp-flow::before{left:20px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .sp-flow li{padding:0 0 26px 64px}
  .sp-why{grid-template-columns:1fr}
}
@media (max-width:600px){
  .sp-plates{grid-template-columns:1fr}
  .sp-index{grid-template-columns:1fr}
  .sp-report li{display:block;position:relative;padding-left:34px}
  .sp-report li::before{position:absolute;left:0;top:12px}
  .sp-report li b{display:block;margin-bottom:2px}
  .sp-diag-media{grid-template-columns:1fr 1fr}
  .sp-diag-media figure:last-child{grid-column:1/-1}
  .sp-frame{height:auto}
}