/* Organic — design-system tokens and component classes, wyodrębnione z makiet
   przygotowanych w Claude Design dla Przedszkola Miejskiego nr 14. */
/* latin-ext */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/baloo2-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/baloo2-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/figtree-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/figtree.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/figtree-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/figtree.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/figtree-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/figtree.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  color-scheme: light;
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);
  --color-footer-bg: #d9c3a2;

  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  --font-heading: "Baloo 2", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Figtree", system-ui, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}
@media (max-width: 860px) {
  /* --space-8 drives the page's outer horizontal padding (main.content and
     several inline section paddings). On phones that much margin on both
     sides eats too much of an already-narrow screen — halve it. */
  :root { --space-8: 17.6px; }
}

html {
  background: var(--color-bg);
}
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.washed{filter:saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94)}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* ══════════════════ Przejścia między stronami i animacje wejścia ══════════════════ */

@view-transition {
  navigation: auto;
}
::view-transition-group(root) { animation-duration: 200ms; }
::view-transition-old(root), ::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { animation: page-fade-out 200ms ease both; }
::view-transition-new(root) { animation: page-fade-in 200ms ease both; }
@keyframes page-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }

.stagger { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .stagger {
    opacity: 0;
    animation: fade-in-up 420ms ease forwards;
    animation-delay: calc(var(--i, 0) * 60ms);
  }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* ══════════════════ Jadłospis: widok desktopowy (siatka) + mobilny (dzień po dniu) ══════════════════ */

.jadlospis-mobile { display: block; }
.jadlospis-desktop { display: none; }
@media (min-width: 861px) {
  .jadlospis-mobile { display: none; }
  .jadlospis-desktop { display: block; }
}

.jad-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.jad-range { margin: 0; font-size: 24px; }
.jad-nav { display: flex; gap: 8px; align-items: center; }
.jad-pdf-btn { background: var(--color-accent-600); color: var(--color-neutral-100); border: none; }
.jad-pdf-btn:hover { background: var(--color-accent-700); }

/* Tabela ma proste rogi i pełną kratkę — zaokrąglona karta bez obramowania
   zostawiała „urwane" narożniki. */
.jad-table-wrap { border-radius: 0; box-shadow: none; background: var(--color-neutral-100); }
.jad-day-hidden { display: none !important; }
.jad-days-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.jad-days-nav-label { font-size: 12px; color: var(--color-neutral-600); letter-spacing: 0.03em; min-width: 90px; text-align: center; }
.jad-days-nav .jad-arrow:disabled { opacity: 0.35; cursor: default; }
.jadlospis-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.jadlospis-table { table-layout: fixed; }
.jadlospis-table th, .jadlospis-table td { padding: 12px 10px; text-align: left; vertical-align: top; font-size: 13px; overflow-wrap: break-word; border: 1px solid var(--color-neutral-400); }
/* Układ: wiersze to dni tygodnia, kolumny to posiłki. */
/* Przy table-layout: fixed o szerokości kolumny decyduje pierwszy wiersz,
   czyli nagłówek — sama reguła na komórce dnia nic by nie dała. */
.jadlospis-table .jad-day-label,
.jadlospis-table thead th:first-child { width: 108px; }
.jadlospis-table thead th { font-weight: 700; }
.jad-meal-col-head { text-align: left; }
.jad-meal-col-name { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--color-accent-700); }
.jad-day-name { display: block; font-size: 14px; font-weight: 700; }
.jad-day-date { display: block; font-size: 12px; color: var(--color-neutral-600); font-weight: 400; margin-top: 2px; }

/* Dzisiejszy dzień to teraz cały wiersz, a nie kolumna. */
.jadlospis-table tr.is-today .jad-day-label { background: var(--color-neutral-900); color: var(--color-neutral-100); }
.jadlospis-table tr.is-today .jad-day-date { color: var(--color-accent-300); }
.jadlospis-table tr.is-today .jad-dish-col { background: var(--color-neutral-200); }
/* Obiad to główny posiłek dnia — w wierszu „dziś" wyróżniamy go
   odrobinę jaśniejszym tłem niż śniadanie i podwieczorek. */
.jadlospis-table tr.is-today .jad-col-obiad { background: var(--color-neutral-100); }
.jad-meal-label { font-weight: 700; font-size: 12px; letter-spacing: 0.06em; color: var(--color-accent-700); white-space: nowrap; }
.jad-meal-label span { display: block; font-weight: 400; color: var(--color-neutral-600); letter-spacing: normal; font-size: 12px; margin-top: 2px; }
.jad-cell-line { min-height: 20px; display: flex; align-items: center; line-height: 1.25; }
.jad-cell-line + .jad-cell-line { margin-top: 8px; }
.jad-cell-line.jad-meal-allergens { margin-top: 10px; }

/* Legenda alergenów jest zwijana — domyślnie zajmuje tylko jeden wiersz. */
.jad-legend { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 2px solid var(--color-neutral-400); }
.jad-legend-heading { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-600); }
.jad-legend > summary.jad-legend-heading { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.jad-legend > summary::-webkit-details-marker { display: none; }
.jad-legend > summary:hover { color: var(--color-accent-800); }
.jad-legend-chevron { display: inline-flex; transition: transform 160ms ease; }
.jad-legend[open] .jad-legend-chevron { transform: rotate(90deg); }
.jad-legend-full { display: flex; gap: var(--space-6); border: none; background: none; padding: 0; margin: var(--space-3) 0 0; }
.jad-legend-col { display: flex; flex-direction: column; gap: 6px; }
.jad-legend-col span { font-size: 13px; color: var(--color-neutral-700); }
.jad-legend-col b { color: var(--color-accent-700); font-weight: 700; margin-right: 4px; }
/* Numer alergenu — stała szerokość, żeby nazwy tworzyły równą kolumnę. */
.jad-legend-nr {
  display: inline-block; min-width: 1.9em;
  font-weight: 700; color: var(--color-neutral-600); font-variant-numeric: tabular-nums;
}
@media (max-width: 420px) {
  .jad-legend-full { flex-direction: column; gap: 6px; }
}

.jad-m-bar { display: flex; align-items: center; justify-content: space-between; }
.jad-week-switch { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin: var(--space-2) 0; }
.jad-week-label-m { font-size: 13px; font-weight: 600; color: var(--color-neutral-700); min-width: 150px; text-align: center; }
.jad-week-switch .jad-arrow:disabled { opacity: 0.35; cursor: default; }
.jad-m-title { font-family: var(--font-heading); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; }
.jad-m-week { background: none; border: 1px solid var(--color-neutral-300); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--color-neutral-700); cursor: pointer; }
.jad-m-week:hover { border-color: var(--color-accent-400); color: var(--color-accent-800); }
.jad-m-days { display: flex; align-items: center; gap: 6px; margin-top: var(--space-3); }

