/* Product & Consumer Testing (/skinproof), v9 skinproof.html. Scoped to .site[data-page="skinproof"]. */

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

   The markup is SkinproofSection.razor's — the Detail block's "sp" variant — which keeps v9's class
   names, so the rules read against the mockup line for line. Three differences from v9's markup:
   the lead is the rich text's paragraphs inside .sp-head rather than p.sp-lead (a class typed into
   rich text would not survive the sanitiser); a card's list is the rich text's own <ul>, styled
   here as .detail-list was; and the Overview's photograph sits in .sp-ph, which in the editor also
   holds its alt text.

   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. Corners are square and nothing casts a shadow (v8 F18, F20).

   Removed with the copy they styled: .sp-stat (the "40+ professionals" figure, v7 C) and .sp-cta
   (the band is the shared Home-style call to action since v7 #5).
*/

/* ---- Sections ---------------------------------------------------------------------------------- */

/* v9 alternates white and Soft Light Blue down the page (BG p.24): the first and third
   capabilities take the blue. */
.site[data-page="skinproof"] .sp-alt { background: #EDF6F7; }

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

/* Every heading here is Montserrat Light in Proof Grey (v8 F05; v8 sets .sp-title Light for the
   numbered ones as well). The two section h2s — Overview, Research Center — take lux-v5's H2 size,
   whose selector outranks tax-skinproof's; the numbered capabilities' h3s keep tax-skinproof's own
   smaller size. The letter-spacing is lux-v5's too: its section h2 rule outranks v8's -.02em. */
.site[data-page="skinproof"] .sp-title {
    margin: 0 0 14px;
    font-family: var(--font-body); font-style: normal; font-weight: 300;
    font-size: clamp(1.45rem, 2.8vw, 2rem); line-height: 1.25; letter-spacing: -.01em;
    color: #545454;
}
.site[data-page="skinproof"] h2.sp-title { font-size: clamp(1.75rem, 2.8vw, 2.35rem); line-height: 1.22; letter-spacing: -.015em; }

/* "Skinproof Capabilities", the group heading over the three (v8 F13 gave it its GenArrow).
   tax-skinproof set it in Inria Serif Italic, but lux-v5's section h2 rule outranks that class, so
   in v9 it reads as every other H2 does. The hairline under it closes the group's head. */
.site[data-page="skinproof"] .sp-caps { margin-bottom: 44px; padding-bottom: 22px; border-bottom: 1px solid rgba(10,137,170,.16); }
.site[data-page="skinproof"] .sp-caps-title {
    margin: 0;
    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;
}

/* The GenArrow before an H2 is lifted to the cap height (v8 §5); the capabilities' h3s keep the
   4px every lead mark has. */
.site[data-page="skinproof"] .sp-caps-title .ga-sig.lead,
.site[data-page="skinproof"] .sp-overview h2 .ga-sig.lead { margin-bottom: 5px; }

/* The capability's number, Inria Serif Italic in Innovation Teal — Regular since lux-v5 lightened
   the serif figures. */
.site[data-page="skinproof"] .sp-num {
    display: block; margin: 0 0 10px;
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: 1.05rem; line-height: 1; letter-spacing: .04em; color: #0A89AA;
}

/* ---- A section's head: number, heading, lead ---------------------------------------------------- */

.site[data-page="skinproof"] .sp-head { max-width: 760px; margin-bottom: 36px; }

/* Every paragraph of the head is the lead (p.sp-lead in v9): lux-v5's lead size, which v9's 16px
   floor does not outrank, Regular rather than Light (v8 §2), at lux-v5's 65ch measure. */
.site[data-page="skinproof"] .sp-head p {
    margin: 0 0 12px; max-width: 65ch;
    font-size: clamp(1.06rem, 1.5vw, 1.2rem); font-weight: 400; line-height: 1.72; color: #545454;
}
.site[data-page="skinproof"] .sp-head p:last-child { margin-bottom: 0; }

/* ---- Overview: copy beside the slanted photograph ---------------------------------------------- */

/* site.css's .detail-hero lays the two side by side. Its body copy is lux-v5's — max(15px, .98rem)
   outranks v9's 16px on this column — and Light; the first paragraph is the lead, picked by
   position because the copy is rich text. */
.site[data-page="skinproof"] .sp-overview .detail-copy p {
    margin: 0 0 20px; max-width: 65ch;
    font-size: max(15px, .98rem); font-weight: 300; line-height: 1.72; color: #545454;
}
.site[data-page="skinproof"] .sp-overview .detail-copy p:first-of-type { font-size: clamp(1.06rem, 1.5vw, 1.2rem); font-weight: 400; }

/* The photograph keeps the brand's slant but loses the corner and the shadow (v8 F18, F20), and
   eases in a little under the pointer (lux-v5 §7). */
.site[data-page="skinproof"] .sp-ph { min-width: 0; }
.site[data-page="skinproof"] .sp-overview .ph { border-radius: 0; box-shadow: none; overflow: hidden; }
.site[data-page="skinproof"] .sp-overview .ph img { transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.site[data-page="skinproof"] .sp-overview .ph:hover img { transform: scale(1.04); }

/* ---- Cards ------------------------------------------------------------------------------------- */

.site[data-page="skinproof"] .sp-grid { display: grid; gap: 20px; }
.site[data-page="skinproof"] .sp-grid.two { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.site[data-page="skinproof"] .sp-grid.two.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site[data-page="skinproof"] .sp-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* An editorial column, not a box (v8 F20 a): no fill, no frame, no shadow, only a 2px Innovation
   Teal rule along the top — on the Soft Light Blue bands as well, where tax-skinproof had a white
   card. */
.site[data-page="skinproof"] .sp-card { min-width: 0; padding: 24px 0 0; background: transparent; border: 0; border-top: 2px solid #0A89AA; border-radius: 0; box-shadow: none; }

/* The card's name is an in-text headline: Inria Serif Italic (v8 F06). */
.site[data-page="skinproof"] .sp-card h4 {
    margin: 0 0 10px;
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: 1.28rem; line-height: 1.3; color: #545454;
}

/* Card copy is lux-v5's card size and Regular, not Light (v9 F34: Light thins out below 16px). */
.site[data-page="skinproof"] .sp-card p { margin: 0 0 16px; font-size: max(15px, .94rem); font-weight: 400; line-height: 1.7; color: #545454; }
.site[data-page="skinproof"] .sp-card p:last-child { margin-bottom: 0; }

/* The list under the line, as v9's .detail-list draws it — one column, or two for a card marked
   "cols" — with the Genero Yellow diamond for a bullet. */
.site[data-page="skinproof"] .sp-card ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 20px; margin: 0; padding: 0; list-style: none; }
.site[data-page="skinproof"] .sp-card.cols ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site[data-page="skinproof"] .sp-card li { position: relative; padding-left: 20px; font-size: max(15px, .95rem); font-weight: 400; line-height: 1.6; color: #545454; }
.site[data-page="skinproof"] .sp-card li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: #FFD41D; border-radius: 1px; transform: rotate(45deg); }

/* ---- Photograph beside the body ---------------------------------------------------------------- */

/* Five to seven, photograph first; "rev" swaps the columns and moves the photograph right with
   order, so the source still has it first (see SkinproofSection). */
.site[data-page="skinproof"] .sp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.site[data-page="skinproof"] .sp-split.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.site[data-page="skinproof"] .sp-split.rev .sp-photo { order: 2; }
.site[data-page="skinproof"] .sp-body { min-width: 0; }

.site[data-page="skinproof"] .sp-photo { margin: 0; overflow: hidden; border-radius: 0; box-shadow: none; }
.site[data-page="skinproof"] .sp-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* The patch-test portrait, cropped 4:5 on the marked sites. */
.site[data-page="skinproof"] .sp-photo.tall img { aspect-ratio: 4 / 5; object-position: 50% 60%; }

/* ---- Research Center: the testing center's address --------------------------------------------- */

/* The grid kept its two columns when v7 C took the figure out of the first, so the card keeps the
   width it had beside it. */
.site[data-page="skinproof"] .sp-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; align-items: center; margin-top: 28px; }

/* The address card as an editorial column too (v8 F20 a); its tag in Proof Blue at no less than
   12px (v8 F26, F27). The address stays Light: v8's section rule outranks v9's Regular here. */
.site[data-page="skinproof"] .sp-facts .address-card { padding: 24px 0 0; background: transparent; border: 0; border-top: 2px solid #0A89AA; border-radius: 0; box-shadow: none; }
.site[data-page="skinproof"] .sp-facts .address-card .tag { font-size: max(12px, .75rem); color: #0066B2; }
.site[data-page="skinproof"] .sp-facts .address-card h4 { margin: 0 0 8px; font-weight: 400; color: #545454; }
.site[data-page="skinproof"] .sp-facts .address-card address { font-weight: 300; color: #545454; }

/* ---- In the editor ------------------------------------------------------------------------------ */

/* A photograph's alt text, editable under it; never on the public page. */
.site[data-page="skinproof"] .sp-alt-text { margin: 8px 0 0; font-size: .8rem; font-style: italic; line-height: 1.5; color: #545454; }

/* ---- Responsive -------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .site[data-page="skinproof"] .sp-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .site[data-page="skinproof"] .sp-split,
    .site[data-page="skinproof"] .sp-split.rev { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    /* One column: the photograph above the words on either side, as site.css does for .detail-hero. */
    .site[data-page="skinproof"] .sp-split.rev .sp-photo,
    .site[data-page="skinproof"] .sp-overview .sp-ph { order: -1; }
    .site[data-page="skinproof"] .sp-photo.tall img { aspect-ratio: 16 / 10; object-position: 50% 58%; }
    .site[data-page="skinproof"] .sp-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .site[data-page="skinproof"] .sp-grid.two,
    .site[data-page="skinproof"] .sp-grid.two.even { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .site[data-page="skinproof"] .sp-grid.four,
    .site[data-page="skinproof"] .sp-card.cols ul { grid-template-columns: minmax(0, 1fr); }
    .site[data-page="skinproof"] .sp-caps { margin-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .site[data-page="skinproof"] .sp-overview .ph:hover img { transform: none; }
}