/* ==========================================================================
   MEININGHAUS DESIGN SYSTEM — NOVAChild
   File: templates/NOVAChild/css/meininghaus.css
   Part 1: Global CSS variables (design tokens)

   Prefix: --mh-*  (namespaced, never collides with NOVA or Bootstrap)
   Fonts:  Montserrat + Open Sans — already loaded by NOVA, no extra requests.

   Fluid tokens use clamp(min, preferred, max) so type and spacing scale
   smoothly between mobile and desktop. This removes most media queries:
   you set a token once and every component that uses it becomes responsive.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------------
     BRAND COLOR
     Single source of truth. Change --mh-primary and the whole site follows.
     --------------------------------------------------------------------- */
  --mh-primary:            #820924;   /* burgundy — headings, buttons, accents */
  --mh-primary-dark:       #5d0b1a;   /* hover / pressed states */
  --mh-primary-light:      #a01638;   /* gradients, secondary accents */
  --mh-primary-tint:       #f6eef0;   /* very light wash for section bands */
  --mh-accent:             #a7e0eb;   /* light blue — links on dark grounds */

  /* ---------------------------------------------------------------------
     NEUTRALS
     --------------------------------------------------------------------- */
  --mh-black:              #1a1a1a;
  --mh-ink:                #333333;   /* default heading color */
  --mh-body:               #555555;   /* default body text */
  --mh-muted:              #808080;   /* captions, meta, attributions */
  --mh-line:               #e0e0e0;   /* borders, dividers */
  --mh-surface:            #ffffff;   /* cards, default page ground */
  --mh-surface-alt:        #f7f7f7;   /* alternating section background */
  --mh-surface-sunken:     #f0f0f0;   /* image placeholders, wells */

  /* ---------------------------------------------------------------------
     TYPOGRAPHY — families
     --------------------------------------------------------------------- */
  --mh-font-heading:       "Montserrat", -apple-system, BlinkMacSystemFont,
                           "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mh-font-body:          "Open Sans", -apple-system, BlinkMacSystemFont,
                           "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---------------------------------------------------------------------
     TYPOGRAPHY — fluid size scale
     Each step is responsive on its own. h1 shrinks 48px -> 28px without
     a single media query.
     --------------------------------------------------------------------- */
  --mh-text-xs:            0.75rem;                          /* 12px  — labels, legal */
  --mh-text-sm:            0.875rem;                         /* 14px  — meta, captions */
  --mh-text-base:          1rem;                             /* 16px  — body copy */
  --mh-text-md:            clamp(1rem,    0.4vw + 0.9rem,  1.125rem);  /* 16-18 lead-in */
  --mh-text-lg:            clamp(1.125rem, 0.6vw + 1rem,   1.375rem);  /* 18-22 lead paragraph */
  --mh-text-xl:            clamp(1.125rem, 1vw + 0.9rem,   1.5rem);    /* 18-24 h3 */
  --mh-text-2xl:           clamp(1.5rem,  1.8vw + 1rem,    2.25rem);   /* 24-36 h2 */
  --mh-text-3xl:           clamp(1.75rem, 2.8vw + 1rem,    3rem);      /* 28-48 h1 */
  --mh-text-hero:          clamp(2rem,    4vw + 1rem,      4rem);      /* 32-64 hero */

  /* ---------------------------------------------------------------------
     TYPOGRAPHY — weight, rhythm, tracking
     --------------------------------------------------------------------- */
  --mh-weight-light:       300;
  --mh-weight-normal:      400;
  --mh-weight-medium:      500;
  --mh-weight-semibold:    600;
  --mh-weight-bold:        700;

  --mh-leading-tight:      1.15;      /* large display headings */
  --mh-leading-snug:       1.3;       /* h2, h3 */
  --mh-leading-normal:     1.5;       /* UI text, card copy */
  --mh-leading-relaxed:    1.75;      /* body paragraphs / fliesstext */

  --mh-tracking-tight:     -0.01em;
  --mh-tracking-normal:    0;
  --mh-tracking-wide:      0.05em;    /* uppercase headings */
  --mh-tracking-wider:     0.12em;    /* small uppercase labels, eyebrows */

  /* Measure — caps line length so long text stays readable */
  --mh-measure:            68ch;

  /* ---------------------------------------------------------------------
     SPACING SCALE — 4px base, geometric growth
     Use these everywhere instead of hardcoded px. Consistency comes free.
     --------------------------------------------------------------------- */
  --mh-space-3xs:          0.25rem;   /*  4px */
  --mh-space-2xs:          0.5rem;    /*  8px */
  --mh-space-xs:           0.75rem;   /* 12px */
  --mh-space-sm:           1rem;      /* 16px */
  --mh-space-md:           1.5rem;    /* 24px */
  --mh-space-lg:           2rem;      /* 32px */
  --mh-space-xl:           3rem;      /* 48px */
  --mh-space-2xl:          4rem;      /* 64px */
  --mh-space-3xl:          6rem;      /* 96px */

  /* ---------------------------------------------------------------------
     SECTION RHYTHM — vertical padding, fluid
     Three densities. Mobile spacing is handled by the clamp minimum,
     so sections never feel cramped or bloated at any width.
     --------------------------------------------------------------------- */
  --mh-section-y-sm:       clamp(1.5rem, 3vw, 2.5rem);   /* 24-40  tight bands */
  --mh-section-y:          clamp(2.5rem, 6vw, 6rem);     /* 40-96  default */
  --mh-section-y-lg:       clamp(3.5rem, 8vw, 8rem);     /* 56-128 statement sections */

  /* Gap between stacked blocks inside one section */
  --mh-stack:              clamp(1rem, 2.5vw, 2rem);     /* 16-32 */

  /* ---------------------------------------------------------------------
     CONTAINER WIDTHS
     Four widths cover every layout on the site. --mh-container-text is
     the important one: it keeps long copy at a readable measure while
     letting grids and images use the full width.
     --------------------------------------------------------------------- */
  --mh-container-narrow:   45rem;     /*  720px — single-column forms, quotes */
  --mh-container-text:     56rem;     /*  896px — article / rich text bodies */
  --mh-container:          75rem;     /* 1200px — default page width */
  --mh-container-wide:     87.5rem;   /* 1400px — image-led / gallery sections */

  /* Horizontal breathing room — grows with viewport, never below 16px */
  --mh-gutter:             clamp(1rem, 4vw, 2.5rem);

  /* ---------------------------------------------------------------------
     GRID GAPS
     --------------------------------------------------------------------- */
  --mh-gap-sm:             clamp(0.75rem, 1.5vw, 1rem);   /* 12-16 tight tiles */
  --mh-gap:                clamp(1rem,    2.5vw, 2rem);   /* 16-32 default cards */
  --mh-gap-lg:             clamp(1.5rem,  4vw,   3rem);   /* 24-48 split layouts */

  /* ---------------------------------------------------------------------
     BORDERS & RADII
     --------------------------------------------------------------------- */
  --mh-radius-sm:          2px;
  --mh-radius:             4px;
  --mh-radius-lg:          8px;
  --mh-radius-pill:        999px;

  --mh-border:             1px solid var(--mh-line);
  --mh-border-strong:      2px solid var(--mh-primary);

  /* ---------------------------------------------------------------------
     ELEVATION
     --------------------------------------------------------------------- */
  --mh-shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.08);
  --mh-shadow:             0 4px 14px rgba(0, 0, 0, 0.10);
  --mh-shadow-lg:          0 12px 32px rgba(0, 0, 0, 0.15);

  /* Overlay scrim for text sitting on images (hero, team hover) */
  --mh-scrim:              linear-gradient(
                             to top,
                             rgba(0, 0, 0, 0.65) 0%,
                             rgba(0, 0, 0, 0.15) 55%,
                             rgba(0, 0, 0, 0)    100%
                           );

  /* ---------------------------------------------------------------------
     MOTION
     Durations are short on purpose — UI should feel instant, not animated.
     --------------------------------------------------------------------- */
  --mh-ease:               cubic-bezier(0.4, 0, 0.2, 1);
  --mh-duration-fast:      120ms;
  --mh-duration:           240ms;
  --mh-duration-slow:      450ms;

  --mh-transition:         all var(--mh-duration) var(--mh-ease);

  /* Lift distance for card / button hover — one value keeps it uniform */
  --mh-lift:               -3px;

  /* ---------------------------------------------------------------------
     CONTROLS (buttons, inputs)
     --------------------------------------------------------------------- */
  --mh-control-height:     2.75rem;   /* 44px — meets touch target minimum */
  --mh-control-px:         1.5rem;    /* horizontal padding */
  --mh-control-px-sm:      1rem;
  --mh-control-px-lg:      2rem;

  /* ---------------------------------------------------------------------
     ASPECT RATIOS — keeps image blocks from shifting layout while loading
     --------------------------------------------------------------------- */
  --mh-ratio-hero:         21 / 9;
  --mh-ratio-wide:         16 / 9;
  --mh-ratio-card:         4 / 3;
  --mh-ratio-portrait:     3 / 4;
  --mh-ratio-square:       1 / 1;

  /* ---------------------------------------------------------------------
     Z-INDEX — named layers stop the arms race of z-index: 9999
     --------------------------------------------------------------------- */
  --mh-z-base:             1;
  --mh-z-raised:           10;    /* overlays inside a card */
  --mh-z-sticky:           100;   /* sticky section headers */
  --mh-z-header:           500;
  --mh-z-dropdown:         800;
  --mh-z-modal:            1000;

  /* ---------------------------------------------------------------------
     FOCUS — accessibility, applied by every interactive component
     --------------------------------------------------------------------- */
  --mh-focus-width:        2px;
  --mh-focus-offset:       2px;
  --mh-focus-color:        var(--mh-primary);
}


