/* File: theme/css/humanspark-interactive.css
 * Purpose: Reusable interactive components — tabs, numbered steps, download cards.
 * Project: HumanSpark | Date: 2026-04-07
 *
 * Always loaded (sitewide). Extracted from components.css to stay within
 * the CSS line budget. Uses hs- prefix + BEM like the rest of the theme.
 */

/* --- Tabs --- */
.hs-tabs {
  display: flex; gap: var(--hs-space-sm); flex-wrap: wrap;
  margin-bottom: var(--size-4);
}
.hs-tabs__tab {
  padding: 0.55rem 1.2rem; border-radius: var(--hs-radius);
  font-size: var(--hs-text-base); font-weight: 600;
  background: var(--hs-grey); color: var(--hs-text-muted);
  border: 1.5px solid transparent;
  cursor: pointer; transition: all 0.2s;
  font-family: inherit;
}
.hs-tabs__tab:hover,
.hs-tabs__tab--active {
  background: rgba(0, 131, 132, 0.08); color: var(--hs-teal);
  border-color: var(--hs-teal);
}
.hs-tabs__panel {
  display: none;
  background: var(--hs-grey); border-radius: var(--hs-card-radius);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.hs-tabs__panel--active { display: block; }
.hs-tabs__panel h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem); color: var(--hs-navy);
  margin-bottom: var(--hs-space-xs); font-weight: 800;
}
.hs-tabs__updated {
  font-size: var(--hs-text-xs); color: var(--hs-text-muted);
  margin-bottom: var(--size-3); font-style: italic;
}
.hs-tabs__note {
  font-size: var(--hs-text-sm); color: var(--hs-teal);
  margin-top: var(--size-3); font-weight: 500;
}

/* --- Numbered steps --- */
.hs-step {
  display: flex; gap: var(--size-3); align-items: flex-start;
  margin-bottom: var(--size-3);
}
.hs-step__num {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%; background: var(--hs-accent);
  color: var(--hs-navy); font-size: var(--hs-text-sm); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 0.15rem;
}
.hs-step p {
  font-size: var(--hs-text-md); line-height: var(--hs-leading-tight);
  color: var(--hs-text); max-width: none; margin: 0; text-align: left;
}
.hs-step strong { color: var(--hs-navy); }

/* --- Download card (dark-section context) --- */
.hs-download {
  max-width: 480px; margin: var(--size-4) auto 0;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--hs-card-radius);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.hs-download__link {
  display: flex; align-items: center; gap: var(--size-3);
  padding: var(--size-3); background: rgba(255, 255, 255, 0.08);
  border-radius: var(--hs-radius); text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.2s;
}
.hs-download__link:hover {
  border-color: var(--hs-accent);
  background: rgba(255, 255, 255, 0.12);
}
.hs-download__icon { color: var(--hs-accent); flex-shrink: 0; }
.hs-download__info { text-align: left; }
.hs-download__info strong {
  display: block; color: var(--hs-white); font-size: var(--hs-text-md);
}
.hs-download__info span {
  font-size: var(--hs-text-xs); color: var(--hs-dark-text-muted);
  margin-top: 0.15rem; display: block;
}
.hs-download__hint {
  font-size: var(--hs-text-xs); color: var(--hs-dark-text-faint);
  margin-top: var(--size-3); text-align: center;
}

/* --- Utilities --- */
.hs-section--centered { text-align: center; }
.hs-hint--dark {
  font-size: var(--hs-text-xs); color: var(--hs-dark-text-faint);
  margin-top: var(--size-3);
}

/* --- Responsive --- */
@media (max-width: 480px) {
  .hs-tabs__panel { padding: var(--size-4); }
}