/*
 * FMBusiness — V2 global base layer (Neo-Swiss × Future Industry × Editorial).
 *
 * Identity: editorial paper base, Space Grotesk display, Source Sans 3 body/UI,
 * IBM Plex Mono engineering metadata, Swiss section numbering, soft editorial
 * media frames, dark editorial sections, flat surfaces + hairlines (no SaaS
 * panels, no default shadows).
 */

* { box-sizing: border-box; }

/* Respect the reader's browser font-size (100%): every rem token scales with it. */
html { font-size: 100%; }

/* ------------------------------------------------------------------ *
 * Base
 * ------------------------------------------------------------------ */
body {
  margin: 0;
  font-family: var(--fm-font-ui);
  color: var(--fm-color-ink);
  background: var(--fm-color-paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* tabular numerals everywhere data appears — alignment is an editorial feature */
.fm-datum,
.fm-stat__value,
.fm-stat__unit,
.fm-format,
.fm-meta,
.fm-dimension,
.fm-metadata,
.fm-section__index,
time.fm-time,
code,
pre {
  font-variant-numeric: tabular-nums;
}

a { color: inherit; }

/* ------------------------------------------------------------------ *
 * Focus system (WCAG 1.4.11 non-text: 2px ring, >=3:1 on both backdrops)
 * ------------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--fm-focus-ring, var(--fm-color-amber-text));
  outline-offset: 2px;
  border-radius: 2px;
}

/* ------------------------------------------------------------------ *
 * Type helpers
 * ------------------------------------------------------------------ */
.fm-display {
  font-family: var(--fm-font-disp);
  font-weight: var(--fm-weight-bold);
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0;
  overflow-wrap: anywhere;
}

/* Visually hidden, still exposed to assistive tech (heading outlines, labels). */
.fm-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ *
 * FM component primitives (V2)
 * ------------------------------------------------------------------ */

/* ---- Buttons (rare; the primary editorial action is a .fm-cta text link) ---- */
.fm-btn {
  min-height: var(--fm-layout-control);
  padding: 10px 18px;
  font-family: var(--fm-font-ui);
  font-size: 15px;
  font-weight: var(--fm-weight-semibold);
  letter-spacing: -0.01em;
  border-radius: var(--fm-radius-btn);
  border: var(--fm-line-hairline) solid var(--fm-color-ink);
  background: transparent;
  color: var(--fm-color-ink);
  cursor: pointer;
  transition: background var(--fm-motion-fast) var(--fm-ease), color var(--fm-motion-fast) var(--fm-ease);
}
.fm-btn:hover { background: var(--fm-surface); }
.fm-btn--primary { background: var(--fm-color-signal); color: var(--fm-color-ink); border-color: var(--fm-color-signal); }
.fm-btn--primary:hover { background: var(--fm-color-signal); color: var(--fm-color-ink); filter: brightness(1.04); }
.fm-btn--dark { background: var(--fm-color-ink); color: var(--fm-color-white); border-color: var(--fm-color-ink); }
.fm-btn--dark:hover { background: var(--fm-color-ink-soft); }
.fm-btn--ghost { background: transparent; color: var(--fm-color-ink); border-color: transparent; }
.fm-btn--ghost:hover { background: var(--fm-surface); }
.fm-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.fm-btn--lg { padding: 14px 24px; min-height: 48px; font-size: 16px; }

/* ---- Editorial CTA text link (the default magazine action) ---- */
.fm-cta {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  font-family: var(--fm-font-data);
  font-size: var(--fm-type-micro);
  font-weight: var(--fm-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fm-color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.fm-cta::after {
  content: '→';
  font-size: 1.15em;
  line-height: 1;
  color: var(--fm-color-amber-text);
  transition: transform var(--fm-motion-fast) var(--fm-ease);
}
.fm-cta:hover::after { transform: translateX(3px); }
.fm-cta--on-ink { color: var(--fm-on-dark); }
.fm-cta--on-ink::after { color: var(--fm-color-signal); }
.fm-cta--external::after { content: '↗'; }

/* ---- Pagination (previous / numbered pages / next) ---- */
.fm-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(2.5rem, calc(1.5rem + 3cqi), 4rem);
  padding-top: 1.5rem;
  border-top: var(--fm-line-hairline) solid var(--fm-color-grid);
}
.fm-pagination__prev { justify-self: start; }
.fm-pagination__next { justify-self: end; }
.fm-pagination__pages {
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
.fm-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0 0.5rem;
  border: var(--fm-line-hairline) solid transparent;
  border-radius: var(--fm-radius-btn);
  font-family: var(--fm-font-data);
  font-size: var(--fm-type-caption);
  font-variant-numeric: tabular-nums;
  color: var(--fm-color-ink);
  text-decoration: none;
  transition: border-color var(--fm-motion-fast) var(--fm-ease);
}
a.fm-pagination__page:hover,
a.fm-pagination__page:focus-visible { border-color: var(--fm-color-ink); }
.fm-pagination__page.is-current {
  border-color: var(--fm-color-ink);
  background: var(--fm-color-ink);
  color: var(--fm-color-paper);
}
.fm-pagination__gap { padding: 0 0.25rem; color: var(--fm-color-steel); }

@media (max-width: 47.999rem) {
  .fm-pagination {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: 0.875rem;
  }
  .fm-pagination__prev,
  .fm-pagination__next { justify-self: center; }
  .fm-pagination__slot { display: none; }
}

/* ---- Links ---- */
.fm-link {
  color: var(--fm-color-ink);
  text-decoration: underline;
  text-decoration-color: var(--fm-color-grid);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--fm-motion-fast) var(--fm-ease);
}
.fm-link:hover { text-decoration-color: var(--fm-color-amber-text); }
.fm-link--amber { color: var(--fm-color-amber-text); text-decoration-color: transparent; }
.fm-link--amber:hover { text-decoration-color: var(--fm-color-amber-text); }

/* ---- Labels / kickers ---- */
.fm-label {
  font-family: var(--fm-font-data);
  font-size: var(--fm-type-caption);
  font-weight: var(--fm-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fm-color-amber-text);
  margin: 0 0 8px;
}
.fm-label--steel { color: var(--fm-color-steel); }

/* ---- Format chips (FM formátumcímkék — pill) ---- */
.fm-format {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  align-self: start;
  font-family: var(--fm-font-data);
  font-size: 12px;
  font-weight: var(--fm-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fm-color-amber-text);
  padding: 4px 10px;
  border: var(--fm-line-hairline) solid var(--fm-color-amber-text);
  border-radius: var(--fm-radius-chip);
  white-space: nowrap;
}
.fm-format--partner { color: var(--fm-color-steel); border-color: var(--fm-color-steel); }
.fm-format--plain { border-color: transparent; padding-left: 0; padding-right: 0; }

/* ---- Article content ON the featured image (listing leads + grid cards) ----
 * Background-image cover surface with a bottom scrim: the story's picture is the
 * card, the text sits on it. Used by the section/archive listing cards; the home
 * card system implements the same look with a real <img> so below-fold pictures
 * stay lazy. Blocks without a usable image never receive the class.
 */
.fm-on-image {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: clamp(18px, 1.8vw, 30px);
  border-radius: var(--fm-radius-card);
  background-image: var(--fm-block-bg);
  background-size: cover;
  background-position: center;
  box-shadow: var(--fm-shadow-soft);
}
.fm-on-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 22, 31, 0.08) 0%, rgba(18, 22, 31, 0.58) 46%, rgba(18, 22, 31, 0.94) 100%);
}
.fm-on-image > * { position: relative; z-index: 1; }
.fm-on-image .fm-media-frame,
.fm-on-image .fm-case__media { display: none; }

