/**
 * YourBestDev — Reseñas de Trustpilot (marquee vertical).
 * Componente reutilizable en varias páginas. Se enqueja globalmente desde
 * inc/yourbestdev-reviews.php.
 */

/* Cifras ------------------------------------------------------------------- */
.ybd-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 820px;
    margin: 0 auto 40px;
}
.ybd-stat {
    text-align: center;
    background: rgba(18, 27, 47, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px 12px;
}
.ybd-stat strong { display: block; font-size: 1.75rem; font-weight: 800; color: #fff; line-height: 1; }
.ybd-stat span { display: block; margin-top: 6px; font-size: 0.8rem; color: #94a3b8; }

/* Marquee vertical --------------------------------------------------------- */
.ybd-marquee {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    height: 720px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ybd-marquee-col { display: flex; flex-direction: column; will-change: transform; }
.ybd-marquee-set { display: flex; flex-direction: column; gap: 20px; padding-bottom: 20px; }
.ybd-marquee-up   { animation: ybdMarqueeUp var(--dur, 45s) linear infinite; }
.ybd-marquee-down { animation: ybdMarqueeDown var(--dur, 45s) linear infinite; }
.ybd-marquee.is-offscreen .ybd-marquee-col,
.ybd-marquee:hover .ybd-marquee-col,
.ybd-marquee:focus-within .ybd-marquee-col { animation-play-state: paused; }
@keyframes ybdMarqueeUp   { from { transform: translateY(0); }     to { transform: translateY(-50%); } }
@keyframes ybdMarqueeDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* Tarjeta de reseña -------------------------------------------------------- */
.ybd-review {
    background: rgba(18, 27, 47, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 20px;
}
.ybd-review-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ybd-review-stars { color: #00B67A; font-size: 14px; letter-spacing: 2px; }
.ybd-review-stars .far { color: #475569; }
.ybd-review-verified { font-size: 0.7rem; color: #86EFAC; display: inline-flex; align-items: center; gap: 5px; }
.ybd-review-title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 8px; line-height: 1.35; }
.ybd-review-text { font-size: 0.88rem; color: #cbd5e1; line-height: 1.6; }
.ybd-review-meta { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.ybd-review-author { display: block; font-size: 0.85rem; font-weight: 600; color: #e2e8f0; }
.ybd-review-sub { display: block; font-size: 0.75rem; color: #64748b; margin-top: 2px; }

@media (max-width: 1023px) {
    .ybd-marquee { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 620px; }
    .ybd-marquee-col:nth-child(3) { display: none; }
}
@media (max-width: 640px) {
    .ybd-marquee { grid-template-columns: 1fr; height: 560px; }
    .ybd-marquee-col:nth-child(2),
    .ybd-marquee-col:nth-child(3) { display: none; }
    .ybd-stats { grid-template-columns: 1fr; gap: 12px; }
    .ybd-stat { padding: 16px 12px; }
}

/* Movimiento reducido: sin marquee, todas las reseñas en columnas estáticas. */
@media (prefers-reduced-motion: reduce) {
    .ybd-marquee {
        display: block;
        height: auto;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .ybd-marquee-col { display: contents !important; animation: none !important; }
    .ybd-marquee-set { display: contents; }
    .ybd-review-dup { display: none; }
    .ybd-review { break-inside: avoid; margin-bottom: 20px; }
    @media (min-width: 1024px) { .ybd-marquee { columns: 3; column-gap: 20px; } }
    @media (min-width: 641px) and (max-width: 1023px) { .ybd-marquee { columns: 2; column-gap: 20px; } }
}

/* Título de sección (compartido por la landing y el componente) ------------ */
.ybd-section-title {
    font-size: 1.875rem;
    line-height: 1.2;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.75rem;
}
@media (min-width: 1024px) {
    .ybd-section-title { font-size: 2.25rem; }
}