/* Strzałki są głównym sposobem przełączania dni i tygodni na telefonie,
   więc muszą wyglądać na klikalne — okrągłe przyciski z obramowaniem. */
.jad-arrow {
  width: 38px; height: 38px; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; font-weight: 700;
  background: var(--color-neutral-100); border: 1.5px solid var(--color-neutral-400);
  border-radius: 999px; color: var(--color-neutral-800); cursor: pointer;
}
.jad-arrow:hover { background: var(--color-accent-200); border-color: var(--color-accent-500); color: var(--color-accent-900); }
.jad-arrow:disabled { opacity: 0.35; cursor: default; }
.jad-arrow-week { width: 44px; height: 44px; font-size: 26px; border-color: var(--color-accent-400); color: var(--color-accent-800); }

.jad-pills { display: flex; gap: 6px; flex: 1; justify-content: space-between; }
.jad-pill {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: var(--radius-md);
  border: 1.5px solid var(--color-neutral-400); background: var(--color-neutral-100);
  box-shadow: var(--shadow-sm); cursor: pointer; color: var(--color-neutral-700);
}
.jad-pill span { font-weight: 700; letter-spacing: 0.04em; font-size: 11px; }
.jad-pill b { font-size: 15px; font-weight: 700; color: var(--color-neutral-900); }
.jad-pill.active { background: var(--color-neutral-900); border-color: var(--color-neutral-900); }
.jad-pill.active span, .jad-pill.active b { color: var(--color-neutral-100); }
.jad-pill:not(.active):hover { background: var(--color-accent-100); border-color: var(--color-accent-500); }

.jad-m-week-list { margin-top: var(--space-3); display: flex; flex-direction: column; gap: 8px; }
.jad-week-item { display: flex; justify-content: space-between; padding: 10px 12px; background: var(--color-neutral-100); border-radius: var(--radius-md); font-size: 14px; }

.jad-mobile-day { display: none; margin-top: var(--space-4); }
.jad-mobile-day.active { display: block; }
.jad-mobile-dayname { margin: 0; font-size: 26px; }
.jad-mobile-daydate { margin: 2px 0 var(--space-4); color: var(--color-neutral-600); font-size: 13px; }
.jad-meal { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 2px solid var(--color-neutral-400); }
.jad-meal:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
/* Na telefonie alergenty posiłku siedzą po prawej stronie jego nagłówka. */
.jad-meal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.jad-meal-head .jad-badges { margin-left: auto; justify-content: flex-end; flex-wrap: wrap; }
.jad-meal-allergens { margin-top: 8px; }
.jad-meal-name { font-weight: 700; font-size: 12px; letter-spacing: 0.06em; color: var(--color-accent-700); }
.jad-dish { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--color-neutral-200); font-size: 14px; line-height: 1.2; }
.jad-dish:last-child { border-bottom: none; }
.jad-badges { display: flex; gap: 4px; flex: none; }
.jad-badges i { font-style: normal; font-size: 10px; font-weight: 700; border: 1px solid var(--color-accent-400); color: var(--color-accent-700); border-radius: 4px; padding: 1px 5px; }

/* W widoku tabelarycznym plakietki alergenów muszą zawijać się w obrębie
   komórki posiłku — bez tego dłuższe nazwy wychodzą poza kolumnę dnia. */
.jad-dish-col .jad-badges { flex-wrap: wrap; max-width: 100%; }
.jad-dish-col .jad-badges i { max-width: 100%; overflow-wrap: anywhere; }

/* Notka pod jadłospisem — objaśnienia do pozycji z menu. */
.jad-notka {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-neutral-400);
  font-size: 14px;
  color: var(--color-neutral-800);
}
.jad-notka ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.jad-notka li { line-height: 1.5; }
.jad-notka-woda {
  margin: var(--space-4) 0 0;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}

/* Dzień bez wpisanego jeszcze jadłospisu (widok mobilny). */
.jad-empty-day { margin: var(--space-4) 0 0; font-size: 14px; color: var(--color-neutral-600); }

/* Alergeny: domyślnie numery 1–14 z legendą obok tabeli. Przycisk
   „Pokaż nazwy alergenów” (klasa .jad-slownie) pokazuje nazwy przy
   posiłkach — wtedy legenda znika, a tabela zajmuje całą szerokość. */
.jad-badges-nr { flex-wrap: wrap; gap: 3px; }
.jad-badges-nr i { min-width: 20px; text-align: center; box-sizing: border-box; font-size: 11px; }
.jad-badges-words { display: none; flex-wrap: wrap; gap: 3px; }
.jad-badges-words i { font-size: 10px; padding: 2px 6px; background: var(--color-accent-100); border-radius: 999px; }
.jad-slownie .jad-badges-words { display: flex; }
/* Pusty wiersz na nazwy pod daniami nie zostawia odstępu w widoku z numerami. */
.jad-cell-line.jad-meal-allergens { display: none; }
.jad-slownie .jad-cell-line.jad-meal-allergens { display: flex; }

