/* Manufacturing Service (/manufacturing), v9 manufacturing.html. Scoped to .site[data-page="manufacturing"]. */

/*
   Ported from tax-manufacturing.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, and the reason is 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 small teal text to
   Proof Blue #0066B2 (F26), and the home page never took that change.

   The markup is ManufacturingDetail (Overview, Packaging Capabilities, Warehouse and Logistic),
   ManufacturingInfrastructure and ManufacturingLines.
*/

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

/* The section heading as every v9 sub-page sets an H2 (v8 F05): Montserrat Light in Proof Grey at
   lux-v5's size, which outranks tax-manufacturing's own; the one keyword in Inria Serif Italic,
   Innovation Teal. The GenArrow on its first line is lifted 5px to the cap height (v8 §5). */
.site[data-page="manufacturing"] .mfs-h {
    margin: 0 0 18px;
    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="manufacturing"] .mfs-h em { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--teal); }
.site[data-page="manufacturing"] .mfs-h .ga-sig.lead { margin-bottom: 5px; }
.site[data-page="manufacturing"] .mfs-hero .mfs-h { margin-bottom: 14px; }

/* A production line's heading is an in-text headline (v8 F06): Inria Serif Italic, and the card
   heading size v8 gives every card in the category skin (1.25rem), with a smaller GenArrow. */
.site[data-page="manufacturing"] .mfs-h.sm {
    margin: 0 0 16px;
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: 1.25rem; line-height: 1.3; letter-spacing: 0;
}
.site[data-page="manufacturing"] .mfs-h.sm .ga-sig.lead { width: 19px; height: 19px; margin-right: 9px; }

/* The item numbers, 01–05, in the display face. */
.site[data-page="manufacturing"] .mfs-num { margin-right: 4px; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.1rem; color: var(--teal); }

/* ---- Copy beside a photograph: Overview, Packaging Capabilities, Warehouse and Logistic ----- */

/* Body copy at lux-v5's measure, which outranks v9's 16px floor inside .detail-copy; Light, as v8
   F07 sets body text. */
.site[data-page="manufacturing"] .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 photograph at a fixed 4:3, so a portrait and a landscape picture take the same room, in the
   angled crop with square corners and no shadow (v8 F18, F20), and lux-v5's slow zoom on hover. */
.site[data-page="manufacturing"] .mfs-ph { aspect-ratio: 4 / 3; border-radius: 0; box-shadow: none; overflow: hidden; }
.site[data-page="manufacturing"] .mfs-ph img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
}
.site[data-page="manufacturing"] .mfs-ph:hover img { transform: scale(1.04); }
/* The aerial photograph: the main building is on its left. */
.site[data-page="manufacturing"] .mfs-hero .mfs-ph img { object-position: 8% 50%; }

/* The three packing types, a list ruled with hairlines in the copy column. */
.site[data-page="manufacturing"] .mfs-pack { border-top: 1px solid var(--line); }
.site[data-page="manufacturing"] .mfs-pack-item { padding: 14px 0 13px; border-bottom: 1px solid var(--line); }
.site[data-page="manufacturing"] .mfs-pack-item h3 {
    margin: 0 0 5px;
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: 1.05rem; line-height: 1.35; color: #545454;
}
/* lux-v5's floor for text in a column; Light, because v9 F34's Regular names the card skins and
   not this list. */
.site[data-page="manufacturing"] .detail-copy .mfs-pack-item p { margin: 0; font-size: max(15px, .94rem); line-height: 1.7; }

/* The capitals over the warehouse list: never under 12px (v8 F27), Proof Blue (F26). */
.site[data-page="manufacturing"] .detail-copy p.mfs-lbl {
    margin: 0 0 10px;
    font-size: max(12px, .75rem); font-weight: 600; letter-spacing: .16em; line-height: 1.5;
    text-transform: uppercase; color: #0066B2;
}

/* List text at lux-v5's size, Regular rather than Light below 16px (v9 F34). The yellow diamond is
   site.css's. */
