/*
 * Weekly timetable grid.
 *
 * Loaded on: the "Weekly classes" page template
 * Enqueued by Stylchen\Frontend\Assets.
 *
 * Mirrors the previous site's FullCalendar timetable: flat grey filter tabs,
 * a white grid, and solid dark-red class blocks with centred one-line labels.
 */

.classes-page { padding-top: 62px; }
.classes-intro { margin-bottom: 30px; text-align: center; }
.classes-intro h2 { margin: 0 0 20px; color: #222; font-family: Lato, Arial, sans-serif; font-size: 1.875rem; font-weight: 700; }
.classes-intro h2 span, .classes-intro a { color: #c9043b; }
.classes-intro p { margin: 0; font-size: 1.0625rem; }
.weekly-filters { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 40px; }
.weekly-filters button { border: 0; border-radius: 0; padding: 7px 15px; background: #eee; color: #333; font-size: 0.875rem; font-weight: 600; }
.weekly-filters button:hover, .weekly-filters button:focus-visible { background: #ddd; color: #333; }
.weekly-filters button.is-active { background: #888; color: #fff; }
.weekly-navigation { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 4px; font-size: 0.875rem; }
.weekly-navigation a { color: #c9043b; }
.weekly-navigation a:last-child { text-align: right; }
.weekly-navigation strong { color: #555; font-size: 0.9375rem; font-weight: 600; }
/* One hour of grid. Text scales with the reader's font size, so the rows that
   hold it scale too, otherwise events clip. */
.weekly-calendar { --classes-hour-height: 3.1875rem; min-width: 53.75rem; border: 1px solid #ddd; background: #fff; font-family: Lato, Arial, sans-serif; }
.weekly-calendar__head { display: grid; grid-template-columns: 5.25rem repeat(5,minmax(0,1fr)); min-height: 3.875rem; border-bottom: 1px solid #ddd; background: #fff; }
.weekly-calendar__head > * { display: grid; place-items: center; border-left: 1px solid #ddd; color: #7f7f7f; font-size: 0.875rem; font-weight: 400; }
.weekly-calendar__head > :first-child { border-left: 0; }
.weekly-calendar__body { display: grid; grid-template-columns: 5.25rem minmax(0,1fr); }
.weekly-times { display: grid; grid-template-rows: repeat(var(--classes-hour-count,12),var(--classes-hour-height)); }
.weekly-times span { display: flex; align-items: center; justify-content: center; border-top: 1px solid #ddd; color: #7f7f7f; font-size: 0.75rem; white-space: nowrap; }
.weekly-times span:first-child { border-top: 0; }
.weekly-days { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); }
.weekly-day { position: relative; height: calc(var(--classes-hour-count,12) * var(--classes-hour-height)); border-left: 1px solid #ddd; background: repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--classes-hour-height) - 1px),#ddd calc(var(--classes-hour-height) - 1px),#ddd var(--classes-hour-height)); }
.weekly-event { position: absolute; z-index: 1; top: var(--event-top); left: var(--event-left); width: var(--event-width); height: var(--event-height); overflow: hidden; border: 1px solid #8e7e5a; padding: 4px 4px 0; background: #921706; color: #fff; font-size: 0.875rem; line-height: 1.1; text-align: center; }
/* Narrow overlapping blocks clip their label; on hover the block grows to fit it. */
.weekly-event:hover { z-index: 2; height: auto; min-height: var(--event-height); padding-bottom: 4px; }
.weekly-event[hidden] { display: none; }
.weekly-event strong, .weekly-event span, .weekly-event time { display: inline; font-weight: 400; }
.weekly-event--taijiindyw { border-color: #cad474; background: #8f8228; }
.weekly-event--qigong { border-color: #8a9352; background: #5e6c0e; }
.weekly-timetable { overflow-x: auto; padding-bottom: 4px; }
@media (max-width: 768px) {
  .weekly-calendar__head > * { font-size: 0.625rem; }
  .weekly-event { padding: 0; font-size: 0.75rem; }
}
@media (max-width: 560px) {
  /* style.css sets .section padding at this width; these views carry both
     classes, and the global sheet no longer comes last in the cascade. */
  .classes-page { padding: 48px 0; }
}