/* Яркий текст в hero-блоке — все страницы курсов ТЕРАКОР */

:root {
  --hero-accent-bright: #ffc857;
}

.python-profession-page {
  --hero-accent-bright: #ffeaa7;
}

.devops-page {
  --hero-accent-bright: #5eead4;
}

.infosec-page {
  --hero-accent-bright: #fca5a5;
}

.php-course-page {
  --hero-accent-bright: #c8d0ff;
}

.php-course-page.laravel-page,
.microservices-page,
.javascript-page,
.react-page {
  --hero-accent-bright: #ffc857;
}

.react-page {
  --hero-accent-bright: #61dafb;
}

.node-page {
  --hero-accent-bright: #68d391;
}

.html-css-page {
  --hero-accent-bright: #ff9a76;
}

.wordpress-page {
  --hero-accent-bright: #72aee6;
}

.cpp-page {
  --hero-accent-bright: #7ec8e3;
}

.rust-page {
  --hero-accent-bright: #ffc896;
}

.hero-section .hero-description,
.hero-section .lead,
.hero-section .hero-content p.lead.hero-description {
  color: #fff !important;
  font-size: 1.2rem;
  line-height: 1.8;
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
}

.hero-section .hero-description.text-muted,
.hero-section .lead.text-muted,
.hero-section .hero-content p.text-muted {
  color: #fff !important;
}

.hero-section .hero-description .text-muted,
.hero-section .lead .text-muted,
.hero-section .hero-description .hero-tags,
.hero-section .lead .hero-tags {
  color: rgba(255, 255, 255, 0.94) !important;
  font-weight: 500;
}

.hero-section .hero-description strong,
.hero-section .lead > strong,
.hero-section .hero-description > strong,
.hero-section .hero-content p.hero-description strong {
  color: var(--hero-accent-bright) !important;
  font-weight: 800;
  text-shadow: 0 0 18px color-mix(in srgb, var(--hero-accent-bright) 45%, transparent);
}

.hero-section .hero-description strong.text-dark,
.hero-section .lead strong.text-dark {
  color: var(--hero-accent-bright) !important;
}

.hero-section .hero-description strong i,
.hero-section .lead strong i,
.hero-section .hero-tags i {
  color: var(--hero-accent-bright);
}

.hero-section .hero-intro {
  color: #fff;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 16px rgba(255, 255, 255, 0.22);
}

.hero-section .hero-intro strong {
  color: var(--hero-accent-bright) !important;
  font-weight: 800;
  text-shadow: 0 0 20px color-mix(in srgb, var(--hero-accent-bright) 50%, transparent);
}

.hero-section .hero-project,
.hero-section .hero-description > span[style*="color"],
.hero-section .lead > span[style*="color"] {
  color: #ffeaa7 !important;
  font-weight: 700;
  font-size: 1.12rem;
  display: inline-block;
  margin-top: 0.35rem;
  text-shadow: 0 1px 14px rgba(255, 234, 167, 0.4);
}

.hero-section .hero-project strong {
  color: #fff3b0 !important;
  text-shadow: 0 0 12px rgba(255, 243, 176, 0.35);
}

.hero-section .lead > span:not(.hero-tags):not(.hero-project):not(.hero-intro):not([class]) {
  color: rgba(255, 255, 255, 0.94);
}

@media (prefers-reduced-motion: reduce) {
  .hero-section .hero-description,
  .hero-section .lead {
    text-shadow: none;
  }

  .hero-section .hero-description strong,
  .hero-section .lead strong,
  .hero-section .hero-intro strong {
    text-shadow: none;
  }
}

.hero-section .hero-course-photo {
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
  border: 4px solid rgba(255, 255, 255, 0.35);
  animation: none;
}

.hero-course-photo-wrap {
  max-width: 520px;
  margin-inline: auto;
}

@media (min-width: 992px) {
  .hero-course-photo-wrap {
    margin-inline: auto 0;
  }
}