/* ==========================================================================
   Our Story — includes/blocks/our-story/style.css
   Extracted from the homepage's "#story" block in index.html.
   Loaded on both the front end and in the block editor.

   Color tokens are baked in as plain hex/rgba from the site's MONO palette
   (color-mono.css → html.theme-mono), same convention as the other sections.

   Left/right image position uses CSS `order` on the two grid children
   (.story-art / .mhs-story-body) rather than changing markup order, so a
   single media query can force image-above-text on mobile regardless of
   the desktop position setting.
   ========================================================================== */

.mhs-our-story .wrap{
  width:min(var(--global-content-width, 1440px) - 2 * var(--global-content-edge-padding, 24px), 100% - 40px);
  margin-inline:auto;
}

.mhs-our-story .story{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}

.mhs-our-story .story-art{
  position:relative;height:420px;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#E6E6E6,#F4F4F4);
  display:grid;place-items:center;
  order:1;
}
.mhs-our-story .story-art svg{width:46%;opacity:.85}
.mhs-our-story .story-art .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mhs-our-story .story-art:has(.ph) svg{display:none}

.mhs-our-story .mhs-story-body{order:2}
.mhs-our-story .mhs-story-body h2{font-size:var(--pl-fs-h2);margin:14px 0 18px}
.mhs-our-story .mhs-story-body p{color:var(--text);font-size:var(--pl-fs-md);margin-bottom:14px}
.mhs-our-story .mhs-story-body .sig{font-style:italic;font-size:19px;margin:8px 0 26px}

.btn.btn-solid:hover{color:var(--white)}

/* "Right" position: swap the two columns via order, not markup */
.mhs-our-story.mhs-story--right .story-art{order:2}
.mhs-our-story.mhs-story--right .mhs-story-body{order:1}

@media(max-width:920px){
  .mhs-our-story .story{grid-template-columns:1fr}
  .mhs-our-story .story-art{height:320px}
  /* Mobile always shows the image first, regardless of the left/right
     setting above — !important because this must win over the
     .mhs-story--right override at the same "order" property. */
  .mhs-our-story .story-art{order:1 !important}
  .mhs-our-story .mhs-story-body{order:2 !important}
}