/*!
 * Monal Group — Story & Leadership shared page layer
 *
 * Converted from design/pages.css (the approved HTML prototype).
 * Desktop values come straight from Figma 329:3278 / 329:3467: every length is
 * Figma px / 10 expressed in --monal-u.
 */

/* ==========================================================================
   SHARED — light page chrome
   Both frames use the same header geometry as Home but tint the glass orange
   and set the links dark, because these pages are white rather than
   photographic. The header widget already reads these three custom
   properties, so the variant is a theme switch, not a second header.
   ========================================================================== */
.monal-page-light {
  --monal-header-bar: rgba(237, 120, 44, .1);
  --monal-header-border: rgba(237, 120, 44, .1);
  --monal-header-bar-scrolled: rgba(255, 255, 255, .86);
}
.monal-page-light .monal-site-header__bar { color: var(--monal-c-ink); }
.monal-page-light .monal-menu-btn { border-color: rgba(30, 25, 22, .2); }
.monal-page-light .monal-menu-btn span { background: var(--monal-c-ink); }
.monal-page-light .monal-menu-btn:hover { background: rgba(30, 25, 22, .06); }
/* The header lives in one shared Elementor template carrying the white logo
   the photographic Home hero needs. These pages are white, so Figma 329:3346's
   orange mark is swapped in here instead of duplicating the header. The <img>
   still provides the box and the alt text. */
.monal-page-light .monal-site-header__logo {
  background: url(../img/pages/logo-ink.svg) left center / contain no-repeat;
}
.monal-page-light .monal-site-header__logo img { visibility: hidden; }

/* Scrolled (.monal-is-scrolled): the light pages take Home's sticky look — the
   dark glass bar (the header's own default, rgba(30,25,22,.78) with a white
   8% border), white links, the white logo and the white menu button. The top
   of the page keeps the light variant above.
   The bar fades over .5s as on Home (linear here, so the midpoint is crossed
   slowly), and the text, logo and menu button switch in one step where the
   bar is equally legible under ink and white (luminance ~0.2): .36s into the
   fade going down, .14s coming back up.
   A colour crossfade would pass through grey-on-grey (measured 1.3:1). The
   ink logo moves to a pseudo-element so it can switch against the white
   <img>. */
.monal-page-light { --monal-header-bar-scrolled: rgba(30, 25, 22, .78); --monal-header-flip: .14s; }
.monal-page-light .monal-is-scrolled { --monal-header-flip: .36s; }
.monal-page-light .monal-site-header__bar { transition: background-color .5s linear, border-color .5s linear, color 0s linear var(--monal-header-flip); }
.monal-page-light .monal-is-scrolled .monal-site-header__bar { color: #fff; }
.monal-page-light .monal-site-header__logo { position: relative; background: none; }
.monal-page-light .monal-site-header__logo::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(../img/pages/logo-ink.svg) left center / contain no-repeat;
  transition: opacity 0s linear var(--monal-header-flip);
}
.monal-page-light .monal-site-header__logo img { visibility: visible; opacity: 0; transition: opacity 0s linear var(--monal-header-flip); }
.monal-page-light .monal-is-scrolled .monal-site-header__logo::before { opacity: 0; }
.monal-page-light .monal-is-scrolled .monal-site-header__logo img { opacity: 1; }
.monal-page-light .monal-menu-btn { transition: background-color .3s, border-color 0s linear var(--monal-header-flip); }
.monal-page-light .monal-menu-btn span { transition: transform .4s var(--monal-ease-out), width .4s var(--monal-ease-out), background-color 0s linear var(--monal-header-flip); }
.monal-page-light .monal-is-scrolled .monal-menu-btn { border-color: rgba(255, 255, 255, .2); }
.monal-page-light .monal-is-scrolled .monal-menu-btn span { background: #fff; }
.monal-page-light .monal-is-scrolled .monal-menu-btn:hover { background: rgba(255, 255, 255, .1); }

/* Below 1200 the bar sits at the footer panel's inset (--monal-inset, 11),
   not the header widget's own 2.1u, so the bar and the footer share an edge.
   This file only loads on inner pages, so Home keeps 2.1u. From 1200 the bar
   is the Figma 1830 x 80 at x45, which is left alone. The locked rule
   repeats the override because the header's own
   `body.monal-is-locked .monal-site-header` (0,2,1) re-pins `right` while the
   drawer is open; without it the bar would jump 10px on open. */
@media (max-width: 1199px) {
  .monal-page-light .monal-site-header { left: var(--monal-inset); right: var(--monal-inset); }
  body.monal-page-light.monal-is-locked .monal-site-header { right: calc(var(--monal-inset) + var(--monal-scrollbar, 0px)); }
}

/* The active item is underlined in orange rather than weighted alone. */
.monal-page-light .monal-site-nav__list a.monal-is-active,
.monal-page-light .monal-site-nav__list .monal-is-active > a {
  position: relative;
}
.monal-page-light .monal-site-nav__list a.monal-is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--monal-u) * -1.7);
  height: 1px; background: var(--monal-c-orange);
}