/* Kolumna „ALERGENY” — numery z całego dnia, jak na papierowym jadłospisie. */
.jadlospis-table thead th.jad-col-alergeny-head { width: 120px; }
.jad-col-alergeny { vertical-align: top; }
.jad-col-alergeny .jad-badges-nr { flex-wrap: wrap; }
.jad-slownie .jad-col-alergeny,
.jad-slownie .jad-col-alergeny-head { display: none; }

/* Telefon: numery dnia pod datą; po przełączeniu nazwy są przy posiłkach. */
.jad-m-dzien-alergeny { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: calc(-1 * var(--space-2)) 0 var(--space-4); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--color-accent-700); }
.jad-m-dzien-alergeny .jad-badges-nr { flex-wrap: wrap; }
.jad-slownie .jad-m-dzien-alergeny { display: none; }

.jad-alergeny-przelacz[aria-pressed="true"] { background: var(--color-accent-100); border-color: var(--color-accent-500); color: var(--color-accent-900); }

.jad-uklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.jad-legenda { padding: var(--space-4); background: var(--color-neutral-100); }
.jad-legenda-tytul { margin: 0 0 var(--space-3); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-600); }
.jad-legenda-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 7px var(--space-6); }
.jad-legenda-lista li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.3; color: var(--color-neutral-700); }
.jad-legenda-lista .jad-legend-nr { flex: none; }
.jad-slownie .jad-legenda { display: none; }

.jad-m-alergeny { margin-top: var(--space-6); }
.jad-m-alergeny .jad-alergeny-przelacz { width: 100%; }
.jadlospis-mobile .jad-legenda { margin-top: var(--space-3); }
@media (max-width: 520px) {
  .jad-legenda-lista { grid-template-columns: minmax(0, 1fr); }
}

/* Zerowy margines strony sprawia, że przeglądarka nie ma gdzie wydrukować
   swojego nagłówka z adresem URL i datą — własny odstęp dajemy paddingiem. */
@page { margin: 0; }

@media print {
  /* Wydruk ma zmieścić się na jednej kartce: zostaje tytuł, tabela
     i notka pod nią. Reszta — nawigacja, legenda, stopka — odpada. */
  .sidebar, .back-link, .jadlospis-mobile,
  .mobile-topbar, .sidebar-backdrop,
  .jad-nav, .jad-m-bar, .jad-week-switch, .jad-m-days,
  .jad-legend, .jad-legend-heading, .site-footer { display: none !important; }

  .page { display: block; }
  main.content { padding: 10mm; max-width: none; gap: 0; }
  .jadlospis-desktop { display: block !important; }
  .jad-notka { display: block !important; }

  /* Tydzień wypełnia całą kartkę A4: większe litery i wysokie wiersze dni.
     Wysokość wiersza to minimum — dłuższy dzień urośnie, ale suma nadal
     mieści się na jednej stronie. */
  .jad-range { font-size: 24px; margin: 0 0 4mm; }
  .jad-table-wrap { box-shadow: none; }
  .jadlospis-table th, .jadlospis-table td { padding: 7px 10px; font-size: 15px; }
  .jadlospis-table thead th { padding-top: 9px; padding-bottom: 9px; }
  .jadlospis-table tbody tr { height: 33mm; }
  /* Kolumna dni szersza niż na ekranie — „Poniedziałek” w jednej linii. */
  .jadlospis-table thead th:first-child { width: 31mm; }
  .jad-day-name { font-size: 16.5px; hyphens: none; overflow-wrap: normal; word-break: keep-all; }
  .jad-day-date { font-size: 13px; }
  .jad-meal-col-name { font-size: 13.5px; letter-spacing: 0.03em; hyphens: none; overflow-wrap: normal; word-break: keep-all; }
  .jad-cell-line { min-height: 0; line-height: 1.3; }
  .jad-cell-line + .jad-cell-line { margin-top: 3px; }
  /* Wydruk: zawsze numery alergenów i legenda 1–14 z boku tabeli. */
  .jad-badges-words { display: none !important; }
  .jad-badges-nr { display: flex !important; }
  .jad-badges-nr i { font-size: 12px; padding: 1px 5px; min-width: 22px; }
  .jadlospis-desktop .jad-col-alergeny,
  .jadlospis-desktop .jad-col-alergeny-head { display: table-cell !important; }
  .jad-cell-line.jad-meal-allergens { display: none !important; }
  .jadlospis-table thead th.jad-col-alergeny-head { width: 30mm; }
  .jadlospis-desktop .jad-uklad { display: block !important; }
  .jadlospis-desktop .jad-legenda { display: block !important; margin-top: 3mm; padding: 2.5mm 3mm; background: none; border: 1px solid var(--color-neutral-400); break-inside: avoid; }
  .jad-legenda-tytul { font-size: 11px; margin-bottom: 1.5mm; }
  .jad-legenda-lista { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 3px 4mm; }
  .jad-legenda-lista li { font-size: 11.5px; gap: 5px; }
  .jad-notka { margin-top: 5mm; padding-top: 4mm; font-size: 13.5px; }
  .jad-notka ul { gap: 4px; }
  .jad-notka-woda { margin-top: 3mm; font-size: 13.5px; }

  .jadlospis-table tr { break-inside: avoid; }
  .jad-notka { break-inside: avoid; }
}

.card, .dialog { border-radius: calc(var(--radius-lg) * 1.15); }
.btn, .tag, .input { border-radius: 999px; }

/* ══════════════════ Layout wspólny dla wszystkich podstron ══════════════════ */

