.calendar-component {
    margin: 2rem 0;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.calendar-nav { /* button sizing */ }
.calendar-title { /* month name styling */ }

.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.weekday { font-weight: bold; text-align: center; }

.day-cell {
  border: 1px solid #ddd;
  min-height: 80px;
  padding: .5rem;
  position: relative;
  /* …etc… */
}

/* grey text for past days */
.day-cell.past .day-label,
.day-cell.past .hours-range {
  color: #999;
}

/* grey text for all closed days */
.day-cell.closed .day-label,
.day-cell.closed .hours-range {
  color: #bbb;
}

/* highlight today with a blue border */
.day-cell.today {
  border: 2px solid #2199e8;
  background: #f0f8ff;
}

/* ensure the border doesn't shift layout too much */
.day-cell {
  box-sizing: border-box;
}

/* optional: closed days background a little lighter */
.day-cell.closed {
  background: #f9f9f9;
}

.calendar-weekdays .weekday {
  background-color: #850544;
  color: #fff;
  text-align: center;
}

/* Add a white right border on every .weekday except the last */
.calendar-weekdays .weekday:not(:last-child) {
  border-right: 1px solid #fff;
}

/* 1) Base grid (desktop+) stays the same */
/* .calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7,1fr); } */

/* 2) Mobile: switch to flex so both header & days share the same flex rules */
@media (max-width: 640px) {
  .calendar-weekdays,
  .calendar-days {
    display: flex;
    flex-wrap: wrap;         /* days need to wrap onto new rows */
    margin: 0;               /* remove any grid gaps/margins */
    padding: 0;
  }

  .calendar-weekdays .weekday,
  .calendar-days .day-cell {
    /* 
      1fr of 7 columns = 100%/7 each
      flex: 0 0 calc(100%/7) locks each at exactly that width 
    */
    flex: 0 0 calc(100% / 7);
    max-width: calc(100% / 7);
    box-sizing: border-box;

    /* tweak padding/font to be tighter like iOS */
    padding: 0.25rem 0.125rem;
    font-size: 0.75rem;
    text-align: center;
  }

  /* tighten up the header title/nav */
  .calendar-header {
    padding: 0.5rem;
  }
  .calendar-title h4 {
    font-size: 1rem;
    margin: 0;
  }
  .calendar-nav {
    padding: 0.25rem 0.5rem;
  }
  
  .hours-range {
    font-size: .6rem;
}

.day-cell.today {
    background: #fff;
    border: 1px solid #ddd;
}

.day-cell.today .day-label {
    display: inline-flex;               /* or inline-block + text-align */
    justify-content: center;            /* horizontally center number */
    align-items: center;                /* vertically center number */
    width: 1.5rem;                      /* pick whatever diameter you want */
    aspect-ratio: 1 / 1;                /* force height == width */
    border-radius: 50%;                 /* now it really is a circle */
    background-color: #888;             /* your chosen color */
    color: #fff;                        /* text color */
    font-size: 0.75rem;                 /* scale down for mobile if needed */
    margin: 0 auto 0.25rem;             /* center & give a little breathing room */
  }

}