/* التصميم البصري للموقع الرئيسي. */

/* Hero */
.hero {
  padding-block: var(--space-8);
}

.hero-content {
  max-width: 52rem;
  gap: var(--space-5);
}

.hero-content h1 {
  max-width: 18ch;
}

.hero-content p {
  max-width: none;
  font-size: var(--font-size-lg);
}

.hero-actions {
  margin-block-start: var(--space-2);
}

.button-secondary {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-primary);
}

.button-secondary:hover {
  border-color: var(--color-primary);
  background: var(--color-surface);
  color: var(--color-primary-hover);
}

.content-card h3 {
  font-size: var(--font-size-xl);
}

@media (max-width: 48rem) {
  .hero {
    padding-block: var(--space-7);
  }
}

@media (max-width: 36rem) {
  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .button {
    width: 100%;
  }
}