/* ==========================================================================
   BREAKPOINTS (reference — CSS custom properties can't be used in @media)
   Match NOVA / Bootstrap 4 so child styles never fight the parent grid.

     sm   >= 576px    large phone
     md   >= 768px    tablet portrait
     lg   >= 992px    tablet landscape / small laptop
     xl   >= 1200px   desktop

   Write mobile-first: base rules are the mobile case, then add
   @media (min-width: 768px) { ... } to enhance upward.

   Because the tokens above are fluid, you will need far fewer of these —
   reach for a breakpoint only to change LAYOUT (column counts, stacking
   order, show/hide), never to resize type or spacing.
   ========================================================================== */


/* ==========================================================================
   MOTION PREFERENCE — honour users who ask for reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --mh-duration-fast: 1ms;
    --mh-duration:      1ms;
    --mh-duration-slow: 1ms;
    --mh-lift:          0;
  }
}


/* ==========================================================================
   COMPONENT: SECTION HEADING
   Two-weight uppercase heading — "FÜR DEINE PROFESSIONELLE AUSBILDUNG"

   OPC usage — Überschrift portlet, level H2, class "meininghaus-heading":
     Für deine <strong>professionelle Ausbildung</strong>

   The <strong> carries the bold half; text-transform handles the caps,
   so you can type the text in normal sentence case.
   ========================================================================== */

h2.meininghaus-heading,
.meininghaus-heading > h2 {
  /* 20px -> 28px, fluid: replaces the two stepped media queries */
  font-size: clamp(1.25rem, 1.2vw + 0.9rem, 1.75rem);
  font-family: var(--mh-font-heading);
  font-weight: var(--mh-weight-normal);
  color: var(--mh-primary);
  text-transform: uppercase;
  letter-spacing: var(--mh-tracking-wide);
  line-height: var(--mh-leading-snug);
  margin: 0 0 var(--mh-space-md);
}

h2.meininghaus-heading strong,
h2.meininghaus-heading b,
.meininghaus-heading > h2 strong,
.meininghaus-heading > h2 b {
  font-weight: var(--mh-weight-bold);
}

/* Tighter tracking on small screens so long headings don't wrap awkwardly */
@media (max-width: 767px) {
  h2.meininghaus-heading,
  .meininghaus-heading > h2 {
    letter-spacing: 0.03em;
  }
}

/* Centered variant — add class "is-centered" alongside */
.meininghaus-heading.is-centered,
.meininghaus-heading.is-centered > h2 {
  text-align: center;
}

/* Ink variant — dark heading instead of burgundy, for busy backgrounds */
.meininghaus-heading.is-ink,
.meininghaus-heading.is-ink > h2 {
  color: var(--mh-ink);
}


/* ==========================================================================
   PART 2 — BASE & TYPOGRAPHY
   ========================================================================== */

/* --------------------------------------------------------------------------
   2.1  Global brand layer

   Only properties safe to apply shop-wide. Sizing, tracking and transforms
   are deliberately NOT set here — NOVA tunes those for product titles,
   cart, and checkout, and overriding them globally breaks that UI.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mh-font-heading);
  color: var(--mh-ink);
}

/* --------------------------------------------------------------------------
   2.2  Heading display classes

   Opt-in, and independent of the tag. Use .mh-h1 on an h2 when the visual
   needs to be large but the document outline needs h2 — correct heading
   order matters for screen readers and SEO.
   -------------------------------------------------------------------------- */

.mh-h1, .mh-h2, .mh-h3, .mh-h4 {
  font-family: var(--mh-font-heading);
  color: var(--mh-ink);
  margin: 0 0 var(--mh-space-md);
  text-wrap: balance;   /* avoids a single orphaned word on the last line */
}

