/* Test theme: warmer, lighter public pages without changing the base layout. */
:root {
  --youth-purple: #532080;
  --youth-magenta: #9b35d8;
  --youth-blue: #246bfe;
  --youth-cyan: #2d95c9;
  --youth-green: #22a86b;
  --youth-mint: #e9fbf4;
  --youth-lavender: #f3eaff;
  --youth-sky: #edf7ff;
  --youth-warm: #fff7df;
}

.hero {
  --cms-overlay: linear-gradient(
    90deg,
    rgba(12, 27, 51, .58) 0%,
    rgba(12, 27, 51, .40) 54%,
    rgba(12, 27, 51, .20) 100%
  );
  min-height: 520px;
}

.hero .wrap {
  min-height: 520px;
  justify-content: center;
  text-align: center;
}

.hero-content {
  max-width: min(1280px, 100%);
  padding: 56px 0 112px;
  margin: 0 auto;
}

.hero h1 {
  white-space: nowrap;
  font-size: clamp(42px, 4.9vw, 76px);
}

.hero-copy {
  margin-left: auto;
  margin-right: auto;
}

.hero + .section {
  position: relative;
  z-index: 3;
  margin-top: -92px;
  padding-top: 0;
}

.hero + .section .section-head {
  max-width: 760px;
  margin-bottom: 28px;
  margin-left: auto;
  margin-right: auto;
  padding: 28px 30px 22px;
  border-radius: 26px 26px 0 0;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 -18px 40px rgba(20, 33, 61, .08);
  backdrop-filter: blur(10px);
  text-align: center;
  justify-content: center;
}

.hero + .section .section-copy {
  margin-left: auto;
  margin-right: auto;
}

.hero + .section .role-action-grid {
  margin-top: -2px;
}

.hero + .section .role-action-card {
  box-shadow: 0 22px 52px rgba(20, 33, 61, .13);
}

.role-hero {
  --cms-overlay: linear-gradient(
    105deg,
    rgba(83, 32, 128, .48) 0%,
    rgba(45, 149, 201, .30) 56%,
    rgba(34, 168, 107, .16) 100%
  );
}

.about-hero,
.contact-hero {
  --cms-overlay: linear-gradient(
    105deg,
    rgba(83, 32, 128, .46) 0%,
    rgba(36, 107, 254, .28) 58%,
    rgba(34, 168, 107, .14) 100%
  );
}

.hero-eyebrow,
.hero-pill,
.detail-pill {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .34);
}

.section.soft {
  background:
    radial-gradient(circle at 12% 18%, rgba(155, 53, 216, .12), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(34, 168, 107, .12), transparent 28%),
    linear-gradient(180deg, #fbfdff, #f6fbff);
}

.role-action-card {
  border-color: rgba(116, 45, 183, .18);
}

.role-action-card.student {
  --role-soft: var(--youth-mint);
}

.role-action-card.company {
  --role-soft: var(--youth-warm);
}

.role-action-card.school {
  --role-soft: var(--youth-sky);
}

.role-action-card .category-body {
  background:
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--role-color), #fff 78%), transparent 40%),
    linear-gradient(180deg, #fff, var(--role-soft));
}

.role-action-card:hover {
  border-color: color-mix(in srgb, var(--role-color), #fff 45%);
}

.latest-panel.resources-panel {
  --panel-soft: #eefbf5;
  background:
    radial-gradient(circle at 92% 4%, rgba(34, 168, 107, .15), transparent 36%),
    linear-gradient(180deg, #ffffff, #f4fff9 68%);
}

.latest-panel.events-panel {
  --panel-soft: #f3eaff;
  --panel-color: var(--youth-purple);
  background:
    radial-gradient(circle at 92% 4%, rgba(155, 53, 216, .15), transparent 36%),
    linear-gradient(180deg, #ffffff, #faf5ff 68%);
}

.role-flow,
.public-list-section,
.detail-section {
  background:
    radial-gradient(circle at 8% 8%, rgba(36, 107, 254, .08), transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(34, 168, 107, .08), transparent 28%),
    #fff;
}

.step-card,
.mini-form,
.public-content-card {
  border-color: #dce9f8;
}

.step-card:hover,
.public-content-card:hover {
  border-color: rgba(83, 32, 128, .28);
}

.step-no {
  background: linear-gradient(135deg, var(--youth-magenta), var(--youth-green));
}

.public-card-visual {
  background:
    linear-gradient(135deg, rgba(83, 32, 128, .70), rgba(34, 168, 107, .62)),
    url("media/article-resurse.jpg") center / cover;
}

.event-accent {
  background:
    linear-gradient(135deg, rgba(83, 32, 128, .46), rgba(36, 107, 254, .55), rgba(34, 168, 107, .36)),
    url("media/article-evenimente.jpg") center / cover;
}

.footer {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.13), transparent 34%),
    linear-gradient(135deg, #532080 0%, #44206d 52%, #2f1b55 100%);
}

.footer a:hover {
  color: #dfffe9;
}

.compliance {
  border-top-color: rgba(255,255,255,.22);
}

@media (max-width: 760px) {
  .hero,
  .hero .wrap {
    min-height: 560px;
  }

  .hero-content {
    padding: 42px 0 120px;
  }

  .hero h1 {
    white-space: normal;
    font-size: 38px;
  }

  .hero + .section {
    margin-top: -72px;
  }

  .hero + .section .section-head {
    padding: 22px 22px 18px;
    border-radius: 22px 22px 0 0;
  }
}