body { margin: 0; background: var(--color-bg); }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-800); }
.link-highlight { color: #1a73e8; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.link-highlight:hover { color: #1558b0; }
a, button { transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
*:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.page {
  display: grid;
  grid-template-columns: 328px minmax(0, 1fr);
  /* Treść bierze całą wolną wysokość, więc stopka zawsze siada na dole
     okna — także na krótkich podstronach. */
  grid-template-rows: 1fr auto;
  background: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-text);
  min-height: 100vh;
}
@media (max-width: 860px) {
  .page { grid-template-columns: 1fr; }
  /* The homepage's sections carry their own inline horizontal padding on top
     of main.content's — doubling the edge gap. Drop the extra layer on
     phones so the homepage matches every other page's edge spacing. */
  main.content > section,
  main.content > div:not(.hero-photo) { padding-left: 0 !important; padding-right: 0 !important; }
}

.mobile-topbar { display: none; }
.hamburger-btn {
  width: 40px; height: 40px; flex: none; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.hamburger-btn span { display: block; width: 22px; height: 2px; background: var(--color-neutral-100); border-radius: 2px; }
.sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(20, 20, 15, 0.5);
  opacity: 0; z-index: 999; transition: opacity 220ms ease;
}
.sidebar-backdrop.open { opacity: 1; }

@media (max-width: 860px) {
  .mobile-topbar {
    display: flex; align-items: center; gap: var(--space-3);
    position: sticky; top: 0; z-index: 901;
    background: var(--color-accent-2-800); color: var(--color-neutral-100);
    padding: 10px var(--space-4);
  }
  .mobile-topbar-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
  .mobile-topbar-brand img { width: 30px; height: 30px; border-radius: 999px; background: var(--color-neutral-100); object-fit: contain; padding: 3px; flex: none; }
  .mobile-topbar-brand span { font-family: var(--font-heading); font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-backdrop { display: block; pointer-events: none; }
  .sidebar-backdrop.open { pointer-events: auto; }
  .sidebar {
    position: fixed !important; top: 0; left: 0; min-height: 100vh !important; max-height: 100vh !important;
    width: min(300px, 85vw); z-index: 1000; box-shadow: var(--shadow-lg);
    transform: translateX(-100%); transition: transform 240ms ease;
  }
  .sidebar.open { transform: translateX(0); }
  body.menu-open { overflow: hidden; }
}

.sidebar {
  grid-row: 1 / -1;
  align-self: start;
  position: sticky;
  top: 0;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  background: var(--color-accent-2-800);
  color: var(--color-neutral-100);
  padding: var(--space-6) var(--space-4) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.35) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 999px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); }

/* Pasek przewijania strony w tym samym stylu co w menu bocznym: cienki,
   zaokrąglony, bez toru. Kolor odwrócony — zieleń zamiast bieli, bo tło
   treści jest jasne. */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(86, 99, 63, 0.35) transparent;
}
html::-webkit-scrollbar { width: 6px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: rgba(86, 99, 63, 0.35); border-radius: 999px; }
html::-webkit-scrollbar-thumb:hover { background: rgba(86, 99, 63, 0.5); }

.brand {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: 0 var(--space-2); text-decoration: none; color: inherit;
}
.brand-logo {
  width: 84px; height: 84px; border-radius: 999px; background: var(--color-neutral-100);
  display: grid; place-items: center; overflow: hidden; box-shadow: var(--shadow-sm);
}
.brand-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
.brand-name { font-family: var(--font-heading); font-size: 27px; line-height: 1.15; color: var(--color-neutral-100); }
.brand-tagline { font-size: 15px; color: var(--color-accent-2-200); display: block; margin-top: 4px; }

.side-nav { display: flex; flex-direction: column; gap: 4px; }

/* Wyróżniony wiersz skrótów (Kontakt / Dzienniczek / Jadłospis) — celowo
   odcina się od zwykłych pozycji menu wypełnionym tłem i obramowaniem. */
.side-nav-top { display: flex; gap: 6px; margin-bottom: var(--space-3); }
.side-nav-top .top-link {
  flex: 1;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 10px 8px; border-radius: var(--radius-md);
  background: var(--color-accent-2-700); border: 1px solid var(--color-accent-400);
  color: var(--color-neutral-100); font-weight: 700; font-size: 13px; line-height: 1.15;
  letter-spacing: 0.01em;
}
.side-nav-top .top-link:hover { background: var(--color-accent-600); border-color: var(--color-accent-300); }
.side-nav-top .top-link[aria-current="page"] {
  background: var(--color-accent-300); border-color: var(--color-accent-300); color: var(--color-accent-900);
}

.nav-group summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 18px; border-radius: 999px; font-family: var(--font-body);
  font-weight: 600; font-size: 16px; color: var(--color-neutral-100);
  cursor: pointer; list-style: none;
}
/* Pozycja menu bez podstron (np. BIP) — wygląda jak nagłówek grupy, ale jest zwykłym linkiem. */
.side-nav > .top-link {
  display: flex; align-items: center;
  padding: 12px 18px; border-radius: 999px; font-family: var(--font-body);
  font-weight: 600; font-size: 16px; color: var(--color-neutral-100);
}
.side-nav > .top-link:hover { background: var(--color-accent-2-700); color: var(--color-neutral-100); }
.side-nav > .top-link[aria-current="page"],
.side-nav > .top-link.is-active { background: var(--color-accent-300); color: var(--color-accent-900); }
.nav-group summary::-webkit-details-marker { display: none; }
/* Nazwa działu, który ma własną stronę — link; strzałka obok dalej rozwija menu. */
.nav-group summary .nav-group-link { flex: 1; color: inherit; text-decoration: none; }
.nav-group summary .nav-group-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav-group summary .nav-group-link + .chevron { padding: 6px; margin: -6px -8px -6px 0; border-radius: 999px; }
.nav-group summary .nav-group-link + .chevron:hover { background: var(--color-accent-2-600); }
/* Kotwica „Aktualności” na stronie głównej — nagłówek nie chowa się pod górną krawędzią. */
#aktualnosci { scroll-margin-top: var(--space-6); }
.footer-autor a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.nav-group summary:hover { background: var(--color-accent-2-700); }
.nav-group[open] > summary { background: var(--color-accent-2-900); }
.nav-group summary .chevron { display: inline-flex; color: var(--color-accent-300); transition: transform 160ms ease; }
.nav-group[open] > summary .chevron { transform: rotate(90deg); }
.nav-group .sub-links {
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 0 10px 20px; margin: 0 0 0 12px;
  border-left: 2px solid var(--color-accent-2-600);
}
.nav-group .sub-links a {
  padding: 9px 16px; border-radius: 999px; font-size: 15px;
  color: var(--color-accent-2-100); font-weight: 400;
}
.nav-group .sub-links a:hover { background: var(--color-accent-2-700); color: var(--color-neutral-100); }
.nav-group .sub-links a[aria-current="page"] {
  color: var(--color-accent-900); background: var(--color-accent-300); font-weight: 600;
}