.mh-h1 {
  font-size: var(--mh-text-3xl);
  font-weight: var(--mh-weight-bold);
  line-height: var(--mh-leading-tight);
  letter-spacing: var(--mh-tracking-tight);
}

.mh-h2 {
  font-size: var(--mh-text-2xl);
  font-weight: var(--mh-weight-bold);
  line-height: var(--mh-leading-snug);
}

.mh-h3 {
  font-size: var(--mh-text-xl);
  font-weight: var(--mh-weight-semibold);
  line-height: var(--mh-leading-snug);
  margin-bottom: var(--mh-space-sm);
}

.mh-h4 {
  font-size: var(--mh-text-md);
  font-weight: var(--mh-weight-semibold);
  line-height: var(--mh-leading-normal);
  margin-bottom: var(--mh-space-xs);
}

/* Two-weight pattern — works on any heading class, same as the
   .meininghaus-heading component: type "Die <strong>Salons</strong>" */
.mh-h1 strong, .mh-h1 b,
.mh-h2 strong, .mh-h2 b,
.mh-h3 strong, .mh-h3 b {
  font-weight: var(--mh-weight-bold);
}

.mh-h1, .mh-h2 {
  font-weight: var(--mh-weight-light);
}

/* Uppercase + burgundy modifiers, composable with any heading class */
.mh-upper {
  text-transform: uppercase;
  letter-spacing: var(--mh-tracking-wide);
}

.mh-brand  { color: var(--mh-primary); }
.mh-ink    { color: var(--mh-ink); }
.mh-invert { color: var(--mh-surface); }

/* --------------------------------------------------------------------------
   2.3  Eyebrow — small uppercase label above a heading
   -------------------------------------------------------------------------- */

.mh-eyebrow {
  display: block;
  font-family: var(--mh-font-heading);
  font-size: var(--mh-text-xs);
  font-weight: var(--mh-weight-semibold);
  letter-spacing: var(--mh-tracking-wider);
  text-transform: uppercase;
  color: var(--mh-primary);
  margin-bottom: var(--mh-space-2xs);
}

/* Boxed variant — burgundy chip, as used over the hero slides */
.mh-eyebrow.is-boxed {
  display: inline-block;
  background: var(--mh-primary);
  color: var(--mh-surface);
  padding: var(--mh-space-2xs) var(--mh-space-xs);
  border-radius: var(--mh-radius-sm);
}

/* --------------------------------------------------------------------------
   2.4  Body copy
   -------------------------------------------------------------------------- */

.mh-lead {
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-lg);
  font-weight: var(--mh-weight-normal);
  line-height: var(--mh-leading-normal);
  color: var(--mh-body);
  max-width: var(--mh-measure);
  margin: 0 0 var(--mh-space-md);
}

.mh-text {
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-base);
  line-height: var(--mh-leading-relaxed);
  color: var(--mh-body);
  margin: 0 0 var(--mh-space-sm);
}

.mh-meta {
  font-size: var(--mh-text-sm);
  line-height: var(--mh-leading-normal);
  color: var(--mh-muted);
}

.mh-meta.is-italic { font-style: italic; }

/* --------------------------------------------------------------------------
   2.5  Prose — scoped rich-text wrapper

   Put class "mh-prose" on a Rich Text portlet (or the Container holding it)
   and everything inside is styled without touching a single inner element.
   This is the replacement for the old WordPress "fliesstext" class.
   -------------------------------------------------------------------------- */

.mh-prose {
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-base);
  line-height: var(--mh-leading-relaxed);
  color: var(--mh-body);
  max-width: var(--mh-measure);
}

.mh-prose.is-full { max-width: none; }

/* Vertical rhythm via the owl selector: space BETWEEN children only, so
   the block never carries stray margin at its top or bottom edge. */
.mh-prose > * + * {
  margin-top: var(--mh-space-sm);
}

.mh-prose > * {
  margin-bottom: 0;
}

.mh-prose h2,
.mh-prose h3,
.mh-prose h4 {
  color: var(--mh-ink);
  line-height: var(--mh-leading-snug);
}

.mh-prose h2 { font-size: var(--mh-text-2xl); font-weight: var(--mh-weight-bold); }
.mh-prose h3 { font-size: var(--mh-text-xl);  font-weight: var(--mh-weight-semibold); }
.mh-prose h4 { font-size: var(--mh-text-md);  font-weight: var(--mh-weight-semibold); }

/* Headings need more space above than below — they belong to what follows */
.mh-prose > h2 + *,
.mh-prose > h3 + *,
.mh-prose > h4 + * {
  margin-top: var(--mh-space-xs);
}

.mh-prose > * + h2,
.mh-prose > * + h3,
.mh-prose > * + h4 {
  margin-top: var(--mh-space-lg);
}

.mh-prose strong,
.mh-prose b {
  font-weight: var(--mh-weight-semibold);
  color: var(--mh-ink);
}

.mh-prose a {
  color: var(--mh-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: var(--mh-transition);
}

.mh-prose a:hover {
  color: var(--mh-primary-dark);
}

.mh-prose ul,
.mh-prose ol {
  padding-left: var(--mh-space-md);
}

.mh-prose li + li {
  margin-top: var(--mh-space-3xs);
}

.mh-prose ul { list-style: disc; }
.mh-prose ol { list-style: decimal; }

.mh-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--mh-radius);
}

.mh-prose blockquote {
  border-left: var(--mh-border-strong);
  padding-left: var(--mh-space-md);
  font-size: var(--mh-text-lg);
  font-style: italic;
  color: var(--mh-ink);
}

.mh-prose hr {
  border: 0;
  border-top: var(--mh-border);
  margin-top: var(--mh-space-lg);
}

/* Inverted prose, for use on brand / image backgrounds */
.mh-prose.is-invert,
.mh-prose.is-invert h2,
.mh-prose.is-invert h3,
.mh-prose.is-invert h4,
.mh-prose.is-invert strong {
  color: var(--mh-surface);
}

.mh-prose.is-invert a {
  color: var(--mh-accent);
}

/* --------------------------------------------------------------------------
   2.6  Measure & balance utilities
   -------------------------------------------------------------------------- */

.mh-measure        { max-width: var(--mh-measure); }
.mh-measure-narrow { max-width: 45ch; }
.mh-measure-none   { max-width: none; }

