/* ============================================================
   EduJA - lesson videos (videos.html, the lesson box, the Home card)
   Sunshine tokens from css/style.css; see js/videos-data.js.
   ============================================================ */

/* Click-to-play player, 16:9 */
.ejv-player, .ejv-frame { display: block; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; border: 0; border-radius: 14px; background: var(--surface-sunk, #F1EAD3); }
.ejv-player { position: relative; padding: 0; cursor: pointer; overflow: hidden; }
.ejv-player img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ejv-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: var(--gold, #FFC81F); color: var(--ink, #14130F); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.ejv-play svg { margin-left: 4px; }
.ejv-player:hover .ejv-play, .ejv-player:focus-visible .ejv-play { transform: translate(-50%, -50%) scale(1.06); }
.ejv-player:focus-visible { outline: 3px solid var(--green, #00703A); outline-offset: 3px; }

/* Videos page */
.ejv-page { max-width: 1040px; margin: 0 auto; padding: 4px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); }
.ejv-head { display: grid; gap: 6px; margin: 4px 0 18px; }
.ejv-eyebrow { font-size: 0.75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--green, #00703A); margin: 0; }
.ejv-head h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 900; margin: 0; line-height: 1.15; text-wrap: balance; }
.ejv-lede { margin: 0; color: var(--ink-muted, #5A5648); max-width: 62ch; }
.ejv-filters { display: grid; gap: 10px; margin-bottom: 18px; }
.ejv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ejv-chip { font: inherit; font-weight: 800; font-size: 0.92rem; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--line, #EADFC0); background: var(--surface, #fff); color: var(--ink, #14130F); cursor: pointer; }
.ejv-chip[aria-pressed="true"] { background: var(--green, #00703A); border-color: var(--green, #00703A); color: #fff; }
.ejv-chip:focus-visible { outline: 3px solid var(--gold, #FFC81F); outline-offset: 2px; }
.ejv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ejv-card { background: var(--surface, #fff); border: 2px solid var(--line, #EADFC0); border-radius: 16px; box-shadow: 0 2px 0 var(--line, #EADFC0); padding: 12px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.ejv-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.8rem; font-weight: 800; }
.ejv-tag { background: var(--green-soft, #E3F2E8); color: var(--green-dark, #004F29); border-radius: 999px; padding: 3px 10px; }
.ejv-tag.muted { background: var(--surface-sunk, #F1EAD3); color: var(--ink-muted, #5A5648); }
.ejv-card h2 { font-size: 1.05rem; font-weight: 900; margin: 0; line-height: 1.3; }
.ejv-lesson-btn { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 12px; background: var(--gold, #FFC81F); color: var(--ink, #14130F) !important; font-weight: 900; text-decoration: none; }
.ejv-empty { background: var(--surface, #fff); border: 2px dashed var(--line, #EADFC0); border-radius: 16px; padding: 28px 22px; text-align: center; color: var(--ink-muted, #5A5648); }
.ejv-empty strong { display: block; color: var(--ink, #14130F); font-size: 1.1rem; margin-bottom: 6px; }
.ejv-sub { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--green-soft, #E3F2E8); border-radius: 14px; padding: 14px 16px; }
.ejv-sub p { margin: 0; flex: 1 1 240px; }
.ejv-sub a { font-weight: 900; }

/* Inside a lesson */
.ejv-lesson-box { margin: 14px 0; background: var(--green-soft, #E3F2E8); border-radius: 14px; padding: 12px; }
.ejv-lesson-box h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 900; color: var(--green-dark, #004F29); }
.ejv-lesson-box p { margin: 8px 0 0; font-size: 0.85rem; color: var(--ink-muted, #5A5648); }

/* Student Home card */
.sh-video h3 { margin: 4px 0 10px; font-size: 1.05rem; font-weight: 900; }