/* ============================================================
   Testing & Inspection page — section layout
   Continues the Project Process page's grammar: alternating
   white / light-grey sections, an intro split with a checklist
   panel, fact cards with a green left edge, a deep-blue evidence
   band and annotated picture slots. Colours and type come from
   tokens.css; the .eyebrow, .section-heading and .text-link
   patterns are global (site.css). Local prefix: nz-ti-.
   ============================================================ */

.nz-ti {
  overflow-x: clip;
}

/* ---- Section rhythm ---- */
.nz-ti-section {
  padding: 88px 0;
}

.nz-ti-section--soft {
  background: var(--gray-bg);
}

.nz-ti-section--blue {
  background: var(--blue);
  color: var(--white);
}

.nz-ti-section--blue h2,
.nz-ti-section--blue h3 {
  color: var(--white);
}

.nz-ti-section--blue p {
  color: var(--white);
}

@media (max-width: 760px) {
  .nz-ti-section {
    padding: 52px 0;
  }
}

/* ---- Optional WordPress editor body ---- */
.nz-ti-extra {
  max-width: 78ch;
}

.nz-ti-extra > *:last-child {
  margin-bottom: 0;
}

/* ---- Wide picture slot under the page header ---- */
.nz-ti-banner {
  padding-top: 44px;
  background: var(--white);
}

/* ---- The default check: copy and fact card beside the checklist ---- */
.nz-ti-intro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: start;
}

.nz-ti-intro__copy h2 {
  margin-bottom: 18px;
}

.nz-ti-intro__copy p {
  max-width: 62ch;
}

.nz-ti-intro__panel h3 {
  margin-bottom: 14px;
  font-size: 18px;
}

.nz-ti-checks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nz-ti-checks li {
  display: flex;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--gray-line);
}

.nz-ti-checks__mark {
  flex: 0 0 auto;
  color: var(--green-dark);
  font-size: 15px;
  line-height: 1.45;
}

.nz-ti-checks strong {
  display: block;
  color: var(--blue);
  font-size: 15.5px;
  font-weight: 600;
}

.nz-ti-checks p {
  margin: 3px 0 0;
  color: var(--gray-text);
  font-size: 14px;
  line-height: 1.6;
}

.nz-ti-intro__copy-media {
  margin-top: 30px;
}

/* The picture slot that closes the checklist column, so neither side of the
   split ends in a blank area. */
.nz-ti-intro__panel-media {
  margin-top: 26px;
}

@media (max-width: 1024px) {
  .nz-ti-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}

/* ---- Fact cards: same grammar as the Project Process facts ---- */
.nz-ti-facts {
  max-width: 620px;
  margin: 18px 0 0;
  padding: 4px 20px;
  border: 1px solid var(--gray-line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  background: var(--white);
}

.nz-ti-fact {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 3px 22px;
  padding: 11px 0;
}

.nz-ti-fact + .nz-ti-fact {
  border-top: 1px solid var(--gray-line);
}

.nz-ti-fact dt {
  padding-top: 2px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nz-ti-fact dd {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
}

/* ---- Arranged in advance: copy and media, then the option tiles ---- */
.nz-ti-advance {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 56px;
  align-items: start;
  margin-top: 44px;
}

.nz-ti-advance__copy p {
  max-width: 58ch;
}

.nz-ti-note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--gray-line);
  color: var(--gray-text);
  font-size: 14px;
  line-height: 1.6;
}

/* The four agreed-in-advance options, two by two, closing the copy column
   so it ends level with the picture slot on the right. */
.nz-ti-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.nz-ti-option {
  padding: 18px 20px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
}

.nz-ti-option strong {
  display: block;
  margin-bottom: 6px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 600;
}

.nz-ti-option p {
  margin: 0;
  color: var(--gray-text);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .nz-ti-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1024px) {
  .nz-ti-advance {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* ---- Evidence band on the brand blue ---- */
.nz-ti-docs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: start;
}

.nz-ti-docs__copy h2 {
  margin-bottom: 14px;
}

.nz-ti-docs__copy p {
  max-width: 56ch;
}

.nz-ti-docs__link {
  margin-top: 22px;
}

.nz-ti-docs .text-link {
  color: var(--white);
}

.nz-ti-docs__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nz-ti-docs__row {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(185, 199, 228, 0.35);
}

.nz-ti-docs__mark {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 15px;
  line-height: 1.45;
}

.nz-ti-docs__row strong {
  display: block;
  margin-bottom: 4px;
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
}

.nz-ti-docs__row p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .nz-ti-docs {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .nz-ti-facts {
    padding: 2px 16px;
  }

  .nz-ti-fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 10px 0;
  }
}