/* ---- Section head (Swiss index) — shared by every V2 page template ---- */
.fm-section { margin-top: 84px; }
.fm-section__head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  border-top: var(--fm-line-warn) solid var(--fm-color-ink);
  padding-top: 14px;
  margin-bottom: 30px;
}
.fm-section__index .fm-section__num { color: var(--fm-color-amber-text); font-weight: var(--fm-weight-bold); font-size: 15px; }
.fm-section__index {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-weight: var(--fm-weight-semibold);
}
.fm-section__note {
  margin-left: auto;
  font-family: var(--fm-font-data);
  font-size: var(--fm-type-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fm-color-steel);
}

/* ---- Impact filter chips (business-impact tags — pill) ---- */
.fm-impact {
  display: inline-flex;
  align-items: center;
  font-family: var(--fm-font-data);
  font-size: 12px;
  color: var(--fm-color-steel);
  padding: 4px 10px;
  border: var(--fm-line-hairline) solid var(--fm-color-grid);
  border-radius: var(--fm-radius-chip);
  white-space: nowrap;
}
.fm-impact.is-selected { background: var(--fm-color-ink); color: var(--fm-color-signal); border-color: var(--fm-color-ink); }
.fm-impact:focus-visible { --fm-focus-ring: var(--fm-color-signal); }

