.booking-item {
    margin: 1px 0 2px 0;
    background: var(--primary-color-2);
    background: linear-gradient(135deg,var(--primary-color-2) 15%, var(--primary-color-1) 50%, var(--primary-color-3) 100%);
    z-index: 2;
    transition: box-shadow 0.2s ease;
    /* Clips the title. Also removes the automatic minimum size of a grid item,
       so a long title can never stretch the booking over the next one. */
    overflow: hidden;
    min-height: 0;
    min-width: 0;
}

    .booking-item:hover {
        box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 10px 20px rgba(0,0,0,.12);
    }

.recurring-booking-item {
    background: #3FD4AA;
    background: linear-gradient(135deg,rgba(63, 212, 170, 1) 0%, rgba(55, 195, 181, 1) 100%);
}

/* The short text a user can add to a booking */
.booking-title {
    padding: var(--small-gap) var(--pill-gap);
    font-size: 1.2rem;
    line-height: 1.7rem; /* absolute, not a ratio, so the measuring stays predictable */
    font-weight: 600;
    color: var(--text-color);
    overflow-wrap: anywhere; /* one very long word cannot escape the column */
    /* the booking itself is the click target */
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

    /* White text marker: background only where text, one box per LINE */
    .booking-title > span {
        display: inline;
        background-color: var(--white-bg);
        padding: 0.1rem var(--pill-gap) 0.1rem var(--small-gap);
        border-radius: 0.2rem;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }