/* ===== Compatible-technology logo strip =====
   A quiet beat between the explanation section and the product showcase.

   Deliberately NOT built on .section: a full section's 96px of vertical
   padding would give a thin logo row the same page presence as the real
   sections either side of it, which is exactly the wrong emphasis. It is
   supporting material, so it gets supporting spacing.

   Also deliberately not tiled. The integrations row uses bordered cards
   because each of those logos is a full-colour PNG that needs a surface to
   sit on; these are flat single-colour marks separated by hairline rules and
   read as one continuous row on their own. */
.tech-logos {
  padding: var(--space-4) 0;

  /* The logo tone: a lifted, desaturated step off --bg-void (#131b2e) rather
     than a neutral grey or plain white. Keeping the marks in the background's
     own blue family is what makes a row like this sit *in* the page instead of
     on top of it. Sits between --border-strong (#3a4a6b) and --text-muted
     (#93a0bf): dark enough to stay supporting, light enough to stay legible.

     Note these are solid filled logos, unlike the hairline line-art they
     replaced, so they carry far more visual weight at the same lightness —
     hence a notably darker tone here than that version used. */
  --tech-logo-tone: #5b6a8e;

  /* Optical size target: the geometric mean each logo's ink is normalised to,
     NOT a literal box dimension. Actual boxes come out between roughly 38px
     (javascript, bootstrap) and 59px (tailwind) so that the ink inside them
     matches. */
  --tech-logo-size: 38px;
}

.tech-logos-label {
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

/* gap is 0 on purpose: spacing comes from each item's own horizontal padding,
   which is what lets the divider rule sit exactly halfway between two logos
   rather than hard against one of them. */
.tech-logos-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.tech-logo {
  display: block;
  position: relative;
  padding: 0 26px;
}

/* The divider is a pseudo-element at a fixed height, NOT a border-left on the
   item. Optical balancing gives every item a different box height (Tailwind's
   is 59px against JavaScript's 38px), and a border spans whatever its own item
   happens to be — so borders rendered as a row of rules in seven different
   lengths. Sizing it off --tech-logo-size instead keeps every divider
   identical, and keeps them in proportion when the row rescales. */
.tech-logo:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: calc(var(--tech-logo-size) * 0.8);
  background: var(--border-subtle);
}

/* --size is the optical target every mark is normalised to; --box is the
   per-logo correction factor set in the markup (see the note in
   partials/tech-logos.php for how it is derived). Only --size changes at a
   breakpoint, so the whole row rescales while staying balanced. */
.tech-logo-mark {
  display: block;
  width: calc(var(--tech-logo-size) * var(--box, 1));
  height: calc(var(--tech-logo-size) * var(--box, 1));
  background-color: var(--tech-logo-tone);
  -webkit-mask: var(--mark) center / contain no-repeat;
          mask: var(--mark) center / contain no-repeat;
}

@media (max-width: 560px) {
  .tech-logos { --tech-logo-size: 27px; }
  .tech-logo { padding: 0 8px; }
}

/* Small phones (360/375-class). Keeping all seven on one line matters more
   than raw size here: a 4-then-3 wrap reads as a broken grid rather than a
   logo row. Both size and padding step down together so the row still fits at
   320px. */
@media (max-width: 365px) {
  .tech-logos { --tech-logo-size: 23px; }
  .tech-logo { padding: 0 6px; }
}

/* Last-resort guard for very narrow viewports (foldable cover screens and
   similar) where even the reduced row cannot hold one line. A wrapped row
   leaves a divider stranded at the start of line two, which reads as a stray
   mark rather than a separator. */
@media (max-width: 304px) {
  .tech-logo:not(:first-child)::before { display: none; }
}