/* Center a constrained text block */
.mh-measure.is-centered,
.mh-measure-narrow.is-centered {
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================================
   PART 3 — LAYOUT PRIMITIVES
   Three classes cover the skeleton of every page: section, container, stack.
   ========================================================================== */

/* --------------------------------------------------------------------------
   3.1  Section — the vertical rhythm unit

   One section per band of content. Padding is fluid, so mobile spacing
   needs no separate rule.
   -------------------------------------------------------------------------- */

.mh-section {
  padding-top: var(--mh-section-y);
  padding-bottom: var(--mh-section-y);
  position: relative;
}

.mh-section.is-tight {
  padding-top: var(--mh-section-y-sm);
  padding-bottom: var(--mh-section-y-sm);
}

.mh-section.is-loose {
  padding-top: var(--mh-section-y-lg);
  padding-bottom: var(--mh-section-y-lg);
}

/* Flush — zero padding. For full-bleed heroes and edge-to-edge images. */
.mh-section.is-flush {
  padding-top: 0;
  padding-bottom: 0;
}

/* Half-flush — for two sections that should read as one block */
.mh-section.is-flush-top    { padding-top: 0; }
.mh-section.is-flush-bottom { padding-bottom: 0; }

/* Background variants (expanded in Part 7) */
.mh-section.is-alt   { background-color: var(--mh-surface-alt); }
.mh-section.is-tint  { background-color: var(--mh-primary-tint); }

.mh-section.is-brand {
  background: linear-gradient(135deg,
              var(--mh-primary) 0%,
              var(--mh-primary-dark) 100%);
  color: var(--mh-surface);
}

.mh-section.is-brand :is(h1, h2, h3, h4, .mh-h1, .mh-h2, .mh-h3, .mh-h4) {
  color: var(--mh-surface);
}

/* Consecutive same-colour sections would show a seam of doubled padding —
   collapse it so they read as one continuous band. */
.mh-section.is-alt + .mh-section.is-alt,
.mh-section.is-tint + .mh-section.is-tint {
  padding-top: 0;
}

/* --------------------------------------------------------------------------
   3.2  Container — horizontal constraint

   Four widths. Gutter is fluid and never drops below 16px, so content
   never touches the screen edge on a phone.
   -------------------------------------------------------------------------- */

.mh-container {
  width: 100%;
  max-width: var(--mh-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mh-gutter);
  padding-right: var(--mh-gutter);
}

.mh-container.is-narrow { max-width: var(--mh-container-narrow); }
.mh-container.is-text   { max-width: var(--mh-container-text); }
.mh-container.is-wide   { max-width: var(--mh-container-wide); }

/* Full — spans the viewport but keeps the gutter */
.mh-container.is-full   { max-width: none; }

/* Bleed — no gutter at all, for edge-to-edge media */
.mh-container.is-bleed {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Escape a parent container to reach the full viewport width.
   Requires `overflow-x: hidden` on a wrapper to avoid a scrollbar. */
.mh-full-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}

/* --------------------------------------------------------------------------
   3.3  Stack — vertical spacing between siblings

   The workhorse for OPC. Portlets drop in as siblings with no margin
   control of their own; wrap them in a Container portlet with class
   "mh-stack" and they space themselves evenly.
   -------------------------------------------------------------------------- */

.mh-stack > * + * {
  margin-top: var(--mh-stack);
}

.mh-stack.is-tight > * + * { margin-top: var(--mh-space-sm); }
.mh-stack.is-xtight > * + * { margin-top: var(--mh-space-2xs); }
.mh-stack.is-loose > * + * { margin-top: var(--mh-space-xl); }

/* Flush variant — removes spacing entirely, e.g. stacked full-width images */
.mh-stack.is-flush > * + * { margin-top: 0; }

/* --------------------------------------------------------------------------
   3.4  Center — constrained, centered content block
   -------------------------------------------------------------------------- */

.mh-center {
  text-align: center;
}

.mh-center > * {
  margin-left: auto;
  margin-right: auto;
}

/* Text-only centering, without centering child block boxes */
.mh-text-center { text-align: center; }
.mh-text-left   { text-align: left; }
.mh-text-right  { text-align: right; }

@media (max-width: 767px) {
  /* Justified text produces rivers of whitespace at phone widths */
  .mh-text-justify { text-align: left; }
}

@media (min-width: 768px) {
  .mh-text-justify { text-align: justify; hyphens: auto; }
}

/* --------------------------------------------------------------------------
   3.5  Divider
   -------------------------------------------------------------------------- */

.mh-divider {
  border: 0;
  border-top: var(--mh-border);
  margin: 0;
}

.mh-divider.is-brand {
  border-top: var(--mh-border-strong);
  width: 60px;
}

.mh-divider.is-brand.is-centered {
  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================================
   PART 4 — GRID
   Two approaches: fixed column counts (predictable, needs breakpoints) and
   auto-fit (breakpoint-free, columns decided by available space).
   ========================================================================== */

.mh-grid {
  display: grid;
  gap: var(--mh-gap);
  grid-template-columns: 1fr;   /* mobile default for every variant */
}

.mh-grid.is-gap-sm   { gap: var(--mh-gap-sm); }
.mh-grid.is-gap-lg   { gap: var(--mh-gap-lg); }
.mh-grid.is-gap-none { gap: 0; }

/* Row and column gaps can differ — useful when cards have captions below */
.mh-grid.is-gap-rows-lg { row-gap: var(--mh-gap-lg); }

/* --------------------------------------------------------------------------
   4.1  Auto-fit — no breakpoints needed

   Columns are created from available width. Override the minimum per
   instance with an inline style:
     <div class="mh-grid mh-grid-auto" style="--mh-grid-min: 20rem">
   -------------------------------------------------------------------------- */

.mh-grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(var(--mh-grid-min, 16rem), 1fr));
}

/* Presets for common minimums */
.mh-grid-auto.is-min-sm { --mh-grid-min: 12rem; }   /* logos, small tiles */
.mh-grid-auto.is-min-lg { --mh-grid-min: 22rem; }   /* text-heavy cards */

/* --------------------------------------------------------------------------
   4.2  Fixed column counts — mobile-first, collapsing upward
   -------------------------------------------------------------------------- */

@media (min-width: 576px) {
  .mh-grid-3,
  .mh-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .mh-grid-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .mh-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .mh-grid-4 { grid-template-columns: repeat(3, 1fr); }
  .mh-grid-6 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 992px) {
  .mh-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .mh-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .mh-grid-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Two-column that stays side by side even on phones — for paired stats */
.mh-grid-2.is-always { grid-template-columns: repeat(2, 1fr); }

/* --------------------------------------------------------------------------
   4.3  Split — asymmetric two-column, for image + text sections
   -------------------------------------------------------------------------- */

.mh-split {
  display: grid;
  gap: var(--mh-gap-lg);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 992px) {
  .mh-split            { grid-template-columns: 1fr 1fr; }
  .mh-split.is-40-60   { grid-template-columns: 4fr 6fr; }
  .mh-split.is-60-40   { grid-template-columns: 6fr 4fr; }
  .mh-split.is-33-66   { grid-template-columns: 1fr 2fr; }
  .mh-split.is-66-33   { grid-template-columns: 2fr 1fr; }

  /* Reverse visual order without changing source order — keeps the reading
     order correct for screen readers and keeps mobile stacking sensible. */
  .mh-split.is-reversed > *:first-child { order: 2; }
  .mh-split.is-reversed > *:last-child  { order: 1; }
}

.mh-split.is-top    { align-items: start; }
.mh-split.is-bottom { align-items: end; }

/* --------------------------------------------------------------------------
   4.4  Grid item spans
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  .mh-span-2 { grid-column: span 2; }
  .mh-span-3 { grid-column: span 3; }
  .mh-span-full { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   4.5  Cluster — horizontal wrapping row (nav pills, tags, button groups)
   -------------------------------------------------------------------------- */

.mh-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-space-xs);
  align-items: center;
}

