/*
  References section — matches references/home/6, references/Képernyőfotó
  2026-09-01 - 22.55.36.jpg, a generic "Trusted by the best companies" logo
  wall (Google/Apple/Amazon/... each as an icon above its name, on black).
  That screenshot is a component-pattern reference, not a bespoke
  Brunnbauer mockup — same category as the about-us stat strip and
  capabilities cert badge: the layout idea (headline, grid of trusted-by
  items, each an icon + label) is kept, but the content is real Brunnbauer
  client data, not the placeholder tech-company logos, and — per explicit
  user instruction — the layout stays grouped by industry rather than
  flattened into the reference's single ungrouped grid.

  Two rows of 8 chips: Olaj és gázipar on its own, then Vegyipar +
  Gyógyszergyárak sharing a second row (see the group-headings grid below,
  and CLAUDE.md for the full history — Energiaipar and Berendezés gyártók
  és kivitelezők were both dropped per explicit user instruction).

  Background is flat white, per explicit user instruction (the reference
  itself is black) — same dark-section -> white-section flip capabilities'
  neighbor `mindset.css` already made once, including the same reasoning
  for swapping eyebrow/title colors (slate-200/white only work on a dark
  surface).

  Company names, group headings, and the closing sentence are all copied
  verbatim from https://brunnbauer.hu/referenciak/ (fetched 2026-09-01) —
  including "Huntsmann Corporation Hungary Zrt.", which keeps the old
  site's own spelling (real company is "Huntsman", single n) rather than
  silently correcting it, and the "és kiszolgáló cégei" ("and its service
  companies") suffix the old site attaches to five of the Olaj és Gázipar
  entries specifically, not the other three.

  Logos: every chip in both rows now uses a real client logo file the
  user supplied in assets/logos/company-logos/, curated into
  elements/logos/clients/client-<name>.webp and copied into
  code/assets/logos/clients/ (same raw -> curated -> per-page-copy
  pipeline as every other asset type here) — no https://placehold.co/
  placeholders remain in this section. All 16 files are .webp (converted
  from a PNG/SVG/WebP mix, per explicit user instruction — the two SVGs
  were rasterized first, see changelog.md). See changelog.md for which logos
  needed real processing. Linde was cropped from a marketing banner and
  kept on its own blue background tile; MFGT, FGSZ, and Borsodchem are
  white-only marks with no background of their own, left plain
  transparent per direct user instruction (a deliberately low-contrast
  look on this section's light chip background, not a bug — don't
  silently add a backing tile without asking). Richter Gedeon's mark has
  genuinely transparent cutout letters by design, so the chip's own
  #b4c7e7 fill shows through them intentionally.
*/

.references {
  padding-block: var(--space-9);
  background: var(--color-white);
}

.references__eyebrow {
  color: var(--color-slate-600);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.references__title {
  margin-top: var(--space-3);
  color: var(--color-navy-900);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  text-align: center;
}

.references__divider {
  width: 56px;
  height: 3px;
  margin-top: var(--space-5);
  margin-inline: auto;
  background: var(--color-red-600);
  border-radius: 2px;
}

.references__groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  margin-top: var(--space-8);
}

/* Two group headings sharing one merged chip row (Vegyipar + Gyógyszergyárak
   both land in row 2), per explicit user instruction — sharing the same
   8-column grid as .references__chips below, so "Gyógyszergyárak" (columns
   5-8) sits directly above its own chips, starting at the 5th one, rather
   than just sitting next to "Vegyipar" at the left edge. */
.references__group-headings {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-4);
}

.references__group-headings .references__group-title:first-child {
  grid-column: 1 / 5;
}

.references__group-headings .references__group-title:last-child {
  grid-column: 5 / 9;
}

.references__group-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-navy-900);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}

.references__group-title::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background: var(--color-red-600);
  border-radius: 2px;
}

/* 8-column grid — both this section's rows (Olaj és gázipar; the merged
   Vegyipar + Gyógyszergyárak row) happen to hold exactly 8 chips, so one
   fixed column count fills each row edge-to-edge and lines up with
   .references__group-headings' matching grid above the merged row. */
.references__chips {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* Vertical card: logo on top, name below — was a horizontal text-only
   pill before logos were added. Background is a literal #b4c7e7 (light
   blue), per explicit user color pick — the same one-off literal already
   used for the capabilities cert box and mindset cards — with no border,
   also per explicit user instruction; box-shadow alone now carries the
   card's edge/depth. */
.references__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  background: #b4c7e7;
  /* Rounded on top-left and bottom-right only, per explicit user
     instruction — same asymmetric-corner treatment mindset.css already
     uses on .mindset__card. */
  border-radius: 24px 0 24px 0;
  box-shadow: var(--shadow-sm);
  text-align: center;
}

/* Fixed height, natural width (not a fixed square) — real client logos
   vary a lot in aspect ratio (e.g. Linde and SIAD are much wider than
   tall; MOL and FGSZ are closer to square), and a forced square would
   letterbox the wide ones down to an illegibly thin sliver. */
.references__chip-logo {
  width: auto;
  max-width: 100%;
  height: 48px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* Color/weight/line-height match .mindset__card-title, per explicit user
   instruction; font-size is that same base scaled 15% smaller, per a
   later explicit follow-up. */
/* Logo stays pinned to the top of the card; the name fills whatever
   space is left below it (grid rows stretch every chip in a row to the
   tallest one's height, so that leftover space varies chip to chip) and
   centers its own text vertically within that space, rather than
   sitting flush under the logo with dead space below it. */
.references__chip-name {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  color: var(--color-navy-900);
  font-size: calc(var(--fs-body) * 0.85);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

/* Font-size/line-height match .images__lead, per explicit user
   instruction — color kept as the section's own slate-600 (images__lead's
   own slate-200 is a white-on-dark color, illegible on this section's
   white background), no italic (images__lead isn't italic either). */
.references__note {
  max-width: 640px;
  margin-top: var(--space-8);
  margin-inline: auto;
  color: var(--color-slate-600);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: center;
}

/* ---- Tablet / mobile (<= 768px) ---- */
@media (max-width: 768px) {
  .references {
    padding-block: var(--space-8);
  }

  .references__groups {
    gap: var(--space-6);
  }

  /* The 8-column grid (and the group-headings grid mirroring it) only
     makes sense at widths wide enough to hold 8 cards on one line —
     below that, fall back to a plain wrapping row, and the two merged
     headings just sit side by side rather than tracking their chips'
     exact start column. */
  .references__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .references__chip {
    width: 108px;
  }

  .references__group-headings {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-5);
    row-gap: var(--space-1);
  }
}