/* ==========================================================================
   SHARED — page section rhythm
   Figma puts ~180-215px between sections on both frames; that is the same
   rhythm the Home page uses, so it is expressed once here.
   ========================================================================== */
.monal-page { position: relative; background: #fff; overflow-x: clip; }
/* The stacked (below 1200) gap between sections. Each section carries it as
   its own padding-top, and the last section before the footer as its
   padding-bottom. Desktop sections use their Figma bands instead and do not
   read it. Defining it changes nothing on its own; only sections that use it
   (currently the Leadership ones) follow it. */
.monal-page { --monal-page-gap: calc(var(--monal-u) * 6); }
@media (min-width: 768px) {
  .monal-page { --monal-page-gap: calc(var(--monal-u) * 8); }
}
/* Side gutter, below 1200: Story, Leadership and Newsroom/Awards set their
   content at the footer panel's own inset, so every section's edge lines up
   with the footer beneath it. This reuses the theme's --monal-gutter (it
   drives .monal-container, and monal-trusted's bleed is written against it)
   and points it at --monal-inset, the token the footer is placed with. The
   header and footer read neither, so they do not move. Scoped by the body
   classes those pages carry, so Home and Impact keep the 24 gutter. From
   1200 the containers are the Figma 1544 column (x188 at 1920), so the
   token is left alone there. */
@media (max-width: 1199px) {
  .monal-has-story-hero,
  .monal-has-lead-hero,
  .monal-has-latest { --monal-gutter: var(--monal-inset); }
}
/* Figma 329:3278 / 329:3467 set every H2 at 66/72; the shared .monal-h2 is
   66/78 because the Home frame uses that. Page-scoped so Home is untouched. */
@media (min-width: 1200px) {
  .monal-page .monal-h2 { line-height: calc(var(--monal-u) * 7.2); }
}

/* Decorative art that bleeds off the page edges. Purely ornamental, so it is
   hidden from assistive tech and never catches the pointer. Any section
   carrying one must clip, or the bleed becomes a horizontal scrollbar. */
.monal-page .monal-w:has(> .monal-page__deco) { overflow-x: clip; }
.monal-page__deco {
  position: absolute; z-index: 0; pointer-events: none;
  background: center / contain no-repeat;
}
.monal-page__deco--corner {
  width: calc(var(--monal-u) * 51.11); height: calc(var(--monal-u) * 55.25);
  background-image: url(../img/pages/flourish-corner.svg);
}

/* Lead paragraph shared by both heroes. */
.monal-page-lead {
  font-size: max(calc(var(--monal-u) * 1.6), 14px); line-height: 1.6;
  color: var(--monal-c-muted);
}

/* Eyebrow — Poppins Medium 22/28 uppercase on both frames (Home uses Light 18
   with wide tracking, so this is page-specific, per Figma). */
.monal-page-eyebrow {
  font-weight: 500; font-size: max(calc(var(--monal-u) * 1.3), 12px); line-height: 1.3;
  text-transform: uppercase; color: var(--monal-c-ink);
}

/* Outline "Experience the Monal" button (Story). The Figma art is a stroked
   leaf-cornered rectangle; it is reproduced in CSS so the label can grow. */
.monal-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--monal-u) * 1.2);
  min-height: calc(var(--monal-u) * 4.4); padding: 0 calc(var(--monal-u) * 2);
  border: 1px solid rgba(30, 25, 22, .35);
  border-radius: calc(var(--monal-u) * .3) calc(var(--monal-u) * .3) calc(var(--monal-u) * 1.4) calc(var(--monal-u) * .3);
  font-weight: 600; font-size: max(calc(var(--monal-u) * 1.2), 11px); line-height: 1.54;
  letter-spacing: .02em; text-transform: uppercase; color: var(--monal-c-ink);
  background: transparent;
  transition: background-color .35s var(--monal-ease-out), border-color .35s var(--monal-ease-out), color .35s var(--monal-ease-out);
}
.monal-btn-ghost:hover { background: var(--monal-c-ink); border-color: var(--monal-c-ink); color: #fff; }
.monal-btn-ghost .monal-i { width: calc(var(--monal-u) * .9); height: calc(var(--monal-u) * .9); }

@media (min-width: 1200px) {
  .monal-page-lead { font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 3); }
  .monal-page-eyebrow { font-size: calc(var(--monal-u) * 2.2); line-height: calc(var(--monal-u) * 2.8); }
  .monal-btn-ghost {
    min-height: calc(var(--monal-u) * 5.72); padding: 0 calc(var(--monal-u) * 2.4);
    gap: calc(var(--monal-u) * 1.8);
    /* Floored like all desktop type: a bare 1.4u is 9.4px at 1280. 1920 is
       unaffected (the floor only engages below ~1650). */
    font-size: max(calc(var(--monal-u) * 1.4), 12px); line-height: calc(var(--monal-u) * 2.16);
  }
}

