/*
   The white banner every sub-page opens with since the October 2026 design (mockup v10,
   css/subpage.css; SubpageHero renders it). Loaded after site.css and the page stylesheets.

   A pale band; the photograph on the left; the yellow GenArrow turned to ">" with a white line
   inside it; the title in teal, its keyword in Inria Serif Italic, with the standfirst hanging under
   it in grey Inria Serif Italic. The GenArrow and the title stand at the same place on every page
   (decision of 29 Oct 2026): the arrow's centre at 38.6% of the width and 57% of the height, the
   title starting at 43%, its first line on the arrow's centre. The trail is kept for assistive
   software only.

   Per page, the owner's banner photograph (SubpageHero "fig") is placed as the design places it:
   its width as a share of the band (--sh-w), anchored to the top-left, partly cut by the band's
   edge, at the sizes the design's PNGs were matched to. A photograph from before the redesign
   (.sh-photo) is cropped square on the left and fades into the band.
*/

.site .sh-white {
    position: relative; overflow: hidden; background: #F8FBFC; height: 29vw; min-height: 420px; max-height: 640px;
    --sh-w: 50%; --sh-top: auto; --sh-bottom: 0; --sh-ax: 38.6%; --sh-ay: 57%; --sh-tx: 43%;
}
.site .sh-white .sh-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.site .sh-white .sh-bg img { position: absolute; left: 0; top: var(--sh-top); bottom: var(--sh-bottom); width: var(--sh-w); height: auto; max-width: none; }

/* A photograph from before the redesign: square on the left, fading into the band. */
.site .sh-white.sh-photo { --sh-w: 40%; }
.site .sh-white.sh-photo .sh-bg img {
    top: 0; bottom: 0; height: 100%; object-fit: cover;
    -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent 100%); mask-image: linear-gradient(90deg, #000 50%, transparent 100%);
}

/* The owner's photographs, placed by page (mockup v10, the style attribute of each <section>). */
.site[data-page="about"] .sh-white:not(.sh-photo) { --sh-w: 50.52%; --sh-top: 0; --sh-bottom: auto; }
.site[data-page="cosmetics"] .sh-white:not(.sh-photo) { --sh-w: 69.79%; --sh-top: 0; --sh-bottom: auto; }
.site[data-page="manufacturing"] .sh-white:not(.sh-photo) { --sh-w: 44.79%; --sh-top: 0; --sh-bottom: auto; }
.site[data-page="quality-control"] .sh-white:not(.sh-photo) { --sh-w: 56.77%; --sh-top: 0; --sh-bottom: auto; }

