/* Market Access (/market-access), v9 market-access.html. Scoped to .site[data-page="market-access"]. */

/*
   Ported from tax-market-access.css with the lux-v5, v7, v8 and v9 rules that reach this page's
   own sections, flattened: each value below is the one that wins v9's cascade, so the reasons are
   given where the winner is not the obvious rule. The banner, the Solution tabs, the closing band,
   the prev/next pair and the footer are the shared sub-page layer's (site.css) and are not repeated.

   Colours are written out rather than read from site.css's tokens, which keep the home page's
   values: v8 F01 remapped the sub-pages' navy and ink to Proof Grey #545454, and the home page
   never took that change.

   The sections are DetailHero's "ma" variant: .ma-grid for Regulatory Support and Commercial
   Readiness, and the Solution pages' .detail-hero for the Overview (v7 #6).
*/

/* ---- Headings ------------------------------------------------------------------------------- */

/* The H2 every v9 sub-page sets (v8 F05): Montserrat Light in Proof Grey at lux-v5's size and
   tracking — lux-v5's section rule outranks both tax-market-access.css's .ma-h2 and v8's lighter
   tracking, and only v8's weight, marked important, gets past it. The GenArrow sits on the first
   line; in the Overview's .detail-copy it is lifted 5px to the cap height (v8 §5). */
.site[data-page="market-access"] .ma-h2 {
    margin: 0 0 22px;
    font-family: var(--font-body); font-style: normal; font-weight: 300;
    font-size: clamp(1.75rem, 2.8vw, 2.35rem); line-height: 1.22; letter-spacing: -.015em;
    color: #545454;
}
.site[data-page="market-access"] .detail-copy .ma-h2 .ga-sig.lead { margin-bottom: 5px; }

/* ---- Overview --------------------------------------------------------------------------------- */

/* Body copy at lux-v5's measure, which outranks both v9's 16px floor and v7's larger .ma-lead on
   this column: in v9 the lead stands out by its weight alone. */
.site[data-page="market-access"] .detail-copy p {
    margin: 0 0 20px; max-width: 65ch;
    font-size: max(15px, .98rem); font-weight: 300; line-height: 1.72; color: #545454;
}

/* The first paragraph is the lead, in Regular (v8 §2). Picked by position, since the copy is rich
   text and a class typed into it would not survive the sanitiser; in the editor the paragraphs sit
   one level down, inside the editable field. */
.site[data-page="market-access"] .detail-copy > p:first-of-type,
.site[data-page="market-access"] .detail-copy > .cms-editable--html > p:first-child { font-weight: 400; }

/* The photograph of the home page's Our Solutions card, at 5:4 in the angled crop .shape-photo
   draws, square-cornered and flat (v8 F18, F20); 4:3 once the column stacks (v7 #6). */
.site[data-page="market-access"] .ma-ph { aspect-ratio: 5 / 4; border-radius: 0; box-shadow: none; overflow: hidden; }
.site[data-page="market-access"] .ma-ph img { object-position: 50% 50%; }
.site[data-page="market-access"] .ma-ph > .cms-image { height: 100%; }
@media (max-width: 900px) {
    .site[data-page="market-access"] .ma-ph { aspect-ratio: 4 / 3; }
}

/* ---- Regulatory Support and Commercial Readiness ---------------------------------------------- */

/* Copy and photograph side by side, the copy the wider; .flip turns the columns round for the
   photograph on the left. The photograph stretches to the copy's height. */
.site[data-page="market-access"] .ma-grid {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 72px; align-items: stretch;
}
.site[data-page="market-access"] .ma-grid.flip { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.site[data-page="market-access"] .ma-copy { align-self: center; min-width: 0; }

/* The photograph follows the copy's height and is cropped to it: the image is taken out of the flow
   so a tall portrait (2048px) cannot set the row's height, which is the copy's, 540px at least.
   Square-cornered and flat inside the angled crop (v8 F18, F20). The two crops keep the part of
   each photograph v9 keeps. In the editor the image slot fills the frame, so it can be clicked. */
.site[data-page="market-access"] .ma-media { margin: 0; min-height: 540px; border-radius: 0; box-shadow: none; overflow: hidden; }
.site[data-page="market-access"] .ma-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site[data-page="market-access"] .ma-media.pos-top img { object-position: 50% 28%; }
.site[data-page="market-access"] .ma-media.pos-low img { object-position: 56% 50%; }
.site[data-page="market-access"] .ma-media > .cms-image { position: absolute; inset: 0; }

/* Paragraphs at v9's 16px floor, which outranks tax-market-access.css's .98rem. */
.site[data-page="market-access"] .ma-copy p {
    margin: 0 0 18px;
    font-size: max(16px, 1rem); font-weight: 300; line-height: 1.72; color: #545454;
}

/* The lead keeps tax-market-access.css's size, which outranks the sub-pages' body rules here, in
   Regular (v8 §2). By position, as in the Overview. */
.site[data-page="market-access"] .ma-copy > p:first-of-type,
.site[data-page="market-access"] .ma-copy > .cms-editable--html > p:first-child {
    font-size: 1.06rem; font-weight: 400; line-height: 1.75;
}

/* The services, two-up, each under a Genero Yellow rule — not GenArrows: the GenArrow is never a
   bullet. Regular at lux-v5's list size: v9 F34 sets list text in Regular, over the semibold the
   page first had. */
.site[data-page="market-access"] .ma-items {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px;
    margin: 26px 0 30px; padding: 0; list-style: none;
}
.site[data-page="market-access"] .ma-items li {
    padding-top: 12px; border-top: 2px solid var(--yellow);
    font-size: max(15px, .95rem); font-weight: 400; line-height: 1.6; color: #545454;
}

/* The closing statement: Inria Serif Italic, the in-text H3 voice (guideline p.21), behind a
   Genero Yellow rule. Last in the column, so nothing under it. */
.site[data-page="market-access"] .ma-quote { margin: 0; padding: 2px 0 2px 20px; border-left: 4px solid var(--yellow); }
.site[data-page="market-access"] .ma-copy .ma-quote p {
    margin: 0;
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: 1.18rem; line-height: 1.55; color: #545454;
}
.site[data-page="market-access"] .ma-copy .ma-quote p + p { margin-top: 12px; }

/* ---- Both: lux-v5's slow zoom on the photographs ---------------------------------------------- */

.site[data-page="market-access"] :is(.ma-ph, .ma-media) img { transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); }
.site[data-page="market-access"] :is(.ma-ph, .ma-media):hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
    .site[data-page="market-access"] :is(.ma-ph, .ma-media) img { transition: none; }
    .site[data-page="market-access"] :is(.ma-ph, .ma-media):hover img { transform: none; }
}

/* ---- Tablet and phone: one column, the photograph above the copy ------------------------------ */

@media (max-width: 940px) {
    .site[data-page="market-access"] .ma-grid,
    .site[data-page="market-access"] .ma-grid.flip { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .site[data-page="market-access"] .ma-media { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 520px) {
    .site[data-page="market-access"] .ma-items { grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 22px 0 26px; }
    .site[data-page="market-access"] .ma-quote { padding-left: 16px; }
    .site[data-page="market-access"] .ma-copy .ma-quote p { font-size: 1.08rem; }
}