/* =====================================================
CARDS
===================================================== */

.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
margin-top:14px;
}

.card{
background:var(--panel2);
border:1px solid rgba(255,255,255,.10);
border-radius:16px;
padding:18px;
box-shadow:0 12px 38px rgba(0,0,0,.32);
width:100%;
}

.cards a.card{
color:var(--text);
text-decoration:none;
}

.cards a.card:hover{
transform:translateY(-4px);
box-shadow:0 18px 60px rgba(0,0,0,.45);
}


/* =====================================================
PANELS
===================================================== */

.panel{
background:var(--panel);
border:1px solid rgba(255,255,255,.10);
border-radius:16px;
padding:18px;
box-shadow:0 14px 46px rgba(0,0,0,.35);
width:100%;
}


/* =====================================================
NOTICE BOX
===================================================== */

.notice-box{
background:rgba(214,179,92,.10);
border:1px solid rgba(214,179,92,.35);
border-radius:14px;
padding:18px 22px;
margin:18px 0 26px 0;
font-weight:500;
}


/* =====================================================
CLASS INFORMATION
===================================================== */

.class-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
margin-top:36px;
}

.class-card{
text-align:center;
}

.class-info{
display:flex;
flex-direction:column;
gap:6px;
margin:14px 0;
font-weight:700;
}

.class-day{
font-size:1.1rem;
}

.class-time{
color:var(--gold);
font-weight:800;
}

.class-term{
font-size:.95rem;
color:var(--muted);
margin-top:8px;
}


/* =====================================================
VIDEO EMBEDS
===================================================== */

.embed-wrap{
position:relative;
width:100%;
padding-top:56.25%;
border-radius:12px;
overflow:hidden;
margin-top:12px;
}

.embed-wrap iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}


/* =====================================================
RECAP RECORDINGS
===================================================== */

.recap-list{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:20px;
}

.recap-card{
background:var(--panel);
border:1px solid var(--line);
border-radius:16px;
padding:20px;
box-shadow:var(--shadow);
text-align:center;
transition:transform .25s ease, box-shadow .25s ease;
}

.recap-card:hover{
transform:translateY(-4px);
box-shadow:0 22px 60px rgba(0,0,0,.45);
}

.recap-card .btn{
margin-top:12px;
}