/* ---- Signal / status markers ---- */
.fm-signal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fm-font-data);
  font-size: var(--fm-type-caption);
  letter-spacing: 0.02em;
}
.fm-signal::before { content: ''; width: 8px; height: 8px; flex: 0 0 auto; background: var(--fm-color-steel); }
.fm-signal--effective::before { background: var(--fm-color-signal); box-shadow: 0 0 0 3px rgba(240, 165, 0, 0.22); }
.fm-signal--expired::before { background: transparent; border: 2px solid var(--fm-color-ink); }
.fm-signal--effective { color: var(--fm-color-amber-text); }
.fm-signal--expired { color: var(--fm-color-steel); }

/* ---- Mono datum (numbers, measures, units) ---- */
.fm-datum {
  font-family: var(--fm-font-data);
  font-size: var(--fm-type-unit);
  color: var(--fm-color-steel);
  font-variant-numeric: tabular-nums;
}
.fm-datum strong { color: var(--fm-color-ink); font-weight: var(--fm-weight-bold); }
.fm-meta { font-family: var(--fm-font-data); font-size: var(--fm-type-caption); color: var(--fm-color-steel); }

/* ---- Technical metadata layer (V2 signature primitive) ---- */
.fm-metadata {
  font-family: var(--fm-font-data);
  font-size: var(--fm-type-micro);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fm-color-steel);
}
.fm-metadata__code { color: var(--fm-color-ink); font-weight: var(--fm-weight-semibold); }
.fm-metadata__code .fm-metadata__sep { color: var(--fm-color-amber-text); padding: 0 6px; }
.fm-metadata__rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 32px;
  margin-top: var(--fm-grid-soft);
  border-top: var(--fm-line-hairline) solid var(--fm-color-grid);
}
.fm-metadata__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: var(--fm-line-hairline) solid var(--fm-color-grid);
}
.fm-metadata__key { color: var(--fm-color-steel); }
.fm-metadata__value { color: var(--fm-color-ink); font-weight: var(--fm-weight-semibold); font-variant-numeric: tabular-nums; }

/* ---- Data / stat primitive (flat editorial, no panel) ---- */
.fm-stat {
  padding: 4px 0 4px 16px;
  border-left: var(--fm-line-warn) solid var(--fm-color-signal);
  background: transparent;
}
.fm-stat__value { font-family: var(--fm-font-disp); font-size: 42px; font-weight: var(--fm-weight-bold); line-height: 1; color: var(--fm-color-ink); letter-spacing: -0.02em; }
.fm-stat__unit  { font-family: var(--fm-font-data); font-size: 14px; font-weight: var(--fm-weight-semibold); color: var(--fm-color-amber-text); margin-left: 4px; }
.fm-stat__label { font-family: var(--fm-font-ui); font-size: var(--fm-type-caption); color: var(--fm-color-steel); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 8px; }

/* ---- On-ink surface variant (dark editorial panel) ---- */
.fm-on-ink { --fm-focus-ring: var(--fm-color-signal); background: var(--fm-surface-deep); color: var(--fm-on-dark); }
.fm-on-ink .fm-label { color: var(--fm-color-signal); }
.fm-on-ink .fm-meta, .fm-on-ink .fm-datum { color: var(--fm-on-dark-muted); }
.fm-on-ink .fm-stat { border-left-color: var(--fm-color-signal); }
.fm-on-ink .fm-stat__value { color: var(--fm-on-dark); }
.fm-on-ink .fm-stat__unit { color: var(--fm-color-signal); }
.fm-on-ink .fm-metadata { color: var(--fm-on-dark-muted); }
.fm-on-ink .fm-metadata__code { color: var(--fm-on-dark); }
.fm-on-ink .fm-metadata__rows,
.fm-on-ink .fm-metadata__row { border-color: rgba(216, 221, 227, 0.25); }
.fm-on-ink .fm-metadata__key { color: var(--fm-on-dark-muted); }
.fm-on-ink .fm-metadata__value { color: var(--fm-on-dark); }

/* ---- Dark editorial section primitive ---- */
.fm-dark-section {
  position: relative;
  overflow: hidden;
  background: var(--fm-surface-deep);
  color: var(--fm-on-dark);
  border-radius: var(--fm-radius-card);
  padding: clamp(40px, 6vw, 72px);
}
.fm-dark-section a { color: inherit; }
.fm-dark-section .fm-label { color: var(--fm-color-signal); }
.fm-dark-section .fm-meta,
.fm-dark-section .fm-metadata { color: var(--fm-on-dark-muted); }
.fm-dark-section .fm-metadata__code,
.fm-dark-section .fm-metadata__value { color: var(--fm-on-dark); }
.fm-dark-section .fm-metadata__rows,
.fm-dark-section .fm-metadata__row { border-color: rgba(216, 221, 227, 0.25); }
.fm-dark-section .fm-metadata__key { color: var(--fm-on-dark-muted); }
.fm-dark-section--bleed { border-radius: 0; }

