/* ==========================================================================================
   Surfing Solutions, website v2. The manufacturing group: How We Work, Casting Process,
   Forging Process, Production Gallery and Quality.
   Measured from the reference process pages (centrifugal, shell moulding, no bake), the
   production gallery and the quality page at 1440 and 390 wide. The banner, the red sub menu,
   titles, accordions and the lightbox come from site.css; this file only adds what those pages
   show and the shared system does not.
   ========================================================================================== */

/* ---------- the one line under the red sub menu (20/30 on desktop, 18/27 on a phone) ---------- */
.mfg-intro { padding: 80px var(--gutter) 30px; }
.mfg-intro.is-tight { padding: 50px var(--gutter); }
.mfg-intro p { margin: 0; font: 500 20px/30px var(--font); letter-spacing: 0.5px; color: var(--text); }

/* ---------- numbered steps: text on one side, the picture on the other, sides alternating ----------
   Columns 653 wide with 40 between them, the picture 653 x 350, the text block centred against it. */
.steps { padding: 0 var(--gutter) 40px; }
.step {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px;
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: ". media" "head media" "body media" ". media";
  padding: 25px 10px;
}
.step:nth-child(even) { grid-template-areas: "media ." "media head" "media body" "media ."; }
.step-title {
  grid-area: head; position: relative; margin: 0; padding-bottom: 14px;
  font: 700 35px/40px var(--font); color: var(--black);
}
.step-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 170px; height: 2px; background: var(--red); }
.step-body { grid-area: body; padding-top: 20px; }
.step-body p { margin: 0 0 14.4px; font: 500 16px/24px var(--font); letter-spacing: 0.5px; color: var(--text); }
.step-body p:last-child { margin-bottom: 0; }
.step-body a:not(.btn) { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.step-body a:not(.btn):hover { color: var(--blue); }
.step-media { grid-area: media; align-self: center; position: relative; height: 350px; overflow: hidden; background: var(--light); }
.step-media > img { width: 100%; height: 100%; object-fit: cover; }
.step-media.is-drawing > img { object-fit: contain; }
.step-media.is-white { background: var(--white); }
.step-media.is-white > img { object-fit: contain; }
.step-media.is-panel { height: auto; overflow: visible; background: none; }

/* red chevron lists: plain (shell moulding page) and with a bold title line (no bake page) */
.tick-list { margin: 20px 0; }
.tick-list:first-child { margin-top: 0; }
.tick-list:last-child { margin-bottom: 0; }
.tick-list li { position: relative; padding: 0 0 4px 23px; font: 500 16px/24px var(--font); color: var(--black); }
.tick-list li + li { margin-top: 4px; }
.tick-list li::before {
  content: "\f138"; position: absolute; left: 0; top: 0; width: 18px;
  font: 900 14px/24px "Font Awesome 5 Free"; color: var(--red);
}
.tick-list b { font-weight: 700; }
.tick-list--titled li { font-weight: 400; }
.tick-list--titled b { display: block; }

/* pictures that slide on their own, one every five seconds, as the reference's step photos do */
.slides .track { display: flex; height: 100%; animation: slides2 11s infinite; }
.slides .track > img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
.slides .track > img.contain { object-fit: contain; background: var(--white); }
.slides.n3 .track { animation-name: slides3; animation-duration: 16.5s; }
.slides:hover .track { animation-play-state: paused; }
@keyframes slides2 {
  0%, 45.45% { transform: translateX(0); }
  50%, 95.45% { transform: translateX(-100%); }
  100% { transform: translateX(-200%); }
}
@keyframes slides3 {
  0%, 30.3% { transform: translateX(0); }
  33.33%, 63.64% { transform: translateX(-100%); }
  66.67%, 96.97% { transform: translateX(-200%); }
  100% { transform: translateX(-300%); }
}
@media (prefers-reduced-motion: reduce) { .slides .track { animation: none; } }

/* ---------- tables in the reference's red header style (no search, no sorting) ---------- */
.table-wrap { overflow-x: auto; }
.spec-table { width: 100%; border-collapse: collapse; font: 400 14.4px/21.6px var(--font); color: #111; }
.spec-table th {
  padding: 8px; border: 1px solid var(--white); background: var(--red); color: var(--white);
  font: 500 16px/24px var(--font); text-transform: uppercase; text-align: left; vertical-align: bottom;
}
.spec-table td { padding: 8px; border: 1px solid rgba(122, 122, 122, 0.18); vertical-align: top; }
.spec-table tbody tr:nth-child(even) td { background: #F3E9E9; }
.spec-table td:first-child { font-weight: 600; color: var(--black); }
.spec-table caption { caption-side: bottom; text-align: left; padding-top: 10px; font: 500 14px/21px var(--font); color: var(--muted); }

/* the sample quotation, drawn from sample-data.json */
.quote-card { background: var(--white); border: 1px solid rgba(122, 122, 122, 0.18); }
.quote-card .qh {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 12px;
  background: var(--red); color: var(--white); font: 500 16px/24px var(--font); text-transform: uppercase;
}
.quote-card .qh small { font: 500 14px/24px var(--font); text-transform: none; }
.quote-card dl { margin: 0; }
.quote-card .row {
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 8px 12px;
  border-top: 1px solid rgba(122, 122, 122, 0.18); font: 400 14.4px/21.6px var(--font);
}
.quote-card .row:nth-child(even) { background: #F3E9E9; }
.quote-card dt { font-weight: 600; color: var(--black); }
.quote-card dd { margin: 0; color: #111; }
.redact {
  display: inline-block; padding: 0 12px; background: #111; color: var(--white);
  font: 600 12px/21.6px var(--font); letter-spacing: 0.6px; text-transform: uppercase;
}

/* ---------- production gallery: five across, thin red frames, inset like the reference ---------- */
.pg { padding: 80px var(--gutter); }
.pg .gallery { padding: 0 21px 0 21px; }
.pg .gallery a { cursor: zoom-in; }

/* ---------- quality: policy beside the manufacturers' certificate ---------- */
.q-top { padding: 80px var(--gutter); }
.q-top .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.q-col { padding: 10px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.q-col .title, .q-lab-head .title, .q-split .title { margin: 0; }
.q-col .text p { margin-bottom: 14.4px; }
.q-col .text p:last-child { margin-bottom: 0; }
.num-list { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.num-list li { display: flex; align-items: flex-start; gap: 10px; }
.num-list .n {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: var(--white);
  display: grid; place-items: center; font: 700 18px/18px var(--font);
}
.num-list h3 { margin: 0 0 5px; font: 700 21px/25.2px var(--font); color: var(--black); }
.num-list p { margin: 0; font: 500 16px/24px var(--font); letter-spacing: 0; color: var(--black); }
.test-lead { margin: 0; font: 700 15px/22.5px var(--font); letter-spacing: 0.5px; color: var(--text); }
.test-line { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.test-line li { display: flex; align-items: center; margin: 0 12px; font: 500 16px/30px var(--font); color: var(--text); white-space: nowrap; }
.test-line li::after { content: ""; position: relative; left: 12px; width: 3px; height: 18.6px; background: var(--red); }
.test-line li:last-child::after { display: none; }

/* a certificate shaped placeholder: the manufacturers hold the certificates, never this company */
.cert-ph { display: flex; height: 924px; background: var(--white); border: 1px solid #CFCFCF; }
.cert-ph .band { flex: 0 0 92px; margin-left: 46px; background: var(--blue); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cert-ph .band span {
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font: 800 17px/1 var(--font); letter-spacing: 2.5px; text-transform: uppercase; color: var(--white);
}
.cert-ph .sheet { flex: 1; min-width: 0; padding: 44px 36px 36px; display: flex; flex-direction: column; gap: 22px; }
.cert-ph .kicker { display: flex; align-items: center; gap: 12px; font: 700 15px/20px var(--font); letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); }
.cert-ph .kicker i { font-size: 30px; }
.cert-ph .lead-big { margin: 0; font: 700 34px/44px var(--font); color: var(--black); letter-spacing: 0; }
.cert-ph .note { margin: 0; font: 500 16px/24px var(--font); color: var(--text); }
.cert-ph .slot {
  flex: 1; min-height: 160px; border: 2px dashed #C3C3C3; background: #FAFAFA;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 20px;
}
.cert-ph .slot i { font-size: 54px; color: #C3C3C3; }
.cert-ph .slot span { font: 700 20px/28px var(--font); color: var(--grey); }

/* ---------- quality: the tests, two cards to a row ---------- */
.q-lab-head { padding: 10px var(--gutter); text-align: center; }
.q-lab { padding: 10px var(--gutter) 80px; }
.lab-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 10px; }
.lab-card {
  display: flex; flex-direction: column; gap: 20px; padding: 30px;
  background: var(--light); border: 1px solid var(--line); border-radius: 0 50px 0 0;
}
.lab-card h3 { margin: 0; font: 600 30px/30px var(--font); color: var(--black); text-align: center; }
.lab-card .media { height: 360px; border-radius: 5px; overflow: hidden; background: var(--white); }
.lab-card .media img { width: 100%; height: 100%; object-fit: cover; }
.lab-card .media.is-drawing img { object-fit: contain; }
.lab-card .txt p { margin: 0 0 14.4px; font: 500 16px/24px var(--font); letter-spacing: 0.5px; color: var(--black); }
.lab-card .txt p:last-child { margin-bottom: 0; }
.lab-card .txt .used { font-weight: 700; }

/* ---------- quality: the dark inspection panel beside the grey standards panel ---------- */
.q-split { padding: 0 var(--gutter); }
.q-split .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.q-dark { background: var(--dark); padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 20px; min-width: 0; }
.q-dark .title .t1 { color: var(--light); }
.q-dark .media { height: 402px; overflow: hidden; background: #222; }
.q-dark .text p { color: var(--white); }
.q-dark .text p { margin-bottom: 14.4px; }
.q-dark .text p:last-child { margin-bottom: 0; }
.q-grey { background: var(--light); padding: 50px; display: flex; flex-direction: column; justify-content: center; gap: 20px; min-width: 0; }
.q-grey .q-sub { margin: 0; font: 600 30px/30px var(--font); color: var(--black); }
.q-grey .acc2 .acc-item { margin-bottom: 10px; }
.q-grey .acc2 .acc-item:last-child { margin-bottom: 0; }
.q-grey .acc2 .acc-head { padding: 10px; background: var(--white); font: 500 18px/27px var(--font); }
.q-grey .acc2 .acc-item.open .acc-head { background: var(--red); color: var(--white); }
.q-grey .acc2 .acc-body > div { padding: 0 20px; }
.q-grey .acc2 .acc-item.open .acc-body > div { padding: 20px; }
.q-grey .acc2 .tick-list li { font-weight: 400; }
.q-grey .spec-table td:first-child { width: 34%; }

/* ---------- tablet: one column, the picture under the title as on the reference ---------- */
@media (max-width: 1024px) {
  .step, .step:nth-child(even) {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto;
    grid-template-areas: "head" "media" "body"; column-gap: 0;
  }
  .step-media { height: auto; aspect-ratio: 3 / 2; margin-top: 20px; }
  .step-media.is-panel { aspect-ratio: auto; }
  .q-top .container, .lab-grid, .q-split .container { grid-template-columns: minmax(0, 1fr); }
  .cert-ph { height: 800px; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  .mfg-intro, .mfg-intro.is-tight { padding: 30px var(--gutter); }
  .mfg-intro p { font-size: 18px; line-height: 27px; }
  .steps { padding-bottom: 20px; }
  .step { padding: 10px 0; }
  .step-title { font-size: 20px; line-height: 26px; padding-bottom: 15px; }
  .step-title::after { width: 91px; }
  .quote-card .row { grid-template-columns: 118px minmax(0, 1fr); gap: 10px; }
  .spec-table th { font-size: 14px; line-height: 20px; }
  .pg { padding: 80px var(--gutter); }
  .pg .gallery { padding: 0 10px; }

  .q-top { padding: 50px var(--gutter); }
  .q-top .container { gap: 20px; }
  .q-col { padding: 0; }
  .q-top .title, .q-lab-head .title, .q-split .title { font-size: 30px; line-height: 39px; }
  .num-list .n { font-size: 16px; line-height: 16px; }
  .num-list h3 { font-size: 19px; line-height: 22.8px; }
  .num-list p { font-size: 15px; line-height: 22.5px; }
  .cert-ph { height: 495px; }
  .cert-ph .band { flex-basis: 50px; margin-left: 25px; }
  .cert-ph .band span { font-size: 11px; letter-spacing: 1.5px; }
  .cert-ph .sheet { padding: 20px 16px; gap: 12px; }
  .cert-ph .kicker { font-size: 11px; line-height: 15px; letter-spacing: 1px; gap: 8px; }
  .cert-ph .kicker i { font-size: 20px; }
  .cert-ph .lead-big { font-size: 20px; line-height: 27px; }
  .cert-ph .note { font-size: 14px; line-height: 21px; }
  .cert-ph .slot { min-height: 0; gap: 8px; padding: 12px; }
  .cert-ph .slot i { font-size: 34px; }
  .cert-ph .slot span { font-size: 15px; line-height: 21px; }

  .q-lab-head { padding: 0 var(--gutter) 20px; }
  .q-lab { padding: 0 var(--gutter) 25px; }
  .lab-grid { gap: 12px; padding: 0; }
  .lab-card { padding: 10px; border-radius: 0; }
  .lab-card h3 { font-size: 25px; line-height: 32.5px; }

  .q-split { padding: 0; }
  .q-dark, .q-grey { padding: 30px var(--gutter); }
  .q-dark .media { height: auto; aspect-ratio: 3 / 2; }
  .q-grey .q-sub { font-size: 25px; line-height: 32.5px; }
}