/* Shared styles for exercise pages */
.exercise-hero{ padding:2.5rem 0; }
.exercise-header{ text-align:center; margin-bottom:1.5rem; }
.exercise-title{ font-family:var(--second-font); font-size:clamp(1.6rem,4vw,2.4rem); color:var(--title-color); margin-bottom:.5rem; }
.exercise-sub{ color:var(--text-color); margin-bottom:1rem }
.exercise-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; align-items:start; }
.exercise-card{ display:block; border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); transition:transform .18s ease, box-shadow .18s ease; }
.exercise-card:hover{ transform:translateY(-6px); box-shadow:0 14px 36px rgba(0,0,0,0.45); }
.exercise-card--coming-soon{ cursor:default; }
.exercise-card--coming-soon:hover{ transform:none; box-shadow:none; }
.exercise-media{ width:100%; aspect-ratio:2/3; background:#0c141b; max-height:520px; }
.exercise-media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.exercise-body{ padding:1rem; }
.exercise-name{ color:var(--title-color); margin-bottom:.5rem }
.exercise-status{ display:inline-block; margin-bottom:.75rem; padding:.3rem .55rem; border:1px solid var(--first-color); border-radius:999px; color:var(--first-color-light); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.exercise-meta{ display:flex; gap:1rem; color:var(--text-color); font-size:.95rem; list-style:none; padding:0; margin:0 }
.exercise-meta li{ white-space:nowrap }

/* Small screens: single column */
@media screen and (max-width:900px){ .exercise-grid{ grid-template-columns:1fr; } }

/* Tablet and up: constrain image height and increase columns */
@media screen and (min-width:901px) and (max-width:1199px){
	.exercise-grid{ grid-template-columns:repeat(2,1fr); gap:1.25rem; }
	.exercise-media{ max-height:460px; }
}

/* Desktop: 3 columns */
@media screen and (min-width:1200px) and (max-width:1399px){
	.exercise-grid{ grid-template-columns:repeat(3,1fr); gap:1.5rem; }
	.exercise-media{ max-height:420px; }
}

/* Wide desktop: 4 columns */
@media screen and (min-width:1400px){
	.exercise-grid{ grid-template-columns:repeat(4,1fr); gap:1.75rem; }
	.exercise-media{ max-height:380px; }
}