/* ==========================================================================
   Maturity Outlook report page (/strategic-planning-maturity-outlook) — the designer's mockups in
   "Maturity Outlook Page - text.xlsx", sheet "Content for web" (1920px wide), and the images from the designer's
   Drive folder (2026-11-09) in ../maturity-outlook/.

   Scoped to .mo-*; the page also loads capability-page.css for the reused PerforAssess cards (.cap-assess-card*,
   .cap-btn) and its tokens (.cap-page). Colours sampled from the mockups: #004851 headings, #e6f7fd finding boxes,
   #e4e8ec card borders, #141c1f the dark band; muted text #687074 (mock #6d767b, below AA on #fafafa).
   Square corners everywhere, unlike the mockups (user, 2026-11-05): no .mo-* rule sets a radius, and the reused
   capability cards and buttons are squared in section 4.
   ========================================================================== */

.mo-page {
    --mo-heading: #004851;
    --mo-muted: #687074;
    --mo-line: #e4e8ec;
    --mo-tint: #e6f7fd;
    --mo-blue: #06b0f0;
    --mo-blue-dark: #0089bc;
    --mo-dark: #141c1f;
}

.mo-shell {
    width: min(1190px, calc(100% - 48px));
    margin: 0 auto;
}

/* The series row is five cards across in the mockup (85px from the edges at 1920): wider than the other sections. */
.mo-shell--wide {
    width: min(1750px, calc(100% - 48px));
}

/* "Strategic Planning Maturity Outlook | GCC Region 2026": the name bold, the rest light. */
.mo-title {
    font-weight: 400;
    line-height: 1.25;
}

.mo-title strong {
    font-weight: 700;
}

.mo-title span {
    font-weight: 300;
}

/* Outline buttons from the mockups ("Download the Report", "Explore the Report"). */
.mo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid currentColor;
    background: transparent;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}

.mo-btn--light {
    color: #fff;
}

.mo-btn--light:hover,
.mo-btn--light:focus-visible {
    background: #fff;
    color: var(--mo-dark);
    text-decoration: none;
}

.mo-btn--dark {
    color: #0f2026;
}

.mo-btn--dark:hover,
.mo-btn--dark:focus-visible {
    background: #0f2026;
    color: #fff;
    text-decoration: none;
}

.mo-btn:focus-visible {
    outline: 2px solid var(--mo-blue-dark);
    outline-offset: 3px;
}

/* Section heading: centred title + text. */
.mo-head {
    width: min(940px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.mo-head__title {
    margin-bottom: 12px;
    color: var(--mo-heading);
    font-size: 32px;
    font-weight: 500;
}

.mo-head__text {
    color: var(--mo-muted);
    font-size: 16px;
    line-height: 1.5;
}

/* ==========================================================================
   1. Hero — the background is out of the flow, so the height never depends on the image (no CLS).
   ========================================================================== */

.mo-hero {
    position: relative;
    min-height: clamp(420px, 27.5vw, 527px);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: #05212c;
    color: #fff;
}

.mo-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

/* A little darker behind the text, where the chess board turns light blue. */
.mo-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(3, 22, 30, .55) 0%, rgba(3, 22, 30, .3) 40%, rgba(3, 22, 30, 0) 60%);
}

/* The mockup's text starts 200px from the left at 1920: a wider shell than the other sections. */
.mo-hero__inner {
    width: min(1520px, calc(100% - 48px));
    padding: 72px 0;
}

/* One line from ~1280px, as in the mockup. */
.mo-hero__title {
    max-width: 1000px;
    font-size: 30px;
}

.mo-hero__text {
    max-width: 780px;
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.45;
}

.mo-hero .mo-btn {
    margin-top: 32px;
}

/* ==========================================================================
   2. Flipbook — the designer's hexagon edges, desktop only.
   ========================================================================== */

/* The designer's edges ("Flipbook BG.png") exist only as a 1x raster, 736px tall: blurry on Retina and too short for
   the single-page section (up to ~1150px). They are redrawn as SVG (230 x 1200, the designer's shapes on top, a few in
   the same style below), anchored to the top like the mockup and kept beside the 1480px viewer on wider screens. */

.mo-flipbook {
    position: relative;
    padding: 56px 0;
    overflow: hidden;
    background: #fff;
}

.mo-flipbook::before,
.mo-flipbook::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 230px;
    pointer-events: none;
}

