/* ==========================================================================
   Jawne Lubuskie — typografia i siatka treści
   Ładowany po /css/styles.css (patrz Base.astro). Zawiera wyłącznie nadpisania
   układu; kolory i odstępy pochodzą z tokenów w Base.astro.

   1. Justowanie tekstu opisowego (dek wpisu, proza, opisy w kartach i listingach).
   2. Kolumna główna i boczna na tej samej siatce (obrazek i tekst tej samej szerokości).
   3. Wspólny rytm pionowy kart, nagłówków i akapitów.
   4. Podział sekcji strony głównej: naprzemienne tła, linia 1px, pasek akcentu.
   5. Próg mobilny: wąskie kolumny wracają do wyrównania do lewej.
   ========================================================================== */

/* ---------- 1. Justowanie tekstu opisowego ---------- */
/* Tylko bloki prozy i opisy. Tytuły, metadane, tabele i interfejs zostają do lewej.
   Dzielenie wyrazów działa dzięki lang="pl" na <html>. Krótkie jednozdaniowe teksty
   w rodzaju „Posiedzenia są jawne…” nie wchodzą na listę i zostają do lewej. */
.lead__dek,
.sub-head .dek,
.prose > p,
.prose li,
.section__intro,
.session__topic,
.briefs a,
.row__meta,
.panel__none,
.monitor__note {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ---------- 2. Kolumna główna i boczna na tej samej siatce ---------- */
/* Akapity nie są już wewnętrznie zwężane — obrazek i blok tekstu wpisu kończą się
   w jednej pionowej linii (prawej krawędzi kolumny głównej). */
.lead__title,
.lead__dek { max-width: none; }

/* Obrazek wpisu dostaje szerokość kolumny tekstu (okno minus kolumna boczna
   i odstęp), a tekst wypełnia kolumnę główną. Górne krawędzie kolumn startują
   w tej samej linii (sub-grid ma align-items: start). */
.sub .article-cover { max-width: calc(100% - 20rem - var(--s-6)); }
/* Wpis ma okładkę już w kolumnie głównej (listwa obok startuje równo z nagłówkiem), więc bez odejmowania. */
.sub .wpis__glowna .article-cover { max-width: none; }
.sub-grid .prose,
.sub-grid .ai-note { max-width: none; }

/* ---------- 3. Wspólny rytm pionowy w obu kolumnach ---------- */
/* Karty mają ten sam wewnętrzny odstęp, a odstępy między nagłówkami i akapitami
   trzymają się jednej wartości (--s-2) w obu kolumnach. */
.agenda { gap: var(--s-2); padding: var(--s-3); }
.agenda__head p { margin-top: var(--s-1); }

/* ---------- 4. Podział sekcji na stronie głównej ---------- */
/* Tła sekcji zajmują pełną szerokość okna, a treść trzyma się siatki .wrap.
   Sekcje parzyste (np. „Co nowego w Twoim powiecie”) dostają bardzo jasne szare tło,
   a każdą sekcję otwiera cienka linia 1px na całą szerokość. */
.section { border-top: 1px solid var(--rule); }
.section--alt { background: var(--section-alt); }

/* Krótki akcentowy pasek nad tytułem sekcji — granat z logo; na granacie jasny fiolet. */
.section__head h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 4px;
  margin-bottom: var(--s-2);
  background: var(--navy);
  border-top-left-radius: 4px;
}
.section--ink .section__head h2::before { background: var(--violet-soft); }

/* Linia dzieli sąsiadujące sekcje w równej odległości od ich treści. */
.manifest-wrap { padding-bottom: var(--s-6); }

/* ---------- 5. Wąskie kolumny: z powrotem do lewej ---------- */
@media (max-width: 48rem) {
  .lead__dek,
  .sub-head .dek,
  .prose > p,
  .prose li,
  .section__intro,
  .session__topic,
  .briefs a,
  .row__meta,
  .panel__none,
  .monitor__note { text-align: left; -webkit-hyphens: none; hyphens: none; }
  /* Zachowujemy mobilny zapas karty kalendarza z /css/styles.css (karta od krawędzi, treść na siatce strony). */
  .agenda { padding: var(--s-3) var(--gutter) var(--s-2); }
  /* Linia nad pierwszą sekcją w tej samej odległości od paska Manifestu. */
  .manifest-wrap { padding-bottom: var(--s-5); }
}

/* Kolumna boczna przechodzi pod treść — obrazek wraca do pełnej szerokości. */
@media (max-width: 68rem) {
  .sub .article-cover { max-width: none; }
}