/* Accreditations — rework ----------------------------------------------------
 *
 * Scoped to [data-mode="frontier"]: the same Webflow block exists on the
 * second ported site, which is served verbatim, and this restyle shortened it
 * by 77px there. New rules in this file need the same prefix — see the `mode`
 * field in lib/sites.ts.
 *
 * Restyles the existing Webflow block rather than replacing its markup. The
 * section appears verbatim on ten pages, its DOM already carries everything
 * (image, three certificate PDFs, CAGE/UEI, NATO and ISO marks), and replacing
 * a nested block by string match would be fragile where a stylesheet is not.
 * One file, all ten pages.
 *
 * It was light at first — a credential register does read well on paper white,
 * and terraindustries.co sets its whole spec language that way. It now runs on
 * the dark ground with the rest of the page tail (page-tail.css): Terra is the
 * one reference whose light theme the design system explicitly did not take,
 * and both dark references close the page on the ground it opened on.
 *
 * The certification rows become a register: hairline per row, standard set
 * large, description beneath, download action pinned right, the whole row
 * clickable.
 */

/* Flipped to the dark ground with the rest of the page tail (page-tail.css).
   It was light on purpose before — a credential register does read well on
   paper white, and Terra sets its whole spec language that way. But Terra is
   the reference whose light theme the system explicitly did not take, and both
   dark references close the page on the ground it opened on. */
[data-mode="frontier"] .section_acreditations-home {
  --acc-ink: #ffffff;
  --acc-muted: rgba(255, 255, 255, 0.62);
  --acc-line: rgba(255, 255, 255, 0.14);
  /* The ground the section sits on. Anything that fills with --acc-ink has to
     draw its text in this, not in a hard-coded white — that pairing is what
     broke the PDF button when the section was flipped from light to dark. */
  --acc-surface: #0b0b0b;
  background-color: var(--acc-surface);
  color: var(--acc-ink);
}

/* --- Layout --------------------------------------------------------------- */

/* The section has to fit one screen, so the vertical padding is taken off the
   Webflow utilities (40/120px) and tied to viewport height instead. */
[data-mode="frontier"] .section_acreditations-home .padding-top {
  padding-top: clamp(2rem, 5vh, 3.5rem);
}

[data-mode="frontier"] .section_acreditations-home .padding-bottom {
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

/* 5/7, not 1/1. At an even split the square photograph ran to ~700px and
   dominated the section, while the register was squeezed into the same width —
   which is what pushed the download action so far from the text it belonged to.
   Giving the copy the larger share fixes both at once. */
[data-mode="frontier"] .section_acreditations-home .accreditations_grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

/* The source is 906x906 — square. Stretching it to the content column's height
   made it 555x883 and `cover` then cut ~37% off either side, which is what made
   the two figures look cramped. At 1:1 nothing is cropped at all. */
[data-mode="frontier"] .section_acreditations-home .animation_wrapper {
  position: relative;
  aspect-ratio: 1;
  /* Capping the *height* would break the square back open and `cover` would
     start cropping the sides again. Capping the width keeps it square and just
     makes it smaller, so a short laptop loses size instead of picture. */
  width: 100%;
  max-width: min(100%, 62vh);
  margin-inline: auto;
}

[data-mode="frontier"] .section_acreditations-home .img_cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 2px, as on the framed hero — not the 24px pill it was. */
  border-radius: 2px;
}

/* Hairline inside the edge, the same device the capability media uses. */
[data-mode="frontier"] .section_acreditations-home .animation_wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--acc-line);
  border-radius: 2px;
  pointer-events: none;
}

[data-mode="frontier"] .section_acreditations-home .accreditations_content {
  display: flex;
  flex-direction: column;
  /* The Webflow rule sets align-items: flex-start, which shrinks each block to
     its text width — the register then ended halfway across the column and the
     download actions floated in the middle instead of sitting at its right
     edge. */
  align-items: stretch;
  gap: clamp(1.6rem, 3.2vh, 2.6rem);
}

/* --- Eyebrows ------------------------------------------------------------- */

/* In IBM Plex Mono, as on both dark references, where every label of this kind
   is set in a mono rather than in the body face. */
