/* SISV v1 — course / event lists (vgp-courses, ls-courses, cea-cpd-course, event, division home pages).
   1) "Starting soon" highlight for classes today, tomorrow or within 7 days (classes set by v1-events.js).
   2) Larger trainer photos and a cleaner date strip on tablets and phones.
   Linked after the page's own CSS so it wins over the page copies. */
@property --ev-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ---------- soon chips ---------- */
.ev-chip.ev-chip-soon { color: #fff; border-color: transparent; background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 6px 14px -6px rgba(249, 115, 22, .75); }
.ev-chip.ev-chip-soon .fa { color: #fff; }
.ev-chip.ev-chip-soon.is-tomorrow { background: linear-gradient(135deg, #f97316, #ef4444); }
.ev-chip.ev-chip-soon.is-today,
.ev-chip.ev-chip-soon.is-live { background: linear-gradient(135deg, #ef4444, #b91c1c); animation: ev-throb 1.6s ease-in-out infinite; }
.ev-chip.ev-chip-soon .ev-dot { background: #fff; animation: ev-ping 1.4s infinite; }

/* ---------- soon cards: moving gradient border + corner flag ---------- */
.ev-card.is-soon {
    border: 2px solid transparent !important;
    background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--ev-angle), #fed7aa, #f97316, #ef4444, #f59e0b, #fde68a, #fed7aa) border-box !important;
    box-shadow: 0 18px 36px -22px rgba(239, 68, 68, .65) !important;
    animation: ev-spin 6s linear infinite;
}
.ev-card.is-soon.is-today,
.ev-card.is-soon.is-live { animation-duration: 2.8s; box-shadow: 0 0 0 4px rgba(239, 68, 68, .08), 0 18px 36px -20px rgba(239, 68, 68, .75) !important; }
.ev-card.is-soon::before { opacity: 1; background: linear-gradient(180deg, #ef4444, #f59e0b); }
.ev-flag {
    position: absolute; top: 0; right: 22px; z-index: 2;
    padding: 4px 12px 5px; border-radius: 0 0 10px 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
    color: #fff; background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 8px 16px -8px rgba(249, 115, 22, .9);
}
.ev-flag .fa { margin-right: 4px; }
.ev-card.is-tomorrow .ev-flag { background: linear-gradient(135deg, #f97316, #ef4444); }
.ev-card.is-today .ev-flag,
.ev-card.is-live .ev-flag { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.ev-card.is-live .ev-flag .fa { font-size: 8px; vertical-align: middle; animation: ev-blink 1.2s steps(2, start) infinite; }
.ev-card.is-soon .ev-when-strip { background: linear-gradient(135deg, #fff1ec, #fff4e0); border-color: #fdba74; }

/* ---------- division home lists (vg-item) ---------- */
.vg-item.is-soon > a { background: linear-gradient(90deg, #fff4ec, rgba(255, 255, 255, 0)); box-shadow: inset 3px 0 0 #f97316; }
.vg-item.is-soon .vg-date-m { background: linear-gradient(135deg, #f97316, #ef4444) !important; }
.vg-soon {
    display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: #fff; background: linear-gradient(135deg, #f59e0b, #f97316);
}
.vg-item.is-tomorrow .vg-soon { background: linear-gradient(135deg, #f97316, #ef4444); }
.vg-item.is-today .vg-soon, .vg-item.is-live .vg-soon { background: linear-gradient(135deg, #ef4444, #b91c1c); animation: ev-throb 1.6s ease-in-out infinite; }

@keyframes ev-spin { to { --ev-angle: 360deg; } }
@keyframes ev-throb { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); } 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } }
@keyframes ev-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); } 70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
@keyframes ev-blink { to { visibility: hidden; } }

/* ---------- tablets and phones ---------- */
@media (max-width: 991px) {
    .cc-trainers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; text-align: left; }
    .cc-trainers-label { flex-basis: 100%; margin: 0; }
    .cc-trainers-list { gap: 10px; justify-content: flex-start; }
    .cc-trainer { flex-direction: row; align-items: center; gap: 10px; width: auto; padding: 5px 16px 5px 5px; border-radius: 999px; background: var(--ed-soft, #f4f7fb); border: 1px solid var(--ed-line, #e6ebf2); }
    .cc-trainer-photo { width: 58px; height: 58px; border-radius: 50%; border-width: 2px; }
    .cc-trainer-name { font-size: 14px; }
    .ev-when-strip { display: inline-flex; max-width: 100%; text-align: left; }
    .ev-when-txt { text-align: left; }
}
@media (max-width: 600px) {
    .ev-when-strip { display: inline-flex !important; padding-right: 14px; }
    .cc-trainers-list { width: 100%; gap: 8px; }
    .cc-trainer { flex: 0 0 calc(50% - 4px); min-width: 0; gap: 8px; padding: 4px 10px 4px 4px; }   /* at least 2 trainers per row */
    .cc-trainer-photo { flex: 0 0 auto; width: 46px; height: 46px; }
    .cc-trainer-name { font-size: 12.5px; line-height: 1.25; overflow-wrap: anywhere; }
    .ev-flag { right: 14px; }
    .ev-card.is-soon .ev-body { padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .ev-card.is-soon, .ev-chip-soon, .vg-soon, .ev-flag .fa { animation: none !important; }
}