/* ==========================================================================
   Express Group: company pages (T-010)
   Loaded after main.css and pages.css by the company pages only
   (front matter "css: pages, company"): Accreditations and health and safety,
   Sustainability, Careers and the vacancy template.
   Only the few parts the kit lacked. Each block says what it is for, so the
   lead can fold it into pages.css.
   ========================================================================== */

/* 1. TBC chip on dark cards and tiles: moved to pages.css ("Small shared parts", R1-06), so every page has it. */

/* 2. Note card at the end of a cert grid (fills the last cell; dashed like
      .person--note). */
.cert--note {
  justify-content: flex-start;
  border-style: dashed;
  border-color: var(--c-line-2);
  background: transparent;
}
.cert--note .feature__icon { margin-bottom: 4px; }
.cert__note-text { font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-2); }

/* 3. Grouped document lists: two lists side by side on wide screens, each
      with a small heading. Document titles are h4 inside a group. */
.doc-groups { display: grid; gap: clamp(28px, 3vw, 40px); }
.doc-group__title {
  margin-bottom: 14px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.doc-group .doc__meta span:nth-child(n + 2) { white-space: normal; }
@media (min-width: 1024px) {
  .doc-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* 4. Spacing for a spec block or note that follows text in a split */
.company-spec { margin-top: 24px; }
.company-note { margin-top: 16px; font-size: var(--fs-small); color: var(--c-text-2); }
.split__content .page-hero__actions { margin-top: 24px; }

/* 5. "Figures to follow": one neutral line where a whole block has no
      content yet (Sustainability). */
.to-follow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 16px;
  border: 1px dashed var(--c-line-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-text-2);
}
.to-follow .icon { width: 18px; height: 18px; flex: none; color: var(--c-accent-ink); }
.feature--dark .to-follow { border-color: rgba(255, 255, 255, 0.32); color: var(--c-on-dark); }
.feature--dark .to-follow .icon { color: var(--c-accent); }
.feature .to-follow { margin-top: 4px; align-self: flex-start; }

/* 6. Closing band with page-specific buttons (same look as the cta-band
      partial, which only carries the two tender CTAs). Nothing new is needed
      beyond the partial's own classes; this keeps a third button tidy. */
.cta-band__actions .btn--outline { background: var(--c-surface); }

/* 7. Careers: the empty "no vacancies" state and the vacancy card */
.vacancies-empty .btn { margin-top: 6px; }
.vacancy-list { display: grid; gap: 12px; }
.vacancy {
  position: relative;
  display: grid;
  gap: 16px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.vacancy:hover { border-color: var(--c-line-2); box-shadow: var(--shadow-soft); }
.vacancy__title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.vacancy__link { color: var(--c-ink); text-decoration: none; }
.vacancy__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vacancy__link:focus-visible { outline: none; }
.vacancy:focus-within { outline: 3px solid var(--c-accent-ink); outline-offset: 3px; }
.vacancy__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.vacancy__facts dt { font-size: 0.8125rem; color: var(--c-muted); }
.vacancy__facts dd { margin-top: 1px; font-size: var(--fs-small); font-weight: 600; }
.vacancy__apply { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.vacancy__apply .btn__icon { width: 36px; height: 36px; }
@media (min-width: 768px) {
  .vacancy { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .vacancy__facts { grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 10px 36px; }
}

/* 8. Concept-only label above the vacancy example (like .kit-label, but on
      a page that keeps it) */
.example-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: clamp(20px, 2.4vw, 28px);
  padding: 14px 18px;
  border: 1px dashed var(--c-accent-ink);
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-ink);
}
.example-note .icon { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--c-accent-ink); }
.example-placeholder { color: var(--c-muted); font-style: italic; }

/* 9. Space above a block that follows a split in the same section */
.company-gap { margin-top: var(--stack); }

/* 10. Accreditations (T-062): the schemes' own marks, each as the scheme issues it (never recoloured or cropped), on
       a light ground.
       a. A certificate card's mark in place of the typeset seal (FIRAS): a white tile as high as the seal (64px). */
.cert__mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: #FFFFFF;
}
.cert__mark img { display: block; width: auto; height: 40px; max-width: 100%; }
.cert__mark:empty { display: none; } /* WordPress: a mark not (yet) in the Media Library leaves no empty tile */
@media (max-width: 479.98px) {
  .cert__mark { padding: 0 10px; }
  .cert__mark img { height: 32px; } /* leaves the card's heading room beside it at 320px */
}
/*     b. "Certification body": the Forefront Certification and UKAS mark at 80px (Forefront: 50px at least online),
          unaltered and untrimmed, with the three certificate numbers under it; the text beside it, or under it where
          the card is narrow. */
.cert--body { flex-flow: row wrap; align-items: center; gap: 20px 28px; }
.cert__body-mark { display: grid; flex: none; justify-items: center; gap: 10px; }
.cert__mark--iso { height: auto; padding: 0; border: 0; background: none; }
.cert__mark--iso img { height: 80px; }
.cert__numbers {
  display: grid;
  gap: 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-2);
}
.cert__body-text { display: grid; flex: 1 1 220px; gap: 8px; }

/*     c. "Memberships and schemes": one card per scheme (the footer's list, the rows with a line for this page):
          the mark on white at the same optical height (--s, as in the footer), the name and one plain line.
          One column on phones, two from 640px, three from 1024px; a last card left alone fills its row with the mark
          beside the text, two left over share the row (as the certificate cards). */
.schemes { --scheme-h: 44px; display: grid; gap: 12px; }
.scheme {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.scheme__mark {
  display: flex;
  align-items: center;
  box-sizing: content-box;
  height: calc(var(--scheme-h) * 1.25);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-line);
}
.scheme__mark img { display: block; width: auto; height: calc(var(--scheme-h) * var(--s, 1)); max-width: 100%; object-fit: contain; }
.scheme__body { display: grid; gap: 6px; }
.scheme__name { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.scheme__name .tbc { margin-left: 4px; vertical-align: 1px; }
.scheme__text { font-size: var(--fs-small); line-height: 1.55; color: var(--c-text-2); text-wrap: pretty; }
@media (min-width: 640px) {
  .schemes { --scheme-h: 56px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .schemes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .schemes > .scheme { grid-column: span 2; }
  .schemes > .scheme:nth-child(3n + 1):nth-last-child(2),
  .schemes > .scheme:nth-child(3n + 2):last-child { grid-column: span 3; }
}
/* A card alone in its row: the mark on the left, about as wide as a column above, the text beside it. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .schemes > .scheme:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 28px; }
  .schemes > .scheme:last-child:nth-child(odd) > .scheme__mark { flex: 0 0 calc(50% - 40px); padding: 0 28px 0 0; border-bottom: 0; border-right: 1px solid var(--c-line); }
}
@media (min-width: 1024px) {
  .schemes > .scheme:nth-child(3n + 1):last-child { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 28px; }
  .schemes > .scheme:nth-child(3n + 1):last-child > .scheme__mark { flex: 0 0 calc(33.333% - 40px); padding: 0 28px 0 0; border-bottom: 0; border-right: 1px solid var(--c-line); }
}