/*
Theme Name: Góry Sowie
Theme URI: https://gory-sowie.pl/
Author: gory-sowie.pl
Description: Dedykowany motyw przewodnika turystycznego po Górach Sowich. Architektura oparta na analizie fraz wyszukiwania: podziemia Riese, Wielka Sowa, Twierdza Srebrna Góra, noclegi i schroniska, miejscowości, narzędzia (kamery, pogoda, mapa).
Version: 2.8.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gory-sowie
Tags: tourism, guide, custom-menu, custom-logo, translation-ready
*/

/* ============================================================
   1. TOKENY
   Dwa światy kolorystyczne: „pod ziemią" (night) i „nad ziemią"
   (paper). Sekcje alternują między nimi i to niesie znaczenie:
   sztolnie i twierdza są ciemne, szczyty i noclegi jasne.
   ============================================================ */
:root {
  --night:    #10150F;
  --night-2:  #171E16;
  --night-3:  #212A22;
  --night-4:  #2C3830;

  --paper:    #EFF0E8;
  --paper-2:  #E3E6DA;
  --paper-3:  #F8F9F3;

  --ink:      #131711;
  --ink-2:    #4A5245;
  --ink-3:    #5C6457;  /* 4.86:1 na najciemniejszym jasnym tle */

  --snow:     #E9ECE2;
  --snow-2:   #A0AA99;
  --snow-3:   #8C9885;  /* 4.89:1 na najjaśniejszym ciemnym tle */

  --blaze:    #B93F25;   /* znak szlaku na jasnym tle */
  --blaze-b:  #E8724E;   /* na ciemnym tle */
  --lamp:     #7F5C10;   /* światło lampy w sztolni, na jasnym; 5,3:1 */
  --lamp-b:   #E3AC4B;   /* na ciemnym */
  --moss:     #4F7345;
  --frost:    #4A7C93;

  --line:       #CFD4C3;
  --line-soft:  #DFE3D5;
  --line-dark:  #2A3429;

  --shell:  1220px;
  --gut:    clamp(18px, 4vw, 44px);

  --f-display: "Sitka Display", "Sitka Heading", Charter, "Bitstream Charter", Cambria, Georgia, "Times New Roman", serif;
  --f-sign:    Bahnschrift, "DIN Alternate", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-body:    "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --f-data:    "Cascadia Mono", Consolas, ui-monospace, "SF Mono", "Roboto Mono", monospace;
}

/* ============================================================
   2. RESET / PODSTAWY
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Pasek nagłówka ma 71 px i jest przyklejony, więc skok do kotwicy
   ustawiał tytuł sekcji dokładnie pod nim. Rezerwujemy tę wysokość
   dla każdego przewinięcia do elementu, także ze spisu treści. */
html { scroll-padding-top: 92px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 3px solid var(--blaze); outline-offset: 3px; border-radius: 2px; }
.band--dark :focus-visible { outline-color: var(--lamp-b); }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}
p, ul, ol { margin: 0; }
ul, ol { padding-left: 1.15em; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--blaze); color: #fff; padding: 12px 20px;
  font-family: var(--f-sign); letter-spacing: .06em;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   3. UKŁAD: pasy pełnej szerokości
   ============================================================ */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.shell--narrow { max-width: 820px; }

.band { padding-block: clamp(56px, 8vw, 104px); position: relative; }
.band--paper  { background: var(--paper); }
.band--paper2 { background: var(--paper-2); }
.band--paper3 { background: var(--paper-3); }
.band--dark   { background: var(--night);   color: var(--snow); }
.band--dark2  { background: var(--night-2); color: var(--snow); }
.band--dark h2, .band--dark h3, .band--dark2 h2, .band--dark2 h3 { color: var(--snow); }

/* warstwa poziomic w ciemnych pasach */
.topo {
  position: absolute; inset: 0;
  background-image: url(assets/topo.svg);
  background-size: cover; background-position: center;
  opacity: .34;
  pointer-events: none;
}
.band--dark > .shell, .band--dark2 > .shell { position: relative; z-index: 1; }

/* ============================================================
   4. TYPOGRAFIA UŻYTKOWA
   ============================================================ */
.eyebrow {
  font-family: var(--f-sign);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blaze);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 3px; background: currentColor; flex: none;
}
.band--dark .eyebrow, .band--dark2 .eyebrow { color: var(--lamp-b); }
/* Hero nie jest pasem, więc trzeba mu podać wersję na ciemne tło osobno:
   ciemna czerwień na prawie czarnym dawała 3,34:1. */
.hero .eyebrow { color: var(--blaze-b); }

.sec-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(28px, 4vw, 44px); max-width: 62ch; }
.sec-head h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.sec-head p { color: var(--ink-2); font-size: 1.05rem; }
.band--dark .sec-head p, .band--dark2 .sec-head p { color: var(--snow-2); }

.data { font-family: var(--f-data); font-variant-numeric: tabular-nums; }
.alt  { font-family: var(--f-sign); font-size: .8em; letter-spacing: .04em; color: var(--ink-3); }
.band--dark .alt, .band--dark2 .alt { color: var(--snow-3); }

/* ============================================================
   5. PRZYCISKI
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-sign); font-size: .93rem; letter-spacing: .06em;
  text-transform: uppercase;
  padding: 15px 26px;
  border: 2px solid transparent;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--solid  { background: var(--blaze); color: #FBF7F2; border-color: var(--blaze); }
.btn--solid:hover { background: #A0341C; border-color: #A0341C; }
.btn--ghost  { border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: var(--snow); color: var(--night); border-color: var(--snow); }
.band--paper .btn--ghost:hover, .band--paper2 .btn--ghost:hover, .band--paper3 .btn--ghost:hover {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.btn .arw { transition: transform .18s ease; }
.btn:hover .arw { transform: translateX(4px); }

/* ============================================================
   6. NAGŁÓWEK STRONY
   ============================================================ */
