/* Keep the inline booking widget in the normal page flow. */
#contacts .row > div,
#contacts .contact-inner,
#contacts .ft-link-wrap { min-width: 0; }
#contacts .ft-link-wrap { overflow-wrap: anywhere; }
#my-cal-inline-30min { width: 100%; }
.calendar-embed-wrapper {
    width: 100%;
    height: 540px;
    max-height: 540px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 8px;
    background: #fff;
}

/* Work Details reuses Home's wrapper and calendar sizing with a compact heading. */
.work-details-booking-heading {
    margin: 0 0 24px;
    text-align: center;
}
.work-details-booking-heading .title {
    margin: 0;
    color: var(--color-heading);
    font-size: clamp(22px, 2.4vw, 36px);
    line-height: 1.2;
}
.work-details-booking-heading .subtitle {
    margin: 10px 0 0;
    color: var(--color-gray);
    font-size: 16px;
    line-height: 1.6;
}
@media (max-width: 575px) {
    .work-details-booking-heading { margin-bottom: 18px; }
    .work-details-booking-heading .subtitle { font-size: 14px; }
}

/* Home's page-specific width and responsive heights remain unchanged. */
@media (min-width: 1200px) {
    #contacts .calendar-embed-wrapper,
    .work-details-booking .calendar-embed-wrapper { width: 88%; margin-inline: auto; }
    #contacts .col-xl-4 > .contact-inner { margin-top: 90px; }
}
@media (max-width: 1199px) {
    #contacts .calendar-embed-wrapper,
    .work-details-booking .calendar-embed-wrapper { height: 520px; max-height: 520px; }
}
@media (max-width: 575px) {
    #contacts .calendar-embed-wrapper,
    .work-details-booking .calendar-embed-wrapper { height: 500px; max-height: 500px; }
}