/* The GenArrow: the yellow shape turned 90°, a white line inside it. */
.site .sh-white .sh-arrow { position: absolute; z-index: 1; left: var(--sh-ax); top: var(--sh-ay); height: 38%; aspect-ratio: 301 / 554; transform: translate(-50%, -50%); }
.site .sh-white .sh-arrow svg { position: absolute; left: 50%; top: 50%; height: auto; transform: translate(-50%, -50%) rotate(90deg); }
.site .sh-white .sh-arrow .sh-fill { width: 184%; fill: #EFC100; }
.site .sh-white .sh-arrow .sh-line { width: 120%; margin-left: -18%; fill: none; stroke: #fff; stroke-width: 4; stroke-opacity: .9; }

/* The title's first line on the arrow's centre, whatever the page; the standfirst hangs under it. */
.site .sh-white .sh-copy { position: absolute; z-index: 1; left: var(--sh-tx); right: 4%; top: var(--sh-ay); transform: translateY(-.575em); font-size: clamp(1.8rem, 2.55vw, 3.1rem); }
.site .sh-white h1 {
    margin: 0; font-family: var(--font-body); font-style: normal; font-weight: 400;
    font-size: 1em; line-height: 1.15; letter-spacing: -.01em; color: #008AAB; text-shadow: none; max-width: none;
}
.site .sh-white h1 em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: #008AAB; letter-spacing: 0; }
.site .sh-white .sh-sub {
    margin: .35em 0 0; max-width: 26em; font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: clamp(1rem, 1.45vw, 1.75rem); line-height: 1.3; color: #4A4A4A; text-shadow: none;
}
.site .sh-white .sh-sub p { margin: 0; font: inherit; color: inherit; }

/* Not shown in the white design; still read out. */
.site .sh-white .sh-crumb { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The editor: the photograph is a backdrop, so SubpageHero's floating button is the way to change
   it — the same as the old banner. */

@media (max-width: 760px) {
    /* Phones (29 Oct 2026): every banner 280px high; every photograph a faint strip along the top
       that fades downwards, so no page is darker than the next. The photograph reaches the middle of
       the title block (71% of the band), so the block overlaps it by about half. The GenArrow and
       the title block are centred on each other. */
    .site .sh-white { height: 280px; min-height: 0; max-height: none; --sh-ay: 71%; }
    .site .sh-white .sh-sub br { display: none; }
    .site .sh-white .sh-bg img,
    .site .sh-white.sh-photo .sh-bg img {
        top: 0; bottom: auto; left: 0; width: 100%; height: 71%; max-width: none;
        object-fit: cover; object-position: left top; opacity: .35;
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    }
    .site .sh-white .sh-arrow { left: 40px; height: 84px; }
    .site .sh-white .sh-copy { left: 86px; right: 20px; transform: translateY(-50%); font-size: 1.6rem; }
    .site .sh-white .sh-sub { font-size: .95rem; margin-top: .3em; }
}

/* ---- The owner's photographs below the banner (mockup v10, css/page-*.css) -------------------
   Square, never the parallelogram crop, and at the picture's own proportion: each was cut by the
   owner to the design's frame, and most carry a GenArrow of their own — so no crop and no slow zoom
   under the pointer, which would move it. Matched by where the file lives, so a photograph from
   before the redesign keeps the treatment it had.

   !important on purpose: every page's stylesheet sets its own crop and frame for its photographs,
   each more specific than a rule meant for all of them, and this one has to win over every one.
   A page that wants a different frame for an owner's picture says so below, with !important too. */
.site:where(.site--sub) :is(.ph, .shape-photo, .ma-media, .sp-photo, figure):has(> img[src*="/img/owner/"]) {
    clip-path: none !important; border-radius: 0 !important; aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; box-shadow: none;
}
.site:where(.site--sub) :is(.ph, .shape-photo, .ma-media, .sp-photo, figure) > img[src*="/img/owner/"] {
    position: static !important; width: 100% !important; height: auto !important; aspect-ratio: auto 4 / 3 !important; object-fit: cover;
}
/* "auto 4 / 3": a box of 4:3 until the picture has loaded, then the picture's own proportion. The
   images load lazily, and one with no box at all — no width and height in the markup — is zero high,
   which the browser never counts as in view, so it would never load. */
.site:where(.site--sub) :is(.ph, .shape-photo, .ma-media, .sp-photo, figure):has(> img[src*="/img/owner/"]):hover img { transform: none !important; }

/* Cosmetics: the Overview cropped to 3:2 (the owner's picture is 1200×997); Technology Transfer at
   91% of its column and Dermocosmetic Expertise at 62%, centred, as the design draws them. */
.site[data-page="cosmetics"] .tk-split.tk-ov .ph > img[src*="/img/owner/"] { aspect-ratio: 3 / 2 !important; object-position: 50% 55%; }
.site[data-page="cosmetics"] .tk-split.tk-tt > .ph:has(> img[src*="/img/owner/"]) { width: 91%; justify-self: center; }
.site[data-page="cosmetics"] .tk-split.tk-derm > .ph:has(> img[src*="/img/owner/"]) { width: 62%; justify-self: center; }
@media (max-width: 940px) {
    .site[data-page="cosmetics"] .tk-split.tk-tt > .ph:has(> img[src*="/img/owner/"]) { width: 100%; }
    .site[data-page="cosmetics"] .tk-split.tk-derm > .ph:has(> img[src*="/img/owner/"]) { width: min(100%, 420px); }
}

/* Cosmetics and Pharmaceuticals: the section headings' GenArrow 24px at 1440 (32px at 1920), 16px
   from the words; and a teal dot after every packaging format but the last — the Excel's "·". */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-sec h2 .ga-sig.lead {
    width: clamp(20px, 1.667vw, 32px); height: clamp(20px, 1.667vw, 32px); margin-right: clamp(10px, .833vw, 16px); fill: #0B89AA;
}
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-pack-chips .chip:not(:last-child)::after {
    content: "\00B7" !important; margin-left: 1em; color: var(--teal); font-family: var(--font-body); font-style: normal; font-weight: 700;
}

/* ---- Below the banner, page by page (mockup v10, css/page-*.css) ------------------------------
   The design's section rhythm and column proportions around the owner's photographs. A section is
   found by the anchor in front of it (#overview + section): BlockRenderer puts the fragment on an
   empty element before the band rather than on the band itself. */

/* Cosmetics and Pharmaceuticals: each section's padding as the design spaces it (1920 values × 0.75
   at 1440). */
.site[data-page="cosmetics"] #overview + section.pad { padding: clamp(32px, 2.45vw, 47px) 0 clamp(64px, 8.6vw, 165px); }
.site[data-page="pharmaceutical"] #overview + section.pad { padding: clamp(32px, 2.6vw, 50px) 0 clamp(64px, 9.8vw, 189px); }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) #product-category + section.pad { padding: clamp(64px, 7.15vw, 137px) 0 clamp(64px, 6.6vw, 127px); }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) #packaging-formats + section.pad { padding: clamp(56px, 6vw, 116px) 0 clamp(56px, 6.4vw, 123px); }
.site[data-page="cosmetics"] #technology-transfer-commercialization + section.pad { padding: clamp(64px, 7.45vw, 143px) 0 clamp(64px, 6.8vw, 131px); }
.site[data-page="pharmaceutical"] #technology-transfer-commercialization + section.pad { padding: clamp(64px, 8vw, 155px) 0 clamp(64px, 7.55vw, 145px); }
.site[data-page="cosmetics"] #dermocosmetic-expertise + section.pad { padding: clamp(56px, 4.95vw, 95px) 0 clamp(64px, 6.35vw, 122px); }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) #certifications-compliance + section.pad { padding: clamp(64px, 6.7vw, 129px) 0 clamp(64px, 7.45vw, 143px); }

/* Research and Development: the opening (copy 844 / photograph 794, 110 apart at 1920) and the R&D
   Center's photograph a little wider than the address beside it (893 / 838). */
.site[data-page="research-development"] section.rd-intro.pad { padding: clamp(40px, 3vw, 58px) 0 clamp(48px, 4.5vw, 86px); }
@media (min-width: 901px) {
    .site[data-page="research-development"] .rd-intro .detail-hero:has(img[src*="/img/owner/"]) { grid-template-columns: minmax(0, 844fr) minmax(0, 794fr); gap: clamp(40px, 5.7vw, 110px); }
    .site[data-page="research-development"] .rd-location .detail-hero:has(img[src*="/img/owner/"]) { grid-template-columns: minmax(0, 893fr) minmax(0, 838fr); gap: clamp(28px, 2.7vw, 52px); }
}

/* Quality: the opening (copy 840 / photograph 820, 86 apart), closer to the first test row. */
.site[data-page="quality-control"] section.qc-intro.pad { padding: clamp(40px, 3vw, 58px) 0 clamp(16px, 2.2vw, 42px); }
@media (min-width: 901px) {
    .site[data-page="quality-control"] .qc-intro .detail-hero:has(img[src*="/img/owner/"]) { grid-template-columns: minmax(0, 840fr) minmax(0, 820fr); gap: clamp(36px, 4.5vw, 86px); }
}

/* Manufacturing Service: copy 840 / photograph 873 (66 apart), the photograph on either side. */
@media (min-width: 901px) {
    .site[data-page="manufacturing"] .mfs-anchor .detail-hero:has(img[src*="/img/owner/"]) { grid-template-columns: minmax(0, 840fr) minmax(0, 873fr); column-gap: clamp(40px, 3.4vw, 66px); }
    .site[data-page="manufacturing"] .mfs-anchor .detail-hero:has(> .ph:first-child img[src*="/img/owner/"]) { grid-template-columns: minmax(0, 873fr) minmax(0, 840fr); }
}

/* Product & Consumer Testing: the Research Center's photograph wider (about 47% of the content),
   reaching a little past the container's right edge. */
.site[data-page="skinproof"] #research-center + section .sp-split.rev { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
@media (min-width: 1081px) {
    .site[data-page="skinproof"] #research-center + section .sp-photo:has(img[src*="/img/owner/"]) { margin-right: calc(-1 * clamp(0px, 2.3vw, 44px)); }
}
@media (max-width: 900px) {
    .site[data-page="skinproof"] #research-center + section .sp-split.rev { grid-template-columns: 1fr; }
}

/* Market Access: Regulatory Support tighter above and below, its tall photograph filling most of it. */
@media (min-width: 941px) {
    .site[data-page="market-access"] #regulatory-support + section { padding-top: clamp(48px, 3.7vw, 72px); padding-bottom: clamp(40px, 2.6vw, 48px); }
}