.mo-flipbook::before {
    left: max(0px, calc(50% - 970px));
    background: url('../maturity-outlook/flipbook-edge-left.svg') left top / 230px 1200px no-repeat;
}

.mo-flipbook::after {
    right: max(0px, calc(50% - 970px));
    background: url('../maturity-outlook/flipbook-edge-right.svg') right top / 230px 1200px no-repeat;
}

.mo-flipbook__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.mo-flipbook__title {
    color: #0f2026;
    font-size: 24px;
    text-align: center;
}

/* 1480px wide at 1920 as in the mockup, clear of the edge hexagons. */
.mo-flipbook__inner {
    width: min(1480px, calc(100% - 440px));
}

/* One 16:9 page at a time (Flipsnack page view "Single page", 2026-11-09). Above 640px the player keeps 76px on every
   side for its arrows and bars, so the frame height follows the width and the page fills the space between the
   arrows. The width is capped so the whole frame fits the viewport below the sticky header (68px + breathing room);
   svh, not vh, so it doesn't resize while the mobile browser bars move. The grey is the player's stage while it loads. */
.mo-flipbook__viewer {
    container-type: inline-size;
    width: min(100%, max(480px, calc((100svh - 312px) * 16 / 9 + 152px)));
    background: #f1f1f1;
}

.mo-flipbook__frame {
    display: block;
    width: 100%;
    height: calc((100cqi - 152px) * 9 / 16 + 152px);
    border: 0;
}

/* At 640px and below the player keeps 8px at the sides; 60px above and below hold its accessibility button and toolbar
   clear of the page. */
@container (max-width: 640px) {
    .mo-flipbook__frame {
        height: calc((100cqi - 16px) * 9 / 16 + 120px);
    }
}

/* ==========================================================================
   3. What the Research Reveals
   ========================================================================== */

.mo-research {
    padding: 64px 0;
    background: var(--cap-subtle, #fafafa);
}

/* Diagram (649px) + findings (650px) side by side, as in the mockup. */
.mo-research .mo-shell {
    width: min(1320px, calc(100% - 48px));
}

/* The four findings fill exactly the diagram's height (user, 2026-11-09): the diagram sets the row, the cards share
   it equally, and everything inside them scales with the column (cqi, sizes of the 640px column at 1920) the way the
   diagram does, so the text fits at every two-column width. Below 1200px the section stacks (see Responsive). */
.mo-research__grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 40px;
}

/* The designer's dotted halo ("Maturity Model Framework.png" without its hexagons) under the SVG, which uses the
   PNG's coordinates (viewBox -312.5 -313 649 569), so both scale together. */
.mo-model {
    align-self: center;
    width: min(649px, 100%);
    margin: 0 auto;
    aspect-ratio: 649 / 569;
    background: url('../maturity-outlook/model-halo.webp') center / 100% 100% no-repeat;
}

.mo-model__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.mo-model__hex {
    fill: #00b0f0;
}

.mo-model__label {
    fill: #fff;
    font-family: var(--cap-font);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .02em;
}

.mo-model__label-strong {
    font-weight: 700;
}

.mo-model__centre {
    fill: #191919;
    font-family: var(--cap-font);
    font-size: 12.5px;
    font-weight: 700;
}

