/* =============================================================
   PEOPLECAP — home.css
   Homepage-specific styles
   ============================================================= */


/* =====================
   HERO
   ===================== */

.hero-home {
  background-color: var(--color-stone);
  padding: 56px 0 48px;
}

@media (min-width: 769px) {
  .hero-home { padding: 96px 0 80px; }
}

.hero-home-content {
  max-width: 680px;
}

.hero-home-title {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text);
  letter-spacing: -0.4px;
  margin-bottom: var(--space-lg);
}

@media (min-width: 769px) {
  .hero-home-title {
    font-size: 44px;
    letter-spacing: -0.6px;
    margin-bottom: var(--space-lg);
  }
}

.hero-home-subtitle {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: var(--space-2xl);
}

@media (min-width: 769px) {
  .hero-home-subtitle { font-size: 16px; }
}

.hero-home-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}

@media (min-width: 481px) {
  .hero-home-actions {
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
  }
}

.hero-divider {
  height: 1px;
  background-color: var(--color-border);
  margin-bottom: var(--space-xl);
}

/* Stats */
.hero-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 481px) {
  .hero-stats {
    flex-direction: row;
    gap: 0;
  }

  .hero-stat {
    flex: 1;
    padding-right: var(--space-xl);
  }

  .hero-stat + .hero-stat {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
    border-left: 1px solid var(--color-border);
  }

  .hero-stat:last-child {
    padding-right: 0;
  }
}

.hero-stat-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.hero-stat-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.4;
}

@media (min-width: 769px) {
  .hero-stat-value { font-size: 15px; }
}


/* =====================
   SERVICES SECTION
   ===================== */

.services-home {
  padding: 40px 0;
}

@media (min-width: 769px) {
  .services-home { padding: 64px 0; }
}

.service-card {
  display: flex;
  flex-direction: column;
}

.service-card .card-tag {
  margin-bottom: var(--space-sm);
}

.service-card .card-footer {
  margin-top: auto;
}


/* =====================
   WHY PEOPLECAP
   ===================== */

.why-home {
  padding: 40px 0;
}

@media (min-width: 769px) {
  .why-home { padding: 64px 0; }
}

/* .why-block, .why-icon, .why-title, .why-body → see components.css */


/* =====================
   INSIGHTS TEASER
   ===================== */

.insights-home {
  padding: 40px 0;
}

@media (min-width: 769px) {
  .insights-home { padding: 64px 0; }
}

.insights-home-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

@media (min-width: 769px) {
  .insights-home-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.insights-home-footer {
  margin-top: var(--space-xl);
}

/* Placeholder state */
.insights-placeholder {
  background-color: var(--color-stone);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.insights-placeholder-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}

.insights-subscribe-form {
  width: 100%;
  max-width: 440px;
}

.insights-subscribe-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (min-width: 481px) {
  .insights-subscribe-row {
    flex-direction: row;
    align-items: flex-start;
  }

  .insights-email-group {
    flex: 1;
    margin-bottom: 0;
  }
}

.insights-subscribe-row .btn {
  flex-shrink: 0;
  white-space: nowrap;
}


/* =====================
   CTA BAND
   ===================== */

.cta-band-home {
  background-color: var(--color-primary);
  padding: 48px 0;
}

@media (min-width: 769px) {
  .cta-band-home { padding: 64px 0; }
}

.cta-band-home-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 769px) {
  .cta-band-home-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xl);
  }
}

.cta-band-title {
  font-size: 22px;
  font-weight: 500;
  color: var(--color-white);
  line-height: 1.3;
  margin-bottom: var(--space-sm);
}

@media (min-width: 769px) {
  .cta-band-title {
    font-size: 28px;
    max-width: 520px;
  }
}

.cta-band-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  max-width: 520px;
}

.cta-band-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex-shrink: 0;
}

@media (min-width: 481px) {
  .cta-band-actions {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
  }
}

/* White text link for dark backgrounds */
.btn-cta-text-white {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: color 0.2s;
  min-height: 44px;
}

.btn-cta-text-white:hover {
  color: var(--color-white);
}