/* ==========================================================================
   book-a-call — page-specific layout
   Built against design-output/book-a-call/sections/section-01.png.
   Header, footer, pills and buttons are shared and live in global.css.

   The scheduler is the one white surface on the site: a Cal.com embed drawn
   in markup. Its greys are local to this block rather than page tokens,
   because they belong to that widget's own palette, not to the design system.
   ========================================================================== */

/* ── Section 1 — Head + scheduler ───────────────────────────────────────── */

/* The rule under the bar runs the width of the page; the side rules stop on
   the gutter, which is why they sit on different elements. */
.booking {
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.booking__inner {
    width: calc(100% - var(--gutter) * 2);
    max-width: calc(var(--container) - var(--gutter) * 2);
    margin-inline: auto;
    padding: var(--s-10) var(--s-7);
    border-inline: 1px solid var(--border-color);
}

.booking__head {
    text-align: center;
}

.booking__title {
    margin-top: var(--s-4);
    font-family: var(--font-serif);
    /* 64px at the 1440 design width, on one line there */
    font-size: clamp(34px, 4.45vw, 64px);
    font-weight: var(--w-regular);
    line-height: var(--lh-tight);
}

/* ── The scheduler ──────────────────────────────────────────────────────── */

/* Three ruled columns on one white card: what is being booked, the month,
   and the times on the chosen day. */
.scheduler {
    --sched-line:   rgba(2, 0, 0, 0.10);
    --sched-muted:  #6f7075;
    --sched-ink:    #1a1a1c;
    --sched-tint:   #f0f0ef;

    display: grid;
    grid-template-columns: 280fr 480fr 280fr;
    max-width: 1040px;
    margin: var(--s-9) auto 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--c-white);
    color: var(--sched-ink);
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 1px 2px rgba(2, 0, 0, 0.06);
}

.scheduler > * + * {
    border-left: 1px solid var(--sched-line);
}

.scheduler__event,
.scheduler__calendar,
.scheduler__slots {
    padding: var(--s-5);
}

/* Column 1 — event ------------------------------------------------------- */

.scheduler__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.scheduler__host {
    margin-top: var(--s-3);
    font-size: 14px;
    color: var(--sched-muted);
}

.scheduler__event-name {
    margin-top: var(--s-2);
    font-family: var(--font-ui);
    font-size: var(--t-lg);
    font-weight: 600;
    line-height: 1.2;
}

.scheduler__event-note {
    margin-top: var(--s-3);
    color: var(--sched-muted);
}

.scheduler__meta {
    display: grid;
    gap: var(--s-3);
    margin-top: var(--s-6);
    padding: 0;
    list-style: none;
}

.scheduler__meta li {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

/* One icon rule for the set: drawn as strokes, so only the Meet mark carries
   fills of its own. */
.scheduler__icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--sched-ink);
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.scheduler__icon--meet {
    stroke: none;
}

/* The timezone is the one control in this column */
.scheduler__zone {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 0;
    font-size: 14px;
    color: var(--sched-ink);
}

.scheduler__caret {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Column 2 — calendar ---------------------------------------------------- */

.cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
}

.cal__month {
    font-size: var(--t-md);
}

.cal__month strong {
    font-weight: 600;
}

.cal__month span {
    color: var(--sched-muted);
}

.cal__nav {
    display: flex;
    gap: var(--s-1);
}

.cal__arrow {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--sched-muted);
}

/* The month before this one holds nothing bookable, so the arrow goes quiet
   rather than disappearing — the pair stays balanced. */
.cal__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

.cal__arrow:not(:disabled):hover {
    background: var(--sched-tint);
    color: var(--sched-ink);
}

.cal__arrow svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cal__grid {
    width: 100%;
    margin-top: var(--s-5);
    border-collapse: separate;
    border-spacing: 2px;
    table-layout: fixed;
}

/* The month is already set above the table; the caption repeats it for
   assistive tech only. */
.cal__caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.cal__grid th {
    padding-bottom: var(--s-2);
    font-size: 12px;
    font-weight: var(--w-regular);
    letter-spacing: 0.06em;
    color: var(--sched-ink);
}

.cal__grid th abbr {
    text-decoration: none;
}

