/* Video tutorial (pagina dedicata e fascia in Home): griglia delle schede e copertina con player caricato al clic.
   Le variabili --public-* arrivano da public-pages.css; i valori di riserva servono nella Home, che non lo carica. */

.vt-language-note {
   margin-top: 14px !important;
   font-size: 15px !important;
}

.vt-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 28px;
   margin-top: 42px;
}

.vt-grid-wide {
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vt-card {
   display: flex;
   flex-direction: column;
   min-width: 0;
   overflow: hidden;
   border: 1px solid var(--public-line, #e1e6f0);
   border-radius: 9px;
   background: #fff;
   transition: border-color .2s ease, box-shadow .2s ease;
}

.vt-card:hover {
   border-color: #c8b0dd;
   box-shadow: 0 18px 45px rgba(12, 21, 48, .08);
}

.vt-player {
   position: relative;
   display: block;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   background: #07112f;
}

.vt-player img,
.vt-player iframe {
   display: block;
   width: 100%;
   height: 100%;
   border: 0;
   object-fit: cover;
}

.vt-play {
   position: absolute;
   top: 50%;
   left: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 64px;
   height: 64px;
   border-radius: 50%;
   color: #fff;
   background: linear-gradient(135deg, var(--public-purple, #7417cb), var(--public-pink, #ef19bd));
   box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
   font-size: 22px;
   transform: translate(-50%, -50%);
   transition: transform .2s ease;
}

.vt-play i {
   margin-left: 4px;
}

.vt-player:hover .vt-play,
.vt-player:focus-visible .vt-play {
   transform: translate(-50%, -50%) scale(1.08);
}

.vt-player:focus-visible {
   outline: 3px solid var(--public-pink, #ef19bd);
   outline-offset: -3px;
}

.vt-card-body {
   display: flex;
   flex: 1;
   flex-direction: column;
   padding: 22px 24px 24px;
}

.vt-card-body h3 {
   margin-bottom: 10px;
   color: var(--public-ink, #07112f);
   font-size: 19px;
   line-height: 1.35;
}

.vt-card-body p {
   flex: 1;
   margin-bottom: 16px;
   color: var(--public-muted, #5c6375);
   font-size: 15px;
   line-height: 1.6;
}

.vt-link {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   color: var(--public-purple, #7417cb);
   font-size: 14px;
   font-weight: 800;
}

.vt-link:hover {
   color: var(--public-pink, #ef19bd);
}

.vt-section-link {
   margin-top: 28px;
}

.vt-home-actions {
   margin-top: 32px;
}

@media (max-width: 991px) {
   .vt-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
   }
}

@media (max-width: 575px) {
   .vt-grid,
   .vt-grid-wide {
      grid-template-columns: minmax(0, 1fr);
   }
}

@media (prefers-reduced-motion: reduce) {
   .vt-card,
   .vt-play {
      transition: none;
   }
}