/* Quality & Analytical Testing (/quality-control), v9 quality-control.html. Scoped to .site[data-page="quality-control"]. */

/*
   Ported from tax-quality-control.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 prev/next pair
   and the footer are the shared sub-page layer's (site.css) and are not repeated here.

   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 their dark fields
   to Proof Blue #0066B2, and the home page never took that change.
*/

/* ---- Quality and Analytical Testing: the opening section ------------------------------------ */

/* The heading as every v9 sub-page sets an H2 (v8 F05): Montserrat Light, Proof Grey, lux-v5's
   size. Its GenArrow sits on the first line, lifted 5px to the cap height (v8 §5). */
.site[data-page="quality-control"] .qc-h {
    margin: 0 0 16px;
    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: -.02em;
    color: #545454;
}
.site[data-page="quality-control"] .qc-h .ga-sig.lead { margin-bottom: 5px; }

/* Body copy at lux-v5's measure, which outranks v9's 16px floor on this column. */
.site[data-page="quality-control"] .qc-intro .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: larger and Regular (v8 §2). Picked by position, since the copy
   is rich text and a class typed into it would not survive the sanitiser. */
.site[data-page="quality-control"] .qc-copy p:first-child { font-size: clamp(1.06rem, 1.5vw, 1.2rem); font-weight: 400; }

/* The accreditation box: a Soft Light Blue panel (v8 F20 b), square, no rule down its side — v8
   took the teal border off with the rest of the panel's frame. */
.site[data-page="quality-control"] .qc-accr-box {
    display: flex; align-items: center; gap: 20px;
    margin-top: 8px; padding: 18px 22px;
    background: #EDF6F7; border: 0; border-radius: 0; box-shadow: none;
}
.site[data-page="quality-control"] .qc-accr-box img,
.site[data-page="quality-control"] .qc-accr-box .cms-image { width: 96px; height: auto; flex: none; }
.site[data-page="quality-control"] .qc-intro .qc-accr-box p { margin: 0; }
@media (max-width: 560px) {
    .site[data-page="quality-control"] .qc-accr-box { flex-direction: column; align-items: flex-start; }
}

/* The photograph: the brand portrait (845×2048) cropped to 5:4, square-cornered and flat (v8 F18,
   F20) inside the angled crop .shape-photo draws, with lux-v5's slow zoom on hover. */
.site[data-page="quality-control"] .qc-ph { aspect-ratio: 5 / 4; border-radius: 0; box-shadow: none; overflow: hidden; }
.site[data-page="quality-control"] .qc-ph img {
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
    transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
}
.site[data-page="quality-control"] .qc-ph:hover img { transform: scale(1.04); }
@media (max-width: 900px) {
    .site[data-page="quality-control"] .qc-ph { aspect-ratio: 4 / 3; }
}

/* ---- The six tests ------------------------------------------------------------------------- */

/* A section each (v7 #4), 56px top and bottom since v8 F24 drew them closer, on white and Soft
   Light Blue in turn — the "ice" sections carry .bg-ice. */
.site[data-page="quality-control"] .qc-sec { padding: 56px 0; }
@media (max-width: 760px) {
    .site[data-page="quality-control"] .qc-sec { padding: 44px 0; }
}

/* Number on the left, heading and line on the right. Two columns at every width: v7 stacked them
   on a phone, but v8's 2fr / 9fr comes later in v9's cascade at the same weight and keeps the
   number beside the heading there too. */
.site[data-page="quality-control"] .qc-row {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 9fr);
    column-gap: 64px; align-items: start;
}
@media (max-width: 760px) {
    .site[data-page="quality-control"] .qc-row { row-gap: 16px; }
}

.site[data-page="quality-control"] .qc-side { display: flex; align-items: center; gap: 18px; padding-top: 4px; }

/* The number alone since v9 #4 — no method label beside it — in Inria Serif Italic, Innovation
   Teal; Proof Blue on the test the visitor arrived at from the menu. The anchor is the empty
   element BlockRenderer puts in front of the section, so :target is on that. */
.site[data-page="quality-control"] .qc-n {
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: clamp(2.6rem, 4vw, 3.4rem); line-height: 1; color: #0A89AA;
}
.site[data-page="quality-control"] .anchor-target:target + .qc-sec .qc-n { color: #0066B2; }

/* Proof Grey like every other section heading (v9 F32), Light (v8 F05), at v7's size. */
.site[data-page="quality-control"] .qc-st {
    margin: 0 0 14px;
    font-family: var(--font-body); font-style: normal; font-weight: 300;
    font-size: clamp(1.45rem, 2.6vw, 1.95rem); line-height: 1.25; letter-spacing: -.01em;
    color: #545454;
}
.site[data-page="quality-control"] .qc-st .ga-sig.lead { margin-bottom: 5px; }

/* 65 characters to the line (v9 F24). */
.site[data-page="quality-control"] .qc-main p {
    margin: 0; max-width: 65ch;
    font-size: max(15px, 1rem); font-weight: 300; line-height: 1.8; color: #545454;
}

/* ---- Genero Qualitica ---------------------------------------------------------------------- */

/* A Proof Blue band (v8 F03): the name on the left, the login on the right. */
.site[data-page="quality-control"] .qc-strip { padding: 34px 0; background: #0066B2; color: #fff; }
.site[data-page="quality-control"] .qc-strip .container {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}

/* An H3, so Inria Serif Regular Italic (v8 F06), white on the band. */
.site[data-page="quality-control"] .qc-strip h3 {
    margin: 0;
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: 1.25rem; letter-spacing: 0; color: #fff;
}

/* Genero Yellow with Proof Grey on it (v8 F26, 5.3:1), the 4px corner of every sub-page button
   (v8 F19), and no change of fill on hover — the mockup's strip button has none. Its GenArrow
   points forward at 60°, the guideline's Opportunity & Acceleration (v8 F11), and nudges along
   that line on hover. */
.site[data-page="quality-control"] .qc-strip .btn,
.site[data-page="quality-control"] .qc-strip .btn:hover {
    background: #FFD41D; color: #545454; border-color: transparent;
    border-radius: 4px; padding: 13px 26px;
    font-size: .86rem; font-weight: 600; letter-spacing: .02em;
}
.site[data-page="quality-control"] .qc-strip .btn .ga-icon.right { transform: rotate(60deg); }
.site[data-page="quality-control"] .qc-strip .btn:hover .ga-icon.right { transform: rotate(60deg) translateY(-3px); }
@media (max-width: 560px) {
    .site[data-page="quality-control"] .qc-strip .btn { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .site[data-page="quality-control"] .qc-ph:hover img { transform: none; }
}