.mh-cluster.is-centered { justify-content: center; }
.mh-cluster.is-end      { justify-content: flex-end; }
.mh-cluster.is-between  { justify-content: space-between; }
.mh-cluster.is-gap-lg   { gap: var(--mh-space-md); }


/* ==========================================================================
   PART 6 — CARDS
   One base card plus three purpose-built variants: team member, salon,
   and feature. All share the same media / body / title anatomy.
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.1  Base card
   -------------------------------------------------------------------------- */

.mh-card {
  display: flex;
  flex-direction: column;
  height: 100%;              /* equal heights across a grid row */
  background: var(--mh-surface);
  border: var(--mh-border);
  border-radius: var(--mh-radius);
  overflow: hidden;          /* clips the media zoom on hover */
  transition: var(--mh-transition);
}

.mh-card:hover {
  transform: translateY(var(--mh-lift));
  border-color: var(--mh-primary);
  box-shadow: var(--mh-shadow);
}

/* Variants */
.mh-card.is-flat:hover   { transform: none; box-shadow: none; }
.mh-card.is-borderless   { border-color: transparent; }
.mh-card.is-elevated     { border-color: transparent; box-shadow: var(--mh-shadow-sm); }
.mh-card.is-elevated:hover { box-shadow: var(--mh-shadow-lg); }
.mh-card.is-alt          { background: var(--mh-surface-alt); }

/* --------------------------------------------------------------------------
   6.2  Card media

   aspect-ratio reserves the space before the image loads, so the grid
   doesn't jump — important with OPC's lazy-loaded, srcset images.
   -------------------------------------------------------------------------- */

.mh-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--mh-ratio-card);
  background: var(--mh-surface-sunken);
}

/* Matches both a bare <img> and OPC's wrapped output */
.mh-card__media img,
.mh-card__media picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--mh-duration-slow) var(--mh-ease);
}

.mh-card:hover .mh-card__media img {
  transform: scale(1.04);
}

.mh-card__media.is-portrait { aspect-ratio: var(--mh-ratio-portrait); }
.mh-card__media.is-wide     { aspect-ratio: var(--mh-ratio-wide); }
.mh-card__media.is-square   { aspect-ratio: var(--mh-ratio-square); }
.mh-card__media.is-auto     { aspect-ratio: auto; }

/* Contain instead of cover — for logos and product shots on white */
.mh-card__media.is-contain img {
  object-fit: contain;
  padding: var(--mh-space-sm);
}

/* --------------------------------------------------------------------------
   6.3  Card body
   -------------------------------------------------------------------------- */

.mh-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;            /* fills remaining height */
  padding: var(--mh-space-md);
  gap: var(--mh-space-2xs);
}

.mh-card__body.is-tight { padding: var(--mh-space-sm); }
.mh-card__body.is-loose { padding: var(--mh-space-lg); }

.mh-card__title {
  font-family: var(--mh-font-heading);
  font-size: var(--mh-text-md);
  font-weight: var(--mh-weight-semibold);
  line-height: var(--mh-leading-snug);
  color: var(--mh-ink);
  margin: 0;
}

.mh-card__subtitle {
  font-size: var(--mh-text-sm);
  font-weight: var(--mh-weight-semibold);
  color: var(--mh-primary);
  margin: 0;
}

.mh-card__text {
  font-family: var(--mh-font-body);
  font-size: var(--mh-text-sm);
  line-height: var(--mh-leading-normal);
  color: var(--mh-body);
  margin: 0;
}

/* Footer pins to the bottom, so buttons align across a row of cards
   regardless of how much text each one carries. */
.mh-card__footer {
  margin-top: auto;
  padding-top: var(--mh-space-sm);
}

/* --------------------------------------------------------------------------
   6.4  Link card — whole card clickable

   The stretched pseudo-element keeps the <a> wrapping only the title in
   markup (good for screen readers and link lists) while making the full
   card area the hit target.
   -------------------------------------------------------------------------- */

.mh-card.is-link {
  position: relative;
}

.mh-card.is-link .mh-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--mh-z-raised);
}

.mh-card.is-link .mh-card__title a {
  color: inherit;
  text-decoration: none;
}

.mh-card.is-link:focus-within {
  outline: var(--mh-focus-width) solid var(--mh-focus-color);
  outline-offset: var(--mh-focus-offset);
}

/* --------------------------------------------------------------------------
   6.5  Team member card

   Replaces the WordPress .MitarbeiterDiv / .MitarbeiterHover pair.
   Portrait image, burgundy wash on hover, name and role beneath.
   -------------------------------------------------------------------------- */

.mh-person {
  text-align: center;
}

.mh-person__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--mh-ratio-portrait);
  background: var(--mh-surface-sunken);
  border-radius: var(--mh-radius);
  margin-bottom: var(--mh-space-sm);
}

.mh-person__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transition: filter var(--mh-duration) var(--mh-ease),
              transform var(--mh-duration-slow) var(--mh-ease);
}

/* Burgundy wash sits above the image, below any overlay text */
.mh-person__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mh-primary);
  opacity: 0;
  transition: opacity var(--mh-duration) var(--mh-ease);
  mix-blend-mode: multiply;
}

.mh-person:hover .mh-person__media img {
  filter: grayscale(0);
  transform: scale(1.04);
}

.mh-person:hover .mh-person__media::after {
  opacity: 0.25;
}

.mh-person__name {
  font-family: var(--mh-font-heading);
  font-size: var(--mh-text-md);
  font-weight: var(--mh-weight-semibold);
  line-height: var(--mh-leading-snug);
  color: var(--mh-ink);
  margin: 0 0 var(--mh-space-3xs);
}

.mh-person__role {
  font-size: var(--mh-text-sm);
  line-height: var(--mh-leading-normal);
  color: var(--mh-muted);
  margin: 0;
}

/* Colour photos instead of grayscale-to-colour */
.mh-person.is-color .mh-person__media img { filter: none; }

/* --------------------------------------------------------------------------
   6.6  Salon card — heading above the image

   Matches the Forchheim / Bamberg / München blocks: title, image,
   address lines, then an external link.
   -------------------------------------------------------------------------- */

.mh-place {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
}

