/* Models section styles (Fixed DOM Contract)
   Scoped to .ck-models to avoid interfering with Astra/global styles. */

.ck-models{
  --container: 1120px;

  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s7: 2rem;
  --s8: 2.75rem;

  --radius-sm: 14px;
  --radius: 22px;

  --surface: #fff;
  --border: hsl(215 18% 86%);
  --muted: hsl(215 12% 42%);

  --brand-700: hsl(215 18% 28%);
  --brand-900: hsl(215 22% 16%);

  --accent-700: hsl(35 92% 40%);
  --wa-600: hsl(145 70% 36%);
  --wa-700: hsl(145 72% 30%);
}

.ck-models .container{
  width: min(var(--container), calc(100% - 2rem));
  margin-inline: auto;
}

.ck-models.section{ padding: var(--s8) 0; }

.ck-models .section__head{
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--s6);
  margin-bottom: var(--s6);
}

.ck-models .section__title{
  margin: 0;
  font-size: clamp(1.55rem, 2.1vw, 2.1rem);
  letter-spacing: -0.015em;
  color: var(--brand-900);
}

.ck-models .section__sub{
  margin: var(--s2) 0 0;
  color: var(--muted);
  max-width: 70ch;
}

.ck-models .section__foot{ margin-top: var(--s6); }
.ck-models .small{ font-size: 0.92rem; }
.ck-models .muted{ color: var(--muted); }

/* Buttons (limited to what the Models section uses) */
.ck-models .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.05rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 750;
  letter-spacing: 0.2px;
  box-shadow: none;
  cursor: pointer;
  user-select: none;
}

.ck-models .btn:hover{ text-decoration: none; transform: translateY(-1px); transition: transform 150ms ease; }
.ck-models .btn:active{ transform: translateY(0); }

.ck-models .btn--ghost{ background: transparent; border-color: var(--border); color: var(--brand-900); }
.ck-models .btn--soft{ background: hsl(35 92% 52% / .14); border-color: hsl(35 92% 52% / .30); color: var(--brand-900); }
.ck-models .btn--sm{ padding: 0.6rem 0.8rem; font-size: 0.92rem; }

/* Cards grid */
.ck-models .grid-cards{ display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5); }

.ck-models .car-card{
  grid-column: span 4;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 26px hsl(215 40% 12% / .08);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.ck-models .car-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 36px hsl(215 40% 12% / .12); }

.ck-models .car-card__media{
  height: 240px;
  background:
    radial-gradient(180px 80px at 30% 40%, hsl(35 92% 52% / .34), transparent 70%),
    radial-gradient(180px 100px at 80% 30%, hsl(145 62% 42% / .26), transparent 75%),
    linear-gradient(135deg, hsl(215 22% 16%), hsl(214 16% 26%));
}

@supports (aspect-ratio: 16 / 9){
  .ck-models .car-card__media{
    height: auto;
    aspect-ratio: 3 / 2;
  }
}

.ck-models .car-card__media--alt{
  background:
    radial-gradient(220px 90px at 25% 35%, hsl(28 86% 48% / .32), transparent 68%),
    radial-gradient(200px 120px at 85% 35%, hsl(145 62% 42% / .22), transparent 72%),
    linear-gradient(135deg, hsl(214 18% 22%), hsl(215 22% 16%));
}

.ck-models .car-card__body{ padding: var(--s6); }

.ck-models .car-card__top{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
}

.ck-models .car-card__name{ margin: 0; font-size: 1.1rem; font-weight: 850; color: var(--brand-900); }
.ck-models .car-card__price{ margin: 0; font-weight: 850; color: var(--accent-700); }

.ck-models .car-card__meta{ margin: var(--s3) 0 var(--s5); color: var(--muted); }

.ck-models .car-card__actions{ display: flex; gap: var(--s3); flex-wrap: wrap; }

@media (max-width: 980px){
  .ck-models .section__head{ flex-wrap: wrap; align-items: flex-start; }
  .ck-models .car-card{ grid-column: span 6; }
}

@media (max-width: 560px){
  .ck-models .car-card{ grid-column: span 12; }
  .ck-models .btn{ min-height: 44px; }
}