/* ============================================================
   Shorts cu testimoniale — banda de sub sectiunea de testimoniale
   ============================================================
   Aceeasi mecanica de marquee ca banda de medici: refoloseste
   .tm__wrap / .tm__row / .tm__track / .tm__pause, deci viteza
   constanta, fixul de Safari (--tm-shift in pixeli), pauza WCAG,
   opritul in afara ecranului si incarcarea eager a pozelor vin
   din main.js fara nicio linie noua acolo. Aici sunt doar cardul
   vertical 9/16 si player-ul inline.
   Incarcat DOAR de homepage (css/tsh.css?v=1 in index.html). */

/* sectiunea = acelasi card alb ca .tst */
.tsh {
  /* acelasi gol ca intre toate cardurile stivuite; celelalte sectiuni il au
     dintr-o regula comuna care insira clasele lor, .tsh nu e in ea */
  margin-top: var(--card-gap);
  width: var(--shell);
  margin-inline: auto;
  background: #fff;
  border: 1px solid rgba(16, 24, 32, .06);
  border-radius: clamp(22px, 2vw, 34px);
  box-shadow: var(--card-shadow);
  padding: var(--card-inset) var(--card-inset) var(--card-inset-jos);
  color: var(--ink);
  overflow: hidden;
}
.tsh > .container { width: 100%; }

/* cardul vertical de short */
.shcard {
  position: relative;
  flex: none;
  width: clamp(172px, 16.5vw, 236px);
  aspect-ratio: 9 / 16;
  border-radius: clamp(14px, 1.2vw, 18px);
  overflow: hidden;
  background: var(--night-2);
  box-shadow: var(--card-shadow);
}
.shcard > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* scrimul de jos, ca numele sa stea pe fotografie fara sa dispara */
.shcard::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(10, 12, 14, 0), rgba(10, 12, 14, .78));
  pointer-events: none;
}
.shcard__cap {
  position: absolute;
  left: .9rem; right: .9rem; bottom: .8rem;
  z-index: 1;
  color: #fff;
  display: grid;
  gap: .1rem;
  pointer-events: none;
}
.shcard__cap b { font-size: .98rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.shcard__cap span { font-size: .8rem; color: rgba(255, 255, 255, .75); }

/* butonul de redare: aceeasi bula verde ca pe cardurile de testimonial */
.shcard__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px; height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 1;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.shcard__play svg { width: 22px; height: 22px; margin-left: 3px; }
@media (hover: hover) and (pointer: fine) {
  .shcard__play:hover { transform: scale(1.08); background: var(--blue); }
}
.shcard__play:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* starea de redare: iframe-ul acopera cardul, x-ul apare sus */
.shcard iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2;
  background: #000;
}
.shcard__close {
  position: absolute;
  top: .55rem; right: .55rem;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 12, 14, .78);
  color: #fff;
  display: none;
  place-items: center;
  cursor: pointer;
  z-index: 3;
}
.shcard__close svg { width: 16px; height: 16px; }
.shcard.is-playing .shcard__close { display: grid; }
.shcard.is-playing .shcard__play,
.shcard.is-playing .shcard__cap { display: none; }
.shcard.is-playing::after { display: none; }

/* cat timp ruleaza un clip, banda sta pe loc (JS pune .is-held pe wrap) */
.tm__wrap.is-held .tm__track { animation-play-state: paused; }