.mh-place__title {
  font-family: var(--mh-font-heading);
  font-size: var(--mh-text-xl);
  font-weight: var(--mh-weight-semibold);
  color: var(--mh-primary);
  margin: 0 0 var(--mh-space-xs);
}

.mh-place__media {
  overflow: hidden;
  aspect-ratio: var(--mh-ratio-wide);
  border-radius: var(--mh-radius);
  background: var(--mh-surface-sunken);
  margin-bottom: var(--mh-space-sm);
}

.mh-place__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--mh-duration-slow) var(--mh-ease);
}

.mh-place:hover .mh-place__media img {
  transform: scale(1.04);
}

.mh-place__text {
  font-size: var(--mh-text-sm);
  line-height: var(--mh-leading-relaxed);
  color: var(--mh-body);
  margin: 0 0 var(--mh-space-sm);
}

.mh-place__link {
  margin-top: auto;          /* aligns links across the row */
  font-size: var(--mh-text-sm);
  font-weight: var(--mh-weight-semibold);
  color: var(--mh-primary);
  text-decoration: none;
  word-break: break-word;    /* long domains must not overflow the card */
}

.mh-place__link:hover {
  color: var(--mh-primary-dark);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   6.7  Feature card — text only, inverts on hover
   -------------------------------------------------------------------------- */

.mh-feature {
  padding: var(--mh-space-md);
  background: var(--mh-surface);
  border: var(--mh-border);
  border-radius: var(--mh-radius);
  text-align: center;
  height: 100%;
  transition: var(--mh-transition);
}

.mh-feature:hover {
  background: var(--mh-primary);
  border-color: var(--mh-primary);
  transform: translateY(var(--mh-lift));
  box-shadow: var(--mh-shadow);
}

.mh-feature__title {
  font-family: var(--mh-font-heading);
  font-size: var(--mh-text-md);
  font-weight: var(--mh-weight-semibold);
  color: var(--mh-ink);
  margin: 0 0 var(--mh-space-2xs);
  transition: color var(--mh-duration) var(--mh-ease);
}

.mh-feature__text {
  font-size: var(--mh-text-sm);
  line-height: var(--mh-leading-normal);
  color: var(--mh-body);
  margin: 0;
  transition: color var(--mh-duration) var(--mh-ease);
}

.mh-feature:hover .mh-feature__title,
.mh-feature:hover .mh-feature__text {
  color: var(--mh-surface);
}

/* --------------------------------------------------------------------------
   6.8  Caption — image with text beneath, outside a card
   -------------------------------------------------------------------------- */

.mh-figure {
  margin: 0;
}

.mh-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--mh-radius);
}

.mh-figure__caption {
  font-size: var(--mh-text-sm);
  line-height: var(--mh-leading-normal);
  color: var(--mh-muted);
  margin-top: var(--mh-space-2xs);
  text-align: center;
}


/* ==========================================================================
   PART 5 — BUTTONS

   The Schaltfläche portlet emits <a class="btn btn-primary">, so every rule
   is written twice: bare .mh-button, and .btn.mh-button to out-specify
   Bootstrap's .btn-primary. No !important needed — equal specificity, and
   this stylesheet loads after NOVA's.
   ========================================================================== */

.mh-button,
.btn.mh-button {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mh-space-2xs);
  min-height: var(--mh-control-height);   /* 44px touch target */
  padding: var(--mh-space-2xs) var(--mh-control-px);

  /* Type */
  font-family: var(--mh-font-heading);
  font-size: var(--mh-text-sm);
  font-weight: var(--mh-weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--mh-tracking-wide);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  /* Skin */
  color: var(--mh-surface);
  background-color: var(--mh-primary);
  border: 2px solid var(--mh-primary);
  border-radius: var(--mh-radius-sm);

  cursor: pointer;
  transition: var(--mh-transition);
}

.mh-button:hover,
.btn.mh-button:hover {
  color: var(--mh-surface);
  background-color: var(--mh-primary-dark);
  border-color: var(--mh-primary-dark);
  transform: translateY(var(--mh-lift));
  text-decoration: none;
}

.mh-button:active,
.btn.mh-button:active {
  transform: translateY(0);
}

.mh-button:focus-visible,
.btn.mh-button:focus-visible {
  outline: var(--mh-focus-width) solid var(--mh-focus-color);
  outline-offset: var(--mh-focus-offset);
}

.mh-button:disabled,
.mh-button.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5.1  Variants
   -------------------------------------------------------------------------- */

/* Outline */
.mh-button.is-outline,
.btn.mh-button.is-outline {
  color: var(--mh-primary);
  background-color: transparent;
  border-color: var(--mh-primary);
}

.mh-button.is-outline:hover,
.btn.mh-button.is-outline:hover {
  color: var(--mh-surface);
  background-color: var(--mh-primary);
}

/* White — for brand and image backgrounds */
.mh-button.is-white,
.btn.mh-button.is-white {
  color: var(--mh-primary);
  background-color: var(--mh-surface);
  border-color: var(--mh-surface);
}

.mh-button.is-white:hover,
.btn.mh-button.is-white:hover {
  color: var(--mh-surface);
  background-color: transparent;
  border-color: var(--mh-surface);
}

/* Ghost — minimal, for secondary actions in tight layouts */
.mh-button.is-ghost,
.btn.mh-button.is-ghost {
  color: var(--mh-primary);
  background-color: transparent;
  border-color: transparent;
}

.mh-button.is-ghost:hover,
.btn.mh-button.is-ghost:hover {
  color: var(--mh-primary-dark);
  background-color: var(--mh-primary-tint);
  border-color: var(--mh-primary-tint);
  transform: none;
}

/* Dark */
.mh-button.is-dark,
.btn.mh-button.is-dark {
  background-color: var(--mh-ink);
  border-color: var(--mh-ink);
}

.mh-button.is-dark:hover,
.btn.mh-button.is-dark:hover {
  background-color: var(--mh-black);
  border-color: var(--mh-black);
}

/* --------------------------------------------------------------------------
   5.2  Sizes
   -------------------------------------------------------------------------- */

.mh-button.is-sm,
.btn.mh-button.is-sm {
  min-height: 2.25rem;
  padding: var(--mh-space-3xs) var(--mh-control-px-sm);
  font-size: var(--mh-text-xs);
}

.mh-button.is-lg,
.btn.mh-button.is-lg {
  min-height: 3.25rem;
  padding: var(--mh-space-xs) var(--mh-control-px-lg);
  font-size: var(--mh-text-base);
}

/* --------------------------------------------------------------------------
   5.3  Width

   Full-width is opt-in, never automatic — a forced 100% breaks button rows
   and makes short labels look like banners.
   -------------------------------------------------------------------------- */

.mh-button.is-block,
.btn.mh-button.is-block {
  display: flex;
  width: 100%;
}

