/* ===================== Strona programu =====================
   Ta sama ramka co sekcja programu na stronie DDLC (mgh.css): nagłówek z ikoną, nazwą i wersją,
   przyciski pobierania poziomo, opis po lewej, zrzuty po prawej, historia zmian pod spodem.
   Strony powstają z data\programy.json skryptem narzedzia\strony.ps1.
   ================================================================================= */

.breadcrumb {
  font-size: .85rem;
  color: var(--text-secondary);
  padding-top: 22px;
}

.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: var(--border); }
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--accent); }

.prog-hero { padding: 26px 0 8px; }
.prog-hero .container { display: flex; align-items: center; gap: 22px; }
.prog-hero-icon { width: 72px; height: 72px; flex: none; display: block; }
.prog-hero h1 { margin: 0 0 6px; font-size: 1.9rem; }
.prog-hero .lead { margin: 0; color: var(--text-secondary); font-size: 1.05rem; max-width: 820px; }

.prog-frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  padding: 24px;
}

.prog-head { display: flex; align-items: center; gap: 14px; }
.prog-head h2 { margin: 0; font-size: 1.2rem; }
.prog-icon { width: 44px; height: 44px; display: block; }
.prog-version { margin: 2px 0 0; font-size: .82rem; color: var(--text-secondary); }
.prog-version strong { color: var(--accent); }

/* Przyciski poziomo, licznik pod każdym. Pusty licznik (licznik.php nie odpowiedział) dalej
   zajmuje swoją linijkę, żeby przyciski nie skakały, gdy liczby dojdą. */
.prog-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 22px; }
.prog-download { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.prog-download-count { min-height: 1.2em; font-size: .78rem; color: var(--text-secondary); }

.prog-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.prog-body h3, .prog-extra h3, .prog-changes h3 { margin: 0 0 10px; font-size: .95rem; }
.prog-desc p { margin: 0 0 12px; color: var(--text-secondary); }

.prog-shot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }

/* Zrzut paska (MsGR) jest kilkanaście razy szerszy niż wysoki: w połówce wiersza byłby kreską,
   a obok wysokiego zrzutu stałby w pustym polu. Taki dostaje cały wiersz — klasę nadaje
   generator, który zna wymiary pliku. */
.prog-shot-wide { grid-column: 1 / -1; }

.prog-shot {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-control);
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}

.prog-shot:hover { border-color: var(--accent); }
.prog-shot img { width: 100%; height: auto; display: block; }

.prog-extra {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.prog-extra ul { margin: 0; padding-left: 20px; color: var(--text-secondary); }
.prog-extra li { margin-bottom: 6px; }
.prog-extra p { margin: 0 0 8px; color: var(--text-secondary); }

.prog-changes { margin-top: 24px; }

/* Historia zmian rośnie z każdym wydaniem; bez limitu spychałaby stopkę coraz niżej. Treść
   zostaje w HTML-u w całości — przewija się tylko ramka. */
.prog-changes .program-panel { max-height: 560px; }

/* Na wąskim ekranie wszystko jedno pod drugim — dwie kolumny po 300 px nie mają sensu. */
@media (max-width: 860px) {
  .prog-body, .prog-extra { grid-template-columns: 1fr; }
  .prog-hero .container { align-items: flex-start; }
  .prog-hero-icon { width: 52px; height: 52px; }
  .prog-hero h1 { font-size: 1.5rem; }
}