/* =========================================================================
   template-parts/sections/section-scheduler.php
   Moved out of the partial's inline <style id="es-scheduler-css"> on the owner's
   instruction, 10 Sep 2026. en_print_css() (inc/css-loader.php) prints this
   file's <link> where the <style> used to be, once per page, so every page
   that renders this section shares this one file.
   ========================================================================= */

/* Author-controlled line breaks, same rule the other sections follow: a wrap
   pinned against the desktop column width strands words on a phone. */
.es-sched br {
  display: none;
}

@media (min-width: 992px) {
  .es-sched br {
    display: inline;
  }
}

/* ── Split ─────────────────────────────────────────────────
   Was a Bootstrap `.row.align-items-center` with two
   `.col-lg-6`. Same two columns, on the grid the rest of the
   migrated sections use. The columns align to the START of the
   row, not its middle, so the copy reads from the top edge of
   the panel beside it. Stacks below 992px, which is where the Bootstrap
   version broke too, so the breakpoint is unchanged. */
.es-sched__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-fluid-xl);
  align-items: start;
}

@media (min-width: 992px) {
  .es-sched__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The global head reserves --section-head-gap under itself, which is spacing
   for a head that sits above a full-width section. Here it opens a column,
   so it takes the tighter gap section-contact's copy column uses. */
.es-sched__copy .es-section-head {
  margin-bottom: var(--gap-fluid-md);
}

/* ── Steps ─────────────────────────────────────────────────
   Numbered badge beside the label, one row per step. Badge is
   the same circle section-process draws, so a visitor meets
   one numbering treatment across the site rather than an
   outlined circle in one section and a filled disc here. */
.es-sched__steps {
  --es-sched-badge: 48px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.es-sched__step {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.es-sched__step + .es-sched__step {
  margin-top: var(--space-5);
}

.es-sched__badge {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--es-sched-badge);
  height: var(--es-sched-badge);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--brand-600);
  font-family: var(--font-label);
  font-size: var(--fs-body-sm);
  font-weight: var(--font-bold);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  transition:
    background-color var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out);
}

.es-sched__step:hover .es-sched__badge {
  border-color: var(--brand-500);
  background: var(--brand-500);
  color: var(--text-inverse);
}

.es-sched__step-text {
  color: var(--text-heading);
  font-size: var(--fs-card-title);
  font-weight: var(--font-semibold);
  line-height: var(--lh-subhead);
}

/* Short accent rule closing the steps off from the contact block. Same
   hairline section-contact.php draws further down this page. */
.es-sched__rule {
  width: 56px;
  height: 2px;
  margin: var(--gap-fluid-lg) 0 var(--gap-fluid-md);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--brand-400);
}

.es-sched__aside-title {
  margin: 0 0 var(--space-5);
  color: var(--text-heading);
  font-size: var(--fs-title-sm);
  font-weight: var(--font-extrabold);
  line-height: var(--lh-subhead);
  letter-spacing: var(--tracking-normal);
}

/* ── Contact tile ──────────────────────────────────────────
   The mark, its ring and the bold value are section-contact's
   row, kept inside the bordered card the legacy block used so
   the arrangement is unchanged. */
.es-sched__contact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.es-sched__contact-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--brand-500);
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-out);
}

.es-sched__contact-icon img {
  display: block;
  width: 24px;
  height: auto;
}
.es-sched__contact-icon svg {
  width: 22px;
  height: 22px;
}

.es-sched__contact:hover .es-sched__contact-icon {
  border-color: var(--brand-400);
}

.es-sched__contact-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.es-sched__contact-label {
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.3;
}

.es-sched__contact-value {
  color: var(--text-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  line-height: 1.35;
  /* A long number must not push the column past its half of the grid. */
  overflow-wrap: anywhere;
}

.es-sched__contact:hover .es-sched__contact-value {
  color: var(--brand-600);
}

/* ── Scheduler panel ───────────────────────────────────────
   Dark card, header, then the booker inset on a light surface.
   --gray-900 rather than the legacy #232323: it is the same
   token the case-study tiles and the dark section utility
   already paint with, so the site has one dark panel colour. */
.es-sched__panel {
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: transparent;
}

.es-sched__embed {
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

/* Calendly will not render its inline widget below 320px. On a 375px phone
   the panel is 351px, and a 16px inset each side leaves it 319px, one pixel
   short. The inset halves below 576px so the booker always clears its own
   floor rather than depending on the visitor's phone being wide enough. */
@media (max-width: 575px) {
  .es-sched__embed {
    margin: 0;
  }
}

/* Holds the booker's space before its script runs. See the note at the top
   of this file: this is the embed's required height, not a spacing choice. */
.es-sched__embed .calendly-inline-widget {
  min-width: 100%;
  height: var(--es-sched-embed-h, 700px);
}

/* The booking link the loader shows if widget.js fails, and the <noscript>
   shows with no JS. Fills the booker's reserved box so the band keeps its
   shape; at compact density from 992px that box is the copy column's height. */
.es-sched__fallback {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: var(--space-10);
  padding: var(--space-6);
  text-align: center;
}

/* ── Compact density ('density' => 'compact') ─────────────
   See the partial's docblock. Only gaps change: the badge,
   type and contact tile keep their sizes so the section still
   matches section-process and section-contact. */
.es-sched--compact .es-sched__copy .es-section-head {
  margin-bottom: var(--gap-fluid-sm);
}
.es-sched--compact .es-sched__step + .es-sched__step {
  margin-top: var(--space-4);
}
.es-sched--compact .es-sched__rule {
  margin: var(--space-5) 0 var(--space-4);
}
.es-sched--compact .es-sched__aside-title {
  margin-bottom: var(--space-3);
}

/* The panel stretches to the copy column and the booker fills it. The
   stretched grid item has a definite height, so the two 100%s resolve, and
   the empty widget div contributes nothing to the row: the copy column alone
   sets it, before and after Calendly paints, so there is no layout shift. */
@media (min-width: 992px) {
  .es-sched--compact .es-sched__grid {
    align-items: stretch;
  }
  .es-sched--compact .es-sched__embed,
  .es-sched--compact .es-sched__embed .calendly-inline-widget {
    height: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .es-sched__badge,
  .es-sched__contact,
  .es-sched__contact-icon {
    transition: none;
  }

  .es-sched__contact:hover {
    transform: none;
  }
}