/* ==========================================================================
   Placeholder image treatment — every image slot in both Figma frames is a
   placeholder, so the design's own label is reproduced until real assets land.
   ========================================================================== */
/* The theme already has .monal-ph for this; these frames only differ in the
   label size — Figma sets it at Poppins SemiBold 18/28, where the Home frame
   uses 28/36. Page-scoped, so Home keeps its own. */
/* Only the label size is page-specific. Do NOT reset the background here: at
   0,2,0 this rule outranks each panel's own 0,1,0 tint and would strip it.
   The base .monal-ph white is already beaten on cascade order, because the
   widget stylesheets load after monal-base.css. */
.monal-page .monal-ph {
  font-size: max(calc(var(--monal-u) * 1.2), 11px); line-height: 1.55;
}
/* When a real image replaces a placeholder, media_box() emits a bare <img>
   in the panel. The base reset leaves it at its natural size, so a 1000px
   photo did not fill a 1539px panel, and the feature panel's two ratios
   (2.84:1 desktop, 4:3 phones) could not both be met. Cover, as the news and
   latest cards already do; the panel clips it to its own rounded shape. */
.monal-story-journey__panel:has(> img),
.monal-lead-feature__panel:has(> img),
.monal-lead-gallery__panel:has(> img) { overflow: hidden; }
.monal-story-journey__panel > img,
.monal-lead-feature__panel > img,
.monal-lead-gallery__panel > img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1200px) {
  .monal-page .monal-ph { font-size: calc(var(--monal-u) * 1.8); line-height: calc(var(--monal-u) * 2.8); }
}

