/* Detail and compare readability pass. Kept separate so the archive shell can
   evolve without losing the information hierarchy of these two views. */

/* Vehicle detail: give the metric column room to read as a data sheet. */
@media (min-width:701px) {
  .detail-layout {
    grid-template-columns: minmax(0, 45%) minmax(0, 49%);
    gap: 6%;
    padding-left: 11vw;
    padding-right: 7vw;
  }
  .detail-body {
    max-width: 840px;
    /* The basic panel and the deeper archive data form two readable columns.
       Keeping them in the same row avoids pushing all advanced values below
       the fold on wide screens. */
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(250px, .92fr);
    column-gap: clamp(26px, 3vw, 56px);
    align-content: start;
  }
  .detail-body > .detail-kicker,
  .detail-body > .detail-title,
  .detail-body > .detail-subtitle,
  .detail-body > .detail-scoreline,
  .detail-body > .detail-compare-button { grid-column: 1 / -1; }
  .detail-body > .detail-section:nth-of-type(1) { grid-column: 1; }
  .detail-body > .detail-section:nth-of-type(2) { grid-column: 2; }
  .detail-body > .detail-section:nth-of-type(3),
  .detail-body > .detail-end { grid-column: 1 / -1; }
  .detail-title { font-size: clamp(36px, 3.15vw, 62px); line-height: .98; }
  .detail-scoreline {
    font-size: 15px;
    padding: 15px 0 3px;
    border-top-color: #c9c9c4;
  }
  .detail-scoreline span:last-child { font-family: var(--font-data); font-weight: 600; }
  .detail-section { margin-top: 42px; }
  .detail-section > h2 {
    font-size: 14px;
    padding-bottom: 10px;
    margin-bottom: 0;
    letter-spacing: .01em;
  }
  .detail-basic-list {
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  .detail-basic-list > div {
    display: grid;
    min-height: 48px;
    padding: 11px 0;
    border-bottom: 1px solid #e7e7e3;
    align-items: baseline;
    grid-template-columns: minmax(0, 1fr) minmax(100px, 38%);
    font-size: 15px;
  }
  .detail-basic-list > div > span { color: #55554f; }
  .detail-basic-list > div > strong {
    font-family: var(--font-data);
    font-size: 23px;
    font-weight: 600;
    font-variant-numeric: tabular-nums lining-nums;
    text-align: left;
  }
  .advanced-grid { gap: 26px 28px; }
  .advanced-item > dt { font-size: 12px; margin-bottom: 8px; color: #65655e; }
  .advanced-item > dd { font-size: clamp(32px, 2.6vw, 46px); line-height: .98; }
  .blueprint-row { font-size: 26px; }
}

/* The card already carries the name; the compare heading is its single, large
   label. The metrics are rendered once in the adjacent comparison column, so
   hide the compact panel copy here while retaining tier, image and stars. */
.compare-vehicle .car-panel .panel-title { display: none; }
.compare-vehicle .car-panel .panel-inner { padding-top: 6px; }
.compare-vehicle .car-panel .panel-starline { margin-top: 0; }
.compare-vehicle .car-panel .panel-stats { display: none; }
.compare-vehicle .car-panel .panel-stats { margin-top: 18px; }
.compare-vehicle {
  grid-template-columns: minmax(185px, 39%) minmax(0, 1fr);
  gap: 30px;
}
/* Comparison cards share one image window regardless of source photograph
   ratio. Containment preserves each photograph's intrinsic proportions while
   the fixed viewport keeps both cards the same height. Archive cutouts keep
   their existing crop wrapper and are clipped by this same window. */
.compare-vehicle .panel-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.compare-vehicle .panel-image--story > img,
.compare-vehicle .panel-uncropped-image {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
.compare-vehicle .panel-image--archive .panel-image-crop {
  left: 0!important;
  top: 0!important;
  width: 100%!important;
  height: 100%!important;
  transform: none;
}
.compare-vehicle .panel-image--archive .panel-image-crop > img {
  /* Scale by the crop height and let the 4:3 window clip the horizontal
     overflow. Width:auto preserves the PNG's intrinsic ratio; the inline
     crop dimensions used by the garage are intentionally superseded here. */
  width: auto!important;
  height: var(--crop-height, 100%)!important;
  left: calc(50% - var(--crop-box-half-width, 50%) - var(--crop-left-offset, 0%))!important;
  top: var(--crop-top-offset-negative, 0%)!important;
  object-fit: fill;
}
.compare-vehicle-title {
  max-width: 17ch;
  min-height: 2em;
  font-size: clamp(28px, 3.1vw, 54px);
  line-height: .99;
  margin-bottom: 24px;
}
.compare-metrics { gap: 0; }
.compare-metric {
  min-height: 65px;
  padding: 11px 0;
  border-bottom: 1px solid #e4e4df;
  align-items: baseline;
}
.compare-metric > span { font-size: 14px; color: #5f5f58; }
.compare-metric strong {
  font-size: clamp(27px, 2.1vw, 38px);
  line-height: 1;
  font-weight: 600;
}
.compare-delta { font-size: 12px; margin-top: 5px; }
.compare-remove { font-size: 12px; margin-top: 22px; }

/* Keep the lower table left and reserve a readable column for the radar. */
.compare-lower-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 32%);
  align-items: start;
  gap: clamp(26px, 4vw, 76px);
  margin: 0 8% 38px 11%;
}
.comparison-table {
  width: 100%;
  margin: 0;
  table-layout: fixed;
  font-size: 14px;
}
.comparison-table col.comparison-label-col { width: 29%; }
.comparison-table th,
.comparison-table td {
  padding: 14px 10px;
  line-height: 1.25;
}
.comparison-table th:first-child,
.comparison-table td:first-child { padding-left: 0; }
.comparison-table th:not(:first-child),
.comparison-table td:not(:first-child) {
  text-align: left;
  padding-left: 18px;
}
.comparison-table th { font-size: 12px; }
.comparison-table td:not(:first-child) {
  font-family: var(--font-data);
  font-size: 16px;
  font-variant-numeric: tabular-nums lining-nums;
}
.compare-radar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid #eee;
}
.compare-radar svg { width: min(100%, 320px); flex: none; align-self: center; }
.compare-radar p { font-size: 13px; line-height: 1.55; }
.compare-radar p span { font-size: 11px; }

@media (max-width:1100px) and (min-width:701px) {
  .detail-layout { grid-template-columns: minmax(0, 44%) minmax(0, 50%); gap: 6%; }
  .compare-vehicle { grid-template-columns: minmax(150px, 38%) minmax(0, 1fr); gap: 20px; }
  .compare-lower-layout { grid-template-columns: minmax(0, 1fr) minmax(240px, 31%); gap: 22px; }
}

@media (max-width:700px) {
  .detail-basic-list > div { min-height: 46px; padding: 10px 0; }
  .detail-basic-list > div > strong { font-size: 21px; }
  .advanced-item > dd { font-size: 34px; }
  .compare-vehicle .car-panel .panel-title { display: none; }
  .compare-vehicle-title { max-width: none; min-height: 2.16em; font-size: 27px; margin-bottom: 17px; }
  .compare-metric { min-height: 60px; padding: 10px 0; }
  .compare-metric > span { font-size: 12px; }
  .compare-metric strong { font-size: 27px; }
  .compare-delta { font-size: 10px; }
  .compare-lower-layout { display: block; margin: 0 15px 28px; }
  .comparison-table { width: 100%; margin: 0; font-size: 12px; }
  .comparison-table th, .comparison-table td { padding: 11px 5px; }
  .comparison-table th:first-child, .comparison-table td:first-child { padding-left: 0; }
  .comparison-table th:not(:first-child), .comparison-table td:not(:first-child) { padding-left: 8px; }
  .comparison-table td:not(:first-child) { font-size: 14px; }
  .compare-radar { margin-top: 25px; }
  .compare-radar svg { width: min(100%, 280px); }
}