.site-head {
  background: var(--night);
  color: var(--snow);
  border-bottom: 1px solid var(--line-dark);
  position: sticky; top: 0; z-index: 60;
}
.site-head__in {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 70px;
}
.brand { display: flex; align-items: baseline; gap: 11px; text-decoration: none; color: var(--snow); }
.brand__mark {
  font-family: var(--f-display); font-size: 1.32rem; font-weight: 600; letter-spacing: -.02em;
}
.brand__sub {
  font-family: var(--f-sign); font-size: .63rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--snow-3);
}
.nav { display: flex; align-items: center; gap: 4px; }
.nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; }
.nav a {
  display: block; padding: 9px 13px;
  font-family: var(--f-sign); font-size: .87rem; letter-spacing: .05em;
  text-decoration: none; color: var(--snow-2);
  transition: color .16s ease, background-color .16s ease;
}
.nav a:hover, .nav .current-menu-item > a { color: var(--snow); background: var(--night-3); }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--night-4); color: var(--snow);
  font-family: var(--f-sign); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 14px; cursor: pointer;
}
@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--night-2); border-bottom: 1px solid var(--line-dark); padding: 10px var(--gut) 18px; display: none; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line-dark); }
}

/* ============================================================
   7. HERO
   ============================================================ */
.hero {
  background: var(--night);
  color: var(--snow);
  position: relative;
  overflow: hidden;
  padding-block: clamp(60px, 10vw, 118px) 0;
}
.hero__topo {
  position: absolute; inset: -10% -5% 0;
  background-image: url(assets/topo.svg);
  background-size: cover; background-position: 50% 38%;
  opacity: .46;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 92% 78% at 62% 34%, #000 34%, transparent 78%);
          mask-image: radial-gradient(ellipse 92% 78% at 62% 34%, #000 34%, transparent 78%);
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(95deg,
      var(--night) 0%,
      rgba(16,21,15,.94) 38%,
      rgba(16,21,15,.62) 58%,
      rgba(16,21,15,.16) 80%,
      rgba(16,21,15,0) 100%),
    linear-gradient(to top, var(--night) 0%, rgba(16,21,15,.55) 16%, rgba(16,21,15,0) 42%);
  pointer-events: none;
}
.hero__glow {
  position: absolute; left: 22%; top: 34%; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(227,172,75,.16) 0%, rgba(227,172,75,0) 68%);
  pointer-events: none;
}
.hero__in { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 26px; }
.hero h1 {
  font-size: clamp(3rem, 10.5vw, 7.6rem);
  line-height: .92;
  letter-spacing: -.04em;
  margin: 0;
}
.hero h1 .l2 { display: block; color: var(--lamp-b); }
.hero__lead {
  font-size: clamp(1.08rem, 2.1vw, 1.38rem);
  color: var(--snow-2);
  max-width: 54ch;
  line-height: 1.6;
}
.hero__lead strong { color: var(--snow); font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

.hero__facts {
  position: relative; z-index: 2;
  margin-top: clamp(38px, 6vw, 66px);
  border-top: 1px solid var(--line-dark);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.hero__facts div {
  padding: 20px 22px 26px 0;
  border-right: 1px solid var(--line-dark);
  display: flex; flex-direction: column; gap: 3px;
}
.hero__facts div:last-child { border-right: 0; }
.hero__facts b {
  font-family: var(--f-display); font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.hero__facts b i { font-style: normal; font-size: .5em; color: var(--snow-3); margin-left: 3px; }
.hero__facts span {
  font-family: var(--f-sign); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--snow-3);
}
@media (max-width: 760px) {
  .hero__facts { grid-template-columns: repeat(2, 1fr); }
  .hero__facts div:nth-child(2) { border-right: 0; }
  .hero__facts div:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
}

/* profil wysokościowy grzbietu */
.ridge {
  position: relative; z-index: 2;
  margin-top: clamp(30px, 5vw, 52px);
  border-top: 1px solid var(--line-dark);
  padding-top: clamp(20px, 3vw, 30px);
}
.ridge__cap {
  font-family: var(--f-sign); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--snow-3); margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.ridge__cap::before { content: ""; width: 18px; height: 2px; background: var(--lamp-b); flex: none; }
.ridge svg { width: 100%; height: auto; display: block; }
@media (max-width: 720px) {
  .ridge { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ridge svg { min-width: 640px; }
}

/* ============================================================
   8. PASEK NARZĘDZI (kamery / pogoda / mapa / warunki)
   ============================================================ */
.tools {
  background: var(--night-3);
  border-top: 2px solid var(--lamp-b);
  position: relative; z-index: 3;
}
.tools__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--night-4); }
.tool {
  background: var(--night-3); color: var(--snow);
  padding: 22px 24px; text-decoration: none;
  display: flex; flex-direction: column; gap: 6px;
  transition: background-color .18s ease;
}
.tool:hover { background: var(--night-4); }
.tool__k { font-family: var(--f-sign); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lamp-b); }
.tool__t { font-family: var(--f-display); font-size: 1.16rem; }
.tool__d { font-size: .84rem; color: var(--snow-2); line-height: 1.45; }
@media (max-width: 860px) { .tools__in { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .tools__in { grid-template-columns: 1fr; } }

/* ============================================================
   9. TRZY IKONY REGIONU
   ============================================================ */
.icons { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.icon-card {
  background: var(--paper-3); padding: clamp(26px, 3vw, 38px);
  display: flex; flex-direction: column; gap: 13px; text-decoration: none;
  transition: background-color .2s ease;
  position: relative;
}
.icon-card:hover { background: #fff; }
.icon-card__n {
  font-family: var(--f-sign); font-size: .72rem; letter-spacing: .14em; color: var(--blaze);
}
.icon-card h3 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); }
.icon-card p { color: var(--ink-2); font-size: .95rem; }
.icon-card__meta {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-family: var(--f-sign); font-size: .78rem; letter-spacing: .03em; color: var(--ink-3);
}
.icon-card__go {
  font-family: var(--f-sign); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blaze); display: flex; align-items: center; gap: 8px;
}
@media (max-width: 900px) { .icons { grid-template-columns: 1fr; } }

