/*
 * Karty se záznamy z Agent Lab setkání.
 * Sdílené mezi /komunita (ukázka nejnovějších) a /archiv (všechny).
 * Renderuje js/meetups.js z data/meetups.json.
 */
/* ─── Záznamy z minulých setkání ────────── */
.rec-section { padding: 96px 0; background: linear-gradient(180deg, #fff 0%, #f8f6ff 100%); }
.rec-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; margin-bottom: 36px;
}
.rec-head-text { flex: 1; min-width: 260px; }
.rec-all-link {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    padding: 12px 22px; border-radius: 12px; font-size: 0.92rem; font-weight: 700;
    color: #1c1c30; background: #fff; border: 1px solid rgba(28,28,48,0.12);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.rec-all-link:hover {
    transform: translateY(-2px); border-color: rgba(168,85,247,0.45);
    box-shadow: 0 8px 24px rgba(28,28,48,0.08);
}
.rec-grid {
    display: grid; gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.rec-card {
    display: flex; flex-direction: column; background: #fff; border-radius: 16px;
    overflow: hidden; border: 1px solid rgba(28,28,48,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}
.rec-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(28,28,48,0.12); }
.rec-card-thumb { position: relative; display: block; background: #1c1c30; aspect-ratio: 16 / 9; }
.rec-card-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.rec-card-play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.rec-card-play svg {
    width: 54px; height: 54px; fill: #fff; border-radius: 50%;
    background: rgba(231,58,29,0.92); padding: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3); transition: transform 0.2s, background 0.2s;
}
.rec-card:hover .rec-card-play svg { transform: scale(1.08); background: #e73a1d; }
.rec-card-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.rec-card-speaker {
    display: flex; align-items: center; gap: 10px;
    font-size: 1rem; font-weight: 800; color: #1c1c30;
}
.rec-card-photo {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 2px solid rgba(168,85,247,0.3);
}
.rec-card-topic { font-size: 0.88rem; color: #555; line-height: 1.5; }
.rec-card-ep {
    align-self: flex-start; margin-top: 4px; padding: 3px 10px; border-radius: 999px;
    background: rgba(168,85,247,0.12); color: #7c3aed;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em;
}
@media (max-width: 640px) {
    .rec-section { padding: 64px 0; }
    .rec-grid { grid-template-columns: 1fr; }
    .rec-all-link { width: 100%; justify-content: center; }
}