/* ============================================================
   Cars.ie v2 — Homepage styles
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.v2-hero {
  position: relative;
  background: var(--color-surface-secondary);
  overflow: hidden;
  padding: var(--space-16) 0 var(--space-12);
}
.v2-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-attachment: fixed;
  background-image: url('/templates-v2/assets/images/hero-bg.jpg');
  background-image: -webkit-image-set(url('/templates-v2/assets/images/hero-bg.webp') type('image/webp'), url('/templates-v2/assets/images/hero-bg.jpg') type('image/jpeg'));
  background-image: image-set(url('/templates-v2/assets/images/hero-bg.webp') type('image/webp'), url('/templates-v2/assets/images/hero-bg.jpg') type('image/jpeg'));
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.2;
  pointer-events: none;
}
.v2-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.v2-hero__headline {
  font-size: var(--text-32);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.v2-hero__count {
  color: var(--color-primary);
}
.v2-hero__sub {
  font-size: var(--text-14);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

/* Tabs */
.v2-hero__tabs {
  display: inline-flex;
  background: var(--color-border-tertiary);
  border-radius: 999px;
  padding: 3px;
  margin-bottom: var(--space-6);
  gap: 2px;
}
.v2-hero__tab {
  padding: var(--space-2) var(--space-5);
  border-radius: 999px;
  font-size: var(--text-14);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background var(--transition-interactive), color var(--transition-interactive);
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-family);
}
.v2-hero__tab:hover {
  color: var(--color-text-primary);
  text-decoration: none;
}
.v2-hero__tab.is-active {
  background: var(--color-text-primary);
  color: var(--color-surface);
}
.v2-hero__panel[hidden] { display: none; }
.v2-hero__field-input {
  width: 100%;
  height: 42px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  font-size: var(--text-16);
  color: var(--color-text-primary);
  background: var(--color-surface);
  font-family: var(--font-family);
  transition: border-color var(--transition-interactive);
}
.v2-hero__field-input::placeholder { text-transform: none; }
.v2-hero__field-input:focus { outline: none; border-color: var(--color-primary); }

/* Search card */
.v2-hero__search-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: left;
  max-width: 880px;
  margin: 0 auto;
  min-height: 220px;
}
.v2-hero__fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.v2-hero__field label {
  display: block;
  font-size: var(--text-12);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.v2-hero__field select,
.v2-hero__field input {
  width: 100%;
  height: 42px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  font-size: var(--text-14);
  color: var(--color-text-primary);
  background: var(--color-surface);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color var(--transition-interactive);
}
.v2-hero__field input {
  background-image: none;
}
.v2-hero__field select:focus,
.v2-hero__field input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Actions row */
.v2-hero__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.v2-hero__advanced {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-13);
  color: var(--color-text-secondary);
}
.v2-hero__advanced svg { width: 14px; height: 14px; }
.v2-hero__advanced:hover { color: var(--color-primary); text-decoration: none; }
.v2-hero__submit {
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-15);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-interactive);
}
.v2-hero__submit:hover {
  background: #14528f;
}

/* ── Stats strip ──────────────────────────────────────────── */
.v2-stats {
  border-bottom: 1px solid var(--color-border-tertiary);
}
.v2-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.v2-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-5) var(--space-4);
  text-decoration: none;
  transition: background var(--transition-interactive);
}
.v2-stats__item:hover {
  background: var(--color-surface-secondary);
  text-decoration: none;
}
.v2-stats__number {
  font-size: var(--text-22);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.v2-stats__label {
  font-size: var(--text-13);
  color: var(--color-text-tertiary);
}

/* ── Sections ─────────────────────────────────────────────── */
.v2-section {
  padding: var(--space-10) 0;
}
.v2-section--dealers {
  background: var(--color-surface-secondary);
}
.v2-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}
.v2-section__header h2 {
  font-size: var(--text-22);
}
.v2-section__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-14);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  white-space: nowrap;
}
.v2-section__link svg { width: 16px; height: 16px; }
.v2-section__link:hover { text-decoration: none; }

/* ── Listings grid ────────────────────────────────────────── */
.v2-listings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.v2-listings-grid__item {
  position: relative;
}
.v2-listings-grid__item.is-featured .v2-card {
  border-color: var(--color-amber-accent);
  border-width: 2px;
}
.v2-featured-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--color-amber-accent);
  color: #fff;
  font-size: var(--text-11);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.v2-featured-badge svg { width: 12px; height: 12px; }

/* ── Dealers grid ─────────────────────────────────────────── */
.v2-dealers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.v2-dealer-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: box-shadow var(--transition-interactive);
}
.v2-dealer-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  text-decoration: none;
}
.v2-dealer-card__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-18);
  font-weight: var(--font-weight-medium);
  color: #fff;
}
.v2-dealer-card__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.v2-dealer-card__name {
  font-size: var(--text-14);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-dealer-card__county {
  font-size: var(--text-13);
  color: var(--color-text-secondary);
}
.v2-dealer-card__stock {
  font-size: var(--text-12);
  color: var(--color-text-tertiary);
}

/* ── Finance partner card ──────────────────────────────────── */
.v2-finance-card {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-tertiary);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
}
img.v2-finance-card__logo-img {
  flex-shrink: 0;
  display: inline-block !important;
  height: 56px;
  width: auto;
  max-width: none;
}
.v2-finance-card__content { flex: 1; min-width: 0; }
.v2-finance-card__content h3 {
  font-size: var(--text-16);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-1);
}
.v2-finance-card__content p {
  font-size: var(--text-14);
  color: var(--color-text-secondary);
  margin: 0;
}
.v2-finance-card__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-md);
  font-size: var(--text-14);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-interactive);
}
.v2-finance-card__cta:hover { background: var(--color-surface-secondary); text-decoration: none; }
.v2-finance-card__cta svg { width: 14px; height: 14px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .v2-hero__fields { grid-template-columns: repeat(2, 1fr); }
  .v2-listings-grid { grid-template-columns: repeat(2, 1fr); }
  .v2-dealers-grid { grid-template-columns: repeat(2, 1fr); }
  .v2-stats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .v2-finance-card { flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
  .v2-finance-card__cta { width: 100%; justify-content: center; }
  .v2-hero { padding: var(--space-8) 0 var(--space-6); }
  .v2-hero__headline { font-size: var(--text-24); }
  .v2-hero { padding: var(--space-10) 0 var(--space-8); }
  .v2-hero__fields { grid-template-columns: 1fr; }
  .v2-hero__actions { flex-direction: column; gap: var(--space-3); }
  .v2-hero__submit { width: 100%; }
  .v2-listings-grid { grid-template-columns: 1fr; }
  .v2-dealers-grid { grid-template-columns: 1fr; }
  .v2-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .v2-stats__item { padding: var(--space-3) var(--space-2); }
  .v2-stats__number { font-size: var(--text-18); }
}