@media (max-width: 575px) {
  .mh-button.is-block-mobile,
  .btn.mh-button.is-block-mobile {
    display: flex;
    width: 100%;
  }
}

/* Long labels must wrap rather than overflow on narrow screens */
@media (max-width: 575px) {
  .mh-button,
  .btn.mh-button {
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   5.4  Text link with arrow
   Replaces the "-> ganzen Artikel lesen" pattern.
   -------------------------------------------------------------------------- */

.mh-link {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-space-3xs);
  font-family: var(--mh-font-heading);
  font-size: var(--mh-text-sm);
  font-weight: var(--mh-weight-semibold);
  color: var(--mh-primary);
  text-decoration: none;
  transition: var(--mh-transition);
}

.mh-link::after {
  content: "\2192";              /* → */
  transition: transform var(--mh-duration) var(--mh-ease);
}

.mh-link:hover {
  color: var(--mh-primary-dark);
}

.mh-link:hover::after {
  transform: translateX(3px);
}

.mh-link.is-invert { color: var(--mh-accent); }

/* --------------------------------------------------------------------------
   5.5  Brand-align NOVA's shop buttons

   Optional. Keep this block so add-to-cart, checkout and account buttons
   match the brand; delete it to leave NOVA's own button styling alone.
   -------------------------------------------------------------------------- */

.btn-primary {
  background-color: var(--mh-primary);
  border-color: var(--mh-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--mh-primary-dark);
  border-color: var(--mh-primary-dark);
}

.btn-outline-primary {
  color: var(--mh-primary);
  border-color: var(--mh-primary);
}

.btn-outline-primary:hover {
  background-color: var(--mh-primary);
  border-color: var(--mh-primary);
}

/* Bootstrap's focus ring is a blue box-shadow — retint it */
.btn-primary:focus,
.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 9, 36, 0.25);
}

a { color: var(--mh-primary); }
a:hover { color: var(--mh-primary-dark); }


/* ==========================================================================
   PART 7 — BACKGROUND SECTIONS
   Flat colour bands live in Part 3. This part covers image grounds, heroes,
   and the overlay technique for putting text on the Bilder-Slider.
   ========================================================================== */

/* --------------------------------------------------------------------------
   7.1  Image background section

   Set the image inline; tune the scrim per instance:
     <section class="mh-section is-image is-loose"
              style="background-image: url('/media/image/opc/xl/hero.jpg');
                     --mh-overlay: 0.55">
   -------------------------------------------------------------------------- */

.mh-section.is-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--mh-surface);
  isolation: isolate;        /* keeps the scrim behind content, not the page */
}

/* Dark scrim — without it, text legibility depends on whichever image is
   loaded, which is not something you can rely on. */
.mh-section.is-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--mh-overlay, 0.45));
  z-index: -1;
}

.mh-section.is-image :is(h1, h2, h3, h4, p,
                         .mh-h1, .mh-h2, .mh-h3, .mh-h4) {
  color: var(--mh-surface);
}

/* Gradient scrim instead of flat — text bottom-left, image visible top-right */
.mh-section.is-image.is-scrim-bottom::before {
  background: var(--mh-scrim);
}

/* Burgundy wash instead of black */
.mh-section.is-image.is-scrim-brand::before {
  background: rgba(130, 9, 36, var(--mh-overlay, 0.6));
}

/* No scrim — only for images shot with a deliberate empty area for text */
.mh-section.is-image.is-scrim-none::before {
  display: none;
}

/* background-attachment: fixed is ignored on iOS and janky elsewhere.
   Apply it on pointer devices only, and treat it as decoration. */
@media (min-width: 992px) and (hover: hover) {
  .mh-section.is-image.is-fixed {
    background-attachment: fixed;
  }
}

/* Fixed background positions the image relative to the viewport, so any
   parallax effect breaks once the section can scroll past it. Cap the height
   to keep the framing sane. */
.mh-section.is-image.is-fixed {
  background-position: center center;
}

/* --------------------------------------------------------------------------
   7.2  Hero — full-width image with text over it

   The static counterpart to the slider. Use for section landing pages
   (Ausbildung, Weiterbildung, Prüfung) where there is only one image.
   -------------------------------------------------------------------------- */

.mh-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(18rem, 45vw, 34rem);   /* 288px -> 544px */
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
}

.mh-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mh-scrim);
  z-index: -1;
}

.mh-hero__content {
  width: 100%;
  max-width: var(--mh-container);
  margin: 0 auto;
  padding: var(--mh-section-y) var(--mh-gutter);
  color: var(--mh-surface);
}

.mh-hero__title {
  font-family: var(--mh-font-heading);
  font-size: var(--mh-text-hero);
  font-weight: var(--mh-weight-bold);
  line-height: var(--mh-leading-tight);
  color: var(--mh-surface);
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}

.mh-hero__text {
  font-size: var(--mh-text-lg);
  line-height: var(--mh-leading-normal);
  color: var(--mh-surface);
  margin: var(--mh-space-sm) 0 0;
  max-width: 50ch;
}

/* Alignment variants */
.mh-hero.is-centered              { align-items: center; }
.mh-hero.is-centered .mh-hero__content { text-align: center; }
.mh-hero.is-centered .mh-hero__title,
.mh-hero.is-centered .mh-hero__text {
  margin-left: auto;
  margin-right: auto;
}

.mh-hero.is-top { align-items: flex-start; }

/* Height variants */
.mh-hero.is-sm { min-height: clamp(12rem, 28vw, 20rem); }
.mh-hero.is-lg { min-height: clamp(22rem, 60vw, 44rem); }

/* --------------------------------------------------------------------------
   7.3  Slider overlay

   The Bilder-Slider portlet renders images only — the Titel and Beschreibung
   fields never reach the front-end. To get text over the slides, drop a
   Rich Text portlet directly after the slider inside a Container carrying
   "mh-slider-overlay", then mark the text block "mh-slider-overlay__content".

   pointer-events: none on the overlay lets clicks pass through to the
   slider's own arrows and pause button; the inner content re-enables them
   for its links.
   -------------------------------------------------------------------------- */

.mh-slider-overlay {
  position: relative;
  isolation: isolate;
}

.mh-slider-overlay__content {
  position: absolute;
  inset: 0;
  z-index: var(--mh-z-raised);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--mh-space-2xs);
  max-width: var(--mh-container);
  margin: 0 auto;
  padding: var(--mh-space-lg) var(--mh-gutter);
  color: var(--mh-surface);
  pointer-events: none;
}

.mh-slider-overlay__content > * {
  pointer-events: auto;
}

/* Scrim over the slides so overlay text stays readable on any image */
.mh-slider-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mh-scrim);
  z-index: var(--mh-z-base);
  pointer-events: none;
}

.mh-slider-overlay.is-scrim-none::after {
  display: none;
}

