/*
 * Book a Demo shared modal styles.
 * Pairs with book-demo.js. Loaded globally from base.html.
 */

.book-demo {
    z-index: var(--ds-z-modal-top);
    /* HubSpot sizes its iframe only after it loads; reserving the height stops the modal jumping. */
    --book-demo-calendar-min-height: 640px;
    --book-demo-top-offset: 0px;
    padding-top: calc(var(--space-4) + var(--book-demo-top-offset));
}

/* The desktop marketing header is fixed above every overlay, so the modal starts below it. */
@media (min-width: 800px) {
    body:has(.header-row--marketplace) .book-demo {
        --book-demo-top-offset: calc(var(--space-18) + var(--space-1) - var(--space-px));
    }
}

.book-demo__modal {
    max-height: calc(100dvh - var(--book-demo-top-offset) - var(--space-8));
}

.book-demo__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: var(--ds-z-raised);
    margin: 0;
}

.book-demo__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-auto-rows: max-content;
}

.book-demo__context {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-10) var(--space-8);
    background: var(--color-neutral-50);
    border-right: var(--border-subtle);
}

.book-demo__avatar {
    width: var(--size-20);
    height: var(--size-20);
    border-radius: var(--radius-full);
    object-fit: cover;
}

.book-demo__title {
    margin: 0;
    color: var(--color-text-default);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.book-demo__desc {
    margin: 0;
    color: var(--color-text-subtle);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}

.book-demo__points {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

.book-demo__points li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-text-default);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.book-demo__point-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--size-4);
    height: var(--size-4);
    margin-top: var(--space-0-5);
    border-radius: var(--radius-full);
    background: var(--color-bg-inverse);
    color: var(--color-text-inverse);
}

.book-demo__point-icon svg {
    width: var(--size-3);
    height: var(--size-3);
    stroke-width: 3;
}

.book-demo__calendar {
    min-height: var(--book-demo-calendar-min-height);
    padding: var(--space-14) var(--space-4) 0;
}

.book-demo__calendar .meetings-iframe-container,
.book-demo__calendar iframe {
    width: 100%;
}

@media (max-width: 1023px) {
    .book-demo {
        padding: var(--book-demo-top-offset) 0 0;
        align-items: flex-end;
    }

    .book-demo__modal {
        max-width: none;
        max-height: calc(100dvh - var(--book-demo-top-offset));
        height: calc(100dvh - var(--book-demo-top-offset));
        border-radius: 0;
    }

    /* Between ~400px and ~620px HubSpot opens on today's time slots instead of the date grid. */
    .book-demo__calendar .meetings-iframe-container {
        max-width: calc(var(--size-48) * 2);
        margin: 0 auto;
    }

    .book-demo__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .book-demo__context {
        border-right: none;
        border-bottom: var(--border-subtle);
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: var(--space-1) var(--space-3);
        padding: var(--space-5) var(--space-12) var(--space-5) var(--space-4);
    }

    .book-demo__avatar {
        grid-row: span 2;
        width: var(--size-12);
        height: var(--size-12);
    }

    .book-demo__title {
        font-size: var(--font-size-lg);
    }

    .book-demo__desc {
        font-size: var(--font-size-sm);
        line-height: var(--line-height-normal);
    }

    .book-demo__points {
        display: none;
    }

    .book-demo__calendar {
        padding: var(--space-2) 0 0;
    }
}