/* Calendar page sizing only. Other pages intentionally remain unchanged. */

@media (min-width: 901px) {
    .calendar-page {
        height: calc(100dvh - 78px);
        min-height: 500px;
        padding: clamp(16px, 2.5vh, 28px) 7vw calc(30px + 1cm);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        overflow: hidden;
    }

    .calendar-page .page-heading {
        margin-bottom: clamp(12px, 1.8vh, 20px);
    }

    .calendar-page .page-heading h1 {
        font-size: clamp(34px, 2.5vw, 46px);
    }

    .calendar-page .calendar-overview {
        min-height: 0;
        height: 100%;
        grid-template-columns: minmax(220px, .68fr) minmax(0, 3.32fr);
        gap: clamp(12px, 1.25vw, 20px);
        align-items: stretch;
    }

    .calendar-page .room-statuses,
    .calendar-page .calendar-months {
        min-height: 0;
        height: 100%;
    }

    .calendar-page .room-statuses {
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: clamp(9px, 1.1vh, 14px);
    }

    .calendar-page .room-statuses article {
        min-height: 0;
        height: 100%;
        padding: clamp(14px, 1.5vw, 22px);
        grid-template-columns: 1fr;
        align-content: center;
        justify-items: start;
        gap: clamp(7px, .9vh, 11px);
    }

    .calendar-page .room-statuses article > span {
        grid-column: 1;
        font-size: clamp(13px, 1vw, 17px);
    }

    .calendar-page .room-statuses strong {
        font-size: clamp(8px, .62vw, 10px);
    }

    .calendar-page .room-statuses small {
        grid-column: 1;
        justify-self: start;
        width: 100%;
        text-align: left;
        white-space: normal;
        line-height: 1.4;
        font-size: clamp(7px, .56vw, 9px);
    }

    .calendar-page .room-statuses .meeting-count b {
        font-size: clamp(24px, 2vw, 34px);
    }

    .calendar-page .calendar-months {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(12px, 1.25vw, 20px);
    }

    .calendar-page .month-card {
        min-height: 0;
        height: 100%;
        padding: clamp(14px, 1.2vw, 21px);
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
    }

    .calendar-page .month-title {
        padding-bottom: clamp(9px, 1.1vh, 14px);
    }

    .calendar-page .month-title h3 {
        font-size: clamp(22px, 1.65vw, 29px);
    }

    .calendar-page .weekday-row {
        padding: clamp(8px, 1vh, 13px) 0 clamp(5px, .7vh, 9px);
    }

    .calendar-page .calendar-grid {
        min-height: 0;
        height: 100%;
        grid-auto-rows: minmax(0, 1fr);
        gap: clamp(4px, .42vw, 7px);
    }

    .calendar-page .calendar-grid button,
    .calendar-page .calendar-blank {
        min-height: 0;
        height: auto;
    }

    .calendar-page .calendar-grid button {
        padding: clamp(5px, .5vw, 8px);
    }

    .calendar-page .calendar-grid button b {
        font-size: clamp(16px, 1.25vw, 22px);
    }

    .calendar-page .calendar-grid button em {
        font-size: clamp(7px, .5vw, 9px);
    }
}

@media (min-width: 901px) and (max-height: 700px) {
    .calendar-page {
        padding-top: 12px;
        padding-bottom: calc(24px + 1cm);
    }

    .calendar-page .page-heading {
        margin-bottom: 9px;
    }

    .calendar-page .page-heading h1 {
        font-size: 32px;
    }

    .calendar-page .month-card {
        padding: 11px;
    }

    .calendar-page .month-title {
        padding-bottom: 7px;
    }

    .calendar-page .month-title h3 {
        font-size: 20px;
    }

    .calendar-page .weekday-row {
        padding: 6px 0 4px;
    }

    .calendar-page .room-statuses article {
        padding: 11px;
    }
}

