/* ===== SCHEDULE PAGE ===== */
.schedule_page{ padding: 56px 18px; background:#fff; }
.schedule_head{ text-align:center; margin-bottom: 26px; }

.schedule_title{
  margin:0 0 8px;
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--text);
}

.schedule_sub{
  margin:0 auto;
  max-width: 700px;
  color: rgba(17,24,39,.72);
  font-weight: 650;
  line-height: 1.6;
}

.schedule_grid{
  max-width: 1100px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(340px, 420px) minmax(520px, 1fr);
  gap: 22px;
  align-items: start;
}

.schedule_card{
  background:#fff;
  border: 1px solid rgba(17,24,39,0.10);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 16px 40px rgba(17,24,39,0.06);
}

.schedule_cardTitle{
  margin:0;
  font-size: 16px;
  font-weight: 900;
  color: rgba(17,24,39,0.92);
}

.schedule_note{
  margin: 12px 0 0;
  font-size: 12.5px;
  color: rgba(17,24,39,.62);
  font-weight: 650;
}

.schedule_eventsTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pill_btn{
  border: 1px solid rgba(17,24,39,0.12);
  background: rgba(17,24,39,0.03);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  cursor:pointer;
  transition: background .18s ease, transform .18s ease;
}
.pill_btn:hover{
  background: rgba(17,24,39,0.06);
  transform: translateY(-1px);
}

/* ===== Calendar ===== */
.calendar_box{
  margin-top: 12px;
  border: 1px solid rgba(17,24,39,0.08);
  border-radius: 16px;
  padding: 12px;
  background: rgba(17,24,39,0.015);
}

.cal_top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.cal_month{
  font-weight: 900;
  color: rgba(17,24,39,0.86);
}

.cal_btn{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(17,24,39,0.12);
  background: #fff;
  font-weight: 900;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.cal_btn:hover{
  background: rgba(17,24,39,0.03);
  transform: translateY(-1px);
}

.cal_weekdays{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(17,24,39,0.55);
  text-align:center;
}

.cal_grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal_day{
  height: 38px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 800;
  color: rgba(17,24,39,0.75);
  background:#fff;
  border: 1px solid rgba(17,24,39,0.08);
  cursor: pointer;
  user-select:none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.cal_day:hover{ transform: translateY(-1px); }

.cal_day.is-muted{
  opacity: 0.35;
  cursor: default;
}

/* Upcoming events: brighter + clearer */
.cal_day.has-event{
  background: rgba(31, 58, 46, 0.18);
  border-color: rgba(31, 58, 46, 0.45);
  color: var(--green);
  font-weight: 900;
}

/* Selected event day */
.cal_day.is-selected{
  outline: 2px solid rgba(31,58,46,.35);
}

/* Today highlight: blue */
.cal_day.is-today{
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.45);
  color: #2563eb;
  font-weight: 900;
}

/* If today is ALSO an event day, make it pop */
.cal_day.is-today.has-event{
  background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(31,58,46,0.18));
  border-color: rgba(37,99,235,0.45);
}

/* ===== Events ===== */
.events_list{
  display:grid;
  gap: 12px;
}

.event_card{
  background:#fff;
  border: 1px solid rgba(17,24,39,0.10);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 16px 40px rgba(17,24,39,0.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.event_card:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 55px rgba(17,24,39,0.10);
}

.event_top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.event_date{
  font-weight: 900;
  font-size: 13px;
  color: rgba(17,24,39,0.82);
}

.event_tag{
  font-weight: 900;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--green);
  background: rgba(31,58,46,.08);
  border: 1px solid rgba(31,58,46,.18);
}

.event_title{
  margin: 10px 0 6px;
  font-size: 16px;
  font-weight: 900;
  color: rgba(17,24,39,0.92);
}

.event_meta{
  margin: 0 0 12px;
  color: rgba(17,24,39,.70);
  font-weight: 650;
  line-height: 1.5;
}

.event_actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Links/buttons */
.event_link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 900;
  text-decoration:none;
  font-size: 13.5px;
  border: 1px solid rgba(17,24,39,0.12);
  background: rgba(17,24,39,0.02);
  color: rgba(17,24,39,0.86);
  cursor:pointer;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.event_link:hover{
  background: rgba(17,24,39,0.05);
  transform: translateY(-1px);
}

.event_link--primary{
  background: var(--green);
  border-color: rgba(31,58,46,.25);
  color:#fff;
}
.event_link--primary:hover{
  background: var(--green-dark);
}

/* ===== Modal (Flyer) ===== */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2000;
}

.modal.is-open{ display:block; }

.modal_overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.55);
}

/* Modal card */
.modal_card{
  position: relative;
  width: min(860px, calc(100% - 28px));
  margin: 40px auto;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,0.35);
  padding: 14px;
}

/* Close button */
.modal_close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,0.12);
  background: #fff;
  font-weight: 900;
  cursor:pointer;
}

/* Flyer image: ALWAYS fits screen */
.modal_img{
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  display: block;
  margin: 28px auto 10px; /* keeps space from close button */
  object-fit: contain;
}

/* Responsive */
@media (max-width: 950px){
  .schedule_grid{ grid-template-columns: 1fr; }
}