main.content { padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); max-width: 860px; }
/* Jadłospis grid benefits from real estate on wide screens — let it grow
   with the viewport instead of capping at the standard content width. */
/* Tabela siedzi w blokach Elementora, więc szukamy jej na dowolnym poziomie. */
main.content:has(.jadlospis-desktop) { max-width: none; }
/* The homepage's hero photo should bleed all the way to the browser edge —
   drop main.content's own cap and let each homepage section re-apply it
   individually so the text columns stay at their usual reading width. */
main.content:has(> .hero-photo) { max-width: none; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; align-self: flex-start; }
.page-title { font-family: var(--font-heading); font-size: 46px; margin: 0; }
.lede { font-size: 17px; color: var(--color-neutral-800); max-width: 60ch; }

.program-item { padding: var(--space-4) 0; margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-neutral-300); }
.program-item:last-child { border-bottom: none; margin-bottom: 0; }
.program-item h3 { font-size: 22px; margin: 0 0 6px; }
.program-item p { margin: 0 0 10px; }
.program-item p:last-child { margin-bottom: 0; }
.program-meta { font-style: italic; color: var(--color-neutral-600); font-size: 14px; }
.program-note { font-style: italic; color: var(--color-neutral-600); font-size: 14px; }

.doc-list { display: flex; flex-direction: column; gap: var(--space-3); }
.doc-item {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--color-neutral-100); border-radius: var(--radius-lg);
  padding: var(--space-4); box-shadow: var(--shadow-sm);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.doc-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.doc-item .doc-icon {
  width: 44px; height: 44px; border-radius: 999px; background: var(--color-accent-100);
  color: var(--color-accent-800); display: grid; place-items: center; flex: none;
}
.doc-item h3 { font-size: 18px; margin: 0 0 2px; }
.doc-item p { margin: 0; font-size: 13px; color: var(--color-neutral-700); }

.group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.group-card { background: var(--color-neutral-100); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow 180ms ease, transform 180ms ease; }
.group-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.group-card .swatch { height: 90px; }
.group-card .group-body { padding: var(--space-4); display: flex; flex-direction: column; gap: 4px; }
.group-card h3 { margin: 0; font-size: 20px; }
.group-card p { margin: 0; font-size: 14px; color: var(--color-neutral-700); }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.gallery-item {
  aspect-ratio: 4 / 3; border-radius: var(--radius-md); background: var(--color-neutral-100);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px;
  color: var(--color-neutral-500); font-size: 13px; box-shadow: var(--shadow-sm);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.gallery-item:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* ── Fotogaleria: siatka albumów ── */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); }
.album-card {
  display: flex; flex-direction: column; overflow: hidden; color: inherit;
  border-radius: var(--radius-md); background: var(--color-neutral-100); box-shadow: var(--shadow-sm);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.album-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); color: inherit; }
.album-okladka { display: block; aspect-ratio: 4 / 3; background: var(--color-neutral-200); }
.album-okladka img { display: block; width: 100%; height: 100%; object-fit: cover; }
.album-opis { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4) var(--space-4); }
.album-tytul { font-family: var(--font-heading); font-size: 19px; line-height: 1.2; }
.album-info { font-size: 13px; color: var(--color-neutral-600); }

/* ── Fotogaleria: zdjęcia w albumie ── */
.album-naglowek { margin: calc(-1 * var(--space-2)) 0 var(--space-4); font-size: 14px; color: var(--color-neutral-600); }
.foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); }
.foto-miniatura {
  display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm);
  background: var(--color-neutral-200); box-shadow: var(--shadow-sm); cursor: zoom-in;
}
.foto-miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 250ms ease; }
.foto-miniatura:hover img { transform: scale(1.04); }
@media (max-width: 520px) {
  .foto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
}

/* ── Podgląd zdjęcia na pełnym ekranie ── */
body.lightbox-otwarty { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 18, 15, 0.92);
}
.lightbox[hidden] { display: none !important; }
.lightbox-kadr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: calc(100vw - 140px); }
.lightbox-kadr img { display: block; max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 6px; }
.lightbox-licznik { color: #e9e2d6; font-size: 14px; letter-spacing: 0.05em; }
.lightbox button {
  position: absolute; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: #fff; transition: background 160ms ease;
}
.lightbox button:hover, .lightbox button:focus-visible { background: rgba(255, 255, 255, 0.28); }
.lightbox-zamknij { top: 16px; right: 16px; width: 44px; height: 44px; font-size: 28px; line-height: 44px; }
.lightbox-strzalka { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 34px; line-height: 50px; }
.lightbox-poprz { left: 16px; }
.lightbox-nast { right: 16px; }
@media (max-width: 640px) {
  .lightbox-kadr { max-width: 100vw; }
  .lightbox-kadr img { border-radius: 0; }
  .lightbox-strzalka { top: auto; bottom: 18px; transform: none; }
}

.news-item {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4);
  background: var(--color-neutral-100); border-radius: var(--radius-lg); padding: var(--space-4);
  box-shadow: var(--shadow-sm); transition: box-shadow 180ms ease, transform 180ms ease; color: inherit;
}
.news-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* Wpis, który mieści się w całości na kafelku, nie jest odnośnikiem —
   nie udajemy więc, że da się w niego wejść. */
