/* ==========================================================================
   L'Esprit MKB page only - the Framer illustration (sketch -> blueprint -> finished form) with a red line that
   draws itself slowly while scrolling (js/scroll-line.js, css/scroll-line.css), plus the border line on the
   "WHAT PANACHE MEANS AT MKB" box. Loaded only by esprit-mkb.php; scoped to body.esprit-page.
   ========================================================================== */

/* ---- "WHAT PANACHE MEANS AT MKB" box: the page stylesheet strips its border (frosted-panel rule), leaving only the
   corner ticks. Give it the same 1px border line as the principle cards on the right. ---- */
body.esprit-page .lesprit-panache-box {
  border: 1px solid rgb(217, 217, 217) !important;
}

/* ---- Layout (desktop): the left column's pieces become cells of one grid.
   Row 1: the statement "Complex healthcare challenges demand rigour..." runs across the full width on ONE line.
   Left: the illustration, vertically centred beside the five principle cards (row 3). Row 2: the "WHAT PANACHE MEANS AT MKB" box, centred between the left and right columns.
   Row 3, right: the five principle cards. The left column no longer sticks. ---- */
@media (min-width: 1025px) {
  body.esprit-page .lesprit-columns-container {
    display: grid !important;
    grid-template-columns: minmax(0, 480px) minmax(0, 575px);
    justify-content: space-between;
    column-gap: 0 !important;
    row-gap: 20px;
    align-items: start;
  }

  body.esprit-page .lesprit-sticky-col {
    display: contents !important;
  }

  body.esprit-page .lesprit-sticky-col > .lesprit-sticky-heading {
    grid-column: 1 / -1;
    grid-row: 1;
    white-space: nowrap;
    font-size: clamp(15px, 1.95vw, 26px) !important;
    letter-spacing: -0.6px !important;
  }
  body.esprit-page .lesprit-sticky-col > .esp-visual            { grid-column: 1; grid-row: 3; align-self: center; top: -56px; }   /* centred beside the five cards, nudged up a little */
  body.esprit-page .lesprit-sticky-col > .lesprit-panache-box   { grid-column: 1 / -1; grid-row: 2; justify-self: center; width: min(640px, 100%) !important; box-sizing: border-box; }   /* centred between the left and right columns */
  body.esprit-page .lesprit-cards-col                           { grid-column: 2; grid-row: 3; width: 100% !important; max-width: none !important; }
}

/* ---- Illustration: reduced size (about 420 x 630 at desktop width, about the height of the five cards) ---- */
body.esprit-page .lesprit-sticky-col > .esp-visual {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0;
  pointer-events: none;
  /* the original Framer fade (183deg, transparent at the top, solid by ~30%) */
  -webkit-mask-image: linear-gradient(183deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 29.7414%);
  mask-image: linear-gradient(183deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 29.7414%);
}

.esp-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 1536;
}

.esp-stage > img,
.esp-stage > .impl-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.esp-stage > img {
  display: block;
  object-fit: contain;
}

@media (max-width: 1024px) {
  body.esprit-page .lesprit-sticky-col > .esp-visual {
    margin-top: 12px;
  }
}

/* "AVEC PANACHE" picture in the panache box: the same 12px gap at the bottom as on the right */
body.esprit-page .lesprit-panache-box .lesprit-panache-circuit-img {
  right: 12px !important;
  bottom: 12px !important;
}