/**
 * ============================================================================
 * ASC TRADE-IN — LANDING PAGE STYLESHEET  v1.9.1
 * Architecture aligned with Why Choose Us module (ASC codebase standard).
 * Contrast via BEM modifier classes:  --white  --gray  --green  --dark
 * set on section wrappers from Twig: class="asc-... asc-...--{{ bg }}"
 * ============================================================================
 */

/* ── Keyframes ────────────────────────────────────────────────────── */
@keyframes asc-fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes asc-fadeInScale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1);    }
}

/* ── Shared container ─────────────────────────────────────────────── */
.asc-tradein-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Shared buttons ───────────────────────────────────────────────── */
.asc-tradein-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 28px;
  border-radius: 980px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  will-change: transform;
}
.asc-tradein-btn--lg { padding: 16px 36px; font-size: 1.0625rem; }

.asc-tradein-btn--primary {
  background: var(--color-eco-green, #1d9e75);
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(29,158,117,0.25);
  animation: asc-fadeInUp 0.5s ease 0.2s backwards;
}
.asc-tradein-btn--primary:hover {
  background: var(--color-eco-green-dark, #0f6e52);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(29,158,117,0.35);
}
.asc-tradein-btn--primary:active { transform: scale(0.97); }

/* Ghost on dark/green sections */
.asc-tradein-btn--ghost {
  background: transparent;
  color: var(--color-text, #1a1a1a);
  border: 1.5px solid var(--color-border, #d0d0d0);
}
.asc-tradein-btn--ghost:hover {
  border-color: var(--color-eco-green, #1d9e75);
  color: var(--color-eco-green, #1d9e75);
  transform: translateY(-1px);
}
.asc-tradein-btn--ghost-light {
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
.asc-tradein-btn--ghost-light:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* ============================================================================
   SECTION 1 — HERO
   Modifiers:  --white  --gray  --green  --dark  --custom
   Text/button contrast derived from modifier.
   ============================================================================ */

.asc-tradein-hero {
  padding: 80px 24px 64px;
  text-align: center;
  position: relative;
}

/* Backgrounds */
.asc-tradein-hero--white  { background: var(--color-bg, #fff);             }
.asc-tradein-hero--gray   { background: var(--color-bg-secondary, #f5f5f7);}
.asc-tradein-hero--green  { background: var(--color-eco-green, #1d9e75);   }
.asc-tradein-hero--dark   { background: #1d1d1f;                            }
/* --custom: inline style from twig carries the hex */

.asc-tradein-hero__inner {
  max-width: 680px;
  margin: 0 auto;
  animation: asc-fadeInUp 0.6s ease backwards;
}

.asc-tradein-hero__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--color-eco-green, #00A86B);
  animation: asc-fadeInUp 0.5s ease backwards;
}

.asc-tradein-hero__icon svg {
  width: 56px;
  height: 56px;
}

.asc-tradein-hero__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-eco-green, #1d9e75);
  margin-bottom: 20px;
  animation: asc-fadeInUp 0.5s ease 0.05s backwards;
}

/* Eyebrow on dark/green bg */
.asc-tradein-hero--green .asc-tradein-hero__eyebrow,
.asc-tradein-hero--dark  .asc-tradein-hero__eyebrow {
  color: rgba(255,255,255,0.75);
}

.asc-tradein-hero__title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--color-text, #1a1a1a);
  margin-bottom: 20px;
  animation: asc-fadeInUp 0.55s ease 0.1s backwards;
}

.asc-tradein-hero--green .asc-tradein-hero__title,
.asc-tradein-hero--dark  .asc-tradein-hero__title { color: #ffffff; }

.asc-tradein-hero__sub {
  font-size: 1.125rem;
  color: var(--color-text-secondary, #555);
  margin-bottom: 32px;
  line-height: 1.6;
  animation: asc-fadeInUp 0.55s ease 0.15s backwards;
}

.asc-tradein-hero--green .asc-tradein-hero__sub,
.asc-tradein-hero--dark  .asc-tradein-hero__sub { color: rgba(255,255,255,0.8); }

.asc-tradein-hero__ctas {
  display: flex;
  flex-direction: row-reverse;   /* primary right of ghosts within the centred group */
  flex-wrap: wrap-reverse;
  justify-content: center;       /* whole group stays centred in the hero */
  gap: 12px;
  align-items: center;
  animation: asc-fadeInUp 0.55s ease 0.2s backwards;
}

/* Ghost buttons animate with the same keyframe as primary, slight stagger */
.asc-tradein-hero__ctas .asc-tradein-btn--ghost {
  animation: asc-fadeInUp 0.5s ease 0.25s backwards;
}

/* Mobile: stack vertically, primary on top, full width */
@media (max-width: 639px) {
  .asc-tradein-hero__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .asc-tradein-hero__ctas .asc-tradein-btn--primary,
  .asc-tradein-hero__ctas .asc-tradein-btn--ghost {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* Ghost button variant on dark/green hero */
.asc-tradein-hero--green .asc-tradein-btn--ghost,
.asc-tradein-hero--dark  .asc-tradein-btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
.asc-tradein-hero--green .asc-tradein-btn--ghost:hover,
.asc-tradein-hero--dark  .asc-tradein-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.1);
}

/* ── SECTION 2 — TRUST BAR (independent full-width section) ── */
.asc-tradein-trust-bar {
  padding: 20px 0;
  text-align: center;
}

.asc-tradein-trust-bar--white { background: var(--color-bg, #fff); border-top: 1px solid var(--color-border-light, #ebebeb); border-bottom: 1px solid var(--color-border-light, #ebebeb); }
.asc-tradein-trust-bar--gray  { background: var(--color-bg-secondary, #f5f5f7); }
.asc-tradein-trust-bar--green { background: var(--color-eco-green, #1d9e75); }
.asc-tradein-trust-bar--dark  { background: #1d1d1f; }

.asc-tradein-trust-bar__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.asc-tradein-trust-bar__list li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--color-text-secondary, #555);
}

.asc-tradein-trust-bar--green .asc-tradein-trust-bar__list li,
.asc-tradein-trust-bar--dark  .asc-tradein-trust-bar__list li { color: rgba(255,255,255,0.9); }

.asc-tradein-trust-bar__list li svg {
  color: var(--color-eco-green, #1d9e75);
  flex-shrink: 0;
}

.asc-tradein-trust-bar--green .asc-tradein-trust-bar__list li svg,
.asc-tradein-trust-bar--dark  .asc-tradein-trust-bar__list li svg { color: rgba(255,255,255,0.7); }

/* ============================================================================
   SECTION 3 — HOW IT WORKS
   Flex layout: auto-redistributes when items are disabled/hidden.
   Background swap (Why Choose Us pattern — no box shadow):
   --white section → cards use secondary bg (#f5f5f7)
   --gray  section → cards use primary bg (#fff)
   Card visual separation comes from bg contrast alone, Apple-style.
   ============================================================================ */

.asc-tradein-how {
  padding: 72px 0;
}

.asc-tradein-how--white { background: var(--color-bg, #fff); }
.asc-tradein-how--gray  { background: var(--color-bg-secondary, #f5f5f7); }

/* Default (no modifier): treat as gray */
.asc-tradein-how:not(.asc-tradein-how--white):not(.asc-tradein-how--gray) {
  background: var(--color-bg-secondary, #f5f5f7);
}

.asc-tradein-how__title {
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-text, #1a1a1a);
  margin-bottom: 48px;
  animation: asc-fadeInUp 0.5s ease backwards;
}

/* Flex — items shrink-to-fill; no gap left by disabled/hidden cards */
.asc-tradein-how__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  animation: asc-fadeInUp 0.5s ease 0.1s backwards;
}

.asc-tradein-how__card {
  flex: 1 1 180px;          /* grow freely, base width 180px */
  min-width: 160px;
  max-width: 280px;
  border-radius: 16px;
  padding: 28px 22px;
  transition: transform 0.22s ease;
  transform: translateZ(0);
  will-change: transform;
  /* No box-shadow — separation via background swap only */
}

/* Background swap — card always contrasts with section */
.asc-tradein-how--white .asc-tradein-how__card,
.asc-tradein-how:not(.asc-tradein-how--white):not(.asc-tradein-how--gray) .asc-tradein-how__card {
  background: var(--color-bg-secondary, #f5f5f7);
}
.asc-tradein-how--gray .asc-tradein-how__card {
  background: var(--color-bg, #fff);
}

.asc-tradein-how__card:hover {
  transform: translateY(-2px) translateZ(0);
}

.asc-tradein-how__number {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--color-eco-green, #1d9e75);
  opacity: 0.3;
  margin-bottom: 14px;
  line-height: 1;
}
.asc-tradein-how__number--text {
  font-size: 1.125rem;
  opacity: 1;
  letter-spacing: -0.01em;
}

.asc-tradein-how__card h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text, #1a1a1a);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.asc-tradein-how__card p {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #555);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================================
   SECTION 4 — CATEGORIES (always white bg, cards with hover)
   ============================================================================ */

.asc-tradein-categories {
  padding: 72px 0;
  background: var(--color-bg, #fff);
}

.asc-tradein-categories__title {
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-text, #1a1a1a);
  margin-bottom: 48px;
  animation: asc-fadeInUp 0.5s ease backwards;
}

.asc-tradein-categories__grid {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 8px 0 16px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  animation: asc-fadeInUp 0.5s ease 0.1s backwards;
}
.asc-tradein-categories__grid::-webkit-scrollbar { display: none; }

@media (min-width: 640px) {
  .asc-tradein-categories__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 20px;
  }
}
@media (min-width: 1024px) {
  .asc-tradein-categories__grid { grid-template-columns: repeat(7, 1fr); }
}

.asc-tradein-cat-card {
  gap: 12px;
  padding: 24px 16px;
  /* base shell (flex-col, border-radius, border, bg) → asc-tradein-shared.css */
  text-decoration: none;
  color: var(--color-text, #1a1a1a);
  transition: all 0.22s ease;
  transform: translateZ(0);
  will-change: transform;
  scroll-snap-align: start;
  flex-shrink: 0;
  min-width: 120px;
}
@media (min-width: 640px) { .asc-tradein-cat-card { flex-shrink: initial; min-width: auto; } }

.asc-tradein-cat-card:hover {
  border-color: var(--color-eco-green, #1d9e75);
  background: var(--asc-green-50, #F2FBF8);
  transform: translateY(-3px) translateZ(0);
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
  color: var(--color-text, #1a1a1a);
}

/* nth-child stagger */
.asc-tradein-cat-card:nth-child(1)    { animation: asc-fadeInUp 0.4s ease 0.05s backwards; }
.asc-tradein-cat-card:nth-child(2)    { animation: asc-fadeInUp 0.4s ease 0.10s backwards; }
.asc-tradein-cat-card:nth-child(3)    { animation: asc-fadeInUp 0.4s ease 0.15s backwards; }
.asc-tradein-cat-card:nth-child(4)    { animation: asc-fadeInUp 0.4s ease 0.20s backwards; }
.asc-tradein-cat-card:nth-child(5)    { animation: asc-fadeInUp 0.4s ease 0.25s backwards; }
.asc-tradein-cat-card:nth-child(6)    { animation: asc-fadeInUp 0.4s ease 0.30s backwards; }
.asc-tradein-cat-card:nth-child(n+7)  { animation: asc-fadeInUp 0.4s ease 0.35s backwards; }

/* Icon container + svg sizing + hover → asc-tradein-shared.css (.asc-tradein-cat-icon) */

/* Label styles → asc-tradein-shared.css (.asc-tradein-cat-label) */

/* ============================================================================
   SECTION 5 — STATS BAR (Green by default, overridable)
   --white and --gray use green value text for contrast.
   ============================================================================ */

.asc-tradein-stats {
  padding: 52px 0;
}

.asc-tradein-stats--green { background: var(--color-eco-green, #1d9e75); color: #fff; }
.asc-tradein-stats--white { background: var(--color-bg, #fff); color: var(--color-text, #1a1a1a); }
.asc-tradein-stats--gray  { background: var(--color-bg-secondary, #f5f5f7); color: var(--color-text, #1a1a1a); }

.asc-tradein-stats__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 48px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.asc-tradein-stats__list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 100px;
  animation: asc-fadeInUp 0.45s ease backwards;
}
.asc-tradein-stats__list li:nth-child(1) { animation-delay: 0.00s; }
.asc-tradein-stats__list li:nth-child(2) { animation-delay: 0.06s; }
.asc-tradein-stats__list li:nth-child(3) { animation-delay: 0.12s; }
.asc-tradein-stats__list li:nth-child(4) { animation-delay: 0.18s; }

/* Value */
.asc-tradein-stats__list strong {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.asc-tradein-stats--green .asc-tradein-stats__list strong { color: #fff; }
.asc-tradein-stats--white .asc-tradein-stats__list strong,
.asc-tradein-stats--gray  .asc-tradein-stats__list strong { color: var(--color-eco-green, #1d9e75); }

/* Label */
.asc-tradein-stats__list span {
  font-size: 0.8125rem;
  line-height: 1.4;
}
.asc-tradein-stats--green .asc-tradein-stats__list span { color: rgba(255,255,255,0.8); }
.asc-tradein-stats--white .asc-tradein-stats__list span,
.asc-tradein-stats--gray  .asc-tradein-stats__list span { color: var(--color-text-secondary, #555); }

/* ============================================================================
   SECTION 6 — CTA
   ============================================================================ */

.asc-tradein-cta {
  padding: 80px 0;
  text-align: center;
}

.asc-tradein-cta--white { background: var(--color-bg, #fff); }
.asc-tradein-cta--gray  { background: var(--color-bg-secondary, #f5f5f7); }
.asc-tradein-cta--green { background: var(--color-eco-green, #1d9e75); color: #fff; }
.asc-tradein-cta--dark  { background: #1d1d1f; color: #fff; }

.asc-tradein-cta__inner {
  max-width: 600px;
  margin: 0 auto;
  animation: asc-fadeInUp 0.5s ease backwards;
}

.asc-tradein-cta__inner h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: inherit;
  margin-bottom: 14px;
  line-height: 1.15;
}

.asc-tradein-cta__inner p {
  font-size: 1.0625rem;
  margin-bottom: 32px;
  line-height: 1.6;
}
.asc-tradein-cta--white .asc-tradein-cta__inner p,
.asc-tradein-cta--gray  .asc-tradein-cta__inner p { color: var(--color-text-secondary, #555); }
.asc-tradein-cta--green .asc-tradein-cta__inner p,
.asc-tradein-cta--dark  .asc-tradein-cta__inner p { color: rgba(255,255,255,0.8); }

.asc-tradein-cta__buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Ghost button on green/dark CTA */
.asc-tradein-cta--green .asc-tradein-btn--ghost,
.asc-tradein-cta--dark  .asc-tradein-btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
.asc-tradein-cta--green .asc-tradein-btn--ghost:hover,
.asc-tradein-cta--dark  .asc-tradein-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.1);
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */
.asc-tradein-cat-card:focus-visible,
.asc-tradein-btn:focus-visible {
  outline: 3px solid var(--color-eco-green, #1d9e75);
  outline-offset: 3px;
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .asc-tradein-hero__inner,
  .asc-tradein-hero__eyebrow,
  .asc-tradein-hero__title,
  .asc-tradein-hero__sub,
  .asc-tradein-btn--primary,
  .asc-tradein-trust-bar__list,
  .asc-tradein-how__title,
  .asc-tradein-how__grid,
  .asc-tradein-categories__title,
  .asc-tradein-categories__grid,
  .asc-tradein-cat-card,
  .asc-tradein-stats__list li,
  .asc-tradein-cta__inner {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================================
   PRINT
   ============================================================================ */
@media print {
  .asc-tradein-btn,
  .asc-tradein-cta { display: none; }
  .asc-tradein-stats--green { background: #f0f0f0 !important; color: #000 !important; }
  .asc-tradein-cat-card { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
}