/* Velora — concept brand posters (used in place of stock car photos). */

.car-slot {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.car-art {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-display);
}

/* Background environments (per model) */
.car-art.env-aeris {
  background:
    radial-gradient(80% 60% at 78% 22%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(70% 90% at 20% 100%, rgba(217,119,66,0.32), transparent 65%),
    linear-gradient(155deg, #C9B294 0%, #8E7758 65%, #4A3C2A 100%);
  color: #FAF8F5;
}
.car-art.env-lumen {
  background:
    radial-gradient(70% 60% at 80% 18%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(100% 90% at 20% 100%, rgba(217,119,66,0.18), transparent 70%),
    linear-gradient(165deg, #3C5670 0%, #1F2E40 60%, #0E1620 100%);
  color: #FAF8F5;
}
.car-art.env-torrek {
  background:
    radial-gradient(80% 60% at 75% 22%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(80% 90% at 20% 100%, rgba(217,119,66,0.2), transparent 70%),
    linear-gradient(165deg, #2E4A37 0%, #1A2E22 65%, #0F1A13 100%);
  color: #FAF8F5;
}

/* Generic dark studio (account portal) */
.car-art.env-studio {
  background:
    radial-gradient(60% 40% at 50% 95%, rgba(0,0,0,0.5), transparent 70%),
    radial-gradient(120% 70% at 50% 25%, rgba(255,255,255,0.1), transparent 60%),
    linear-gradient(180deg, #1C1F24 0%, #0E1013 70%, #1C1F24 100%);
  color: #FAF8F5;
}

/* Gridlines overlay */
.car-art::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(0deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 80px 80px;
  mask-image: radial-gradient(70% 70% at 50% 50%, black, transparent 90%);
  pointer-events: none;
}

/* Vignette */
.car-art::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(100% 80% at 50% 50%, transparent 50%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

/* CONTENT --------------- */

.car-art .ca-top,
.car-art .ca-bottom {
  position: relative;
  z-index: 2;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
}

.car-art .ca-top .lbl {
  font: 600 10px/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}
.car-art .ca-top .wm {
  font: 800 11px/1 var(--font-display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.car-art .ca-top .wm svg { width: 13px; height: 13px; }

.car-art .ca-name {
  position: relative;
  z-index: 2;
  padding: 0 22px;
  font: 800 1px/1 var(--font-display); /* size overridden below */
  letter-spacing: -0.05em;
  text-transform: uppercase;
  line-height: 0.9;
  text-wrap: balance;
}

.car-art .ca-bottom .tag {
  font: 500 11px/1.4 var(--font-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.85;
  max-width: 60%;
}
.car-art .ca-bottom .price {
  font: 700 14px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.car-art .ca-bottom .price .from {
  display: block;
  font: 500 9px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 4px;
}

/* Accent chevron / motion-line ornament (top-right) */
.car-art .ca-mark {
  position: absolute;
  top: 30%;
  right: -8%;
  width: 50%;
  height: 40%;
  opacity: 0.13;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-family: var(--font-display);
  pointer-events: none;
}
.car-art .ca-mark svg { width: 100%; height: 100%; }

/* SIZE VARIANTS */
.car-art .ca-name { font-size: clamp(56px, 14cqw, 180px); }
.car-art.size-sm .ca-name { font-size: clamp(36px, 11cqw, 80px); }
.car-art.size-md .ca-name { font-size: clamp(48px, 13cqw, 120px); }
.car-art.size-lg .ca-name { font-size: clamp(72px, 16cqw, 220px); }

.car-art { container-type: inline-size; }

/* Very small (thumb) variant — strip detail */
.car-art.size-xs .ca-top, .car-art.size-xs .ca-bottom { padding: 10px 12px; }
.car-art.size-xs .ca-name { font-size: clamp(28px, 12cqw, 64px); padding: 0 12px; }
.car-art.size-xs .ca-top .lbl, .car-art.size-xs .ca-top .wm { font-size: 9px; letter-spacing: 0.12em; }
.car-art.size-xs .ca-bottom .tag { font-size: 9px; }
.car-art.size-xs .ca-bottom .price { font-size: 12px; }
.car-art.size-xs .ca-bottom .price .from { font-size: 8px; }