/* ---- Swiss section index / numbering ---- */
.fm-section__index {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--fm-font-data);
  font-size: var(--fm-type-micro);
  font-weight: var(--fm-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fm-color-ink);
}
.fm-section__index .fm-section__num { color: var(--fm-color-amber-text); font-weight: var(--fm-weight-bold); }
.fm-section__ghost {
  font-family: var(--fm-font-disp);
  font-size: clamp(96px, 15vw, var(--fm-type-section-num));
  font-weight: var(--fm-weight-bold);
  line-height: 0.78;
  letter-spacing: -0.04em;
  color: var(--fm-color-ink);
  opacity: 0.07;
  user-select: none;
  pointer-events: none;
}
.fm-dark-section .fm-section__ghost { color: var(--fm-on-dark); opacity: 0.10; }

/* ---- Image / media system (V2 soft editorial frames) ---- */
.fm-media-frame {
  position: relative;
  display: block;
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
  border-radius: var(--fm-radius-card);
  background: var(--fm-surface);
}
.fm-media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.fm-media-frame--hero  { border-radius: var(--fm-radius-hero); }
.fm-media-frame--panel { border-radius: var(--fm-radius-panel); }
.fm-media-frame--thumb { border-radius: var(--fm-radius-thumb); }
.fm-media-frame--21x9 { aspect-ratio: 21 / 9; }
.fm-media-frame--16x9 { aspect-ratio: 16 / 9; }
.fm-media-frame--3x2  { aspect-ratio: 3 / 2; }
.fm-media-frame--4x5  { aspect-ratio: 4 / 5; }
.fm-media-frame--1x1  { aspect-ratio: 1 / 1; }

/* ---- Editorial page head (section / author / utility pages) ---- */
.fm-pagehead { display: grid; gap: 16px; padding-top: 44px; }
.fm-pagehead__title { font-size: clamp(40px, 6vw, 88px); letter-spacing: -0.035em; line-height: 0.96; }
.fm-pagehead__dek { font-family: var(--fm-font-body); font-size: 20px; line-height: 1.5; color: var(--fm-color-steel); margin: 0; max-width: 720px; }
.fm-pagehead__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  padding-top: 14px;
  border-top: var(--fm-line-hairline) solid var(--fm-color-grid);
  font-family: var(--fm-font-data);
  font-size: var(--fm-type-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fm-color-steel);
}
.fm-pagehead__meta strong { color: var(--fm-color-ink); font-weight: var(--fm-weight-semibold); }
.fm-pagehead__sep { color: var(--fm-color-amber-text); }

/* ---- Technical drawing dividers ---- */
.fm-hairline { border: 0; border-top: var(--fm-line-hairline) solid var(--fm-color-grid); margin: 24px 0; }
.fm-figure { margin: 0; }
.fm-figure__caption {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--fm-font-data);
  font-size: var(--fm-type-micro);
  line-height: 1.5;
  color: var(--fm-color-steel);
}
.fm-figure__caption > span:first-child { flex: 1 1 auto; }
.fm-figure__credit { flex: 0 0 auto; margin-left: auto; color: var(--fm-color-steel); }
.fm-rule--signal { border: 0; border-top: var(--fm-line-warn) solid var(--fm-color-signal); margin: 0; }
.fm-dimension {
  font-family: var(--fm-font-data);
  font-size: var(--fm-type-caption);
  color: var(--fm-color-steel);
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fm-dimension::before, .fm-dimension::after { content: ''; width: 16px; height: 1px; background: var(--fm-color-steel); }
.fm-dimension::before { box-shadow: -4px 3px 0 0 var(--fm-color-steel), -4px -3px 0 0 var(--fm-color-steel); }
.fm-dimension::after  { box-shadow:  4px 3px 0 0 var(--fm-color-steel),  4px -3px 0 0 var(--fm-color-steel); }

/* ---- Global shell - footer ---- */
.footer-fixture {
  border-top: var(--fm-line-hairline) solid var(--fm-color-grid);
  margin-top: 40px;
  padding: 24px 0 40px;
}
.footer-fixture__copy {
  font-family: var(--fm-font-data);
  font-size: var(--fm-type-caption);
  color: var(--fm-color-steel);
  text-transform: none;
}

/* ------------------------------------------------------------------ *
 * Reduced motion (first-class requirement)
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}