/* ============================================================
   VistaCraft — pages/index.css
   Home page specific styles
   H&FV Web Design · 2026
   ============================================================ */

/* ── HERO specific ─────────────────────────────────────────── */
.page-home .hfv-section--hero {
  background-color: var(--bg-deep);
}

.page-home .hfv-hero__bg {
  background-image: url('../../img/contractor-website-design-texas-hero.jpg');
}

/* ── HERO: stat counter ghost (bottom-right counterbalance) ── */
.page-home .hfv-section--hero::after {
  content: '120+';
  position: absolute;
  right: clamp(1.5rem, 6vw, 5rem);
  bottom: clamp(3rem, 8vh, 6rem);
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 13rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--gold);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* ── SERVICES section bg ────────────────────────────────────── */
.page-home .hfv-section--services {
  background: var(--bg-elevated);
}

/* ── FEATURES section bg ────────────────────────────────────── */
.page-home .hfv-section--features {
  background: var(--bg);
}

.page-home .hfv-split__media-placeholder {
  background: linear-gradient(135deg, var(--bg-elevated) 0%, #1e2020 100%);
}

/* ── STATEMENT section bg ───────────────────────────────────── */
.page-home #statement {
  background: var(--bg-deep);
}

/* ── ABOUT / PROCESS section bg ─────────────────────────────── */
.page-home .hfv-section--about {
  background: var(--bg-elevated);
}

/* ── STATS section bg ───────────────────────────────────────── */
.page-home .hfv-section--stats {
  background: var(--bg);
}

/* ── GALLERY section bg ─────────────────────────────────────── */
.page-home .hfv-section--gallery {
  background: var(--bg-elevated);
}

/* ── PROCESS (How it works) section bg ─────────────────────── */
.page-home .hfv-section--process {
  background: var(--bg);
}

/* ── PRICING section bg ─────────────────────────────────────── */
.page-home #pricing {
  background: var(--bg-deep);
}

/* ── GEOGRAPHY section bg ───────────────────────────────────── */
.page-home #geography {
  background: var(--bg-elevated);
}

/* ── TESTIMONIALS section bg ────────────────────────────────── */
.page-home .hfv-section--testimonials {
  background: var(--bg);
}

/* ── FAQ section bg ─────────────────────────────────────────── */
.page-home .hfv-section--faq {
  background: var(--bg-deep);
}

/* ── CTA section bg ─────────────────────────────────────────── */
.page-home .hfv-section--cta {
  background: var(--bg-deep);
}

/* ── CONTACT section bg ─────────────────────────────────────── */
.page-home .hfv-section--contact {
  background: var(--bg);
}

.page-home .hfv-form-wrapper {
  background: var(--bg-elevated);
}

/* Responsive: stack on tablet */
@media (max-width: 768px) {
  .page-home .hfv-contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

/* ── Portfolio card images ──────────────────────────────────── */
.hfv-portfolio-card--roofing .hfv-portfolio-card__placeholder {
  background-image: url('../../img/roofing-hvac-plumbing-contractor-websites-texas-portfolio.jpg');
  background-size: cover;
  background-position: center;
}

.hfv-portfolio-card--roofing .hfv-portfolio-card__placeholder span {
  display: none;
}

/* ── Features image ─────────────────────────────────────────── */
.hfv-features-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Testimonial image ──────────────────────────────────────── */
.hfv-testimonial__media-placeholder {
  background-image: url('../../img/general-contractor.jpg');
  background-size: cover;
  background-position: center top;
}

.hfv-testimonial__media-placeholder span {
  display: none;
}

/* ── Pricing featured image ─────────────────────────────────── */
.hfv-pricing-preview-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  margin-bottom: var(--space-md);
  opacity: 0.65;
}

/* ── Process step images ────────────────────────────────────── */
.hfv-step__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-sm);
  color: var(--accent);
}

/* ── Accordion images (trade icons) ────────────────────────── */
.hfv-accordion__trade-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  margin-bottom: var(--space-sm);
  opacity: 0.7;
}

/* ── First-letter accent on how-step titles (SPINX technique) ── */
.hfv-how-step__title i,
.hfv-step__title i {
  font-style: normal;
  color: var(--gold);
}

/* ── How It Works numbered steps ───────────────────────────── */
.hfv-how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  counter-reset: steps;
}

.hfv-how-step {
  position: relative;
  padding-top: var(--space-md);
  border-top: 2px solid var(--border-strong);
}

.hfv-how-step__num {
  font-family: var(--font-display);
  font-size: clamp(4rem, 7vw, 7rem);
  color: var(--secondary);
  line-height: 1;
  display: block;
  margin-bottom: var(--space-sm);
}

.hfv-how-step__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  color: var(--text);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-xs);
}

.hfv-how-step__desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

.hfv-how-step--featured {
  border-top-color: var(--gold);
}

.hfv-how-step--featured .hfv-how-step__num {
  color: var(--gold);
  opacity: 0.4;
}

@media (max-width: 768px) {
  .hfv-how-steps {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}