/* ═══════════════════════════════════════════════════════════
   CANONICAL SPEAKER CARD — Project Standard
   RULE: This is the ONE card design used everywhere.
   Source of truth: latam-home.php spk-card design
   ═══════════════════════════════════════════════════════════ */

.spk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.spk-card { position: relative; background: var(--dark-card); border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,0.04); transition: var(--transition); width: 100%; display: flex; flex-direction: column; }
.spk-card:hover { border-color: rgba(108,92,231,0.35); transform: translateY(-6px); box-shadow: 0 16px 48px rgba(108,92,231,0.18); }

.spk-card-img-wrap { position: relative; overflow: hidden; }
.spk-card-img { width: 100%; height: 300px; object-fit: cover; background: var(--dark-alt); transition: transform 0.5s ease; }
.spk-card:hover .spk-card-img { transform: scale(1.04); }
.spk-card-img-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(transparent, var(--dark-card)); pointer-events: none; }

.spk-card-badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; z-index: 2; }
.spk-card-badges-left { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.spk-card-badge-latam { padding: 0.3rem 0.75rem; background: linear-gradient(135deg, #6C5CE7, #a29bfe); color: white; font-size: 0.65rem; font-weight: 700; border-radius: 20px; letter-spacing: 0.04em; box-shadow: 0 4px 12px rgba(108,92,231,0.4); text-transform: uppercase; }
.spk-card-badge-mx { padding: 0.3rem 0.75rem; background: linear-gradient(135deg, #006847, #00a86b); color: white; font-size: 0.65rem; font-weight: 700; border-radius: 20px; letter-spacing: 0.04em; box-shadow: 0 4px 12px rgba(0,104,71,0.4); text-transform: uppercase; }
.spk-card-badge-verified { padding: 0.3rem 0.65rem; background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); color: #34d399; font-size: 0.65rem; font-weight: 700; border-radius: 20px; backdrop-filter: blur(8px); display: flex; align-items: center; gap: 0.3rem; }
.spk-card-langs { display: flex; gap: 0.25rem; }
.spk-card-lang { padding: 0.2rem 0.5rem; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); font-size: 0.6rem; font-weight: 700; border-radius: 4px; letter-spacing: 0.05em; text-transform: uppercase; }
.spk-card-avail { position: absolute; bottom: 16px; left: 16px; z-index: 2; display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; color: #34d399; font-weight: 600; }
.spk-card-avail::before { content: ''; width: 7px; height: 7px; background: #34d399; border-radius: 50%; box-shadow: 0 0 8px rgba(52,211,153,0.6); animation: availPulse 2s ease-in-out infinite; }
@keyframes availPulse { 0%,100% { box-shadow: 0 0 4px rgba(52,211,153,0.4); } 50% { box-shadow: 0 0 12px rgba(52,211,153,0.8); } }

.spk-card-play { position: absolute; bottom: 14px; right: 14px; z-index: 3; padding: 0.35rem 0.75rem 0.35rem 0.6rem; border-radius: 6px; background: rgba(0,0,0,0.55); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; gap: 0.3rem; cursor: pointer; transition: var(--transition); color: white; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em; }
.spk-card-play:hover { background: rgba(108,92,231,0.8); border-color: rgba(108,92,231,0.5); }
.spk-card-play svg { width: 12px; height: 12px; fill: white; flex-shrink: 0; }

.spk-card-body { padding: 1.25rem 1.25rem 0; flex: 1; display: flex; flex-direction: column; }
.spk-card-name { font-size: 1.15rem; font-weight: 800; color: var(--soft-white); margin-bottom: 0.3rem; letter-spacing: -0.01em; }
.spk-card-country { font-size: 0.72rem; color: var(--gray-tech); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.3rem; }
.spk-card-country svg { width: 12px; height: 12px; stroke: var(--violet); fill: none; stroke-width: 2; opacity: 0.7; }
.spk-card-tag { font-size: 0.8rem; color: var(--gray-tech); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; margin-bottom: 0.75rem; }

.spk-card-cats { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; }
.spk-card-cat { font-size: 0.65rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 20px; background: rgba(108,92,231,0.08); color: var(--violet); border: 1px solid rgba(108,92,231,0.15); white-space: nowrap; }

.spk-card-proof { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.spk-card-stat { font-size: 0.7rem; color: var(--gray-tech); display: flex; align-items: center; gap: 0.3rem; }
.spk-card-stat strong { color: var(--soft-white); font-weight: 700; }
.spk-card-stat svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.7; }

.spk-card-score-bar { height: 3px; border-radius: 3px; background: rgba(255,255,255,0.06); margin-bottom: 1rem; overflow: hidden; }
.spk-card-score-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }

.spk-card-ctas { padding: 0 1.25rem 1.25rem; display: flex; gap: 0.5rem; margin-top: auto; }
.spk-card-cta-main { flex: 1; padding: 0.65rem 0; background: var(--violet); color: white; border-radius: 8px; font-size: 0.78rem; font-weight: 700; text-align: center; transition: var(--transition); text-decoration: none; }
.spk-card-cta-main:hover { background: var(--violet-hover); }
.spk-card:hover .spk-card-cta-main { box-shadow: 0 4px 20px rgba(108,92,231,0.4); }
.spk-card-cta-sec { padding: 0.65rem 0.85rem; border: 1px solid rgba(255,255,255,0.1); color: var(--gray-tech); border-radius: 8px; font-size: 0.78rem; font-weight: 600; text-align: center; transition: var(--transition); text-decoration: none; }
.spk-card-cta-sec:hover { border-color: var(--violet); color: var(--violet); }

/* Video Modal */
.vid-modal { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.85); backdrop-filter: blur(12px); align-items: center; justify-content: center; padding: 2rem; }
.vid-modal.open { display: flex; animation: vidFadeIn 0.25s ease; }
@keyframes vidFadeIn { from { opacity: 0; } to { opacity: 1; } }
.vid-modal-inner { position: relative; width: 100%; max-width: 900px; aspect-ratio: 16/9; background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 80px rgba(108,92,231,0.25); }
.vid-modal-inner iframe, .vid-modal-inner video { width: 100%; height: 100%; border: none; }
.vid-modal-close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: white; font-size: 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.vid-modal-close:hover { background: rgba(239,68,68,0.3); border-color: rgba(239,68,68,0.5); }
.vid-modal-name { position: absolute; top: -48px; left: 0; color: var(--soft-white); font-size: 1rem; font-weight: 700; line-height: 40px; }

@media (max-width: 1024px) { .spk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .spk-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; } .vid-modal-inner { aspect-ratio: auto; height: 56vw; } .vid-modal-close { top: -44px; } .vid-modal-name { display: none; } }