/**
 * panou.css — ecranul Vocal Lab, profudecanto.ro
 *
 * Doar ce lipsește din app.css. Statisticile, cardurile, pastilele și inelele
 * există deja acolo și nu se redefinesc aici — dacă ai nevoie de o componentă,
 * caut-o întâi în app.css.
 *
 * Zero coduri de culoare: totul din app-tokens.css.
 */

.vl-grila {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--app-sp-4);
  margin: 0 0 var(--app-sp-6);
}

.vl-card {
  display: flex;
  flex-direction: column;
  gap: var(--app-sp-2);
  text-decoration: none;
  color: var(--app-text-2);
  transition: border-color var(--app-tranzitie), transform var(--app-tranzitie);
}
.vl-card:hover {
  border-color: var(--app-accent);
  transform: translateY(-2px);
}
.vl-card h3 {
  margin: 0;
  font-size: var(--app-tf-mediu);
  font-weight: 600;
  color: var(--app-text);
  letter-spacing: -0.01em;
}
.vl-card p {
  margin: 0;
  font-size: var(--app-tf-mic-2);
  line-height: var(--app-ir-baza);
  color: var(--app-text-2);
}

/* Separarea e altceva decât instrumentele de măsură: lucrezi pe o piesă din
   afară, nu pe tine. Prinde toată lățimea și poartă gradientul pe muchie. */
.vl-card-mare {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  padding-left: calc(var(--app-sp-5) + 3px);
}
.vl-card-mare::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--app-grad);
}

/* Insignele de microfon. Culoarea nu e singurul semnal — textul spune același
   lucru, deci merge și pe un ecran citit în soare, și tipărit alb-negru. */
.vl-insigna {
  align-self: flex-start;
  padding: 2px var(--app-sp-2);
  border: 1px solid var(--app-linie-tare);
  border-radius: var(--app-raza-mic);
  font-size: var(--app-tf-mic);
  font-weight: 600;
  letter-spacing: var(--app-ls-mono);
  text-transform: uppercase;
  /* text-2, nu text-3: „fără microfon" e informație, iar text-3 cade la
     3,93:1 pe card (axe, 24.09). */
  color: var(--app-text-2);
  white-space: nowrap;
}
.vl-insigna-mic {
  border-color: var(--app-accent);
  color: var(--app-accent);
}

/* Subtitlul fiecărui verb: o propoziție, sub titlul de grup. */
.vl-sub {
  margin: calc(-1 * var(--app-sp-2)) 0 var(--app-sp-4);
  font-size: var(--app-tf-mic-2);
  line-height: var(--app-ir-baza);
  color: var(--app-text-2);
  max-width: 60ch;
}
/* Rândul „cu cont: Respirație" de pe cardul instrumentului — text, nu card:
   modulul cu scor e aceeași măsurătoare, salvată, nu un al doilea lucru. */
.vl-cont {
  margin-top: auto;
  padding-top: var(--app-sp-2);
  border-top: 1px solid var(--app-linie);
  font-size: var(--app-tf-mic);
  color: var(--app-accent);
}

/* Poarta pentru anonimi. Nu blochează nimic — spune doar ce câștigi dacă îți
   faci cont, iar instrumentele de dedesubt rămân la un click. */
.vl-poarta { margin-bottom: var(--app-sp-6); }
.vl-poarta p { margin: 0 0 var(--app-sp-3); line-height: var(--app-ir-baza); }
.vl-poarta p:last-child { margin: 0; }

.vl-text {
  margin-top: var(--app-sp-6);
  line-height: var(--app-ir-baza);
}
.vl-text p:last-child { margin-bottom: 0; }

@media (max-width: 520px) {
  .vl-grila { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .vl-card:hover { transform: none; }
}