/* VIRF 2.0 — Audience Pages */

/* Audience hero — taller + more transparent than default */
.page-hero { min-height: 65vh; }
.page-hero__bg { opacity: 0.55; }
.page-hero__overlay { background: linear-gradient(to right, rgba(10,22,40,0.65) 40%, rgba(10,22,40,0.1)); }

.audience-intro { padding: var(--space-20) 0; }
.audience-intro .section-title { margin: var(--space-3) 0 var(--space-4); }

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}
.benefit-grid--2col {
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-6);
}
@media (max-width: 768px) {
  .benefit-grid--2col {
    grid-template-columns: 1fr;
  }
}

.benefit-card {
  padding: var(--space-6);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition-base);
}
.benefit-card:hover { box-shadow: var(--shadow-md); }

.benefit-card__icon {
  width: 36px; height: 36px;
  color: var(--color-red);
  margin-bottom: var(--space-4);
}
.benefit-card__icon svg { width: 100%; height: 100%; }
.benefit-card h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-dark); margin-bottom: var(--space-2); }
.benefit-card p { font-size: var(--text-sm); color: var(--color-gray); line-height: 1.65; }

.audience-programs { padding: var(--space-20) 0; background: var(--color-gray-light); }
.audience-programs .section-title { margin: var(--space-3) 0 var(--space-5); }

.audience-program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}
.audience-program-card__img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.audience-program-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid rgba(10,22,40,0.08);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: box-shadow var(--transition-base);
}
.audience-program-card:hover { box-shadow: var(--shadow-md); }
.audience-program-card__tag { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-red); }
.audience-program-card h3 { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-dark); }
.audience-program-card p { font-size: var(--text-sm); color: var(--color-gray); line-height: 1.65; flex: 1; }
.audience-program-card__link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-dark); margin-top: auto; transition: gap var(--transition-fast); }
.audience-program-card:hover .audience-program-card__link { gap: var(--space-3); }

.audience-cta { background: var(--color-dark); padding: var(--space-24) 0; text-align: center; }
.audience-cta__inner { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.audience-cta .section-title { color: var(--color-white); }
.audience-cta .section-sub { color: rgba(255,255,255,0.65); text-align: center; }
.audience-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-2); }

/* Pathologies section (used in recuperare.html) */
.pathologies-section { padding: var(--space-20) 0; background: var(--color-white); }
.pathologies-section .section-title { margin: var(--space-3) 0 var(--space-4); }
.pathologies-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); margin-top: var(--space-8); }
.pathology-item { padding: var(--space-3) var(--space-4); background: var(--color-gray-light); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-dark); font-weight: var(--weight-semibold); }

@media (max-width: 768px) {
  .benefit-grid { grid-template-columns: 1fr; }
  .audience-program-grid { grid-template-columns: repeat(2, 1fr); }
  .audience-cta__actions { flex-direction: column; width: 100%; }
  .audience-cta__actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .audience-program-grid { grid-template-columns: 1fr; }
}