/* CALENDAR / DISCOVERY CALL — cream card overlapping the yellow band above, sitting on a red field */

.calendar {
    position: relative;
    padding: 0 0 var(--section-py-lg);
    background: var(--clr-red);
    color: #fff;
    display: flow-root;          /* contain inner negative margin so the card straddles the boundary */
}

.calendar .container {
    position: relative;
    z-index: 1;
}

.calendar-card {
    background: var(--clr-greige);
    border-radius: 28px;
    padding: 64px 72px 72px;
    margin: -150px auto 0;       /* straddle the yellow/red boundary, narrow card centered */
    max-width: 1080px;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: center;
    color: var(--clr-navy);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.10);
}

.calendar-content { max-width: 520px; }

.calendar-heading {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2rem, 3.4vw, 2.95rem);
    line-height: 1.1;
    letter-spacing: -0.012em;
    color: var(--clr-navy);
    margin: 0 0 28px;
}

.calendar-heading .line {
    display: block;
    white-space: nowrap;
}

/* Hand-drawn lavender-blue ellipse around "harder." — uses the same fx pattern as hero */
.fx-harder {
    color: var(--clr-navy);
    font-weight: 300;
    padding: 0 0.32em;
    margin-right: 0.18em;
}
.fx-harder::before {
    background-image: url("../assets/images/works-image-bg.png");
    background-size: 100% 100%;
    height: 138%;
    top: -19%;
    bottom: auto;
    left: -0.06em;
    width: calc(100% + 0.12em);
    z-index: -1;
}

.calendar-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: var(--clr-navy);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0;
}

.calendar-clock {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.calendar-content p {
    font-family: var(--font-body);
    font-weight: 200;
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--clr-navy);
    letter-spacing: 1.2px;
    margin: 0;
    max-width: 410px;
}

.calendar-image-col {
    display: flex;
    justify-content: flex-end;
}

.calendar-screenshot {
    width: 100%;
    max-width: 520px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
    display: block;
}

/* Calendly inline embed — sized to feel close to the previous screenshot
   placeholder but tall enough that Calendly's own date picker renders without
   an internal scrollbar. The card grid keeps it bounded to the right column.
   Wrapper carries the white frame + shadow + radius so the iframe can sit
   inset with breathing room around the Calendly content (which otherwise
   butts right up against the rounded corners). */
.calendar-embed-frame {
    width: 100%;
    max-width: 520px;
    padding: 14px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}
.calendar-embed {
    width: 100%;
    height: 580px;
    border: 0;
    border-radius: 6px;
    background: #fff;
    display: block;
    color-scheme: light;
}

@media (max-width: 1100px) {
    .calendar-card { padding: 48px 48px 56px; gap: 36px; }
}

@media (max-width: 1024px) {
    .calendar { padding: 0 0 72px; }
    .calendar-card {
        grid-template-columns: 1fr;
        margin: -48px 24px 0;
        padding: 36px 28px 40px;
        gap: 28px;
        border-radius: 22px;
    }
    .calendar-image-col { justify-content: center; }
    .calendar-heading { font-size: clamp(1.9rem, 7vw, 2.8rem); }
    /* Slightly taller on tablet/phone so Calendly's stacked date+time view has
       breathing room once it becomes the full-width element in the card. */
    .calendar-embed-frame { max-width: 480px; padding: 12px; }
    .calendar-embed { height: 620px; }
}

@media (max-width: 480px) {
    .calendar { padding: 0 0 56px; }
    .calendar-card {
        margin: -36px 16px 0;
        padding: 28px 22px 32px;
    }
    .calendar-heading { font-size: clamp(1.7rem, 8vw, 2.4rem); }
    .calendar-embed { height: 640px; }
}