/* =============================================================================
   what-is-a-vin.css - What Is a VIN? page styles
   ============================================================================= */

/* ── Shared section header ─────────────────────────────────────────────────── */

.wiav-section-header {
  max-width: 640px;
  margin-bottom: var(--space-12);
}

.wiav-section-header .section-title {
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}

.wiav-section-header .section-subtitle {
  max-width: 640px;
}


/* ── Hero ──────────────────────────────────────────────────────────────────── */

.wiav-hero {
  background: var(--clr-bg-alt);
  border-bottom: 1px solid var(--clr-border);
  padding: var(--space-20) 0 var(--space-16);
  overflow: hidden;
}

.wiav-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.wiav-hero__text {
  max-width: 560px;
}

.wiav-hero__title {
  font-size: clamp(34px, 5.5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--clr-dark);
  line-height: 1.08;
  margin-top: var(--space-3);
  margin-bottom: var(--space-5);
}

.wiav-hero__title em {
  font-style: normal;
  color: var(--clr-primary);
}

.wiav-hero__sub {
  font-size: 18px;
  color: var(--clr-muted);
  line-height: 1.7;
  margin-bottom: var(--space-8);
}

.wiav-hero__sub em {
  font-style: italic;
  color: var(--clr-text);
}

.wiav-hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* VIN display widget */
.wiav-hero__visual {
  flex-shrink: 0;
}

.wiav-vin-display {
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-lg);
  min-width: 320px;
  max-width: 380px;
}

.wiav-vin-display__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: var(--space-4);
}

