/* ======================================================
   GAME TRAINING CLUB
   PLANNING SYSTEM
   ====================================================== */


/* ======================================================
   HEADER
   ====================================================== */

.planning-header{
text-align:center;
margin-bottom:40px;
}

.planning-header h1{
font-family:var(--font-title);
font-size:clamp(2rem,4vw,3.2rem);
line-height:1.15;
margin-bottom:20px;
}

.planning-description{
max-width:900px;
margin:0 auto 16px;
color:var(--color-silver);
font-size:var(--text-base);
}


/* ======================================================
   FILTERS
   ====================================================== */

.filters{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin-bottom:24px;
}

.filter-btn{

padding:10px 20px;

border-radius:50px;

border:1px solid #333;

background:#111;

color:#cecece;

cursor:pointer;

font-size:.8rem;

font-weight:700;

text-transform:uppercase;

transition:var(--transition-fast);

}

.filter-btn:hover,
.filter-btn:focus-visible{

border-color:var(--color-gold);

color:var(--color-gold);

}

.filter-btn[aria-pressed="true"]{

background:var(--color-gold);

color:var(--color-black);

border-color:var(--color-gold);

}


/* ======================================================
   PLANNING GRID
   ====================================================== */

.planning-grid{

display:grid;

/* 7 jours desktop */

grid-template-columns:repeat(7,1fr);

gap:20px;

max-width:1400px;

margin:40px auto;

}


/* ======================================================
   DAY COLUMN
   ====================================================== */

.day-col{

background:rgba(255,255,255,.02);

border:1px solid rgba(255,255,255,.04);

border-radius:var(--radius-md);

padding:16px;

text-align:center;

display:flex;

flex-direction:column;

gap:10px;

}

.day-col h3{

font-family:var(--font-title);

font-size:1.1rem;

text-transform:uppercase;

color:var(--color-gold);

border-bottom:1px solid #333;

padding-bottom:10px;

margin-bottom:15px;

text-align:center;

}


/* ======================================================
   COURSE CARD
   ====================================================== */

.course{

background:#151515;

padding:12px;

border-radius:6px;

border-left:4px solid #444;

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

transition:
transform var(--transition-fast),
border-color var(--transition-fast),
background var(--transition-fast);

}

.course:hover{

transform:translateY(-2px);

background:#1a1a1a;

}

.course span,
.course-time{

font-size:.7rem;

color:#cecece;

font-weight:700;

}

.course strong,
.course-name{

font-size:.85rem;

text-transform:uppercase;

margin-top:2px;

}


/* ======================================================
   COURSE COLORS
   ====================================================== */

.course[data-type="cross"]{
border-left-color:#ff3b3b;
}

.course[data-type="hyrox"]{
border-left-color:var(--color-gold);
}

.course[data-type="combat"]{
border-left-color:#38c172;
}

.course[data-type="cardio"]{
border-left-color:#ff9f43;
}

.course[data-type="hiit"]{
border-left-color:#1f3a93;
}

.course[data-type="muscu"]{
border-left-color:#ff6fae;
}

.course[data-type="athx"]{
border-left-color:#6c5ce7;
}


/* ======================================================
   RESPONSIVE
   ====================================================== */


/* tablette */

@media (max-width:1200px){

.planning-grid{

grid-template-columns:repeat(4,1fr);

}

}


/* tablette verticale */

@media (max-width:900px){

.planning-grid{

grid-template-columns:repeat(2,1fr);

}

}


/* mobile */

@media (max-width:768px){

.planning-grid{

grid-template-columns:1fr;

max-width:500px;

margin:auto;

}

.day-col{

padding:20px;

}

}