/* Every cell holds one day box, open or not, so the columns stay on pitch
   whether the day can be booked or not. */
.cal__day {
    display: grid;
    place-items: center;
    width: 100%;
    height: 60px;   /* 62px row pitch with the 2px spacing, as in the capture */
    border-radius: 6px;
    font-size: 14px;
    color: var(--sched-muted);
}

/* A day with times on it: a ground, and ink rather than grey */
/* Days belonging to the neighbouring month */
.cal__day.is-outside {
    opacity: 0.35;
}

.cal__day.is-open {
    background: var(--sched-tint);
    color: var(--sched-ink);
    font-weight: 500;
    cursor: pointer;
}

.cal__day.is-open:hover {
    background: #e4e4e2;
}

.cal__day.is-selected,
.cal__day.is-selected:hover {
    background: var(--c-ink-deep);
    color: var(--c-white);
}

/* Today is marked by a dot under the numeral rather than by a ground */
.cal__day.is-today {
    position: relative;
}

.cal__day.is-today::after {
    content: "";
    position: absolute;
    bottom: 8px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
}

/* Where the month turns over, its short name sits above the first day */
.cal__turn {
    position: relative;
}

.cal__turn::before {
    content: attr(data-month);
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--sched-tint);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--sched-muted);
}

/* Column 3 — slots ------------------------------------------------------- */

.slots__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
}

.slots__day {
    font-size: var(--t-md);
}

.slots__day strong {
    font-weight: 600;
}

.slots__day span {
    color: var(--sched-muted);
}

/* Segmented control: the ground belongs to the group, the knob to the
   button that is on. */
.slots__clock {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 7px;
    background: var(--sched-tint);
}

.slots__clock button {
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 13px;
    color: var(--sched-muted);
}

.slots__clock button.is-on {
    background: var(--c-white);
    color: var(--sched-ink);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(2, 0, 0, 0.10);
}

/* A full day of 20-minute slots is longer than the month beside it, so the
   list scrolls inside its own column and the card keeps one height. */
.slots__list {
    display: grid;
    gap: 10px;
    margin-top: var(--s-5);
    padding: 0;
    max-height: 468px;
    overflow-y: auto;
    list-style: none;
    scrollbar-width: thin;
}

.slot {
    display: grid;
    place-items: center;
    width: 100%;
    padding-block: 10px;
    border: 1px solid var(--sched-line);
    border-radius: 8px;
    background: var(--c-white);
    font-size: 14px;
    font-weight: 500;
}

/* Shown when the horizon holds no bookable day at all */
.slots__empty {
    padding-top: var(--s-4);
    color: var(--sched-muted);
    font-size: 13px;
    line-height: 1.5;
}

.slot:not(:disabled):hover {
    border-color: var(--sched-muted);
}

/* ── While availability is being fetched ─────────────────────────────────────
   The endpoint decides what is open, so until it answers there is nothing
   truthful to draw. The month goes quiet and the time column fills with
   placeholder pills the same height as real ones, so nothing shifts when the
   times arrive. */

.scheduler[data-avail="loading"] .cal__grid,
.scheduler[data-avail="loading"] .cal__nav {
    opacity: 0.45;
    pointer-events: none;
}

.slot-skeleton {
    height: 41px;
    border-radius: 8px;
    background: linear-gradient(90deg,
        var(--sched-tint) 25%,
        rgba(2, 0, 0, 0.04) 37%,
        var(--sched-tint) 63%);
    background-size: 360% 100%;
    animation: slot-shimmer 1.3s ease-in-out infinite;
}