[data-mode="frontier"] .section_acreditations-home .text-style-tagline-small {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--site-accent, #c4b798);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}

/* The site's "//" motif, added without touching the markup. Kept in ink rather
   than brand yellow, which is a pale sand and near-invisible on this ground. */
[data-mode="frontier"] .section_acreditations-home .text-style-tagline-small::before {
  content: "//";
  margin-right: 0.75rem;
  opacity: 0.38;
}

/* The Webflow spacer divs are replaced by real gaps below. */
[data-mode="frontier"] .section_acreditations-home .spacer-xsmall,
[data-mode="frontier"] .section_acreditations-home .spacer-xxsmall {
  display: none;
}

[data-mode="frontier"] .section_acreditations-home .accreditations_content > div {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Lead paragraph. */
[data-mode="frontier"] .section_acreditations-home .accreditations_content > div:first-child > div:last-child {
  max-width: 52ch;
  color: var(--acc-muted);
  line-height: 1.6;
}

/* --- Certification register ------------------------------------------------ */

/* The rows are already separated by their own hairlines and padding, so the
   block's flex gap between them was redundant — and on a short laptop those
   three extra gaps plus the one after the inline <style> holder were what
   pushed the section past the fold. A register should read as one continuous
   table anyway. */
[data-mode="frontier"] .section_acreditations-home .accreditations_content > div:has(.iso_link-holder) {
  gap: 0;
}

[data-mode="frontier"] .section_acreditations-home
  .accreditations_content
  > div:has(.iso_link-holder)
  > .text-style-tagline-small {
  margin-bottom: 0.9rem;
}

/* Webflow wraps the section's inline <style> in a div; as a flex child it
   contributes nothing but a gap. */
[data-mode="frontier"] .section_acreditations-home .accreditations_content > div > .w-embed {
  display: none;
}

[data-mode="frontier"] .section_acreditations-home .iso_link-holder {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: clamp(0.85rem, 1.5vh, 1.25rem) 0;
  border-top: 1px solid var(--acc-line);
  transition: border-color 0.3s ease;
}

/* Closes the register off at the bottom. */
[data-mode="frontier"] .section_acreditations-home .iso_link-holder:last-of-type {
  border-bottom: 1px solid var(--acc-line);
}

[data-mode="frontier"] .section_acreditations-home .iso_link-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

/* The description sits outside the <a>, so the anchor is stretched over the
   whole row — the entire entry is the download target, not just its title. */
[data-mode="frontier"] .section_acreditations-home .iso_link-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Webflow's own hover underline, replaced by the row treatment. */
[data-mode="frontier"] .section_acreditations-home .iso_link-wrapper::before {
  display: none;
}

[data-mode="frontier"] .section_acreditations-home .iso_line {
  display: none;
}

[data-mode="frontier"] .section_acreditations-home .iso_link-wrapper .heading-style-h4 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  /* Terra's tight negative tracking — it is what makes a spec figure read as
     a designation rather than as body copy. */
  letter-spacing: -0.025em;
}

/* A labelled chip, not a bare circle. The naked icon at the far end of the row
   read as a stray dot: nothing said what it did, and at 2.5rem it was too small
   to look deliberate. Set in the tag language the rest of the system uses —
   mono, uppercase, 0.04em, 2px corners — so it reads as an action. */
[data-mode="frontier"] .section_acreditations-home .iso_link-wrapper .w-embed {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  height: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--acc-line);
  border-radius: 2px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--acc-muted);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

/* Decorative: the link's accessible name is already the standard it points to. */
[data-mode="frontier"] .section_acreditations-home .iso_link-wrapper .w-embed::before {
  content: "PDF";
}

[data-mode="frontier"] .section_acreditations-home .iso_link-wrapper svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Description line under the standard. */
[data-mode="frontier"] .section_acreditations-home .iso_link-holder > div:last-child {
  color: var(--acc-muted);
}

/* The row's rules stay put on hover. Brightening them lit up the dividers
   above and below the row, which read as the whole list reacting rather than
   the one control the pointer is on. The download button is the affordance —
   it inverts, and nothing else moves. */

/* Fills with the ink and draws in the surface — an inversion, so it flips with
   the section instead of assuming which way round it is. */
[data-mode="frontier"] .section_acreditations-home .iso_link-holder:hover .w-embed {
  background-color: var(--acc-ink);
  border-color: var(--acc-ink);
  color: var(--acc-surface);
}

[data-mode="frontier"] .section_acreditations-home .iso_link-holder:hover svg {
  transform: translateY(2px);
}

/* --- MORE: CAGE / UEI ------------------------------------------------------ */

/* Identifiers are read character by character — tabular figures and a little
   tracking make them checkable against a document. */
[data-mode="frontier"] .section_acreditations-home .accreditations_content > div:last-child > div:nth-child(2) {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1.9;
  color: var(--acc-muted);
}

/* --- Marks ----------------------------------------------------------------- */

[data-mode="frontier"] .section_acreditations-home .accreditations_image-wrapper {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-top: 0.5rem;
}

/* No filter. Two knockouts were tried on the dark ground and both were worse
   than leaving the marks alone:

     brightness(0) invert(1)   flattened every channel to white — the NATO mark
                               has genuinely white areas, so the whole emblem
                               became one solid white block
     grayscale(1) invert(1)
       + mix-blend-mode screen negative of each mark, and the near-black inside
                               their bounding boxes never fully dropped out

   Rendered raw on #0b0b0b they need neither: NATO's own black half sinks into
   the ground and its white compass reads straight off it, and ISO's blue plate
   holds. Certification marks are also the one class of logo that should not be
   recoloured — the usage rules for both require faithful reproduction. */