/* ============================================================
   10. SIATKA OBIEKTÓW (sztolnie, szczyty, schroniska, miejscowości)
   ============================================================ */
.grid { display: grid; gap: 1px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.obj {
  padding: 26px 28px 28px;
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none;
  position: relative;
  transition: background-color .18s ease;
  box-shadow: inset 0 3px 0 transparent;
}
.obj h3, .obj h2 { font-size: 1.42rem; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.obj p { font-size: .945rem; line-height: 1.6; }

/* Karta wiodaca, obiekt o najwiekszym popycie dostaje wieksza wage */
.obj--lead { grid-column: span 2; }
.obj--lead h3 { font-size: clamp(1.7rem, 3vw, 2.15rem); }
.obj--lead p  { font-size: 1.05rem; max-width: 52ch; }
@media (max-width: 640px) { .obj--lead { grid-column: span 1; } }

/* Pasek pelnej szerokosci, poradnik, nie obiekt */
.obj--wide { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.obj--wide h3 { font-size: 1.3rem; flex: none; }
.obj--wide p  { flex: 1 1 340px; margin: 0; }
.obj--wide .obj__tags { margin: 0; padding: 0; }
@media (max-width: 760px) { .obj--wide { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* Obiekt wyrozniony bez zmiany ukladu siatki */
/* Pasek wyróżnienia rysuje pseudoelement, bo box-shadow trzyma teraz
   włosowe linie siatki (patrz .grid--dark i .grid--light niżej). */
.obj::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: transparent; transition: background-color .18s ease;
}
.obj--mark::before { background: var(--blaze); }
.grid--dark .obj--mark::before { background: var(--lamp-b); }
.obj__tags { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }

.tag {
  font-family: var(--f-sign); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; white-space: nowrap;
}

/* wariant ciemny, podziemia, twierdza */
/* Tło kontenera musi mieć kolor karty, nie linii. Przy niepełnym ostatnim
   rzędzie puste komórki pokazywały wielki blok koloru linii, co wyglądało
   na błąd układu. Linie rysują teraz same karty. */
/* Bez tła i ramki kontenera puste komórki ostatniego rzędu znikają w pasie,
   zamiast tworzyć obramowany prostokąt bez treści. Siatkę rysują same karty. */
.grid--dark { background: transparent; border: 0; }
.grid--dark .obj { background: var(--night-2); color: var(--snow); box-shadow: 0 0 0 1px var(--line-dark); }
.grid--dark .obj:hover { background: var(--night-3); }
.grid--dark .obj:hover::before { background: var(--lamp-b); }
.grid--dark .obj p { color: var(--snow-2); }
.grid--dark .tag { background: var(--night-4); color: var(--lamp-b); }
.grid--dark .obj h3 .alt { color: var(--snow-3); }

/* wariant jasny, szczyty, noclegi, miejscowości */
.grid--light { background: transparent; border: 0; }
.grid--light .obj { background: var(--paper-3); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.grid--light .obj:hover { background: #fff; }
.grid--light .obj:hover::before { background: var(--blaze); }
.grid--light .obj p { color: var(--ink-2); }
.grid--light .tag { background: var(--paper-2); color: var(--ink-2); }

.tag--hot { background: var(--blaze) !important; color: #FBF7F2 !important; }

/* ============================================================
   11. SEKCJA SPLIT (nocleg / zima / plan)
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  font-family: var(--f-sign); font-size: .85rem; letter-spacing: .04em;
  padding: 10px 16px; text-decoration: none;
  border: 1px solid var(--line);
  background: var(--paper-3); color: var(--ink);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.band--dark .chip, .band--dark2 .chip { background: var(--night-3); border-color: var(--night-4); color: var(--snow); }
.band--dark .chip:hover, .band--dark2 .chip:hover { background: var(--lamp-b); color: var(--night); border-color: var(--lamp-b); }

/* lista miejscowości */
.places { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 1000px) { .places { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .places { grid-template-columns: repeat(2, 1fr); } }
.place {
  background: var(--paper-3); padding: 20px 22px 22px; text-decoration: none;
  display: flex; flex-direction: column; gap: 5px;
  transition: background-color .16s ease, box-shadow .16s ease;
  box-shadow: inset 3px 0 0 transparent;
}
.place:hover { box-shadow: inset 3px 0 0 var(--blaze); }
.place:hover { background: #fff; }
.place b { font-family: var(--f-display); font-size: 1.18rem; font-weight: 600; }
.place span { font-size: .8rem; color: var(--ink-3); line-height: 1.4; }

/* ============================================================
   12. FAQ
   ============================================================ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 20px 44px 20px 0;
  font-family: var(--f-display); font-size: clamp(1.08rem, 2vw, 1.32rem); font-weight: 600;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-sign); font-size: 1.5rem; color: var(--blaze); line-height: 1;
  transition: transform .2s ease;
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 44px 22px 0; color: var(--ink-2); max-width: 68ch; }
.faq details > div p + p { margin-top: 10px; }

/* ============================================================
   13. STOPKA
   ============================================================ */
.site-foot { background: var(--night); color: var(--snow-2); padding-block: clamp(48px, 6vw, 76px) 34px; position: relative; overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 34px; position: relative; z-index: 1; }
@media (max-width: 1000px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .foot-grid { grid-template-columns: 1fr; } }
.foot-col h4 {
  font-family: var(--f-sign); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lamp-b); margin-bottom: 14px; font-weight: 400;
}
.foot-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.foot-col a { font-size: .91rem; text-decoration: none; color: var(--snow-2); transition: color .16s ease; }
.foot-col a:hover { color: var(--lamp-b); }
.foot-brand .brand__mark { font-size: 1.6rem; color: var(--snow); }
.foot-brand p { font-size: .89rem; margin-top: 12px; max-width: 34ch; line-height: 1.6; }
.foot-bottom {
  margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  font-size: .82rem; color: var(--snow-3); position: relative; z-index: 1;
}

/* ============================================================
   14. STRONY WEWNĘTRZNE / TREŚĆ
   ============================================================ */
.page-head { background: var(--night-2); color: var(--snow); padding-block: clamp(44px, 6vw, 76px); position: relative; overflow: hidden; }
.page-head__in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.page-head h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.crumbs {
  font-family: var(--f-sign); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--snow-3); display: flex; flex-wrap: wrap; gap: 4px 8px;
}
.crumbs__i { display: inline-flex; gap: 8px; align-items: baseline; }
.crumbs__i + .crumbs__i::before { content: "/"; color: var(--snow-3); opacity: .55; }
.crumbs a { text-decoration: none; color: var(--snow-3); }
.crumbs a:hover { color: var(--lamp-b); }

.prose { max-width: 70ch; font-size: 1.04rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 1.85rem; margin-top: 2em; }
.prose h3 { font-size: 1.32rem; margin-top: 1.7em; }
.prose a { color: var(--blaze); }
.prose img { margin-block: 1.6em; }
.prose blockquote {
  border-left: 3px solid var(--blaze); padding: 6px 0 6px 22px; margin-left: 0;
  font-family: var(--f-display); font-size: 1.2rem; color: var(--ink-2);
}
.prose code { font-family: var(--f-data); font-size: .88em; background: var(--paper-2); padding: .12em .4em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }

.post-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.post-card { background: var(--paper-3); padding: 26px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; transition: background-color .18s ease; }
.post-card:hover { background: #fff; }
.post-card h2 { font-size: 1.28rem; }
.post-card p { font-size: .92rem; color: var(--ink-2); }
.post-card time { font-family: var(--f-data); font-size: .74rem; color: var(--ink-3); }

.pager { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 34px; }
.pager .page-numbers {
  font-family: var(--f-sign); padding: 10px 16px; border: 1px solid var(--line); text-decoration: none;
  background: var(--paper-3);
}
.pager .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ============================================================
   15. WYRÓWNANIA WORDPRESS
   ============================================================ */
.alignleft  { float: left; margin: .4em 1.6em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.6em; }
.aligncenter { margin-inline: auto; }
.alignwide, .alignfull { max-width: none; }
.wp-caption-text, figcaption { font-size: .82rem; color: var(--ink-3); margin-top: .55em; font-family: var(--f-body); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ============================================================
   16. SZABLON OBIEKTU (faza 0, krok 0.4)
   ============================================================ */
.page-head__lok {
  font-family: var(--f-sign); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lamp-b);
}
.page-head__lead { color: var(--snow-2); font-size: 1.06rem; max-width: 58ch; }

.obj-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(30px, 4vw, 56px); align-items: start;
}
@media (max-width: 980px) { .obj-layout { grid-template-columns: 1fr; } }

.obj-main { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); min-width: 0; }

.obj-hero { margin: 0; }
.obj-hero img { width: 100%; height: auto; display: block; }
.obj-hero figcaption { font-size: .82rem; color: var(--ink-3); margin-top: 8px; }
.obj-hero--pusty {
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(135deg, var(--paper-2) 0 12px, var(--paper-3) 12px 24px);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.obj-hero--pusty span {
  font-family: var(--f-sign); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2);
}

.obj-sekcja { display: flex; flex-direction: column; gap: 14px; }
.obj-sekcja > h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.obj-sekcja p { color: var(--ink-2); }

.obj-dojazd { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.obj-dojazd .tag { background: var(--paper-2); color: var(--ink-2); padding: 6px 11px; }

.obj-dlakogo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); }
.dlakogo { background: var(--paper-3); padding: 15px 17px; display: flex; flex-direction: column; gap: 3px; }
.dlakogo__k { font-family: var(--f-sign); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.dlakogo__v { font-family: var(--f-display); font-size: 1.14rem; font-weight: 600; }
.dlakogo.is-tak .dlakogo__v { color: var(--moss); }
.dlakogo.is-nie .dlakogo__v { color: var(--blaze); }

/* Bez align-items nagłówek rozciąga się na całą kolumnę i jego kreska
   zgadza się z pozostałymi sekcjami. Przycisk kurczymy osobno. */
.obj-noclegi .btn { align-self: flex-start; }

/* karta faktów */
/* Kolumna towarzyszy czytaniu, więc przykleja się na czas przewijania.
   Gdy urośnie ponad ekran, przewija się sama, zamiast chować dół. */
.obj-aside {
  display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 88px;
  max-height: calc(100vh - 112px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.obj-aside::-webkit-scrollbar { width: 8px; }
.obj-aside::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.fakty { border: 1px solid var(--line); background: var(--paper-3); padding: 22px 24px 24px;
  display: flex; flex-direction: column; gap: 14px; }
/* Wspólny nagłówek wszystkich kart kolumny bocznej. Wcześniej karta faktów
   miała nadtytuł czerwony, a nawigacja szara, bez żadnego powodu. */
.bok__t, .fakty__t, .silos__t {
  font-family: var(--f-sign); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 400; margin: 0;
}
.fakty__l { margin: 0; display: flex; flex-direction: column; }
.fakty__r { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px;
  padding: 9px 0; border-top: 1px solid var(--line-soft); align-items: baseline; }
.fakty__r:first-child { border-top: 0; padding-top: 0; }
.fakty__r dt { font-size: .86rem; color: var(--ink-3); }
.fakty__r dd { margin: 0; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.fakty__cta { justify-content: center; }
.fakty__wer {
  font-family: var(--f-body); font-size: .78rem; line-height: 1.55; color: var(--ink-3);
  padding-top: 10px; border-top: 1px solid var(--line-soft); margin: 0;
}
.fakty__wer--brak { color: var(--lamp); }
.fakty--pusta { border-style: dashed; }

/* nawigacja w silosie */
.silos { border: 1px solid var(--line); background: var(--paper-3); padding: 20px 24px 22px; }
.silos__t { margin-bottom: 12px; }
.silos ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.silos li { border-top: 1px solid var(--line-soft); }
.silos li:first-child { border-top: 0; }
.silos a { display: block; padding: 9px 0; text-decoration: none; font-size: .93rem;
  transition: color .16s ease, padding-left .16s ease; }
.silos a:hover { color: var(--blaze); padding-left: 5px; }

/* wpis noclegowy, faza 2 */
.dlakogo__v--tekst { font-family: var(--f-body); font-size: .97rem; font-weight: 500; line-height: 1.45; }
.silos__adres { font-size: .93rem; margin: 0 0 12px; color: var(--ink-2); }

/* ============================================================
   17. POGODA I KAMERY (faza 3)
   ============================================================ */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ikona-pog { width: 100%; height: 100%; display: block; }

.pog-blad {
  border: 1px dashed var(--line); background: var(--paper-3);
  padding: 20px 22px; color: var(--ink-2); font-size: .95rem;
}

/* stan bieżący */
.pog-teraz {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 30px); flex-wrap: wrap;
  border: 1px solid var(--line); background: var(--paper-3);
  padding: clamp(20px, 3vw, 32px);
}
.pog-teraz__ikona { width: 76px; height: 82px; color: var(--blaze); flex: none; }
.pog-teraz__temp {
  font-family: var(--f-display); font-size: clamp(3rem, 8vw, 4.6rem); line-height: .9;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.pog-teraz__temp span { font-size: .38em; color: var(--ink-3); margin-left: 2px; }
.pog-teraz__opis { display: flex; flex-direction: column; gap: 4px; }
.pog-teraz__opis strong { font-family: var(--f-display); font-size: 1.35rem; font-weight: 600; }
.pog-teraz__opis span { font-size: .9rem; color: var(--ink-2); }

.pog-naglowek {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: clamp(30px, 5vw, 48px) 0 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}

/* pasek godzinowy */
.pog-godziny {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(86px, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); min-width: 640px;
}
.pog-godz {
  background: var(--paper-3); padding: 14px 8px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
}
.pog-godz__h { font-family: var(--f-data); font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pog-godz__i { width: 34px; height: 37px; color: var(--blaze); }
.pog-godz__t { font-family: var(--f-display); font-size: 1.2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pog-godz__w { font-family: var(--f-data); font-size: .72rem; color: var(--ink-3); }

/* prognoza dzienna */
.pog-dni { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pog-dzien {
  background: var(--paper-3);
  display: grid; grid-template-columns: 8.5rem 3.2rem 2.6rem 1fr auto;
  gap: 10px 16px; align-items: center; padding: 12px 18px;
}
.pog-dzien__n { font-weight: 650; }
.pog-dzien__d { font-family: var(--f-data); font-size: .82rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pog-dzien__i { width: 26px; height: 28px; color: var(--blaze); }
.pog-dzien__o { color: var(--ink-2); font-size: .92rem; }
.pog-dzien__t { font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--f-data); }
.pog-dzien__t b { font-size: 1.06rem; }
.pog-dzien__t i { font-style: normal; color: var(--ink-3); margin-left: 8px; }
@media (max-width: 700px) {
  .pog-dzien { grid-template-columns: 5.6rem 2.2rem 1fr auto; }
  .pog-dzien__d { display: none; }
  .pog-dzien__o { font-size: .84rem; }
}

/* siatka miejscowości na hubie */
.pog-siatka {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
@media (max-width: 900px) { .pog-siatka { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pog-siatka { grid-template-columns: 1fr; } }
.pog-kafel {
  background: var(--paper-3); padding: 20px 22px 22px; text-decoration: none;
  display: flex; flex-direction: column; gap: 5px;
  transition: background-color .16s ease, box-shadow .16s ease;
  box-shadow: inset 3px 0 0 transparent;
}
a.pog-kafel:hover { background: #fff; box-shadow: inset 3px 0 0 var(--blaze); }
.pog-kafel__n { font-family: var(--f-display); font-size: 1.24rem; font-weight: 600; }
.pog-kafel__i { width: 42px; height: 46px; color: var(--blaze); margin-top: 6px; }
.pog-kafel__t {
  font-family: var(--f-display); font-size: 2.1rem; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pog-kafel__o { font-size: .88rem; color: var(--ink-2); }

/* tabela IMGW */
.pog-imgw { border-collapse: collapse; width: 100%; font-size: .92rem; min-width: 520px; }
.pog-imgw th, .pog-imgw td { padding: 10px 14px; text-align: left; }
.pog-imgw thead th {
  font-family: var(--f-sign); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); font-weight: 400; background: var(--paper-2); border-bottom: 1px solid var(--line);
}
.pog-imgw tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.pog-imgw td.n { text-align: right; font-family: var(--f-data); font-variant-numeric: tabular-nums; white-space: nowrap; }

.pog-zrodla {
  margin-top: clamp(28px, 4vw, 44px); padding-top: 16px; border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--ink-3); line-height: 1.6; max-width: 74ch;
}
.pog-zrodla a { color: inherit; }

/* ---------- kamery ---------- */
.kamery { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(20px, 3vw, 34px); }
.kamera { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.kamera__ramka { position: relative; aspect-ratio: 16 / 9; background: var(--night-2); overflow: hidden; }
.kamera__ramka iframe { width: 100%; height: 100%; border: 0; display: block; }
.kamera__start {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
  background: none; cursor: pointer; display: block;
}
.kamera__mini { width: 100%; height: 100%; object-fit: cover; display: block; }
.kamera__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  transition: transform .18s ease;
}
.kamera__play-bg { fill: rgba(20, 20, 20, .78); }
.kamera__play-tri { fill: #fff; }
.kamera__start:hover .kamera__play { transform: translate(-50%, -50%) scale(1.08); }
.kamera__start:hover .kamera__play-bg { fill: var(--blaze); }
.kamera__live {
  position: absolute; left: 12px; top: 12px;
  font-family: var(--f-sign); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  background: var(--blaze); color: #FBF7F2; padding: 4px 9px;
}
.kamera__opis { display: flex; flex-direction: column; gap: 5px; }
.kamera__opis strong { font-family: var(--f-display); font-size: 1.16rem; font-weight: 600; }
.kamera__opis p { font-size: .92rem; color: var(--ink-2); margin: 4px 0 0; }
.kam-info { margin-top: clamp(20px, 3vw, 30px); max-width: 68ch; }

/* ---------- mapa (faza 4) ---------- */
.mapa {
  height: clamp(420px, 62vh, 660px); width: 100%;
  border: 1px solid var(--line); background: var(--paper-2);
}
.mapa-legenda { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mapa-filtr {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-sign); font-size: .84rem; letter-spacing: .04em;
  padding: 9px 15px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper-3); color: var(--ink-3);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.mapa-filtr.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mapa-filtr:not(.is-on) .mapa-kropka { opacity: .35; }
.mapa-kropka { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.mapa-kropka--riese { background: #B93F25; }
.mapa-kropka--atrakcja { background: #8F6812; }
.mapa-kropka--nocleg { background: #4F7345; }
.mapa-kropka--miejscowosc { background: #2D5F76; }

.mapa-popup__t { display: block; font-family: var(--f-display); font-size: 1.02rem; font-weight: 600; }
.mapa-popup__o { display: block; margin-top: 5px; font-size: .84rem; color: #4A5245; }
.leaflet-popup-content { margin: 12px 14px; }
.leaflet-container { font-family: var(--f-body); }

.mapa-zrodlo {
  margin-top: 14px; font-size: .8rem; color: var(--ink-3); line-height: 1.6; max-width: 76ch;
}
.mapa-zrodlo a { color: inherit; }

/* podpis licencyjny pod zdjeciem */
.foto-kredyt {
  display: inline-block; font-size: .78rem; color: var(--ink-3);
  font-family: var(--f-sign); letter-spacing: .02em;
}
.foto-kredyt::before { content: "fot. "; }
.foto-kredyt a { color: inherit; text-decoration-color: var(--line); text-underline-offset: .18em; }
.foto-kredyt a:hover { color: var(--ink-2); text-decoration-color: currentColor; }
.obj-hero figcaption { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }

/* ---------- tabele porównawcze w treści (faza 6) ---------- */
.prose table {
  width: 100%; border-collapse: collapse; margin: 26px 0;
  font-size: .95rem; font-variant-numeric: tabular-nums;
}
.prose thead th {
  text-align: left; font-family: var(--f-sign);
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  padding: 0 16px 10px 0; border-bottom: 1px solid var(--line);
  white-space: nowrap; vertical-align: bottom;
}
.prose tbody th {
  text-align: left; font-weight: 600; color: var(--ink);
  padding: 13px 16px 13px 0; vertical-align: top;
}
.prose tbody td {
  padding: 13px 16px 13px 0; vertical-align: top; color: var(--ink-2);
}
.prose tbody tr + tr th,
.prose tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.prose th:last-child, .prose td:last-child { padding-right: 0; }

/* ---------- hero na hubach i stronach pogodowych (faza 8) ---------- */
.hub-hero { margin: 0 0 clamp(26px, 4vw, 40px); }
.hub-hero img {
  width: 100%; display: block; border-radius: 2px;
  aspect-ratio: 21 / 8; object-fit: cover;
}
.hub-hero figcaption {
  font-size: .82rem; color: var(--ink-3); margin-top: 8px;
}
@media (max-width: 640px) {
  .hub-hero img { aspect-ratio: 16 / 10; }
}

/* ---------- pochodzenie danych (faza 11) ---------- */
.fakty__wer strong {
  display: inline-block; margin-top: 6px;
  color: var(--blaze); font-weight: 600;
}
.fakty__wer a { color: var(--ink-2); text-decoration: underline; }

/* ---------- galeria zdjęć (faza 12) ---------- */
.galeria { margin: clamp(34px, 5vw, 56px) 0 0; }
.galeria > h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 14px;
}
.galeria__wstep { color: var(--ink-2); max-width: 64ch; margin-bottom: 20px; }

.galeria__siatka {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(12px, 2vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.galeria__fig { margin: 0; display: flex; flex-direction: column; gap: 6px; }

.galeria__start {
  display: block; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 2px; overflow: hidden; line-height: 0;
}
.galeria__start img {
  width: 100%; height: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .3s ease, filter .3s ease;
}
.galeria__start:hover img,
.galeria__start:focus-visible img { transform: scale(1.03); filter: brightness(1.06); }
.galeria__start:focus-visible { outline: 2px solid var(--blaze); outline-offset: 3px; }

.galeria__fig figcaption { font-size: .78rem; color: var(--ink-3); }
.galeria__nota {
  margin-top: 18px; font-size: .82rem; color: var(--ink-3);
  max-width: 68ch; border-top: 1px solid var(--line-soft); padding-top: 12px;
}

/* powiększenie */
.lupa {
  border: 0; padding: 0; max-width: min(96vw, 1400px); max-height: 94vh;
  background: var(--night); color: var(--snow); border-radius: 3px;
}
.lupa::backdrop { background: rgba(8, 10, 9, .88); }
.lupa__fig { margin: 0; display: flex; flex-direction: column; }
.lupa__img {
  display: block; max-width: 100%; max-height: 82vh;
  width: auto; height: auto; margin: 0 auto; object-fit: contain;
}
.lupa__opis {
  padding: 12px 16px; font-size: .84rem; color: var(--snow-2);
  font-family: var(--f-sign); letter-spacing: .02em;
}
.lupa__opis a { color: var(--snow-2); text-decoration: underline; }

.lupa__zamknij, .lupa__nawig {
  position: absolute; z-index: 2; cursor: pointer;
  background: rgba(8, 10, 9, .6); color: var(--snow);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 2px;
  font-size: 1.5rem; line-height: 1; padding: 6px 12px;
  /* pole dotyku nie mniejsze niż 44 px, inaczej trudno trafić na telefonie */
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
}
.lupa__zamknij:hover, .lupa__nawig:hover { background: rgba(8, 10, 9, .85); }
.lupa__zamknij:focus-visible, .lupa__nawig:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
.lupa__zamknij { top: 10px; right: 10px; }
.lupa__nawig { top: 50%; transform: translateY(-50%); font-size: 2rem; padding: 4px 14px; }
.lupa__nawig--wstecz { left: 10px; }
.lupa__nawig--dalej { right: 10px; }

@media (max-width: 640px) {
  .galeria__siatka { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .lupa__nawig { font-size: 1.5rem; padding: 3px 10px; }
}

/* ============================================================
   19. KOLUMNA BOCZNA I POPRAWKI UKŁADU (fale 12-14)
   ============================================================ */

/* wspólna karta kolumny bocznej */
.bok { border: 1px solid var(--line); background: var(--paper-3); padding: 20px 22px 22px; }
.bok__wiecej {
  display: inline-flex; align-items: baseline; gap: 6px; margin-top: 14px;
  font-family: var(--f-sign); font-size: .82rem; letter-spacing: .04em;
  text-decoration: none; color: var(--blaze);
}
.bok__wiecej .arw { transition: transform .16s ease; }
.bok__wiecej:hover .arw { transform: translateX(3px); }

/* spis sekcji: szyna z ruchomym znacznikiem */
.bok-spis__l {
  list-style: none; margin: 12px 0 0; padding: 0;
  max-height: 46vh; overflow-y: auto; scrollbar-width: thin;
}
.bok-spis__l a {
  display: block; padding: 7px 0 7px 14px; font-size: .9rem; line-height: 1.35;
  border-left: 2px solid var(--line-soft); color: var(--ink-2); text-decoration: none;
  transition: color .16s ease, border-color .16s ease;
}
.bok-spis__l a:hover { color: var(--ink); border-left-color: var(--line); }
.bok-spis__l a.jest-tu { color: var(--blaze); border-left-color: var(--blaze); font-weight: 600; }

/* pogoda w punkcie, do którego odnosi się strona */
.bok-pog__teraz { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.bok-pog__i { line-height: 0; }
.bok-pog__i svg { width: 36px; height: 39px; }
.bok-pog__t { font-family: var(--f-display); font-size: 2.1rem; font-weight: 600; line-height: 1; }
.bok-pog__t span { font-size: .46em; vertical-align: super; margin-left: 1px; font-weight: 500; }
.bok-pog__o { font-size: .92rem; color: var(--ink-2); margin: 10px 0 0; }
.bok-pog__h {
  font-family: var(--f-sign); font-size: .74rem; letter-spacing: .08em;
  color: var(--ink-3); margin: 5px 0 0;
}

/* karta faktów z jedną pozycją czyta się lepiej jako pasek niż jako karta */
.fakty--waska { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 15px 20px; }
.fakty--waska .fakty__l { flex: 1 1 auto; }
.fakty--waska .fakty__r { padding: 0; border-top: 0; }
.fakty--waska .fakty__wer { flex: 1 1 100%; }
.fakty__adres { font-size: .9rem; color: var(--ink-2); margin: 0; font-variant-numeric: tabular-nums; }

/* zastrzeżenie przy odpowiedzi „dla kogo”: „tak, z przełęczy” */
.dlakogo__u { font-size: .84rem; line-height: 1.4; color: var(--ink-3); }

/* adres albo współrzędne obok przycisku nawigacji */
.obj-dojazd__adres {
  font-size: .86rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* dolna część huba: siatki i galeria przez całą szerokość ramy */
.hub-dol { display: flex; flex-direction: column; gap: clamp(30px, 5vw, 52px); margin-top: clamp(34px, 5vw, 56px); }
.obj-layout--sam { grid-template-columns: minmax(0, 1fr); }

/* równa wysokość podpisów w galerii, żeby rzędy się nie rozjeżdżały */
.galeria__fig figcaption { min-height: 2.5em; }

@media (max-width: 980px) {
  /* Kolumna boczna rozpada się na elementy siatki: podsumowanie staje przed
     treścią, reszta za nią. Spis sekcji na wąskim ekranie tylko przeszkadza. */
  .obj-aside { display: contents; }
  .obj-main { order: 1; }
  .obj-aside > .fakty { order: 0; }
  .obj-aside > .bok-spis { display: none; }
  .obj-aside > .bok-pog { order: 2; }
  .obj-aside > .silos { order: 3; }
}

@media (max-width: 640px) {
  /* Pełna ścieżka zajmowała cztery wiersze wersalikami. Zostaje krok w górę. */
  .crumbs { font-size: .72rem; letter-spacing: .06em; }
  .crumbs__i--daleki { display: none; }
  .crumbs:has(.crumbs__i--rodzic) .crumbs__i--teraz { display: none; }
}

/* ============================================================
   20. TABELE PORÓWNAWCZE (fala 15)
   ============================================================ */

.tabela { overflow-x: auto; margin: 26px 0; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.tabela table { margin: 0; }

/* Kolumna z porównywalnymi liczbami dostaje pasek długości proporcjonalnej
   do wartości. Dane pochodzą wyłącznie z tego, co jest już w tabeli. */
.tab--paski tbody th, .tab--paski tbody td { padding-bottom: 19px; }
.tab--paski td.lb { position: relative; white-space: nowrap; }
.tab--paski td.lb::after {
  content: ""; position: absolute; left: 0; bottom: 8px; height: 3px;
  width: calc((100% - 16px) * var(--udzial, 0));
  background: var(--blaze); opacity: .32; border-radius: 2px;
}
.tab--paski tbody tr:hover td.lb::after { opacity: .55; }

@media (max-width: 640px) {
  /* Na wąskim ekranie wiersz zamienia się w kartę, zamiast uciekać w bok. */
  .tabela { overflow-x: visible; }
  .tab, .tab tbody, .tab tbody tr { display: block; }
  .tab thead { display: none; }
  .tab tbody tr {
    border: 1px solid var(--line); background: var(--paper-3);
    padding: 14px 16px; margin-bottom: 10px;
  }
  .prose .tab tbody th, .prose .tab tbody td { display: block; padding: 0; border-top: 0; }
  .prose .tab tbody th {
    font-family: var(--f-display); font-size: 1.12rem; font-weight: 600;
    margin-bottom: 9px; color: var(--ink);
  }
  .prose .tab tbody td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 6px 0; border-top: 1px solid var(--line-soft);
  }
  .prose .tab tbody td::before {
    content: attr(data-etykieta); flex: none; color: var(--ink-3);
    font-family: var(--f-sign); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  }
  .prose .tab tbody td:empty { display: none; }
  .tab--paski tbody th, .tab--paski tbody td { padding-bottom: 6px; }
  .tab--paski td.lb::after { display: none; }
}

/* ============================================================
   21. RYTM STRONY I ANATOMIA KART (fale 16-17)
   ============================================================ */

/* Sekcje prozy zaczynają się znakiem szlaku. Na stronie długiej na cztery
   tysiące pikseli to jedyne, po czym można się rozeznać przy przewijaniu. */
.prose h2 { margin-top: 2.7em; padding-top: 20px; position: relative; }
.prose h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 34px; height: 3px; background: var(--blaze); opacity: .8;
}
.prose > h2:first-child { margin-top: 0; }

/* Akapit otwierający prowadzi do tekstu, więc dostaje trochę więcej wagi. */
.prose > p:first-child { font-size: 1.12rem; line-height: 1.68; color: var(--ink); }

/* Przejście od opowieści do części praktycznej. */
.prose + .obj-sekcja { padding-top: clamp(24px, 4vw, 38px); border-top: 2px solid var(--line); }

/* Dolny pas huba ma teraz własne tło, więc odstęp daje sam pas. */
.hub-dol { margin-top: 0; }

/* Karty w rzędzie: tytuł i wiersz lokalizacji rezerwują stałą wysokość,
   żeby opisy zaczynały się na tym samym poziomie. */
.grid--light .obj:not(.obj--lead):not(.obj--wide) > h3,
.grid--light .obj:not(.obj--lead):not(.obj--wide) > h2,
.grid--dark  .obj:not(.obj--lead):not(.obj--wide) > h3,
.grid--dark  .obj:not(.obj--lead):not(.obj--wide) > h2 { min-height: 2.3em; }
.obj > .alt { display: block; min-height: 1.3em; }

/* Karta pełnej szerokości układa się w wiersz, więc nie rezerwuje
   miejsca na pusty wiersz lokalizacji. */
.obj--wide > .alt { min-height: 0; flex: none; }

/* ============================================================
   22. POLE DOTYKU NA WĄSKIM EKRANIE (test beta)
   ============================================================ */
@media (max-width: 700px) {
  /* Linki stopki i okruszków miały 19-20 px wysokości, czyli poniżej progu
     24 px z WCAG 2.5.8. Odnośniki w zdaniu są z tego progu wyłączone,
     ale te stoją samodzielnie i łatwo w nie chybić. */
  .foot-col a { display: block; padding-block: 5px; }
  .foot-col ul { gap: 2px; }
  .crumbs a { display: inline-block; padding-block: 4px; }
  .bok__wiecej { padding-block: 3px; }
  .foto-kredyt a { display: inline-block; padding-block: 4px; }
  .foto-kredyt { line-height: 1.5; }
}

/* ============================================================
   23. DRUK (test beta)
   ============================================================
   Przewodnik górski bywa drukowany i zabierany w teren, więc kartka
   ma zawierać opis trasy i tabelę, a nie nawigację, galerię i mapę. */
@media print {
  html { scroll-padding-top: 0; }
  body { background: #fff; color: #000; font-size: 11pt; }

  .site-head, .nav, .nav-toggle, .skip-link, .crumbs,
  .galeria, .lupa, .bok-spis, .obj-noclegi, .site-foot, footer,
  .topo, .hero__topo, .hero__scrim, .hero__glow,
  .mapa-filtry, #mapa, .leaflet-container, .kam-lista { display: none !important; }

  .page-head { background: #fff; color: #000; padding-block: 0 12pt; }
  .page-head__lead, .page-head__lok { color: #333; }
  .band { padding-block: 0; background: #fff; }
  .obj-layout { display: block; }
  .obj-aside { position: static; max-height: none; overflow: visible; display: block; margin-top: 16pt; }

  .prose { max-width: none; }
  .prose a { color: #000; text-decoration: underline; }
  /* Adres podajemy tylko przy odnośnikach na zewnątrz: wewnętrzne
     zaśmieciłyby kartkę, a i tak nie da się w nie kliknąć. */
  .prose a[href^="http"]:not([href*="gory-sowie.pl"])::after {
    content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all;
  }

  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  p, li, tr, .fakty, .dlakogo { break-inside: avoid; page-break-inside: avoid; }
  .tabela { overflow: visible; }
  .tab { width: 100%; }
  details { break-inside: avoid; }
  details[open] > summary ~ * { display: block; }

  .obj-hero img, .hub-hero img { max-height: 60mm; object-fit: cover; }
  .obj-hero--pusty { display: none; }
  .btn, .chip { border: 1px solid #666; color: #000; background: none; }
}