/* AutoSchools V2.0.9 — approved Guest + Account Hero completion.
   Uses the user-approved neon driving-school/account scenes as full-card art,
   keeps live KPI/action content in the DOM, and preserves legibility at 320–570px. */

.role-hero--guest,
.role-hero--account {
  min-height: 0;
  padding-top: 21px;
  background:
    radial-gradient(circle at 77% 31%, rgba(15,123,255,.24), transparent 20rem),
    radial-gradient(circle at 48% 84%, rgba(0,92,255,.12), transparent 18rem),
    linear-gradient(148deg, rgba(8,28,61,.99), rgba(2,10,26,.985));
}

/* Make these two entry states self-explanatory rather than visually empty. */
.role-hero--guest .role-subtitle,
.role-hero--account .role-subtitle {
  display:block !important;
  margin: 16px 0 0;
  max-width: 260px;
  color: rgba(205,219,242,.78);
  font-size: 12.5px;
  line-height: 1.46;
  letter-spacing: -.06px;
  text-shadow: 0 2px 14px rgba(0,0,0,.44);
}
.role-hero--guest .role-hero-top,
.role-hero--account .role-hero-top { min-height: 264px; }
.role-hero--guest .role-hero-copy,
.role-hero--account .role-hero-copy { max-width: 300px; }

/* Approved guest discovery artwork: school + map marker + instructor car + PDR. */
.role-hero--guest {
  --hero-art-width: 83%;
  --hero-art-right: -7%;
  --hero-art-y: 158px;
  --hero-art-scale: 1.05;
  --hero-copy-width: 57%;
}
/* Approved account artwork: digital identity + driving school + instructor + security. */
.role-hero--account {
  --hero-art-width: 84%;
  --hero-art-right: -7%;
  --hero-art-y: 157px;
  --hero-art-scale: 1.04;
  --hero-copy-width: 58%;
}

.role-hero--guest::after,
.role-hero--account::after {
  background:
    linear-gradient(90deg, rgba(2,11,27,.97) 0%, rgba(2,11,27,.94) 28%, rgba(2,12,29,.72) 46%, rgba(2,12,29,.20) 68%, transparent 90%),
    linear-gradient(180deg, transparent 48%, rgba(2,10,25,.26) 68%, rgba(2,10,25,.80) 100%);
}

.approved-role-art--guest img,
.approved-role-art--account img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 7%, rgba(0,0,0,.62) 24%, #000 39%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 7%, rgba(0,0,0,.62) 24%, #000 39%, #000 100%);
  filter: drop-shadow(0 24px 40px rgba(0,72,200,.58)) saturate(1.12) contrast(1.045);
}
.role-hero--guest .approved-art-halo { width:70%; right:-4%; top:48px; opacity:.82; }
.role-hero--account .approved-art-halo { width:69%; right:-4%; top:48px; opacity:.80; }
.role-hero--guest .approved-art-grid,
.role-hero--account .approved-art-grid { opacity:.46; }

/* "Бесплатно" must remain a readable KPI, not truncate to an ambiguous number. */
.role-hero--guest .role-metric:nth-child(3) .role-metric-copy strong {
  font-size: clamp(15px, 4vw, 18px);
  letter-spacing: -.42px;
}

@media (max-width:430px) {
  .role-hero--guest .role-hero-top,
  .role-hero--account .role-hero-top { min-height: 250px; }
  .role-hero--guest { --hero-art-width: 90%; --hero-art-right:-15%; --hero-art-y:146px; --hero-copy-width:62%; }
  .role-hero--account { --hero-art-width: 90%; --hero-art-right:-14%; --hero-art-y:145px; --hero-copy-width:64%; }
  .role-hero--guest .role-subtitle,
  .role-hero--account .role-subtitle { max-width: 225px; font-size:11.8px; line-height:1.42; }
}

@media (max-width:390px) {
  .role-hero--guest .role-hero-top,
  .role-hero--account .role-hero-top { min-height: 238px; }
  .role-hero--guest { --hero-art-width: 94%; --hero-art-right:-20%; --hero-art-y:139px; --hero-copy-width:66%; }
  .role-hero--account { --hero-art-width: 94%; --hero-art-right:-19%; --hero-art-y:138px; --hero-copy-width:68%; }
  .role-hero--guest h2 { font-size:26px; }
  .role-hero--account h2 { font-size:24px; }
  .role-hero--guest .role-subtitle,
  .role-hero--account .role-subtitle { max-width: 205px; font-size:11px; }
}

@media (max-width:350px) {
  .role-hero--guest .role-hero-top,
  .role-hero--account .role-hero-top { min-height: 224px; }
  .role-hero--guest { --hero-art-width: 99%; --hero-art-right:-25%; --hero-art-y:132px; }
  .role-hero--account { --hero-art-width: 99%; --hero-art-right:-24%; --hero-art-y:132px; }
  .role-hero--guest .role-hero-copy { width:72%; }
  .role-hero--account .role-hero-copy { width:74%; }
  .role-hero--guest h2 { font-size:23px; }
  .role-hero--account h2 { font-size:21px; }
  .role-hero--guest .role-subtitle,
  .role-hero--account .role-subtitle { max-width: 185px; font-size:10.3px; line-height:1.38; }
  .role-hero--guest .role-metric:nth-child(3) .role-metric-copy strong { font-size:13px; }
}

.no-motion .approved-role-art--guest img,
.no-motion .approved-role-art--account img { animation:none!important; transition:none!important; }
@media (prefers-reduced-motion:reduce) {
  .approved-role-art--guest img,
  .approved-role-art--account img { animation:none!important; transition:none!important; }
}