/*
 * MAUTO Home card artwork v369
 * Terminal corrections for the approved ecosystem cards.
 */

:root {
  --mauto-card-blue-surface:
    radial-gradient(86% 74% at 78% 82%, rgba(69, 153, 231, .16) 0%, rgba(69, 153, 231, 0) 72%),
    linear-gradient(145deg, #fbfdff 0%, #edf7ff 56%, #e6f3ff 100%);
  --mauto-road-pearl-surface:
    radial-gradient(80% 110% at 8% 100%, rgba(230, 105, 130, .12) 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(135deg, #fffdfd 0%, #fff1f4 38%, #ffffff 72%, #fff5f7 100%);
}

/* Cars and Parts keep their approved hierarchy with a slightly cooler surface. */
.mauto-home-runtime :is(
  .device-shell[data-device="desktop"] .ecosystem .cards > :is(#c1, #c2),
  .device-shell[data-device="tablet"] .ecosystem .cards > :is(#c1, #c2),
  .device-shell[data-device="mobile"] :is(.mobile-dashboard-tile-auto, .mobile-dashboard-tile-parts)
) {
  background: var(--mauto-card-blue-surface) !important;
}

/* Desktop and tablet already use the approved Tuning/Driving-school art box.
   Keep one explicit contract for every standard ecosystem card. */
.mauto-home-runtime :is(
  .device-shell[data-device="desktop"],
  .device-shell[data-device="tablet"]
) .ecosystem .cards > :is(#c3, #c4, #c5, #c6, #c7, #c8) > img {
  box-sizing: border-box !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Compact mobile cards: one 118 × 88 art box, matching Tuning and Driving school. */
.mauto-home-runtime .device-shell[data-device="mobile"] :is(
  .mobile-dashboard-tile-service,
  .mobile-dashboard-tile-tuning,
  .mobile-dashboard-tile-disassembly,
  .mobile-dashboard-tile-school,
  .mobile-dashboard-tile-dealers,
  .mobile-dashboard-tile-commercial
) > img {
  box-sizing: border-box !important;
  right: 0 !important;
  bottom: -1px !important;
  width: 118px !important;
  height: 88px !important;
  max-width: 70% !important;
  object-fit: contain !important;
  object-position: right bottom !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

.mauto-home-runtime .device-shell[data-device="mobile"] :is(
  .mobile-dashboard-tile-disassembly,
  .mobile-dashboard-tile-dealers
) > img:last-of-type {
  height: 88px !important;
  max-height: 88px !important;
}

/* Safety contract: these cards occupy their grid row, never the row below. */
.mauto-home-runtime .device-shell[data-device="mobile"] :is(
  .mobile-dashboard-tile-disassembly,
  .mobile-dashboard-tile-dealers
) {
  height: 106px !important;
  min-height: 0 !important;
}

/* A subtle rose pearl stays behind the untouched white/yellow vehicle cutout.
   The white centre also absorbs the pale antialiasing of the supplied cutout. */
.mauto-home-runtime :is(
  .device-shell[data-device="desktop"] .ecosystem .cards > :is(#c9, .c9),
  .device-shell[data-device="tablet"] .ecosystem .cards > :is(#c9, .c9),
  .device-shell[data-device="mobile"] .mobile-dashboard-tile-roadside
) {
  border-color: rgba(215, 75, 97, .20) !important;
  background: var(--mauto-road-pearl-surface) !important;
}

.mauto-home-runtime :is(
  .device-shell[data-device="desktop"] .ecosystem .cards > :is(#c9, .c9),
  .device-shell[data-device="tablet"] .ecosystem .cards > :is(#c9, .c9),
  .device-shell[data-device="mobile"] .mobile-dashboard-tile-roadside
)::before,
.mauto-home-runtime :is(
  .device-shell[data-device="desktop"] .ecosystem .cards > :is(#c9, .c9),
  .device-shell[data-device="tablet"] .ecosystem .cards > :is(#c9, .c9),
  .device-shell[data-device="mobile"] .mobile-dashboard-tile-roadside
)::after {
  display: none !important;
  background: none !important;
  content: none !important;
}

.mauto-home-runtime :is(
  .device-shell[data-device="desktop"] .ecosystem .cards > :is(#c9, .c9),
  .device-shell[data-device="tablet"] .ecosystem .cards > :is(#c9, .c9),
  .device-shell[data-device="mobile"] .mobile-dashboard-tile-roadside
) > img {
  opacity: 1 !important;
  clip-path: inset(0 0 12% 0) !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}