@media (max-width: 900px) {
    .calendar-page {
        min-height: calc(100dvh - 78px);
        padding: 24px 24px calc(36px + 1cm);
    }

    .calendar-page .page-heading {
        margin-bottom: 16px;
    }

    .calendar-page .calendar-overview {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .calendar-page .room-statuses {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: 1fr;
        gap: 10px;
    }

    .calendar-page .room-statuses article {
        min-height: 112px;
        padding: 14px;
    }

    .calendar-page .calendar-months {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .calendar-page .month-card {
        width: 100%;
        padding: 16px;
    }

    .calendar-page .calendar-grid button,
    .calendar-page .calendar-blank {
        min-height: clamp(52px, 9vw, 72px);
    }
}

@media (max-width: 600px) {
    .calendar-page {
        padding: 22px 16px calc(32px + 1cm);
    }

    .calendar-page .page-heading h1 {
        font-size: clamp(29px, 9vw, 36px);
    }

    .calendar-page .room-statuses {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, minmax(88px, auto));
    }

    .calendar-page .room-statuses article {
        min-height: 88px;
    }

    .calendar-page .month-card {
        padding: 12px;
    }

    .calendar-page .month-title h3 {
        font-size: 21px;
    }

    .calendar-page .calendar-grid,
    .calendar-page .weekday-row {
        gap: 4px;
    }

    .calendar-page .calendar-grid button,
    .calendar-page .calendar-blank {
        min-height: clamp(45px, 14vw, 58px);
    }

    .calendar-page .calendar-grid button b {
        font-size: 16px;
    }
}

/* Align the headings and the first content row on Create, Calendar and Today pages. */
@media (min-width: 901px) {
    .today-page,
    .create-page {
        padding-top: clamp(16px, 2.5vh, 28px);
        padding-right: 7vw;
        padding-left: 7vw;
    }

    .calendar-page .page-heading,
    .today-page .page-heading,
    .create-page .page-heading {
        min-height: 46px;
        margin-bottom: clamp(12px, 1.8vh, 20px);
        display: flex;
        align-items: flex-end;
    }

    .calendar-page .page-heading h1,
    .today-page .page-heading h1,
    .create-page .page-heading h1 {
        font-size: clamp(34px, 2.5vw, 46px);
        line-height: 1;
    }
}

@media (min-width: 901px) and (max-height: 700px) {
    .today-page,
    .create-page {
        padding-top: 12px;
    }

    .calendar-page .page-heading,
    .today-page .page-heading,
    .create-page .page-heading {
        min-height: 36px;
        margin-bottom: 9px;
    }

    .calendar-page .page-heading h1,
    .today-page .page-heading h1,
    .create-page .page-heading h1 {
        font-size: 32px;
    }
}

@media (max-width: 900px) {
    .today-page,
    .create-page {
        padding-top: 24px;
        padding-right: 24px;
        padding-left: 24px;
    }

    .calendar-page .page-heading,
    .today-page .page-heading,
    .create-page .page-heading {
        min-height: 40px;
        margin-bottom: 16px;
        display: flex;
        align-items: flex-end;
    }

    .calendar-page .page-heading h1,
    .today-page .page-heading h1,
    .create-page .page-heading h1 {
        font-size: clamp(32px, 5vw, 40px);
        line-height: 1;
    }
}

@media (max-width: 600px) {
    .today-page,
    .create-page {
        padding-top: 22px;
        padding-right: 16px;
        padding-left: 16px;
    }

    .calendar-page .page-heading,
    .today-page .page-heading,
    .create-page .page-heading {
        min-height: 36px;
    }

    .calendar-page .page-heading h1,
    .today-page .page-heading h1,
    .create-page .page-heading h1 {
        font-size: clamp(29px, 9vw, 36px);
    }
}

/* Move the three aligned page headings down by exactly half a centimetre. */
@media (min-width: 901px) {
    .calendar-page,
    .today-page,
    .create-page {
        padding-top: calc(clamp(16px, 2.5vh, 28px) + .5cm);
    }
}

@media (min-width: 901px) and (max-height: 700px) {
    .calendar-page,
    .today-page,
    .create-page {
        padding-top: calc(12px + .5cm);
    }
}

@media (max-width: 900px) {
    .calendar-page,
    .today-page,
    .create-page {
        padding-top: calc(24px + .5cm);
    }
}

@media (max-width: 600px) {
    .calendar-page,
    .today-page,
    .create-page {
        padding-top: calc(22px + .5cm);
    }
}