/* A compact Eastern Time meeting-request calendar, shared across screen sizes. */
.coffee { --calendar-gap: 28px; padding-top: var(--calendar-gap); padding-bottom: 16px; height: auto; min-height: 0; overflow: visible; justify-content: flex-start; }
.coffee .coffee-intro { margin-bottom: var(--calendar-gap); }
.coffee .scheduler { width: 100%; }
.coffee .calendar-zone { font-size: 12px; line-height: 1.6; margin: 20px 0 0; color: #555747; }
.coffee .calendar-and-times { grid-template-columns: 1fr; gap: 24px; }
.coffee .calendar { width: 100%; max-width: 560px; margin: 0 auto; }
.coffee .days button { font-size: clamp(15px, 1.6vw, 22px); max-height: 62px; }
.coffee .weekdays { font-size: 12px; }
.coffee .times-panel { min-width: 0; }
.coffee #times { grid-template-columns: repeat(4,minmax(0,1fr)); max-height: 210px; overflow-y: auto; padding: 3px; }
.coffee #times button { padding: 12px 3px; min-height: 44px; }
.coffee .selection-bar { margin-top: 24px; padding-top: 18px; }
.coffee #request-error { color: #9c382c; font-size: 13px; }
.coffee + footer { padding-top: 16px; }
@media (min-width: 1100px) {
 .coffee .calendar-and-times.has-date { grid-template-columns: 1.2fr 1fr; }
 .coffee #times { grid-template-columns: repeat(3,minmax(0,1fr)); max-height: 330px; }
}
@media (max-width: 640px) {
 .coffee { --calendar-gap: 24px; }
 .coffee .calendar-zone { margin-top: 18px; }
 .coffee #times { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .coffee .days button { font-size: 17px; }
}
@media (min-width: 641px) and (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
 .coffee { --calendar-gap: 24px; }
 .coffee .coffee-intro { width: min(760px,100%); }
 .coffee .scheduler { grid-template-columns: 32% 68%; }
 .coffee .meeting-info { display: block; padding: 22px 18px; }
 .coffee .scheduler .coffee-heading h2 { font-size: 38px; }
 .coffee .meeting-info h3 { font-size: 22px; margin-bottom: 22px; }
 .coffee .booking-main { padding: 22px; }
 .coffee .days { gap: 6px; }
 .coffee .days button { font-size: 20px; max-height: 60px; }
}
/* The cream panel must fully cover the preceding pinned page at every size. */
.coffee { min-height: 100svh; }
@media (min-width: 1500px) {
 .coffee { padding-left: 4%; padding-right: 4%; }
 .coffee .scheduler { grid-template-columns: 27% 73%; }
 .coffee .calendar { max-width: none; }
 .coffee .days { gap: 10px; }
 .coffee .days button { aspect-ratio: auto; min-height: 58px; height: clamp(58px, 4.5vw, 96px); max-height: 96px; border-radius: 8px; font-size: clamp(22px, 1.5vw, 34px); }
 .coffee .calendar-and-times.has-date { grid-template-columns: 1.5fr 1fr; }
 .coffee #times { max-height: 470px; }
}
/* Center the introduction and calendar together within the full cream screen. */
@media (orientation: landscape) {
 .coffee { display: flex; flex-direction: column; justify-content: center; padding-bottom: var(--calendar-gap); }
 .coffee .coffee-intro, .coffee .scheduler { flex-shrink: 0; }
}