.news-item-full { cursor: default; }
.news-item-full:hover { box-shadow: var(--shadow-sm); transform: none; }
.news-more {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 13px; font-weight: 700; color: var(--color-accent-700); white-space: nowrap;
}
.news-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 92px; height: 92px; border-radius: 999px;
}
.news-date .day { font-family: var(--font-heading); font-size: 26px; line-height: 1; }
.news-date .month { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
/* Godzina dzieli kółko z datą — drobniejsza, oddzielona cienką kreską. */
.news-date .time {
  margin-top: 3px; padding-top: 3px; font-size: 12px; font-weight: 700;
  border-top: 1px solid currentColor; opacity: 0.85;
}
/* Druga godzina tuż pod pierwszą, bez kolejnej kreski. */
.news-date .time-kolejna { margin-top: 0; padding-top: 0; border-top: none; }
.news-date:has(.time-kolejna) { gap: 1px; }
.news-date:has(.time-kolejna) .day { font-size: 22px; }
.news-item h3 { font-family: var(--font-heading); font-size: 22px; margin: 0; line-height: 1.2; overflow-wrap: break-word; }
/* Treść kafelka to najwyżej trzy wiersze — resztę czyta się po wejściu we wpis. */
.news-item p {
  margin: 0; font-size: 16px; line-height: 1.55; color: var(--color-neutral-800); overflow-wrap: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
/* Kafelek mieszczący się w całości nie potrzebuje odnośnika „Czytaj całość". */
.news-item-full .news-more { display: none; }
.news-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Tytuł wpisu potrzebuje wyraźniejszego oddechu od jego treści. */
.news-body h3 + p { margin-top: 6px; }
/* Przyciski filtrów potrzebują oddechu od pierwszego kafelka — bez tego
   pigułka „Wszystkie” prawie dotyka karty pod sobą. */
.news-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-4); }

/* Komunikaty / Wydarzenia — proste listy zamiast klikalnych kart: pozycje
   jedna pod drugą, oddzielone linią, bez linku. */
.komunikat-list { display: flex; flex-direction: column; }
/* Kafelki aktualności to osobne białe karty — potrzebują odstępu,
   inaczej zlewają się w jeden blok. */
.news-list { gap: var(--space-3); }
.komunikat-item { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-neutral-300); }
.komunikat-item:last-child { border-bottom: none; }
.komunikat-date { font-family: var(--font-heading); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--color-accent-700); text-transform: uppercase; margin-bottom: 8px; }
.komunikat-item h3 { margin: 0 0 6px; font-size: 22px; }
.komunikat-item p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--color-neutral-800); overflow-wrap: break-word; }
.filter-btn {
  padding: 9px 20px; border-radius: 999px; cursor: pointer; font-family: var(--font-body);
  font-size: 15px; font-weight: 600; border: 1px solid var(--color-neutral-300); background: transparent;
  color: var(--color-neutral-800);
}
.filter-btn.active { border-color: var(--color-accent-600); background: var(--color-accent-600); color: var(--color-neutral-100); }
.filter-btn:not(.active):hover { background: var(--color-accent-100); border-color: var(--color-accent-400); color: var(--color-accent-900); }

.kronika-item { background: var(--color-neutral-100); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.kronika-item summary { cursor: pointer; list-style: none; }
.kronika-item summary::-webkit-details-marker { display: none; }
.kronika-item .kronika-head { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
.kronika-item .year { font-family: var(--font-heading); font-size: 22px; color: var(--color-accent-2-800); }
.kronika-item h3 { font-family: var(--font-heading); font-size: 20px; margin: 0; }
.kronika-item .hint { margin: 0; font-size: 15px; color: var(--color-accent-2-700); }
.kronika-item .kronika-chevron { display: inline-flex; color: var(--color-accent-2-600); transition: transform 160ms ease; }
.kronika-item[open] .kronika-chevron { transform: rotate(90deg); }
.kronika-detail-inner { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) 0 4px 156px; font-size: 16px; line-height: 1.6; color: var(--color-neutral-800); }
@media (max-width: 560px) {
  .kronika-item .kronika-head { grid-template-columns: 1fr auto; }
  .kronika-detail-inner { padding-left: 0; }
}

.hero-photo {
  border-radius: 0; overflow: hidden; box-shadow: var(--shadow-md);
  /* main.content always carries its own padding (var(--space-8), halved on
     mobile) — bleed the hero past it so it touches the top and both side
     edges of the content column instead of sitting inset. */
  margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) 0;
  width: calc(100% + 2 * var(--space-8));
}
.hero-photo img { width: 100%; height: 380px; object-fit: cover; }
@media (min-width: 861px) {
  /* Full-bleed width on desktop makes the crop much wider than tall —
     anchor it to the bottom of the photo so height is trimmed off the
     top instead of splitting the crop evenly top and bottom. */
  .hero-photo img { object-position: bottom; }
}