.site[data-page="manufacturing"] .detail-list li { font-size: max(15px, .95rem); font-weight: 400; line-height: 1.6; color: #545454; }

/* ---- Infrastructure & Technology ----------------------------------------------------------- */

.site[data-page="manufacturing"] .mfs-intro { max-width: 760px; margin: 0 0 36px; }
.site[data-page="manufacturing"] .mfs-intro .mfs-h { margin-bottom: 12px; }
.site[data-page="manufacturing"] .mfs-intro p {
    margin: 0; max-width: 65ch;
    font-size: max(16px, 1rem); font-weight: 300; line-height: 1.72; color: #545454;
}

.site[data-page="manufacturing"] .mfs-infra { margin: 0 0 14px; }
/* "01 Manufacturing Infrastructure" is a highlight label rather than a headline, so it stays
   Montserrat SemiBold (v8 F06), in Proof Blue (F26). */
.site[data-page="manufacturing"] .mfs-sub {
    display: flex; align-items: baseline; gap: 6px; margin: 0 0 14px;
    font-family: var(--font-body); font-style: normal; font-weight: 600; font-size: 1.1rem; line-height: 1.4;
    color: #0066B2;
}

/* The plants, the warehouse and the four technologies are all editorial columns (v8 F20 a): no
   panel, no shadow, a 2px Innovation Teal rule over each. */
.site[data-page="manufacturing"] .mfs-plants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 44px; margin: 0; }
.site[data-page="manufacturing"] .mfs-plant,
.site[data-page="manufacturing"] .mfs-tech-item {
    padding: 24px 0 0;
    background: transparent; border: 0; border-top: 2px solid var(--teal); border-radius: 0; box-shadow: none;
}
.site[data-page="manufacturing"] .mfs-wh { margin: 0 0 22px; }
.site[data-page="manufacturing"] .mfs-plant h3,
.site[data-page="manufacturing"] .mfs-plant h4 {
    margin: 0 0 2px;
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: 1.1rem; line-height: 1.35; letter-spacing: 0; color: #545454;
}
/* The figure — 7,400 sqm, Up to 12,000 Pallets — is a highlight: SemiBold, Proof Blue (F26). */
.site[data-page="manufacturing"] .mfs-plant b { display: block; margin: 0 0 8px; font-weight: 600; font-size: 1.45rem; line-height: 1.3; color: #0066B2; }

.site[data-page="manufacturing"] .mfs-tech { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; row-gap: 44px; margin-top: 28px; }
.site[data-page="manufacturing"] .mfs-tech-item h3 {
    margin: 4px 0 8px;
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: 1.08rem; line-height: 1.35; letter-spacing: 0; color: #545454;
}

/* Text in a column: lux-v5's 15px floor, Regular (v9 F34). After the .detail-copy rule, which the
   warehouse tile is also inside. */
.site[data-page="manufacturing"] .mfs-plant p,
.site[data-page="manufacturing"] .mfs-tech-item p {
    margin: 0;
    font-size: max(15px, .94rem); font-weight: 400; line-height: 1.7; color: #545454;
}

/* The four technologies rise in turn as the row comes into view (lux-v5 §7). */
.site[data-page="manufacturing"] .mfs-tech.reveal > * {
    opacity: 0; transform: translateY(18px);
    transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
}
.site[data-page="manufacturing"] .mfs-tech.reveal.in > * { opacity: 1; transform: none; }
.site[data-page="manufacturing"] .mfs-tech.reveal.in > :nth-child(2) { transition-delay: .08s; }
.site[data-page="manufacturing"] .mfs-tech.reveal.in > :nth-child(3) { transition-delay: .16s; }
.site[data-page="manufacturing"] .mfs-tech.reveal.in > :nth-child(n+4) { transition-delay: .24s; }

/* ---- Production Capabilities --------------------------------------------------------------- */

/* Two lines across. Each card is lux-v5's editorial column — a hairline over it rather than a
   frame — with the photograph at 2:1 under the rule. */
.site[data-page="manufacturing"] .mfs-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.site[data-page="manufacturing"] .mfs-card {
    display: flex; flex-direction: column; overflow: hidden;
    padding: 26px 0 0;
    background: transparent; border: 0; border-top: 1px solid rgba(159, 162, 166, .5); border-radius: 0; box-shadow: none;
    /* A menu link lands on the card itself: clear of the 78px header and the tab bar under it. */
    scroll-margin-top: 150px;
}
.site[data-page="manufacturing"] .mfs-card-ph { aspect-ratio: 2 / 1; margin: 0 0 22px; overflow: hidden; background: var(--ice); border-radius: 0; }
.site[data-page="manufacturing"] .mfs-card-ph img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 0;
    transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
}
.site[data-page="manufacturing"] .mfs-card:hover .mfs-card-ph img { transform: scale(1.04); }
/* Where each portrait is cut to 2:1: the mixing vessel stays in the middle of the crop. */
.site[data-page="manufacturing"] #semi-solid-production .mfs-card-ph img { object-position: 50% 58%; }
.site[data-page="manufacturing"] #oral-liquid-production .mfs-card-ph img { object-position: 50% 45%; }
.site[data-page="manufacturing"] .mfs-card-body { flex: 1; padding: 24px 28px 28px; }
.site[data-page="manufacturing"] .mfs-desc p { margin: 0 0 18px; font-size: max(15px, .94rem); font-weight: 400; line-height: 1.7; color: #545454; }

/* ---- Motion off -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .site[data-page="manufacturing"] .mfs-tech.reveal > * { opacity: 1; transform: none; transition: none; }
    .site[data-page="manufacturing"] .mfs-ph:hover img,
    .site[data-page="manufacturing"] .mfs-card:hover .mfs-card-ph img { transform: none; }
}

/* ---- Responsive: tax-manufacturing's breakpoints ------------------------------------------- */

@media (max-width: 1000px) {
    .site[data-page="manufacturing"] .mfs-tech { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .site[data-page="manufacturing"] .mfs-lines { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .site[data-page="manufacturing"] .mfs-plants,
    .site[data-page="manufacturing"] .mfs-tech { grid-template-columns: minmax(0, 1fr); }
    .site[data-page="manufacturing"] .mfs-card-body { padding: 20px 20px 22px; }
}

/* ---- In the editor -------------------------------------------------------------------------
   EditableItem's wrapper takes each row's place in the grid, and the row fills it; a photograph's
   slot fills its frame, so the crop is the one the page shows. */
.site[data-page="manufacturing"].cms-canvas .mfs-lines > .cms-item { display: flex; }
.site[data-page="manufacturing"].cms-canvas .mfs-lines > .cms-item > .mfs-card { flex: 1; }
.site[data-page="manufacturing"] .mfs-ph > .cms-image,
.site[data-page="manufacturing"] .mfs-card-ph > .cms-image { height: 100%; }