/* Shared section and info-box styles */
.section__title{
  text-align:center;
  margin-bottom:.4rem;
  font-family: var(--second-font);
  font-weight:800;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  letter-spacing: 1px;
  color: var(--title-color);
  -webkit-text-stroke: .4px rgba(0,0,0,0.08);
}
.section__subtitle{
  text-align:center;
  font-weight:700;
  margin-bottom:1rem;
  color:var(--text-color);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
}
.section__data .button, .start-over { display:inline-flex; margin:0 auto; padding:.6rem .95rem; border-radius:10px; background: transparent; color:var(--title-color); border:2px solid rgba(255,255,255,0.04); font-weight:700; }
.section__data .button:hover, .start-over:hover{ transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.12); }

.info-box{ background: hsl(79, 72%, 55%); border-radius:14px; padding:1.25rem 1.5rem; display:block; margin:0.75rem auto 1.25rem auto; text-align:center; max-width: 820px; width: 100%; box-shadow: 0 12px 30px rgba(18,83,36,0.06); }
.info-box__title{ font-weight:900; color:#1a1a1a; font-family: var(--second-font); font-size:1.05rem; letter-spacing:.6px; }
.info-box__meta{ color:#333333; margin-top:6px; font-size: .98rem; }
.section__title--small { font-size:1.25rem; margin-top:2rem; margin-bottom:1.5rem; text-align:center; }

/* NEW GRID LAYOUT (Matches Gym Pages) */
.exercises-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.exercise-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none !important; /* Ensure no underlines */
    height: 100%;
}
.exercise-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); border-color: var(--first-color); }

.exercise-media { height: 250px; width: 100%; background: radial-gradient(circle at center, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.15) 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.exercise-media img { width: 100%; height: 100%; object-fit: contain; padding: 0; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.3s ease; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3)); z-index: 1; }
/* Hover effect: Smooth zoom and shadow lift */
.exercise-card:hover .exercise-media img { transform: scale(1.12); filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5)); }

.exercise-body { padding: 1.25rem; position: relative; background: transparent; border-top: 1px solid rgba(255,255,255,0.05); flex-grow: 1; }
.exercise-name { font-size: 1.1rem; font-weight: 700; color: var(--title-color); margin-bottom: 0.5rem; }
.exercise-meta { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; color: var(--text-color); font-size: 0.9rem; }
.exercise-meta li { display: flex; align-items: center; gap: 0.5rem; }
.exercise-meta i { color: var(--first-color); }