.mo-findings {
    container-type: inline-size;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mo-finding {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: min(190px, 29.6cqi) minmax(0, 1fr);
    align-items: stretch;
    gap: min(24px, 3.7cqi);
    padding: min(12px, 1.8cqi);
    background: #fff;
}

/* #0089bc on the tint is 3.7:1, enough for this large text (the mock's #06b0f0 is 2.3:1). */
.mo-finding__value {
    min-height: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
    background: var(--mo-tint);
    color: var(--mo-blue-dark);
}

.mo-finding__number {
    font-size: min(36px, 5.6cqi);
    font-weight: 700;
    line-height: 1;
}

.mo-finding__unit {
    font-size: min(30px, 4.6cqi);
    font-weight: 400;
    line-height: 1;
}

.mo-finding__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.mo-finding__title {
    color: #1f2d30;
    font-size: min(23px, 3.5cqi);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.mo-finding__text {
    color: var(--mo-muted);
    font-size: min(15px, 2.3cqi);
    line-height: 1.4;
}

/* ==========================================================================
   4. Reveal maturity gaps — the capability PerforAssess cards on the designer's dark network band.
   ========================================================================== */

.mo-assess {
    padding: 56px 0 64px;
    background: var(--mo-dark) url('../maturity-outlook/assess-bg.webp') center / cover no-repeat;
}

.mo-assess__title {
    margin-bottom: 32px;
    padding: 0 24px;
    color: #fff;
    font-size: 32px;
    text-align: center;
}

/* This page has no rounded corners (user, 2026-11-05); the capability pages keep theirs. */
.mo-page .cap-assess-card,
.mo-page .cap-btn {
    border-radius: 0;
}

/* The cards carry one description instead of a title + text: a little larger and fully white. */
.mo-assess .cap-assess-card__text {
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
}

/* ==========================================================================
   5. Discover the Maturity Outlook Series
   ========================================================================== */

.mo-series {
    padding: 64px 0 72px;
    background: var(--cap-subtle, #fafafa);
}

.mo-series__grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

.mo-report {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mo-line);
    background: #fff;
    transition: transform .3s ease, box-shadow .3s ease;
}

.mo-report:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -8px rgba(12, 12, 13, .18);
}

.mo-report__cover {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 720 / 398;
    object-fit: cover;
}

.mo-report__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
}

.mo-report__title {
    color: #080f15;
    font-size: 18px;
}

.mo-report__title strong {
    font-weight: 600;
}

.mo-report__text {
    flex: 1 1 auto;
    color: var(--mo-muted);
    font-size: 15px;
    line-height: 1.4;
}

.mo-report__btn {
    margin-top: 8px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Below 1200px the edge hexagons would squeeze the flipbook (the viewer takes the full shell) and the findings' text
   would get too small beside the diagram (the research section stacks). */
@media (max-width: 1199px) {
    .mo-flipbook::before,
    .mo-flipbook::after {
        display: none;
    }

    .mo-flipbook__inner {
        width: calc(100% - 48px);
    }

    .mo-series__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Research stacked: the cards take their natural height again. */
    .mo-research__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mo-model {
        width: min(560px, 100%);
    }

    .mo-findings {
        height: auto;
    }

    .mo-finding {
        flex: none;
        grid-template-columns: 150px minmax(0, 1fr);
        gap: 16px;
        padding: 16px;
    }

    .mo-finding__value {
        min-height: 112px;
    }

    .mo-finding__number {
        font-size: 30px;
    }

    .mo-finding__unit {
        font-size: 24px;
    }

    .mo-finding__title {
        font-size: 19px;
    }
}

@media (max-width: 1023px) {
    .mo-model {
        width: min(480px, 100%);
    }
}

/* The capability rules stack the PerforAssess cards below 768px. */
@media (max-width: 767px) {
    .mo-hero {
        min-height: 0;
    }

    /* The text covers the chess pieces here. */
    .mo-hero::before {
        background: rgba(3, 22, 30, .6);
    }

    .mo-hero__inner {
        padding: 56px 0;
    }

    .mo-hero__title {
        font-size: 26px;
    }

    .mo-hero__text {
        font-size: 16px;
    }

    .mo-head__title,
    .mo-assess__title {
        font-size: 24px;
    }

    .mo-flipbook,
    .mo-research,
    .mo-assess,
    .mo-series {
        padding-top: 40px;
        padding-bottom: 48px;
    }

    .mo-flipbook__title {
        font-size: 20px;
    }

    /* Full-bleed on phones: the page gets the whole screen width. */
    .mo-flipbook__viewer {
        width: calc(100% + 48px);
    }

    .mo-series__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mo-finding {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .mo-finding__value {
        min-height: 80px;
    }
}

@media (max-width: 479px) {
    .mo-series__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Phones in landscape (user, 2026-11-09): the flipbook is never taller than the screen under the sticky mobile header
   (67px), so a whole page shows and turns. On a short frame Flipsnack fits the page to its height and centres it, so
   the viewer takes the full width (no 480px floor, no gutters) and the arrows sit on the grey beside the page. */
@media (orientation: landscape) and (max-height: 500px) {
    .mo-flipbook__viewer {
        width: calc(100% + 48px);
    }

    .mo-flipbook__frame {
        max-height: calc(100svh - 67px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mo-report,
    .mo-btn {
        transition: none;
    }

    .mo-report:hover {
        transform: none;
    }
}