/* Book a demo: reuses the shared contact-sales styling; this file only covers the calendar card. */

/* the calendar is tall and has its own scroll, so don't pin the card */
.book-demo .cs-card { position: static; }
.bd-card-body { padding: 1.1rem 0.6rem 0.9rem; }
.bd-card-head { padding: 0 0.6rem 0.5rem; text-align: start; }
.bd-card-head h2 { margin: 0; font-size: var(--font-lg); letter-spacing: -0.02em; }

.bd-calendar {
    position: relative;
    /* HubSpot's calendar panel is a fixed ~25rem column; any wider and it floats in blank space */
    max-width: 25rem;
    margin-inline: auto;
    min-height: 38rem;
    border-radius: var(--border-radius-tiny);
    overflow: hidden;
}
.bd-calendar .meetings-iframe-container,
.bd-calendar iframe { position: relative; z-index: 1; display: block; width: 100%; border: 0; }
.bd-calendar .meetings-iframe-container { min-height: 38rem; }

/* shimmer placeholder behind the iframe while the calendar loads */
.bd-skeleton { position: absolute; inset: 0; z-index: 0; display: grid; gap: 0.9rem; padding: 1.75rem 1.5rem; align-content: start; }
.bd-skeleton span {
    height: 3.4rem;
    border-radius: var(--border-radius-tiny);
    background: linear-gradient(100deg, var(--cs-line) 30%, color-mix(in srgb, var(--cs-line) 40%, var(--background)) 50%, var(--cs-line) 70%);
    background-size: 200% 100%;
    animation: cs-shimmer 1.4s linear infinite;
}
.bd-skeleton span:first-child { height: 1.75rem; width: 60%; }
.bd-calendar:has(iframe) .bd-skeleton { display: none; }

.bd-fallback { margin: 0.75rem 0.6rem 0; text-align: center; font-size: var(--font-sm); color: var(--text-faded); }
.bd-fallback a { margin-left: 0.25rem; font-weight: var(--font-weight-bold); color: var(--cs-blue); text-decoration: underline; text-underline-offset: 3px; }
.bd-fallback a:focus-visible { outline: 3px solid var(--cs-blue); outline-offset: 3px; }

@media (min-width: 560px) {
    .bd-card-body { padding: 1.5rem 1.1rem 1rem; }
}
@media (min-width: 960px) {
    /* the card is only as wide as the calendar it holds */
    .book-demo .cs-container { grid-template-columns: minmax(0, 32rem) 28.5rem; justify-content: center; column-gap: 6rem; }
    .book-demo .cs-card { align-self: start; }
}