/* =========================================================
   Page-scoped styles — shared across all platform/website/org pages
   (index.html, ojs.html, os-aps.html).
   Every rule below draws exclusively from @sciflowdev/brand tokens
   (dist/tokens.css). No literal colour/spacing/radius values.
   See ../README.md "New classes" for what each one is for and why
   it wasn't already covered by marketing.css / system.css.
   ========================================================= */

/* hero.visual — the sample's hero-visual__* classes are referenced by
   src/samples/index.hbs but aren't defined anywhere in marketing.css
   (a gap in the current brand package). Styled here, token-only, so the
   placeholder reads as a card rather than unstyled text. */
.hero-visual {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
  padding: var(--sf-space-10) var(--sf-space-8);
  text-align: center;
}
.hero-visual__mark {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--sf-space-6);
  opacity: 0.9;
}
.hero-visual__label {
  font-size: var(--sf-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--sf-tracking-caps);
  color: var(--sf-text-muted);
  font-weight: var(--sf-weight-semibold);
  margin-bottom: var(--sf-space-3);
}
.hero-visual__title {
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-lg);
  color: var(--sf-blue-900);
  margin: 0 0 var(--sf-space-2);
}
.hero-visual__note {
  font-size: var(--sf-text-sm);
  color: var(--sf-text-muted);
  margin: 0;
}

/* .hero-visual--diagram — the hero card holding an inline conceptual SVG
   (the "one open core" hub) instead of the placeholder mark. The SVG scales
   to the card width; a short caption sits beneath it. */
.hero-visual--diagram {
  padding: var(--sf-space-8) var(--sf-space-6) var(--sf-space-6);
}
.hero-visual--diagram svg {
  width: 100%;
  height: auto;
}
.hero-visual__caption {
  margin: var(--sf-space-5) 0 0;
  font-size: var(--sf-text-sm);
  line-height: 1.5;
  color: var(--sf-text-muted);
  text-align: center;
}

/* .logos-strip__logo — real supporter/funder logos in the "Supported by" /
   "Funded by" strip instead of plain text spans. marketing.css styles
   `.logos-strip__row > span` (text) but has no image treatment. These are
   FUNDER/endorsement logos, so they're shown in full colour (not the muted
   grayscale of a customer logo cloud) and normalised only by height so logos
   of very different aspect (PKP, SUB, Vietsch, BMFTR) read as one band. Logo
   height is content sizing, not a brand spacing token. */
.logos-strip__logo {
  display: inline-flex;
  align-items: center;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}
.logos-strip__logo:hover,
.logos-strip__logo:focus-visible {
  opacity: 1;
}
.logos-strip__row img {
  height: 2.75rem;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
/* A single-logo strip (os-aps "Funded by") centres rather than spreads, and
   gives the lone funder logo more presence. */
.logos-strip__row--single {
  justify-content: center;
}
.logos-strip__row--single img {
  height: 5rem;
  max-width: 300px;
}

/* .features--pair — used on ojs.html for the two "your OJS" version tiers
   (a comparison, not a tapering 3-column grid) and on index.html for the
   four destination cards (a clean 2x2 rather than 3+1). Modifier on the
   existing .features grid (marketing.css) rather than a new component. */
.features--pair {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 700px) {
  .features--pair { grid-template-columns: 1fr; }
}

/* .tier-versions — small mono version chips inside a tier .sf-card, next to
   .sf-badge. No equivalent exists in system.css (badges carry status text,
   not a list of version numbers). ojs.html only. */
.tier-versions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-space-2);
  margin: var(--sf-space-4) 0;
}
.tier-versions span {
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-medium);
  color: var(--sf-ink-700);
  background: var(--sf-ink-100);
  border: 1px solid var(--sf-border);
  padding: 3px 10px;
  border-radius: var(--sf-radius-sm);
}
.sf-card .sf-badge { margin-bottom: var(--sf-space-1); }

/* .stack-close — a centered closing line under a .features grid, reusing
   .section__head's centering/measure without repeating an eyebrow + h2.
   ojs.html only. */
.stack-close {
  margin-top: var(--sf-space-10);
  margin-bottom: 0;
}

/* .cta-row — a centered row of .sf-btn's outside the hero (marketing.css's
   .hero__ctas is left-aligned, built for the two-column hero layout).
   os-aps.html's single-section pitch needs its buttons centered under
   .section__head prose instead. */
.cta-row {
  display: flex;
  justify-content: center;
  gap: var(--sf-space-3);
  flex-wrap: wrap;
  margin-top: var(--sf-space-8);
}

/* =========================================================
   Accessibility + responsive fixes (from the review pass)
   The three contrast issues found here (muted text, eyebrows,
   hero accent) were fixed at SOURCE in @sciflowdev/brand
   (tokens role text-muted → ink-600; marketing.css eyebrows →
   ochre-700, hero em → blue-600), so no colour overrides live
   here anymore. What remains is site-specific: focus rings,
   responsive layout, and the mobile-nav fallback.
   ========================================================= */

/* Visible, on-brand focus rings on links (brand only styles .sf-btn). */
.site-nav__link:focus-visible,
.site-footer a:focus-visible,
.logos-strip__logo:focus-visible,
.hero__lede a:focus-visible,
.feature__body a:focus-visible {
  outline: none;
  box-shadow: var(--sf-shadow-focus, 0 0 0 3px var(--sf-blue-300));
  border-radius: var(--sf-radius-sm);
}

/* Hero CTAs must wrap on narrow screens — two large buttons in one
   nowrap row forced the hero column wider than the viewport, clipping
   the hero text (OJS page at ≤400px). */
@media (max-width: 760px) {
  .hero__ctas { flex-wrap: wrap; }
  .hero__inner { min-width: 0; }
  .hero__inner > * { min-width: 0; }
}

/* (Mobile navigation is now a real hamburger menu in the shared brand
   site-header partial + marketing.css — no site-level override needed.) */

/* .news-card — the whole announcement card is a link (OJS "In the news").
   Reuses .sf-card; adds link reset + hover/focus affordance. */
.news-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.news-card:hover {
  border-color: var(--sf-blue-300);
  box-shadow: 0 8px 24px rgba(11, 23, 34, 0.08);
  transform: translateY(-2px);
}
.news-card:focus-visible {
  outline: none;
  box-shadow: var(--sf-shadow-focus, 0 0 0 3px var(--sf-blue-300));
}
.news-card .sf-card__title { margin-top: var(--sf-space-1); }
.news-card__more {
  display: inline-block;
  margin-top: var(--sf-space-4);
  color: var(--sf-link);
  font-weight: var(--sf-weight-semibold);
  font-size: var(--sf-text-sm);
}

/* Logo-strip parity: wide wordmarks (PKP 6.6:1, SUB 8.9:1) hit the
   max-width cap and render shorter than the others. A larger cap lets
   them reach closer to the row height. */
.logos-strip__row img { max-width: 240px; }

/* Funder logos flagged "big" (e.g. BMFTR — small mark + text, needs more size to
   read at parity with the wordmark logos). */
.logos-strip__logo--big img { height: 6.5rem; max-width: 380px; }
.logos-strip__row--single .logos-strip__logo--big img { height: 8.5rem; max-width: 440px; }