.wiav-vin-display__chars {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.wiav-vin-char {
  width: 30px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  font-family: 'Courier New', Courier, monospace;
  border-radius: var(--radius-sm);
  letter-spacing: 0;
}

.wiav-vin-char--wmi   { background: #DBEAFE; color: #1D4ED8; }
.wiav-vin-char--vds   { background: #FEF3C7; color: #92400E; }
.wiav-vin-char--check { background: #F3F4F6; color: #374151; border: 1px dashed #D1D5DB; }
.wiav-vin-char--vis   { background: #D1FAE5; color: #065F46; }

.wiav-vin-display__legend {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.wiav-vin-legend {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.wiav-vin-legend--wmi   { background: #DBEAFE; color: #1D4ED8; }
.wiav-vin-legend--vds   { background: #FEF3C7; color: #92400E; }
.wiav-vin-legend--check { background: #F3F4F6; color: #374151; }
.wiav-vin-legend--vis   { background: #D1FAE5; color: #065F46; }

.wiav-vin-display__note {
  font-size: 12px;
  color: var(--clr-muted);
}


/* ── Why VIN Matters ───────────────────────────────────────────────────────── */

.wiav-why {
  padding: var(--space-20) 0;
  border-bottom: 1px solid var(--clr-border);
}

.wiav-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.wiav-why-card {
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}

.wiav-why-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--clr-primary-muted);
  transform: translateY(-2px);
}

.wiav-why-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wiav-why-card__icon svg {
  width: 24px;
  height: 24px;
}

.wiav-why-card__icon--blue  { background: var(--clr-primary-light); color: var(--clr-primary); }
.wiav-why-card__icon--amber { background: #FEF3C7; color: #D97706; }
.wiav-why-card__icon--green { background: #D1FAE5; color: #059669; }

.wiav-why-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--clr-dark);
  line-height: 1.3;
}

.wiav-why-card__body {
  font-size: 14px;
  color: var(--clr-muted);
  line-height: 1.7;
  flex: 1;
}


/* ── VIN Anatomy ───────────────────────────────────────────────────────────── */

.wiav-anatomy {
  padding: var(--space-20) 0;
  background: var(--clr-bg-alt);
  border-bottom: 1px solid var(--clr-border);
}

/* Position bar */
.wiav-anatomy__bar {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-10);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--clr-border);
}

.wiav-anatomy__section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wiav-anatomy__section--wmi   { flex: 3; }
.wiav-anatomy__section--vds   { flex: 5; }
.wiav-anatomy__section--check { flex: 1; }
.wiav-anatomy__section--vis   { flex: 8; }

.wiav-anatomy__cells {
  display: flex;
  width: 100%;
}

.wiav-anatomy__cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) 0;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Courier New', Courier, monospace;
  border-right: 1px solid rgba(255,255,255,0.3);
}

.wiav-anatomy__cell:last-child {
  border-right: none;
}

.wiav-anatomy__section--wmi   .wiav-anatomy__cell { background: #DBEAFE; color: #1D4ED8; }
.wiav-anatomy__section--vds   .wiav-anatomy__cell { background: #FEF3C7; color: #92400E; }
.wiav-anatomy__section--check .wiav-anatomy__cell { background: #F3F4F6; color: #374151; }
.wiav-anatomy__section--vis   .wiav-anatomy__cell { background: #D1FAE5; color: #065F46; }

.wiav-anatomy__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) 0;
  color: var(--clr-muted);
}

/* Detail cards */
.wiav-anatomy__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.wiav-anatomy-card {
  background: var(--clr-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  border-left: 4px solid transparent;
  border-top: 1px solid var(--clr-border);
  border-right: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.wiav-anatomy-card--wmi   { border-left-color: #3B82F6; }
.wiav-anatomy-card--vds   { border-left-color: #F59E0B; }
.wiav-anatomy-card--check { border-left-color: #9CA3AF; }
.wiav-anatomy-card--vis   { border-left-color: #10B981; }

.wiav-anatomy-card__positions {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-muted);
}

.wiav-anatomy-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--clr-dark);
  line-height: 1.3;
}

.wiav-anatomy-card__body {
  font-size: 14px;
  color: var(--clr-muted);
  line-height: 1.7;
}

.wiav-anatomy-card__examples {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--clr-border-light);
}

.wiav-anatomy-card__example {
  font-size: 13px;
  color: var(--clr-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.wiav-anatomy-card__code {
  display: inline-block;
  background: var(--clr-bg-subtle);
  color: var(--clr-text);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  flex-shrink: 0;
}

/* Info note */
.wiav-anatomy__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--clr-primary-light);
  border: 1px solid var(--clr-primary-muted);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-10);
  font-size: 14px;
  color: var(--clr-text);
  line-height: 1.65;
}

.wiav-anatomy__note svg {
  width: 18px;
  height: 18px;
  color: var(--clr-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.wiav-anatomy__note strong {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  color: var(--clr-primary);
  background: rgba(5, 117, 243, 0.07);
  padding: 0 4px;
  border-radius: 3px;
}


/* ── Where to Find VIN ─────────────────────────────────────────────────────── */

.wiav-locations {
  padding: var(--space-20) 0;
  border-bottom: 1px solid var(--clr-border);
}

/* Header row: section label + overview image side by side */
.wiav-locations__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}


/* 3-column card grid (5 cards: 3 top row + 2 bottom row centered) */
.wiav-location-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* Last two cards span adjusted to center them in the third row */
.wiav-location-card:nth-child(4) {
  grid-column: 1;
}

.wiav-location-card:nth-child(5) {
  grid-column: 2;
}

.wiav-location-card {
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}

.wiav-location-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--clr-primary-muted);
  transform: translateY(-2px);
}

.wiav-location-card__img-wrap {
  position: relative;
  overflow: hidden;
  background: var(--clr-bg-subtle);
  aspect-ratio: 5 / 3;
}

.wiav-location-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}

.wiav-location-card:hover .wiav-location-card__img {
  transform: scale(1.03);
}

.wiav-location-card__num {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--clr-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.wiav-location-card__body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.wiav-location-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.wiav-location-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-dark);
  line-height: 1.3;
}

.wiav-location-card__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

.wiav-location-card__badge--easy { background: #D1FAE5; color: #065F46; }
.wiav-location-card__badge--hard { background: #FEF3C7; color: #92400E; }

.wiav-location-card__desc {
  font-size: 13px;
  color: var(--clr-muted);
  line-height: 1.7;
}


/* ── How to Use VIN for Recalls ────────────────────────────────────────────── */

.wiav-howto {
  padding: var(--space-20) 0;
  background: var(--clr-bg-alt);
  border-bottom: 1px solid var(--clr-border);
}

.wiav-howto__steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.wiav-howto-step {
  display: flex;
  gap: var(--space-5);
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  align-items: flex-start;
}

.wiav-howto-step__num {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--clr-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--clr-primary-light);
}

.wiav-howto-step__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.wiav-howto-step__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--clr-dark);
}

.wiav-howto-step__body {
  font-size: 14px;
  color: var(--clr-muted);
  line-height: 1.7;
}


/* ── FAQ ───────────────────────────────────────────────────────────────────── */

.wiav-faq {
  padding: var(--space-20) 0;
  border-bottom: 1px solid var(--clr-border);
}

.wiav-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.wiav-faq-item {
  padding: var(--space-6);
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: box-shadow var(--dur-base) var(--ease);
}

.wiav-faq-item:hover {
  box-shadow: var(--shadow-sm);
}

.wiav-faq-item__q {
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-dark);
  line-height: 1.4;
}

.wiav-faq-item__a {
  font-size: 14px;
  color: var(--clr-muted);
  line-height: 1.75;
}

.wiav-faq-item__a em {
  font-style: italic;
  color: var(--clr-text);
}


/* ── CTA Banner (shared) ────────────────────────────────────────────────────── */

.cta-banner {
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
  padding: var(--space-20) 0;
  text-align: center;
}

.cta-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.cta-banner__title {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}

.cta-banner__sub {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}


/* ── Responsive: ≤960px ─────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  /* Locations header: stack vertically */
  .wiav-locations__header {
    flex-direction: column;
    gap: var(--space-8);
  }

  /* Location cards: 2 columns */
  .wiav-location-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .wiav-location-card:nth-child(4),
  .wiav-location-card:nth-child(5) {
    grid-column: auto;
  }
}


/* ── Responsive: ≤768px ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Hero */
  .wiav-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-10);
  }

  .wiav-vin-display {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .wiav-vin-display__chars {
    gap: 3px;
  }

  .wiav-vin-char {
    width: calc((100% - 16 * 3px) / 17);
    min-width: 20px;
    height: 30px;
    font-size: 12px;
  }

  /* Cards */
  .wiav-why__grid,
  .wiav-anatomy__cards,
  .wiav-howto__steps,
  .wiav-faq__grid {
    grid-template-columns: 1fr;
  }

  /* Anatomy bar on small screens */
  .wiav-anatomy__bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wiav-anatomy__section--wmi   { min-width: 60px; }
  .wiav-anatomy__section--vds   { min-width: 100px; }
  .wiav-anatomy__section--check { min-width: 40px; }
  .wiav-anatomy__section--vis   { min-width: 160px; }
}

@media (max-width: 540px) {
  /* Location cards: single column */
  .wiav-location-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .wiav-hero__actions {
    flex-direction: column;
  }

  .wiav-hero__actions .btn {
    width: 100%;
    text-align: center;
  }
}