/* Meeting-booking pages (inc/meeting-booking/page.php). Values = live's Elementor post-<id>.css
   (identical on 8 pages; meeting-booking-it-services-v2 differs <=767px -> .mtgb--v2) plus
   Astra/kit defaults measured on live 2026-09-28. Live's boxed width here is Elementor's
   min(100%,1440px) - this page does not use the 1340 .z-container. */

.mtgb {
    font-family: "Poppins", sans-serif; font-size: 16px; line-height: 26.4px; color: #000;
    margin-bottom: -33px;              /* live: #primary margin-bottom -33px - footer overlaps the pixel row */
}
.mtgb * { box-sizing: border-box; }

/* c84c731 / 0f6a7bd - tagline */
.mtgb-head { max-width: 1440px; margin: 0 auto; padding: 0 30px; text-align: center; }
.mtgb-head h2 { margin: 0; padding: 0; font-family: "Poppins", sans-serif; font-size: 20px; font-weight: 400; line-height: 1.3; letter-spacing: normal; color: #141414; }   /* shared mobile h2 rule sets -0.25px */

/* 08da9e6 / f919e59 - calendar band */
.mtgb-cal { padding: 0 30px; }
.mtgb-cal-in { max-width: 1440px; margin: 0 auto; padding: 0 0 80px; display: flex; flex-direction: column; }
.mtgb-col { width: 100%; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 1025px) {
    .mtgb-cal-in { flex-direction: row; }
    .mtgb-col { width: 99%; }
}
.mtgb .meetings-iframe-container { width: 100%; }   /* iframe stays inline like live (baseline gap included) */
/* Reserve the loaded calendar's height before HubSpot injects it (measured 390-1440: 756 iframe + inline gap = 764.4, 763.1 at <=544).
   Without it the container is ~0 tall, so the note's -74px margin below pulls "This calendar
   is for Business inquiries..." up over the heading until the calendar loads. min-height is a
   floor only - it never caps the calendar. */
.mtgb .meetings-iframe-container { min-height: 764px; }

/* 5a9e6d5 - note pulled up over the calendar's bottom edge */
.mtgb-note { position: relative; z-index: 9; margin-top: 0;  /* owner 2026-10-06: WP pulled it -74px over the calendar; HubSpot dropdowns open into that strip and ended up under the note */ text-align: center; font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: normal; color: #868686; }
.mtgb-note p { margin: 0 0 1.6em; padding: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; }
.mtgb-note a { color: #046bd2; text-decoration: none; }
.mtgb-note a:hover, .mtgb-note a:focus { color: #045cb4; }
.mtgb-note a span { text-decoration: underline; }
/* The pulled-up note overlaps HubSpot's Back/Confirm row on the details step: let clicks
   fall through to the calendar (link stays clickable); on phones drop the overlap entirely. */
.mtgb-note { pointer-events: none; }
.mtgb-note a { pointer-events: auto; }

/* 754a8a7 - Capterra pixel row (one line box tall, as live) */
.mtgb-px img { display: inline; vertical-align: baseline; }

@media (max-width: 767px) {
    .mtgb-head h2 { font-size: 25px; }
    .mtgb-cal { padding: 0 20px; }
    .mtgb-cal-in { padding: 50px 0; }
    .mtgb-note { margin-top: 0; }

    .mtgb--v2 .mtgb-head { text-align: justify; }
    .mtgb--v2 .mtgb-head h2 { font-size: 17px; text-align: justify; }
    .mtgb--v2 .mtgb-cal { padding: 0 5px; }
    .mtgb--v2 .mtgb-cal-in { padding: 20px 0; }
    .mtgb--v2 .mtgb-note { font-size: 10px; }

    /* owner 2026-10-06: calendar must start in the first screen. Live's 25px heading +
       50px gap put it at 378-410px on a 375x667 phone; this lifts it to ~205px. */
    .mtgb:not(.mtgb--v2) .mtgb-head { padding: 0 20px; }
    .mtgb:not(.mtgb--v2) .mtgb-head h2 { font-size: 17px; line-height: 1.4; }
    .mtgb:not(.mtgb--v2) .mtgb-cal-in { padding-top: 12px; }
}
/* Astra drops html font-size to 91.2% at <=544px */
@media (max-width: 544px) {
    .mtgb { font-size: 14.592px; line-height: 24.0768px; }
    .mtgb .meetings-iframe-container { min-height: 763px; }   /* smaller inline gap here */
}