/* Road test car rental cards (2026-09-29): the five road test products as Services cards.
   Shared by /services/ (#sp-roadtest) and /road-test-car-rental/. The card is the Services
   sp-card (services.css + services-open.css + services-integration.css + services-mobile.css);
   this file adds the two groups, the drawn art, the car-only note and the page helpers. */

/* Groups: where the ICBC road test is. */
.services-open .rtc-group-title {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 20px; color: var(--sp-blue);
  font-size: .78rem; font-weight: 750; line-height: 1.3;
  letter-spacing: .16em; text-transform: uppercase;
}
.services-open .rtc-group-title::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--sp-line); }
.services-open .rtc-grid + .rtc-group-title { margin-top: 44px; }
.services-open .rtc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* One art height for photos and drawings, so titles line up in a row. */
.services-open .rtc-card .sp-card-art { height: 178px; flex-basis: 178px; }
.services-open .rtc-card .rtc-art-photo img { object-position: center 70%; }
.services-open .rtc-art-drawn .rtc-art-svg {
  inset: 12px 20px 4px; width: calc(100% - 40px); height: calc(100% - 16px); opacity: .92;
}

/* Car only: the $30 comparison with car + warm-up. */
.services-open .rtc-card p.rtc-upsell {
  flex-grow: 0; margin: -6px 0 20px; padding: 10px 12px;
  border: 1px solid #3c86bf66; border-radius: 12px; background: #0c2a4a99;
  color: #d7f3ff; font-size: .875rem; line-height: 1.5;
}
.services-open .rtc-card.unavailable .rtc-upsell { display: none; }

@media (min-width: 681px) and (max-width: 1020px) {
  .services-open .rtc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}
@media (max-width: 680px) {
  .services-open .rtc-grid { grid-template-columns: minmax(0, 1fr); }
  .services-open .rtc-group-title { margin-bottom: 16px; font-size: .74rem; }
  .services-open .rtc-grid + .rtc-group-title { margin-top: 34px; }
  .services-open .rtc-card .rtc-art-drawn {
    margin-bottom: 8px; border-radius: 22px 22px 0 0;
    background: radial-gradient(ellipse at 72% 18%, #1c4a7d 0, transparent 68%),
                linear-gradient(180deg, #0c203f, #09152900);
  }
  .services-open .rtc-card .rtc-art-drawn .rtc-art-svg {
    inset: 10px 16px 4px; width: calc(100% - 32px); height: calc(100% - 14px);
  }
  .services-open .rtc-card .rtc-art-photo img { object-position: center 72%; }
  .services-open .rtc-card p.rtc-upsell { margin: 0 0 12px; font-size: .86rem; }
}

/* On /road-test-car-rental/ the cards sit inside the lesson page layout. */
.rtc-embed.services-open { background: none; margin-top: 24px; }
.rtc-lede {
  margin: 0; max-width: 780px;
  color: rgba(234, 247, 255, 0.8); font-size: 15.5px; line-height: 1.65;
}
.sp-flow-grid.rtc-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-flow-grid.rtc-flow .sp-flow-card { min-height: 0; }
.sp-note-band__inner.rtc-compare {
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) minmax(200px, 300px);
  align-items: center;
}
.sp-note-band__inner.rtc-compare .sp-section-kicker {
  margin: 0 0 10px; color: rgba(19, 185, 255, 0.92); font-size: 11px; line-height: 1.5;
}
.sp-note-band__inner.rtc-compare img { display: block; width: 100%; height: auto; border-radius: 18px; }
@media (max-width: 900px) {
  .sp-flow-grid.rtc-flow,
  .sp-note-band__inner.rtc-compare { grid-template-columns: minmax(0, 1fr); }
}