/* Position variants */
.mh-slider-overlay__content.is-centered {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mh-slider-overlay__content.is-top { justify-content: flex-start; }

/* --- Splide (the slider library NOVA ships) brand styling --------------- */

.splide__arrow {
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--mh-radius-sm);
  width: 2.75rem;
  height: 2.75rem;
  opacity: 1;
  transition: var(--mh-transition);
}

.splide__arrow:hover:not(:disabled) {
  background: var(--mh-primary);
}

.splide__arrow svg {
  fill: var(--mh-surface);
  width: 1.1rem;
  height: 1.1rem;
}

.splide__pagination__page.is-active {
  background: var(--mh-primary);
}

/* The pause control sits on top of the image — give it contrast */
.slider-pause-btn {
  background: rgba(0, 0, 0, 0.35);
  border: 0;
  color: var(--mh-surface);
}

.slider-pause-btn:hover {
  background: var(--mh-primary);
  color: var(--mh-surface);
}

/* Slider images: hold the aspect ratio so the page doesn't jump on load */
.mh-slider-overlay .splide__slide img,
.mh-hero-slider .splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mh-hero-slider .splide__slide {
  aspect-ratio: var(--mh-ratio-hero);
}

@media (max-width: 767px) {
  /* 21:9 is too letterboxed on a phone — crop to something usable */
  .mh-hero-slider .splide__slide {
    aspect-ratio: var(--mh-ratio-card);
  }
}

/* --------------------------------------------------------------------------
   7.4  Accent sections
   -------------------------------------------------------------------------- */

/* Top or bottom brand rule — separates bands without a heavy background */
.mh-section.is-rule-top    { border-top: var(--mh-border); }
.mh-section.is-rule-bottom { border-bottom: var(--mh-border); }

.mh-section.is-accent-top {
  border-top: 4px solid var(--mh-primary);
}

/* Split ground — colour behind the top half only, so a card or image
   straddles the boundary. Set the image/card as the section's child. */
.mh-section.is-split-ground {
  background: linear-gradient(
    to bottom,
    var(--mh-surface-alt) 0%,
    var(--mh-surface-alt) 55%,
    var(--mh-surface) 55%,
    var(--mh-surface) 100%
  );
}

.mh-section.is-split-ground.is-brand-ground {
  background: linear-gradient(
    to bottom,
    var(--mh-primary) 0%,
    var(--mh-primary) 55%,
    var(--mh-surface) 55%,
    var(--mh-surface) 100%
  );
}


/* ==========================================================================
   PART 9 — UTILITIES
   Deliberately small. Utilities are an escape hatch for one-off adjustments;
   if you reach for the same three every time, that belongs in a component.
   ========================================================================== */

/* --------------------------------------------------------------------------
   9.1  Spacing
   Only margin/padding on the block axis — horizontal spacing is the
   container's job, and side margins on OPC portlets break grid alignment.
   -------------------------------------------------------------------------- */

.mh-mt-0  { margin-top: 0 !important; }
.mh-mt-xs { margin-top: var(--mh-space-xs); }
.mh-mt-sm { margin-top: var(--mh-space-sm); }
.mh-mt-md { margin-top: var(--mh-space-md); }
.mh-mt-lg { margin-top: var(--mh-space-lg); }
.mh-mt-xl { margin-top: var(--mh-space-xl); }

.mh-mb-0  { margin-bottom: 0 !important; }
.mh-mb-xs { margin-bottom: var(--mh-space-xs); }
.mh-mb-sm { margin-bottom: var(--mh-space-sm); }
.mh-mb-md { margin-bottom: var(--mh-space-md); }
.mh-mb-lg { margin-bottom: var(--mh-space-lg); }
.mh-mb-xl { margin-bottom: var(--mh-space-xl); }

.mh-pt-0  { padding-top: 0 !important; }
.mh-pt-sm { padding-top: var(--mh-space-sm); }
.mh-pt-md { padding-top: var(--mh-space-md); }
.mh-pt-lg { padding-top: var(--mh-space-lg); }

.mh-pb-0  { padding-bottom: 0 !important; }
.mh-pb-sm { padding-bottom: var(--mh-space-sm); }
.mh-pb-md { padding-bottom: var(--mh-space-md); }
.mh-pb-lg { padding-bottom: var(--mh-space-lg); }

/* Inner padding on all sides — for boxed content inside a plain section */
.mh-p-sm { padding: var(--mh-space-sm); }
.mh-p-md { padding: var(--mh-space-md); }
.mh-p-lg { padding: var(--mh-space-lg); }

/* The zero utilities carry !important because their whole purpose is to
   defeat a portlet's own inline spacing. The rest do not. */

/* --------------------------------------------------------------------------
   9.2  Visibility

   OPC has no per-breakpoint show/hide. These fill that gap — most often
   for serving a different crop of the same image to phones.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .mh-hide-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .mh-hide-tablet { display: none !important; }
}

@media (min-width: 768px) {
  .mh-hide-desktop { display: none !important; }
}

/* Visible to screen readers only — for headings a section needs
   structurally but shouldn't show */
.mh-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   9.3  Size & media
   -------------------------------------------------------------------------- */

.mh-w-full { width: 100%; }
.mh-mx-auto { margin-left: auto; margin-right: auto; }

/* Constrain a runaway OPC image */
.mh-img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Crop an image to a ratio — pair with is-* from the token set */
.mh-ratio {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--mh-ratio-wide);
  background: var(--mh-surface-sunken);
}

.mh-ratio > img,
.mh-ratio > picture img,
.mh-ratio > iframe,
.mh-ratio > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

.mh-ratio.is-hero     { aspect-ratio: var(--mh-ratio-hero); }
.mh-ratio.is-card     { aspect-ratio: var(--mh-ratio-card); }
.mh-ratio.is-portrait { aspect-ratio: var(--mh-ratio-portrait); }
.mh-ratio.is-square   { aspect-ratio: var(--mh-ratio-square); }

.mh-rounded { border-radius: var(--mh-radius); }
.mh-shadow  { box-shadow: var(--mh-shadow); }

/* --------------------------------------------------------------------------
   9.4  Order — reorder stacked blocks on mobile

   Lets an image appear above its text on a phone while sitting to the right
   on desktop, without duplicating the content.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .mh-order-first-mobile { order: -1; }
  .mh-order-last-mobile  { order: 99; }
}

/* --------------------------------------------------------------------------
   9.5  Print
   -------------------------------------------------------------------------- */

@media print {
  .mh-section {
    padding-top: var(--mh-space-md);
    padding-bottom: var(--mh-space-md);
    page-break-inside: avoid;
    background: none !important;
    color: #000 !important;
  }

  .mh-section.is-image::before,
  .mh-slider-overlay::after,
  .mh-hero::before {
    display: none;
  }

  .mh-button,
  .splide__arrow,
  .slider-pause-btn {
    display: none !important;
  }
}