/* ==========================================================================
   Leadership bottom wash — Figma 329:3471.

   A page-wide gradient over the lower third: 2046.591 x 1155.055 centred at
   y 2252.94, which runs from inside the values section, across the gallery and
   under the footer. It cannot live inside a section, because every section
   that carries decoration is clipped (overflow-x: clip also clips vertically
   once the other axis is not visible), so it hangs off the page instead and
   is keyed to the body class the gallery widget adds.

   Desktop only: below 1200 the Figma y coordinates no longer describe the
   layout, and the derived mobile stack does not have the same lower third.
   ========================================================================== */
@media (min-width: 1200px) {
  .monal-page.monal-has-lead-gallery::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    /* Figma draws it 2046.591 wide, bleeding 63 past each edge, but the
       gradient only varies vertically - so it is capped to the viewport
       instead, which looks identical and cannot cause a scrollbar. */
    left: 0; right: 0;
    top: calc(var(--monal-u) * 225.294);
    height: calc(var(--monal-u) * 115.51);
    background: linear-gradient(to top, rgba(44, 90, 79, .2), rgba(255, 255, 255, .2));
  }
}

/* ==========================================================================
   First-paint guard for the two heroes.

   Both heroes sit above the fold, so their reveals are created the moment the
   widget script runs - after the browser has already painted the final state.
   Without this the copy and art appear, then jump back to the start of the
   animation. The Home hero solves it the same way (monal-base.css hides
   [data-monal-hero-item]); these two are the only sections on these pages
   that animate before any scrolling, so they are the only ones guarded.

   It applies only while JS is present AND motion is allowed, and monal-boot.js
   drops .monal-motion-ok if GSAP never arrives, so content can never stay
   hidden. The line spans are emitted by PHP, so they exist for the first paint.
   ========================================================================== */
.monal-js.monal-motion-ok .monal-story-hero [data-monal-reveal],
.monal-js.monal-motion-ok .monal-story-hero [data-monal-story-glow],
.monal-js.monal-motion-ok .monal-story-hero [data-monal-story-m],
.monal-js.monal-motion-ok .monal-story-hero [data-monal-story-tile],
.monal-js.monal-motion-ok .monal-story-hero__title .monal-line__in,
.monal-js.monal-motion-ok .monal-lead-hero [data-monal-reveal],
.monal-js.monal-motion-ok .monal-lead-hero__title .monal-line__in,
.monal-js.monal-motion-ok .monal-contact-hero [data-monal-reveal],
.monal-js.monal-motion-ok .monal-contact-hero__title .monal-line__in,
.monal-js.monal-motion-ok .monal-careers-hero [data-monal-reveal],
.monal-js.monal-motion-ok .monal-careers-hero__title .monal-line__in,
.monal-js.monal-motion-ok .monal-post-head [data-monal-reveal] { visibility: hidden; }

/* ==========================================================================
   Reveal safety — the shared system hides targets until GSAP runs. If motion
   is off, nothing may stay invisible.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .monal-page [data-monal-reveal],
  .monal-page [data-monal-reveal-lines],
  .monal-page [data-monal-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Collaborate (/collaborate/) — composed from existing widgets, no frame.
   Desktop only: one 150 (15u) gap between sections, the Impact frame's own
   closing gap (cards → CTA). The widgets keep their Leadership / Impact
   values everywhere else. Below 1200 every section already uses the shared
   --monal-page-gap.
   ========================================================================== */
@media (min-width: 1200px) {
  /* The hero's 69u frame height made a 293 gap; end it at its lead. */
  .monal-page--collaborate .monal-lead-hero { min-height: 0; }
  /* 15u less the 2.2u its heading's line box adds above the text. */
  .monal-page--collaborate .monal-impact-numbers { padding-top: calc(var(--monal-u) * 12.8); }
  /* Leadership puts the values 5.53u under a feature image; here they need
     the full gap, and their 66u frame height would add slack before the CTA. */
  .monal-page--collaborate .monal-lead-values { padding-top: calc(var(--monal-u) * 9.93); min-height: 0; }
}