.kontakt-box {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-6);
  background: var(--color-accent-100); border-radius: var(--radius-lg); padding: var(--space-6);
}
.kontakt-box h2 { font-size: 32px; margin: 0; }
.kontakt-box .label { font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-800); display: block; margin-bottom: 4px; }
.kontakt-box .phone { font-family: var(--font-heading); font-size: 24px; }
.kontakt-col { display: flex; flex-direction: column; gap: var(--space-4); }
.kontakt-col p { margin: 0; line-height: 1.6; color: var(--color-neutral-800); font-size: 15px; }
.kontakt-col a { font-weight: 600; color: var(--color-accent-800); text-decoration: underline; text-underline-offset: 2px; }
.kontakt-col a:hover { color: var(--color-accent-900); }
.kontakt-name { font-family: var(--font-heading); font-size: 19px; line-height: 1.3; }

/* Grid tracks with a fixed minmax() floor (kontakt-box, group-grid, gallery-grid)
   refuse to shrink below that floor even at 1 column, which overflows narrow
   phones — collapse them to a plain single column below the floor's reach. */
@media (max-width: 520px) {
  .kontakt-box, .group-grid, .gallery-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 860px) {
  /* Na telefonie karta układa się w siatkę: w pierwszym wierszu obok siebie
     data i rodzaj wpisu, niżej tytuł i treść na pełną szerokość.
     `display: contents` na .news-body pozwala wyciągnąć jej dzieci do tej
     samej siatki, bez zmiany struktury HTML. Wskazówka „Czytaj całość"
     zostaje — to jedyne, co odróżnia kafelek klikalny od pełnego. */
  .news-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
    padding: var(--space-4);
  }
  .news-body { display: contents; }
  .news-date {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    width: auto;
    height: auto;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
  }
  .news-body > div:first-child { grid-column: 2; grid-row: 1; justify-self: start; }
  .news-item h3,
  .news-item p,
  .news-more { grid-column: 1 / -1; }
  .news-date .day { font-size: 12px; font-weight: 700; line-height: 1; }
  .news-date .month { font-size: 11px; letter-spacing: 0.02em; }
  /* W poziomej pigułce godzina staje obok daty, więc kreska idzie z boku. */
  .news-date .time {
    margin-top: 0; padding-top: 0; padding-left: 5px; font-size: 11px;
    border-top: none; border-left: 1px solid currentColor;
  }
  .news-date .time-kolejna { padding-left: 0; border-left: none; }
  .news-date .time-kolejna::before { content: "/ "; }
  .news-date:has(.time-kolejna) .day { font-size: 12px; }
  .news-item h3 { font-size: 18px; }
  .news-body h3 + p { margin-top: 2px; }
}
@media (max-width: 480px) {
  /* Large hero/section headings are set inline per-page; a single long word
     at those sizes can force horizontal overflow on phones since it can't wrap. */
  main.content h1 { font-size: 34px !important; }
  main.content h2 { font-size: 26px !important; }
}

.map-frame {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  line-height: 0;
}
.map-frame iframe { display: block; }

/* Życiorys patrona to długa, ciągła proza — wyrównanie do obu marginesów
   czyta się spokojniej niż poszarpana prawa krawędź. Dzielenie wyrazów
   ratuje odstępy między słowami w dłuższych polskich wyrazach. */
body.strona-patron main.content p,
body.strona-patron main.content li {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
/* Akapity życiorysu z wcięciem pierwszej linii — jak w książce. */
body.strona-patron .tresc-strony > p:not(.lede) { text-indent: 2em; }

/* Sekcja „Twórczość” to nagłówek i lista tytułów — te wyglądają lepiej
   wyśrodkowane niż rozciągnięte do obu marginesów. */
.patron-tworczosc,
body.strona-patron main.content .patron-tworczosc p,
body.strona-patron main.content .patron-tworczosc li {
  text-align: center;
  hyphens: manual;
}
/* Wyśrodkowana lista tytułów — punktory wisiałyby z boku, więc bez nich. */
.tresc-strony .patron-tworczosc ul { list-style: none; padding-left: 0; }

/* Zdjęcia wstawione w zwykłym edytorze — standardowe wyrównania WordPressa
   (przyciski „wyrównaj do lewej/prawej/do środka” przy zdjęciu). */
.tresc-strony img { height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.tresc-strony .alignright { float: right; width: min(300px, 42%); margin: 6px 0 var(--space-4) var(--space-6); }
.tresc-strony .alignleft { float: left; width: min(300px, 42%); margin: 6px var(--space-6) var(--space-4) 0; }
.tresc-strony .aligncenter { display: block; margin: var(--space-4) auto; }
.tresc-strony h2, .tresc-strony .patron-tworczosc { clear: both; }
.tresc-strony::after { content: ""; display: block; clear: both; }
@media (max-width: 640px) {
  .tresc-strony .alignright, .tresc-strony .alignleft { float: none; width: 100%; max-width: 360px; margin: 0 auto var(--space-4); }
}

/* ── BIP: logo nad listą działów — biała karta, bo grafika ma białe tło ── */
.bip-logo {
  display: inline-block; align-self: flex-start; padding: var(--space-3) var(--space-4);
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  transition: box-shadow 180ms ease;
}
.bip-logo:hover { box-shadow: var(--shadow-md); }
.bip-logo-img { display: block; width: 100%; max-width: 360px; height: auto; }

/* ── BIP: lista działów ── */
.bip-sekcje { display: flex; flex-direction: column; gap: var(--space-3); }
.bip-sekcja {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-6); border-radius: var(--radius-md);
  background: var(--color-neutral-100); box-shadow: var(--shadow-sm); color: inherit;
  font-family: var(--font-heading); font-size: 19px;
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.bip-sekcja:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); color: var(--color-accent-700); }
.bip-sekcja svg { flex: none; color: var(--color-neutral-500); }

/* ── Strony edytowane w zwykłym edytorze (jak w Wordzie) ──
   Treść to czysty HTML z edytora: akapity, nagłówki, listy, linki.
   Cały wygląd pochodzi stąd, więc nowy tekst od razu wygląda jak reszta. */
