/* Scoped to [data-mode="frontier"]: the same marquee exists on the second
   ported site, which is served verbatim. New rules need the same prefix —
   see the `mode` field in lib/sites.ts. */
/* "Trusted by" marquee — proportion fix -------------------------------------
 *
 * The twelve emblems range from a 2.33:1 wordmark (Bundeswehr) to a 0.73:1
 * crest (Serbian Armed Forces). Webflow normalised them on the wrong axis:
 *
 *     .marquee-image { width: 100%; max-width: 5rem; height: auto }
 *
 * Every mark was forced to 80px *wide*, so rendered heights ran from 34px to
 * 110px — a 3.2x spread. The crest towered over the strip and the wordmarks
 * were unreadable.
 *
 * The fix is a fixed box plus `object-fit: contain`: each mark occupies the
 * same area and is fitted inside it, so nothing is cropped and nothing
 * dominates. Wide marks hit the width limit, tall ones the height limit.
 *
 * DO NOT touch `.marquee`'s own column-gap. The page's inline keyframes are
 * `translateX(calc(-100% - 5rem))`, where the 5rem *is* that gap — change one
 * without the other and the loop visibly jumps on every repeat. Only the gap
 * inside `.marquee-content` is ours to set.
 */

[data-mode="frontier"] .section_home-marquee .marquee-image {
  /* Overrides width:100% / max-width:5rem. */
  /* 7 x 4.25rem, not a wide-and-short box: with `contain`, a wide box lets
     wordmarks fill it while crests only reach its height, leaving them ~3x
     smaller in area. Narrower and taller pulls that spread down to ~2x, so the
     marks read at comparable weight. */
  width: 7rem;
  max-width: none;
  height: 4.25rem;
  object-fit: contain;
  /* Marks are not all optically centred in their own canvas. */
  object-position: center;
  flex: none;
}

/* space-around distributed whatever was left over after the old narrow images,
   so the spacing drifted with each mark's width. Fixed boxes plus one gap give
   an even rhythm. */
[data-mode="frontier"] .section_home-marquee .marquee-content {
  justify-content: flex-start;
  gap: clamp(2.5rem, 4vw, 4rem);
  align-items: center;
}

@media (max-width: 767px) {
  [data-mode="frontier"] .section_home-marquee .marquee-image {
    /* Same narrow-and-tall proportion as the desktop box, so the marks stay
       evenly weighted here too. */
    width: 5.5rem;
    height: 3.25rem;
  }
}

/* The Polish emblem is a white eagle on transparency, so on this light ground
   it all but vanishes while every other mark is a coloured crest. Targeted by
   alt text rather than position, so reordering the strip cannot silently move
   the fix onto the wrong mark.

   This is a patch over an asset problem: the proper repair is a dark version of
   that file. The shadow only gives the outline enough definition to be read. */
[data-mode="frontier"] .section_home-marquee .marquee-image[alt*="Polnische"] {
  filter: drop-shadow(0 0 1px rgba(21, 21, 21, 0.55))
    drop-shadow(0 1px 2px rgba(21, 21, 21, 0.25));
}

/* --- Dark ground ---------------------------------------------------------- */

/* The strip moved onto #0b0b0b with the rest of the page tail (page-tail.css).
   Two things break in that move.
   
   First the edge fades: Webflow builds them from
   `var(--color-scheme-1--background)`, which is still the light #f2f2f2, so the
   marquee ran into a white rectangle at each end. They have to be repainted in
   the new ground, not just dimmed. */
[data-mode="frontier"] .section_home-marquee .marquee_overlay {
  background-image: linear-gradient(270deg, transparent, #0b0b0b 99%);
}

[data-mode="frontier"] .section_home-marquee .marquee_overlay.is-right {
  background-image: linear-gradient(90deg, transparent, #0b0b0b 99%);
}

/* Second the labels. "TRUSTED BY" was a 24px centred tagline with 6px of
   tracking — the loudest thing in the section. Both dark references label a
   logo wall with a small mono caps line and let the marks carry it. */
[data-mode="frontier"] .section_home-marquee .text-style-tagline.text-color-black {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--site-accent, #c4b798);
}

[data-mode="frontier"] .section_home-marquee .text-align-center {
  text-align: left;
}

[data-mode="frontier"] .section_home-marquee .text-style-tagline.text-color-black::before {
  content: "//";
  margin-right: 0.75rem;
  opacity: 0.55;
}

/* The strip carried the vertical rhythm of a full section for what is one row
   of marks; hairlines top and bottom make it read as a band instead. */
[data-mode="frontier"] .section_home-marquee .padding-section-large {
  padding-top: clamp(2.5rem, 5vh, 4rem);
  padding-bottom: clamp(2.5rem, 5vh, 4rem);
}

[data-mode="frontier"] .section_home-marquee {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* The white-on-transparent Polish eagle needed a shadow to survive the light
   ground. On black it reads on its own, and the shadow would only muddy it. */
[data-mode="frontier"] .section_home-marquee .marquee-image[alt*="Polnische"] {
  filter: none;
}

/* --- Label left, marks right ---------------------------------------------- */

/* Left-aligning the label on its own line left it stranded over a full-width
   strip. Put on the same 3fr/9fr grid the section heads use (.fr-head), it
   reads as one row: what the marks are, then the marks. */
/* The left edge is the page's, the right edge is the viewport's.
 *
 * This block is the only one on the page without a .padding-global, so its
 * label sat at x=0 while every other section starts at the 4rem gutter — 64px
 * out of line with the eyebrow above it and the one below.
 *
 * Only the left is corrected. The marks are a marquee: they have to run off
 * the screen for the loop to read as endless, and stopping them at a gutter
 * 64px short of the edge would look like a clipping bug rather than a margin.
 * The right-hand fade already does the work of the missing edge. The gutter is
 * repeated from .padding-global rather than inherited — the block has no such
 * wrapper to inherit from — including its 2.5rem step at 991. */
[data-mode="frontier"] .section_home-marquee .container-large {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding-left: 4rem;
}

@media (max-width: 991px) {
  [data-mode="frontier"] .section_home-marquee .container-large {
    padding-left: 2.5rem;
  }
}

[data-mode="frontier"] .section_home-marquee .text-align-center {
  grid-column: 1;
  text-align: left;
}

/* The spacers were stacking the label above the strip; the grid owns the gaps
   now. */
[data-mode="frontier"] .section_home-marquee .spacer-small {
  display: none;
}

[data-mode="frontier"] .section_home-marquee .marquee {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* "AND MANY MORE" is a qualifier, not a second heading — it sits under the
   label in the same column, one step quieter. */
[data-mode="frontier"] .section_home-marquee .text-align-center + .spacer-small + .text-align-center .text-style-tagline,
[data-mode="frontier"] .section_home-marquee .text-align-center:last-child .text-style-tagline {
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.5rem;
}

[data-mode="frontier"] .section_home-marquee .text-align-center:last-child .text-style-tagline::before {
  opacity: 0.3;
}

/* The fade only has to cover the marks now, not the whole section width. */
[data-mode="frontier"] .section_home-marquee .marquee_overlay {
  max-width: 5rem;
}

@media (max-width: 767px) {
  [data-mode="frontier"] .section_home-marquee .container-large {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
  }
  [data-mode="frontier"] .section_home-marquee .marquee {
    grid-column: 1;
    grid-row: auto;
  }
}