@keyframes slot-shimmer {
    from { background-position: 120% 0; }
    to   { background-position: -20% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .slot-skeleton {
        animation: none;
    }
}

/* Offered and then lost between load and submit */
.slots__retry {
    padding: 0;
    color: var(--sched-ink);
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    /* The month needs the full width once the card is this narrow, so the
       three columns become event over month over times. */
    .scheduler {
        grid-template-columns: 1fr;
        max-width: 520px;
    }

    .scheduler > * + * {
        border-left: 0;
        border-top: 1px solid var(--sched-line);
    }
}

@media (max-width: 640px) {
    .booking__inner {
        padding: var(--s-10) var(--s-5);
    }

    .scheduler {
        margin-top: var(--s-7);
    }

    .cal__day {
        height: 44px;
    }
}

/* ── Step 2 — confirmation ───────────────────────────────────────────────────
   The card carries both steps and swaps which columns are in play, so the
   white panel, its radius and its shadow never redraw between them. The width
   changes with the step — three columns need 1040px, two need 896 — and the
   transition on that is what makes the change read as one movement rather
   than a reload. */

.scheduler {
    transition: max-width 320ms ease;
}

.scheduler[data-view="calendar"] .scheduler__summary,
.scheduler[data-view="calendar"] .scheduler__form,
.scheduler[data-view="calendar"] .scheduler__done,
.scheduler[data-view="confirm"] .scheduler__event,
.scheduler[data-view="confirm"] .scheduler__calendar,
.scheduler[data-view="confirm"] .scheduler__slots,
.scheduler[data-view="confirm"] .scheduler__done,
.scheduler[data-view="done"] .scheduler__event,
.scheduler[data-view="done"] .scheduler__calendar,
.scheduler[data-view="done"] .scheduler__slots,
.scheduler[data-view="done"] .scheduler__summary,
.scheduler[data-view="done"] .scheduler__form {
    display: none;
}

/* Two columns on the confirmation step: 5 and 7 of 12 */
.scheduler[data-view="confirm"] {
    grid-template-columns: 5fr 7fr;
    max-width: 896px;
}

.scheduler[data-view="done"] {
    grid-template-columns: 1fr;
    max-width: 560px;
}

/* The incoming columns fade up rather than appearing hard */
.scheduler__summary,
.scheduler__form,
.scheduler__done {
    animation: sched-in 260ms ease both;
}

@keyframes sched-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .scheduler { transition: none; }

    .scheduler__summary,
    .scheduler__form,
    .scheduler__done {
        animation: none;
    }
}

.scheduler__summary {
    padding: var(--s-5);
}

/* The chosen slot, set apart from the meta list below it */
.scheduler__when {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    margin-top: var(--s-5);
    padding: var(--s-3) 0 0;
    border-top: 1px solid var(--sched-line);
    font-weight: 500;
    line-height: 1.4;
}

/* ── The intake form ── */

.scheduler__form {
    padding: var(--s-5);
}

.intake__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    font-size: 13px;
    color: var(--sched-muted);
}

.intake__back:hover {
    color: var(--sched-ink);
}

.intake__back svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.intake {
    display: grid;
    gap: var(--s-4);
    margin-top: var(--s-4);
}

.field {
    display: grid;
    gap: 6px;
}

.field__label {
    font-size: 13px;
    font-weight: 500;
}

.field__req {
    color: var(--sched-muted);
}

.field__input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid rgba(2, 0, 0, 0.15);
    border-radius: 12px;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: var(--sched-ink);
}

.field__input:hover {
    border-color: rgba(2, 0, 0, 0.3);
}

.field__input:focus {
    outline: none;
    border-color: var(--sched-ink);
}

/* The native arrow is replaced so the control matches the text inputs */
.field__select {
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a1a1c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 15px;
    cursor: pointer;
}

.intake {
    --field-error: #b3261e;
}

.field__input[aria-invalid="true"] {
    border-color: var(--field-error);
}

.field__error {
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--field-error);
}

.intake__submit {
    justify-content: center;
    width: 100%;
    margin-top: var(--s-2);
    padding-block: 12px;
    border-radius: 12px;
}

.intake__submit[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.intake__status {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--field-error);
}

/* ── Step 3 — confirmed ── */

.scheduler__done {
    display: grid;
    justify-items: start;
    gap: var(--s-3);
    padding: var(--s-8) var(--s-5);
}

.booked__tick {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: var(--sched-ink);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.booked__title {
    font-family: var(--font-serif);
    font-size: var(--t-2xl);
    font-weight: var(--w-regular);
    line-height: var(--lh-snug);
}

.booked__note {
    color: var(--sched-muted);
    line-height: var(--lh-body);
}

.booked__again {
    margin-top: var(--s-3);
    border-radius: var(--r-pill);
}

@media (max-width: 1024px) {
    /* Stacked, like the calendar step */
    .scheduler[data-view="confirm"] {
        grid-template-columns: 1fr;
        max-width: 520px;
    }
}