.tresc-strony { max-width: 820px; font-size: 16px; line-height: 1.6; }
.tresc-strony > :first-child { margin-top: 0; }
.tresc-strony p { margin: 0 0 var(--space-3); }
.tresc-strony h2 { margin: var(--space-6) 0 var(--space-3); font-size: 27px; }
.tresc-strony h3 { margin: var(--space-4) 0 var(--space-2); font-size: 19px; }
.tresc-strony ul, .tresc-strony ol { margin: 0 0 var(--space-4); padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--space-2); }
.tresc-strony li > ul, .tresc-strony li > ol { margin: var(--space-2) 0 0; }
.tresc-strony li::marker { color: var(--color-accent-700); font-weight: 700; }
.tresc-strony .paragraf { margin: 14px 0 6px; color: var(--color-accent-2-800); }
.tresc-strony .dzial-numer {
  margin: var(--space-8) 0 0; font-family: var(--font-heading); font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-2-600);
}
.tresc-strony .dzial-numer + h2 { margin-top: 2px; }
.tresc-strony blockquote {
  margin: var(--space-8) 0 0; padding: var(--space-4) var(--space-6);
  background: var(--color-neutral-100); border-left: 4px solid var(--color-accent-500); border-radius: var(--radius-md);
  font-family: var(--font-heading); font-size: 20px; line-height: 1.5; color: var(--color-neutral-900);
}
.tresc-strony blockquote p:last-child { margin-bottom: 0; }
.tresc-strony .cytat-autor { margin: 10px 0 0; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--color-neutral-700); }
.tresc-strony .hymn-karta {
  max-width: 52ch; padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--color-neutral-100); box-shadow: var(--shadow-sm);
  font-size: 18px; line-height: 1.7; color: var(--color-neutral-800);
}
.tresc-strony .hymn-karta p { margin: 0 0 var(--space-4); }
.tresc-strony .hymn-karta .paragraf { margin: 0 0 6px; }
.tresc-strony .hymn-karta > :last-child { margin-bottom: 0; }
.tresc-strony .lista-plikow { list-style: none; padding-left: 0; }
.tresc-strony .lista-plikow li { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--color-neutral-100); }

/* ── Kronika: wydarzenia, którym minął termin ── */

.kronika-wpisy { display: flex; flex-direction: column; }
.kronika-wpis {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-neutral-300); color: inherit;
}
.kronika-wpis:last-child { border-bottom: none; }
a.kronika-wpis:hover .kronika-wpis-tytul,
a.kronika-wpis:hover .kronika-wpis-tresc { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 3px; }
/* Tekst dodatkowy roku (np. podsumowanie) nad listą wydarzeń. */
.kronika-wstep { margin: 0 0 var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-neutral-300); line-height: 1.6; }
.kronika-wstep p:last-child { margin-bottom: 0; }
.kronika-wpis-data {
  flex: none; min-width: 108px; font-size: 13px; font-weight: 700;
  letter-spacing: 0.03em; color: var(--color-neutral-600);
}
/* Tytuł archiwalnego wydarzenia jest odnośnikiem, opis z kroniki — zwykłym
   tekstem, który musi mieć miejsce na kilka wierszy. */
.kronika-wpis-tytul { font-weight: 600; }
.kronika-wpis-tresc { flex: 1 1 260px; line-height: 1.55; }
@media (max-width: 520px) {
  .kronika-wpis { gap: 2px; }
  .kronika-wpis-data { min-width: 100%; }
}

/* ── Aktualności: termin i adresat wpisu ── */

/* Jedna linijka pod tytułem kafelka: dzień tygodnia z datą, godzina, adresat. */
/* Selektor musi być mocniejszy niż .news-item p, które ustawia treści
   kafelka rozmiar, kolor i przycięcie do trzech wierszy. */
.news-item p.news-meta {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-700);
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}

/* Ramka nad treścią wpisu — te same dane, ale rozpisane na wiersze. */
.akt-szczegoly {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-6);
  border-left: 4px solid var(--color-accent-400);
  background: var(--color-neutral-100);
  border-radius: var(--radius-sm);
  font-size: 15px;
}
.akt-wiersz { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: baseline; }
.akt-label {
  min-width: 72px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-neutral-600);
}

/* Stopka jest osobną sekcją strony, a nie kartą w treści: leży poza
   main.content, idzie przez całą szerokość kolumny i dotyka dołu okna.
   Selektor jest celowo mocniejszy niż zwykłe .site-footer — motyw Hello
   narzuca stopce własne padding-inline regułą o wyższej specyficzności. */
.page > footer.site-footer {
  grid-column: 2 / -1;
  display: flex; flex-direction: column; gap: var(--space-4);
  margin: 0; padding: var(--space-8);
  background: var(--color-footer-bg);
  font-size: 14px; color: var(--color-neutral-800);
}
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer .links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.footer-contact {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-4);
  line-height: 1.6;
}
.footer-label {
  display: block; margin-bottom: 4px; font-weight: 700; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-800);
}
.footer-contact a { color: var(--color-neutral-800); text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center;
  padding-top: var(--space-4); border-top: 1px solid color-mix(in srgb, #402310 22%, transparent);
}
/* Podpis autora strony — osobna, mniejsza linijka pod prawami autorskimi. */
.footer-autor { flex-basis: 100%; font-size: 12px; color: var(--color-neutral-700); }
/* Na telefonie siatka ma jedną kolumnę — stopka musi ją wypełnić, inaczej
   grid dostawiłby dla niej kolumnę numer 2. Reguła stoi po bazowej, bo przy
   równej specyficzności wygrywa ta zapisana później. */
@media (max-width: 860px) {
  .page > footer.site-footer { grid-column: 1 / -1; padding: var(--space-6) var(--space-8); }
}

@media (max-width: 520px) {
  .footer-contact { grid-template-columns: 1fr; }
}