/* =============================================================================
   RuPress · Sources page
   -----------------------------------------------------------------------------
   Page-specific styles for sources.html. Layout: each source = a horizontal
   row of {logo, one-line description}. Logos use their official monochrome/
   colour variants without modification (Azbuka XVIII rule about assets).

   Inherits .about-page typography and column width from about.css. This file
   only adds the source-entry pair layout — nothing more.
============================================================================= */

/* Each source = logo + text pair, vertically rhythmed inside section. */
.source-entry {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-4);
  border-block-end: var(--border-hairline) solid var(--color-border-subtle);
}

.source-entry:last-child {
  border-block-end: none;
}

/* Logo column — fixed width slot, contents centered. */
.source-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}

/* Высота задаётся явно в пикселях, ширина выводится по пропорции. Логотипы —
   SVG только с viewBox (без width/height), их собственный размер браузер
   узнаёт асинхронно после загрузки файла. Процентный max-height от высоты
   слота на первом проходе раскладки не успевал примениться к замещаемому
   элементу — SVG на миг раздувался во всю ширину контейнера и «дёргался» в
   норму только при следующем reflow (фокус вкладки, скролл). Явная px-высота
   применяется сразу (CSS render-blocking) — гонки нет. (2026-06-15) */
.source-logo img {
  height: 32px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* Text column — same family/scale as .about-section p, but inherits via
   the parent .about-page rules. We only override margin (no bottom margin,
   the row gap handles spacing). */
body.about-page .source-entry .source-text {
  margin: 0;
}

/* -----------------------------------------------------------------------------
   Tablet (768–1024) — slightly smaller logo column to keep text wide
----------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .source-entry {
    grid-template-columns: 120px 1fr;
    gap: var(--space-5);
  }
}

/* -----------------------------------------------------------------------------
   Mobile (≤767) — stack: logo above text, both left-aligned
----------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .source-entry {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding-block: var(--space-5);
  }

  .source-logo {
    justify-content: flex-start;
    height: 28px;
  }

  .source-logo img {
    height: 28px;
  }
}