[data-mode="frontier"] .section_acreditations-home .accreditations_image-wrapper img {
  width: auto;
  height: 2.5rem;
  filter: none;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

[data-mode="frontier"] .section_acreditations-home .accreditations_image-wrapper:hover img {
  opacity: 1;
}

/* --- Responsive ------------------------------------------------------------
 *
 * Every selector below carries the [data-mode="frontier"] scope, and that is
 * load-bearing rather than tidiness: a media query adds no specificity. The
 * desktop rules above are scoped, so an unscoped `.section_acreditations-home
 * .accreditations_grid` inside `@media` loses to them at every width and the
 * block simply never collapsed — at 390px the copy was still in a 7fr column
 * beside the picture, wrapping at three words a line, and the ISO marks ran off
 * the right edge. Nine rules were dead this way, including the reduced-motion
 * ones. Checked across every stylesheet; this file was the only offender.
 */

@media (max-width: 991px) {
  [data-mode="frontier"] .section_acreditations-home .accreditations_grid {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-mode="frontier"] .section_acreditations-home .animation_wrapper {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-mode="frontier"] .section_acreditations-home .iso_link-holder,
  [data-mode="frontier"] .section_acreditations-home .iso_link-wrapper .w-embed,
  [data-mode="frontier"] .section_acreditations-home .iso_link-wrapper svg,
  [data-mode="frontier"] .section_acreditations-home .accreditations_image-wrapper img {
    transition: none;
  }
}

/* Short desktop viewports: the section still has to sit on one screen, so the
   type steps down rather than the section growing past the fold. */
@media (min-width: 992px) and (max-height: 820px) {
  [data-mode="frontier"] .section_acreditations-home .animation_wrapper {
    max-width: min(100%, 56vh);
  }
  [data-mode="frontier"] .section_acreditations-home .iso_link-wrapper .heading-style-h4 {
    font-size: 1.5rem;
  }
  [data-mode="frontier"] .section_acreditations-home .iso_link-holder {
    padding: 0.65rem 0;
  }
  /* Tighter, not smaller-by-force. This rule used to read `width: 2.1rem;
     height: 2.1rem`, from when .w-embed was a bare icon square — the block was
     later re-cut as a "PDF ⤓" tag button and the rule was never updated. It
     went unnoticed because the whole media query was unscoped and therefore
     dead; scoping it turned the button into a 34px stub with its label clipped
     at 1440x800. Measured: 77px wide at full height, 34px here. */
  [data-mode="frontier"] .section_acreditations-home .iso_link-wrapper .w-embed {
    padding: 0.4rem 0.6rem;
    gap: 0.4rem;
  }
  [data-mode="frontier"] .section_acreditations-home .accreditations_image-wrapper img {
    height: 2rem;
  }
  [data-mode="frontier"] .section_acreditations-home .accreditations_content {
    gap: 1.1rem;
  }
  [data-mode="frontier"] .section_acreditations-home .accreditations_content > div {
    gap: 0.65rem;
  }
  [data-mode="frontier"] .section_acreditations-home .accreditations_content > div:first-child > div:last-child {
    line-height: 1.45;
  }
}

/* --- Hinweis auf den gesperrten Zertifikats-Download -------------------------
 *
 * Die drei ISO-Kacheln zeigen ein Download-Symbol, geben aber nichts heraus.
 * Der Hinweis sagt beim Klick warum — kurz, unten mittig, und ohne die Seite
 * abzudunkeln: er beantwortet eine Frage, er stellt keine.
 *
 * Dasselbe Glas wie Kopfzeile und Dialoge (--site-glass aus navbar.css), damit
 * er über beliebigem Untergrund lesbar bleibt und nicht wie ein Fremdkörper
 * wirkt.
 */
.cert-note {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 1100;
  transform: translate(-50%, 0.75rem);
  max-width: min(30rem, calc(100vw - 2rem));
  padding: 0.875rem 1.25rem;
  background-color: var(--site-glass, rgba(12, 12, 12, 0.58));
  backdrop-filter: var(--site-glass-blur, blur(40px));
  -webkit-backdrop-filter: var(--site-glass-blur, blur(40px));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.875rem;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  /* Nicht anklickbar: er liegt über der Seite und soll nichts abfangen. */
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.cert-note[hidden] {
  display: none;
}

.cert-note.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Der Knopf ersetzt den früheren Link und muss aussehen wie vorher — ein
   <button> bringt Rahmen, Hintergrund und Zentrierung des Browsers mit. */
.iso_link-wrapper {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .cert-note {
    transition: opacity 0.01s;
    transform: translate(-50%, 0);
  }
}