/*
 * Buyers Page Styles
 * Botti Realty Inc
 */

/* ── Intro ───────────────────────────────── */
.buyers-intro {
  padding: var(--space-20) 0;
  background: var(--color-white);
}

.buyers-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.buyers-intro-text .eyebrow {
  margin-bottom: var(--space-3);
}

.buyers-intro-text h2 {
  margin-bottom: var(--space-6);
}

.buyers-intro-text p {
  color: var(--color-grey-mid);
  line-height: 1.8;
  margin-bottom: var(--space-4);
}

.buyers-intro-image img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: block;
}

@media (max-width: 768px) {
  .buyers-intro-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ── Timeline ────────────────────────────── */
.timeline-section {
  padding: var(--space-20) 0;
  background: var(--color-cream);
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 780px;
  margin: var(--space-12) auto 0;
}

.timeline-step {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}

.timeline-number {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--color-gold);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--text-xl);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(197, 165, 90, 0.35);
}

.timeline-content {
  flex: 1;
  padding-top: var(--space-2);
}

.timeline-content h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
  color: var(--color-navy);
}

.timeline-content p {
  color: var(--color-grey-mid);
  font-size: var(--text-sm);
  line-height: 1.75;
  margin-bottom: 0;
}

/* ── First-Time Buyer Guide ──────────────── */
.guide-section {
  padding: var(--space-20) 0;
  background: var(--color-white);
}

.buyer-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-10);
}

.buyer-card {
  background: var(--color-white);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border-top: 3px solid var(--color-gold);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.buyer-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.buyer-card-icon {
  width: 48px;
  height: 48px;
  background: rgba(197, 165, 90, 0.1);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}

.buyer-card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.buyer-card p {
  color: var(--color-grey-mid);
  font-size: var(--text-sm);
  line-height: 1.75;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .buyer-cards {
    grid-template-columns: 1fr;
  }
}

/* ── Mortgage Calculator ─────────────────── */
.calculator-section {
  padding: var(--space-20) 0;
  background: var(--color-cream);
}

.mortgage-calc {
  background: var(--color-white);
  padding: var(--space-12);
  border-radius: var(--radius-lg);
  max-width: 640px;
  margin: var(--space-10) auto 0;
  box-shadow: var(--shadow-lg);
}

.mortgage-calc .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.mortgage-calc .btn {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
}

.calc-result {
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  margin-top: var(--space-6);
}

.calc-result-header {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}

.calc-monthly {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--text-4xl);
  color: var(--color-gold);
  font-weight: 700;
  display: block;
  margin-bottom: var(--space-4);
  line-height: 1;
}

.calc-breakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-4);
}

.calc-line {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.calc-line-label {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.calc-line-value {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

.calc-total-line {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
}

.calc-total-label {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
}

.calc-total-value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--text-2xl);
  color: var(--color-gold);
  font-weight: 700;
}

.calc-disclaimer {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
  margin-top: var(--space-3);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .mortgage-calc {
    padding: var(--space-6);
  }

  .mortgage-calc .form-grid {
    grid-template-columns: 1fr;
  }

  .calc-breakdown {
    grid-template-columns: 1fr;
  }
}

/* ── FAQ ─────────────────────────────────── */
.faq-section {
  padding: var(--space-20) 0;
  background: var(--color-white);
}

/* ── CTA ─────────────────────────────────── */
.buyers-cta {
  padding: var(--space-20) 0;
  background: var(--color-navy);
  text-align: center;
}

.buyers-cta .eyebrow {
  margin-bottom: var(--space-4);
}

.buyers-cta h2 {
  color: var(--color-white);
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
}

.buyers-cta p {
  color: rgba(255, 255, 255, 0.7);
  max-width: 560px;
  margin: 0 auto var(--space-8);
}

.buyers-cta .btn-group {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Hero Background ─────────────────────── */
.hero .hero-bg {
  background-image: url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=1800&q=80');
}

/* ── Intro CTA wrap ───────────────────────── */
.buyer-intro-cta {
  margin-top: var(--space-6);
}

/* ── Price hint ───────────────────────────── */
.calc-price-hint {
  display: block;
  color: var(--color-grey-mid);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}