/*
 * cars.xjk.yt catalog surface.
 * Split from a single sheet to stay under the shared module ceiling; load
 * order is foundation -> launch -> showroom controls -> catalog -> catalog dialog -> responsive.
 */

/* ---------- Responsive ---------- */

@media (max-width: 1050px) {
  .launch {
    display: grid;
    gap: 34px;
    min-height: 0;
    padding-top: 28px;
  }

  .launch-copy {
    position: relative;
    top: auto;
    width: min(100%, 660px);
  }

  .launch-title {
    font-size: clamp(34px, 6vw, 52px);
  }

  .render {
    margin: -8px calc(50% - 50vw + var(--cars-sidenav-half)) 0 0;
  }

  .render-stage {
    min-height: 0;
  }

  .catalog-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  }
}

@media (max-width: 880px) {
  html.xjk-has-sidenav,
  html.xjk-has-sidenav[data-xjk-sidenav="collapsed"] {
    --cars-sidenav-half: 0px;
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .showroom-control-deck {
    width: min(96%, 860px);
  }
}

@media (max-width: 560px) {
  .cars-main {
    padding: 14px 12px 10px;
  }

  .backdrop {
    opacity: 0.06;
  }

  .launch-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .launch {
    gap: 24px;
    padding-top: 12px;
  }

  .launch-title {
    font-size: clamp(34px, 10vw, 48px);
  }

  .action--file {
    grid-column: auto;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .action {
    justify-content: flex-start;
  }

  .plugin-file-download {
    display: none;
  }

  .render-stage {
    aspect-ratio: 4 / 3;
  }

  .showroom-toolbar {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 2px;
  }

  .showroom-step {
    min-height: 44px;
    font-size: 17px;
  }

  .showroom-picker {
    gap: 3px;
  }

  .showroom-model-button {
    min-width: 66px;
    padding: 9px 8px 8px;
    font-size: 9px;
  }

  .showroom-model-name {
    --showroom-name-opacity: 0.15;

    top: 8%;
    right: 12px;
    left: 4%;
    font-family: "IBM Plex Sans Condensed", Inter, system-ui, sans-serif;
    font-size: clamp(48px, 15vw, 88px);
    letter-spacing: -0.065em;
    opacity: var(--showroom-name-opacity);
  }

  .showroom-model-name[data-name-size="long"] {
    font-size: clamp(40px, 12.5vw, 72px);
  }

  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .catalog-card-compact-body {
    padding: 9px 10px 10px;
  }
}

@media (max-width: 340px) {
  .catalog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }

  .showroom-loading-indicator {
    animation: none;
  }
}