/*
 * PTTK public site — mountain-hut themed front-end design system.
 * Self-contained: loaded only on the public (application) layout.
 * No Tailwind, no Bootstrap. Plain CSS + custom properties.
 */

:root {
  --forest: #173326;
  --brand-green: #0E3A21;   /* deep green of the round brand icons */
  --pine: #2F6B4F;
  --pine-dark: #25563F;
  --wood: #8B5A33;
  --amber: #C8863D;
  --amber-soft: #E0A85E;
  --amber-dark: #B5752F;   /* amber hover/active */
  --amber-light: #F2C892;  /* amber link on dark surfaces */
  --cream: #FFF9EE;
  --bg: #F7F0E3;
  --border: #D8C7AD;
  --text: #20281F;
  --muted: #6A6256;
  /* light text colours used on dark (forest/pine) surfaces */
  --on-dark: #E7F1E7;       /* primary text on dark */
  --on-dark-link: #DCEADC;  /* nav / footer links */
  --on-dark-soft: #BFD3C0;  /* muted text on dark */
  --shadow: 0 10px 30px rgba(23, 51, 38, 0.10);
  --shadow-sm: 0 2px 8px rgba(23, 51, 38, 0.07);
  --radius: 14px;
  --radius-sm: 8px;
  --container: 1690px;
  --measure: 820px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--pine); }
h1, h2, h3, h4 { line-height: 1.2; color: var(--forest); margin: 0 0 0.5em; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--forest);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.site-main { display: block; min-height: 40vh; }

/* Boxed layout: the whole public site is a centred frame (--container wide) on
   the page canvas, so equal white bars show on both sides at wide viewports —
   including full-bleed elements (hero photo, alt sections, footer), which are
   bounded by the frame rather than the viewport. Below the frame width it fills
   the viewport, so nothing changes on smaller screens (RWD). */
.site-header,
.site-main,
.site-footer {
  /* max-width: var(--container); */
  margin-inline: auto;
}

.section { padding-block: 56px; }
.section--tight { padding-block: 36px; }
.section__head { margin-bottom: 26px; }
.section__title { font-size: 1.9rem; margin: 0; }
.section__lead { color: var(--muted); margin: 8px 0 0; max-width: var(--measure); }
.section--alt { background: var(--cream); border-block: 1px solid var(--border); }
.section__head--center { text-align: center; }
.section__head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(47, 107, 79, 0.12);
  color: var(--pine);
}
.section__head-icon svg { width: 26px; height: 26px; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--amber);
  margin-bottom: 8px;
}

/* ---------------------------------------------------------------- Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--forest);
  color: var(--on-dark);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 76px;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  flex: none;
}
.site-brand img { height: 46px; width: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

/* dynamic menu rendered by public_menu helper as nav.public-menu */
.public-menu { display: flex; }
.public-menu > ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.public-menu li { position: relative; }
.public-menu a {
  display: block;
  padding: 9px 12px;
  color: var(--on-dark-link);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.public-menu a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.public-menu a.is-active,
.public-menu a[aria-current="page"] { color: var(--amber-soft); }
/* nested submenus */
.public-menu li ul {
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--pine-dark);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  display: none;
  z-index: 5;
}
.public-menu li:hover > ul,
.public-menu li:focus-within > ul { display: block; }

.site-trail-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--amber);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 9px 15px;
  border-radius: 999px;
}
.site-trail-link:hover { background: var(--amber-dark); }

.site-nav-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
}

/* ------------------------------------------------------------------ Hero */

.hero {
  position: relative;
  color: #fff;
  background: var(--forest);
  background-size: cover;
  /* background-position: center; */
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 30, 22, 0.45) 0%, rgba(15, 30, 22, 0.80) 100%);
  z-index: 0;
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 84px;
  max-width: 760px;
}
.hero--compact .hero__inner { padding-block: 54px; }
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--amber-soft);
  margin-bottom: 12px;
}
.hero__title { color: #fff; font-size: 2.7rem; margin: 0 0 14px; }
.hero--compact .hero__title { font-size: 2rem; }
.hero__text { font-size: 1.12rem; color: var(--on-dark); margin: 0; max-width: 640px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Feature highlights row (icon + value + label) shown over the hero photo */
.hero__features { display: flex; flex-wrap: wrap; gap: 16px 38px; margin-top: 45px; }
.hero__feature { display: flex; align-items: center; gap: 14px; }
.hero__feature-icon {
  flex: none;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.hero__feature-icon svg { width: 26px; height: 26px; }
.hero__feature-text { display: flex; flex-direction: column; line-height: 1.2; }
.hero__feature-title { font-weight: 700; font-size: 1.15rem; color: #fff; }
.hero__feature-sub { font-size: 0.9rem; color: var(--on-dark-soft); }

.hero__wrap { position: relative; }
.hero__logo {
  position: absolute;
  right: 24px;
  top: 28px;
  width: 128px;
  height: auto;
  z-index: 1;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}
@media (max-width: 900px) { .hero__logo { display: none; } }

/* -------- Unified "Szlak" feature hero -------------------------------------
   Top-level pages (home, obiekty, o-firmie, kontakt) share one banner via the
   `trail:` local on shared/_hero. One height, one scrim, one type scale; the
   only thing that changes per page is the trail-blaze colour — which doubles as
   a wayfinding signal: home = red ("szlak główny"), obiekty = blue,
   o-firmie = green, kontakt = amber. Content sits bottom-left; photo breathes
   on the right. `--trail` paints the blaze, `--trail-ink` tints the eyebrow
   (a brighter tint kept legible on the dark scrim). */
.hero--feature { --trail: #DA3B2C; }
.hero--trail-red   { --trail: #DA3B2C; }
.hero--trail-blue  { --trail: #2E7BD1; }
.hero--trail-green { --trail: #45A45B; }
.hero--trail-amber { --trail: #ECC24A; }

/* "Słońce": the photo stays bright (a touch more sun + colour); only a soft
   gradient at the base anchors the text. The blaze carries the section colour,
   the eyebrow is white with a shadow so it reads over the open, sunny photo.
   Layers: photo (z0) < scrim ::after (z1) < content wrap (z2). */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: bottom;
  filter: saturate(1.08) brightness(1.04);
}
.hero--feature .hero__wrap { position: relative; z-index: 2; }
.hero--feature::after {
  z-index: 1;
  background: linear-gradient(0deg,
    rgba(9, 22, 15, 0.78) 0%,
    rgba(9, 22, 15, 0.42) 28%,
    rgba(9, 22, 15, 0.14) 48%,
    rgba(9, 22, 15, 0) 66%);
}
.hero--feature .hero__inner {
  min-height: clamp(560px, 56vh, 780px);
  max-width: 680px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* the painted PTTK trail blaze: white / colour / white horizontal bands */
.hero__blaze {
  display: block;
  width: 48px;
  height: 27px;
  margin-bottom: 18px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  background: linear-gradient(180deg, #fff 0 34%, var(--trail) 34% 66%, #fff 66% 100%);
}
.hero--feature .hero__eyebrow {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.18em;
  font-size: 0.74rem;
  margin-bottom: 14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.45);
}
.hero--feature .hero__title {
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.06;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  margin: 0 0 14px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
.hero--feature .hero__text {
  font-size: 1.08rem;
  line-height: 1.55;
  color: #EAF2EC;
  max-width: 42ch;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.hero--feature .hero__actions { margin-top: 26px; }
.hero--feature .hero__features { margin-top: 30px; }

/* Icon + label row inside a feature hero (obiekty, o-firmie). Icons come from
   brand_icon (stroke: currentColor) and inherit white from the hero. */
.hero__tags { display: flex; flex-wrap: wrap; gap: 16px 30px; margin-top: 30px; }
.hero__tag { display: flex; flex-direction: column; align-items: center; gap: 11px; width: 104px; text-align: center; color: #fff; }
.hero__tag-icon { display: inline-flex; }
.hero__tag-icon svg { width: 38px; height: 38px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); }
.hero__tag-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.25; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
@media (max-width: 560px) {
  .hero__tags { gap: 16px 18px; margin-top: 24px; }
  .hero__tag { width: calc(50% - 9px); }
}

/* Light hero: photo on the right, page-colour gradient on the left, dark text.
   Used by list pages (e.g. Nasze obiekty) to match the light mockups. */
/* photo hero: responsive <img> background instead of a CSS background-image */
.hero--photo .hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 0;
}
.hero--photo::after { z-index: 1; }
.hero--photo .hero__wrap { z-index: 2; }
/* taller, more cinematic hero so the sky + mountains read */
.hero--photo .hero__inner {
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* narrow screens: shorter hero + stronger light veil so dark text stays readable over the photo */
@media (max-width: 700px) {
  .hero--photo .hero__inner { min-height: 320px; }
  .hero--photo.hero--light::after {
    background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 44%, color-mix(in srgb, var(--bg) 80%, transparent) 100%);
  }
}

.hero--light { color: var(--text); background-position: right center; }
.hero--light::after {
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 26%, color-mix(in srgb, var(--bg) 35%, transparent) 62%, transparent 88%);
}
.hero--light .hero__title { color: var(--forest); }
.hero--light .hero__text { color: var(--muted); }
.hero--light .hero__eyebrow { color: var(--amber); }

/* ---------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.btn--primary { background: var(--amber); color: #fff; }
.btn--primary:hover { background: var(--amber-dark); }
.btn--ghost { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.22); }
.btn--outline { background: transparent; color: var(--pine); border-color: var(--pine); }
.btn--outline:hover { background: var(--pine); color: #fff; }
.btn--block { width: 100%; }

/* ----------------------------------------------------------------- Badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  background: #EDE3CF;
  color: var(--wood);
  border: 1px solid var(--border);
}
.tag--region { background: var(--forest); color: #fff; border-color: var(--forest); font-weight: 700; padding: 6px 14px; font-size: 0.8rem; }
.tag--active { background: #E2EFE7; color: var(--pine); border-color: #BFD8C8; }
.tag--ended  { background: #ECE6DC; color: var(--muted); border-color: var(--border); }

/* ------------------------------------------------------------------ Grids */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px;
}
/* Light pre-footer CTA band */
.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 36px;
  box-shadow: var(--shadow-sm);
}
.cta-band__main { display: flex; align-items: center; gap: 18px; }
.cta-band__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-green);
  color: #fff;
}
.cta-band__icon svg { width: 28px; height: 28px; }
.cta-band__title { margin: 0 0 4px; font-size: 1.3rem; }
.cta-band__text { margin: 0; color: var(--muted); max-width: 540px; }
.cta-band__btn { flex: none; }
@media (max-width: 600px) { .cta-band { padding: 22px 22px; } }

/* 4-up facility grid (Nasze obiekty), matching the mockup */
.facilities-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1024px) { .facilities-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .facilities-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .facilities-grid { grid-template-columns: 1fr; } }
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* ------------------------------------------------------------ Facility card */

.facility-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.facility-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.facility-card__media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--pine), var(--forest));
  position: relative;
}
.facility-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.facility-card__region {
  position: absolute;
  top: 12px;
  left: 12px;
}
.facility-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.facility-card__title { font-size: 1.2rem; margin: 0 0 6px; }
.facility-card__title a { color: var(--forest); text-decoration: none; }
.facility-card__title a:hover { color: var(--pine); }
.facility-card__addr { color: var(--muted); font-size: 0.9rem; margin: 0 0 12px; }
.facility-card__desc { color: var(--text); font-size: 0.94rem; margin: 0 0 16px; }
.facility-card__more {
  margin-top: auto;
  color: var(--amber);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.92rem;
}
.facility-card__more:hover { text-decoration: underline; }

/* ------------------------------------------------------------- Entry card */

.entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px 20px 30px;
  box-shadow: var(--shadow-sm);
}
/* inset rounded accent bar on the left — colour by content type */
.entry-card::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 18px;
  bottom: 18px;
  width: 5px;
  border-radius: 3px;
  background: var(--amber);
}
.entry-card--article::before { background: var(--pine); }
.entry-card--contest::before,
.entry-card--tender::before { background: var(--wood); }

.entry-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}
/* top-right marker: plain coloured text, no border / no background */
.entry-card__marker { font-size: 0.84rem; font-weight: 700; white-space: nowrap; flex: none; }
.entry-card__marker--date { color: var(--amber); }
.entry-card__marker--article { color: var(--pine); }
.entry-card__marker--contest,
.entry-card__marker--tender { color: var(--wood); }

.entry-card__title { font-size: 1.18rem; margin: 0; }
.entry-card__title a { color: var(--forest); text-decoration: none; }
.entry-card__title a:hover { color: var(--pine); }
.entry-card__excerpt { color: var(--text); margin: 0; }
.entry-card__footer { margin-top: 14px; }
.entry-card__deadline { font-size: 0.84rem; font-weight: 600; color: var(--wood); }
.entry-list { display: flex; flex-direction: column; gap: 18px; }

/* --------------------------------------------------------------- Filters */

.filters {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}
.filters__field { display: flex; flex-direction: column; gap: 5px; }
.filters__field--grow { flex: 1; min-width: 220px; }
.filters__field label { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.filters input, .filters select {
  font: inherit;
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
}
.filters input:focus, .filters select:focus {
  outline: none;
  border-color: var(--pine);
  box-shadow: 0 0 0 3px rgba(47, 107, 79, 0.15);
}

/* -------------------------------------------------------------- Breadcrumb */

.breadcrumb { padding-block: 16px; font-size: 0.85rem; color: var(--muted); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--pine); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: 0.5; }

/* ---------------------------------------------------------- List pages */
.page-head { margin-bottom: 26px; }
.page-head__title { font-size: 2.2rem; margin: 0 0 6px; }
.page-head .breadcrumb { padding-block: 0; }

/* two-column: entries + sidebar */
.list-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }

/* tab filter bar */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; background: var(--cream); border: 1px solid var(--border); border-radius: 999px; padding: 5px; margin-bottom: 24px; }
.tab { padding: 8px 18px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.tab:hover { color: var(--forest); }
.tab.is-active { background: var(--pine); color: #fff; }

/* entry rows with date block */
.entry-rows { display: flex; flex-direction: column; gap: 16px; }
.entry-row {
  display: flex;
  gap: 20px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.entry-row__date {
  flex: none;
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--pine);
  color: #fff;
  line-height: 1;
}
.entry-row--tender .entry-row__date,
.entry-row--contest .entry-row__date { background: var(--wood); }
.entry-row__day { font-size: 1.5rem; font-weight: 800; }
.entry-row__month { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; margin-top: 4px; }
.entry-row__body { min-width: 0; flex: 1; }
.entry-row__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.entry-row__title { font-size: 1.12rem; margin: 0; }
.entry-row__title a { color: var(--forest); text-decoration: none; }
.entry-row__title a:hover { color: var(--pine); }
.entry-row__excerpt { color: var(--muted); margin: 8px 0 0; font-size: 0.94rem; }
.entry-row__deadline { margin: 10px 0 0; font-size: 0.84rem; font-weight: 600; color: var(--wood); }

.entry-tag { flex: none; display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.entry-tag--active { background: #E2EFE7; color: var(--pine); border: 1px solid #BFD8C8; }
.entry-tag--ended { background: #ECE6DC; color: var(--muted); border: 1px solid var(--border); }
.entry-tag--type { background: #EDE3CF; color: var(--wood); border: 1px solid var(--border); }

/* sidebar boxes */
.list-aside { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 96px; }
.aside-box { background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.aside-box--accent { background: linear-gradient(160deg, var(--pine-dark), var(--forest)); border-color: transparent; color: var(--on-dark); }
.aside-box--accent .aside-box__title { color: #fff; }
.aside-box--accent .aside-box__text { color: var(--on-dark); }
.aside-box__title { font-size: 1.1rem; margin: 0 0 10px; }
.aside-box__text { font-size: 0.92rem; color: var(--muted); margin: 0 0 16px; }
.aside-steps { margin: 0 0 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; font-size: 0.92rem; color: var(--text); }
.aside-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 0.92rem; }
.aside-contact a { color: var(--pine); text-decoration: none; }
.aside-contact a:hover { text-decoration: underline; }
.aside-contact__icon { display: inline-block; width: 18px; color: var(--amber); }

/* ----------------------------------------------------------- Articles list */
.article-list { display: flex; flex-direction: column; gap: 20px; }
.article-card {
  display: grid;
  grid-template-columns: 210px 1fr;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.14s ease, transform 0.14s ease;
}
.article-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.article-card__media { display: block; background: var(--border); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; }
.article-card__body { padding: 20px 22px; display: flex; flex-direction: column; min-width: 0; }
.article-card__title { font-size: 1.22rem; margin: 0 0 8px; }
.article-card__title a { color: var(--forest); text-decoration: none; }
.article-card__title a:hover { color: var(--pine); }
.article-card__excerpt { color: var(--muted); font-size: 0.94rem; line-height: 1.55; margin: 0 0 16px; }
.article-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.article-card__date { color: var(--muted); font-size: 0.86rem; }
.article-card__more { color: var(--amber); font-weight: 600; text-decoration: none; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.article-card__more:hover { text-decoration: underline; }

/* sidebar: categories */
.cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cat-list a { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--text); text-decoration: none; font-size: 0.94rem; }
.cat-list a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pine); flex: none; }
.cat-list a:hover { color: var(--pine); }
.cat-list a.is-active { color: var(--amber); font-weight: 700; }
.cat-list a.is-active::before { background: var(--amber); }

/* sidebar: newest */
.recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.recent-list li { display: flex; align-items: center; gap: 12px; }
.recent-list__icon { flex: none; width: 40px; height: 40px; }
.recent-list__icon img { width: 100%; height: 100%; display: block; }
.recent-list__link { color: var(--text); text-decoration: none; font-size: 0.9rem; line-height: 1.4; }
.recent-list__link:hover { color: var(--pine); }


/* ---------------------------------------------------------- Article detail */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; align-items: start; margin-top: 22px; }
.article-main { min-width: 0; }

.article-detail__cat {
  display: inline-block;
  padding: 5px 14px;
  margin-bottom: 16px;
  background: #E2EFE7;
  color: var(--pine);
  border: 1px solid #BFD8C8;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}
.article-detail__cat:hover { background: #D3E7DC; }
.article-detail__title { font-size: 2.5rem; line-height: 1.14; margin: 0 0 18px; }

.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; color: var(--muted); font-size: 0.9rem; margin-bottom: 26px; }
.article-meta__item { display: inline-flex; align-items: center; gap: 8px; }
.article-meta__icon { display: inline-flex; width: 18px; height: 18px; color: var(--pine); flex: none; }
.article-meta__icon svg { width: 100%; height: 100%; }
.article-meta__sep { width: 1px; height: 18px; background: var(--border); }
.article-meta__share { color: var(--pine); text-decoration: none; font-weight: 600; }
.article-meta__share:hover { color: var(--forest); }

.article-detail__media { margin: 0 0 26px; }
.article-detail__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); display: block; }

.article-detail__lead { font-size: 1.16rem; font-weight: 700; color: var(--forest); line-height: 1.5; margin: 0 0 22px; }
.article-detail__body { max-width: none; }
.article-detail__body :is(h2, h3) { scroll-margin-top: 90px; }
.article-detail__back { margin-top: 32px; }

.article-aside { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 90px; }

/* table of contents */
.toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.toc-list a { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--text); text-decoration: none; font-size: 0.92rem; line-height: 1.35; }
.toc-list a:hover { color: var(--pine); }
.toc-list__icon { flex: none; display: inline-flex; width: 18px; height: 18px; color: var(--muted); }
.toc-list__icon svg { width: 100%; height: 100%; }
.toc-list__item--h3 a { padding-left: 18px; font-size: 0.88rem; }

/* share buttons (round icon buttons) */
.share-row { display: flex; gap: 12px; flex-wrap: wrap; }
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--border);
  color: var(--forest);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.share-btn:hover { background: var(--pine); color: #fff; border-color: var(--pine); }
.share-btn svg { width: 18px; height: 18px; }
.share-btn--copy.is-copied { background: var(--pine); color: #fff; border-color: var(--pine); }

/* related articles */
.related-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.related-list li { display: flex; gap: 12px; align-items: flex-start; }
.related-list__media { flex: none; width: 72px; height: 54px; border-radius: var(--radius-sm); overflow: hidden; display: block; background: var(--border); }
.related-list__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-list__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.related-list__title { color: var(--forest); text-decoration: none; font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.related-list__title:hover { color: var(--pine); }
.related-list__date { color: var(--muted); font-size: 0.8rem; }
.related-list__all { display: inline-flex; align-items: center; gap: 6px; color: var(--amber); font-weight: 700; text-decoration: none; font-size: 0.92rem; }
.related-list__all:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; }
  .list-layout { grid-template-columns: 1fr; }
  .list-aside { position: static; }
}
@media (max-width: 560px) {
  .article-detail__title { font-size: 1.9rem; }
}
@media (max-width: 560px) {
  .article-card { grid-template-columns: 1fr; }
  .article-card__media img { aspect-ratio: 16 / 9; }
}
@media (max-width: 480px) {
  .entry-row { flex-direction: column; gap: 12px; }
  .entry-row__head { flex-direction: column; }
}

/* ---------------------------------------------------------- Facility detail */
.hero--detail .hero__inner { padding-block: 84px 132px; max-width: 720px; }
/* white breadcrumb sitting over the hero photo */
.hero .breadcrumb { padding: 14px 0 0; }
.hero .breadcrumb,
.hero .breadcrumb a { color: rgba(255, 255, 255, 0.85); }
.hero .breadcrumb a:hover { color: #fff; }
.hero .breadcrumb li + li::before { color: rgba(255, 255, 255, 0.6); }

.facility-detail {
  position: relative;
  z-index: 2;
  margin-top: -92px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 36px;
}
.facility-detail__cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.facility-detail__intro { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 32px; }

.facility-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.facility-info li { display: flex; gap: 14px; align-items: flex-start; }
.facility-info__icon { flex: none; display: inline-flex; width: 34px; height: 34px; color: var(--pine); }
.facility-info__icon svg { width: 100%; height: 100%; }
.facility-info__label { display: block; font-size: 0.8rem; color: var(--muted); }
.facility-info__value { display: block; font-weight: 700; color: var(--forest); font-size: 1.05rem; }
.facility-info__sub { display: block; font-size: 0.84rem; color: var(--muted); }

.facility-detail__desc .lead { font-size: 1.1rem; color: var(--text); margin: 0 0 12px; }
.facility-detail__desc .prose { font-size: 1rem; }

.facility-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.facility-detail__gallery-title { font-size: 1.3rem; margin: 0 0 14px; }
.gallery--compact { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gallery--compact img { aspect-ratio: 1 / 1; }
.facility-detail__gallery .btn { margin-top: 14px; }

@media (max-width: 900px) {
  .facility-detail__cols { grid-template-columns: 1fr; gap: 28px; }
  .facility-detail__intro { grid-template-columns: 1fr; gap: 22px; }
  .facility-detail { margin-top: -60px; padding: 26px 22px; }
}

/* ------------------------------------------------------------ Document/detail */

.doc { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
.doc__main { min-width: 0; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 44px; align-items: start; }
.contact-layout__main { min-width: 0; }
.contact-layout__main h2 { font-size: 1.5rem; margin: 2.2rem 0 1rem; }
.contact-layout__panel { margin-top: 0; }

/* ---- Contact form ---- */
.contact-form-wrap { margin: 0 0 8px; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.contact-form__field label { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.contact-form input, .contact-form textarea {
  font: inherit; font-size: 0.98rem; padding: 11px 13px; width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; color: var(--text);
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--pine); box-shadow: 0 0 0 3px rgba(47, 107, 79, 0.15);
}
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__consent { display: flex; align-items: flex-start; gap: 10px; }
.contact-form__consent input { width: auto; flex: none; margin-top: 3px; }
.contact-form__consent label { font-size: 0.9rem; color: var(--text); }
.contact-form__actions { margin-top: 4px; }

.contact-notice { padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 0.95rem; line-height: 1.5; }
.contact-notice--ok { background: #e7f2ea; border: 1px solid #b8d9c4; color: #1f5136; }
.contact-notice--error { background: #fbeceb; border: 1px solid #ecc4c0; color: #8a2c22; }
.contact-notice ul { margin: 6px 0 0; padding-left: 18px; }

/* ---- Contact map (static image linking to directions) ---- */
.contact-map {
  position: relative; display: block; overflow: hidden; line-height: 0;
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.contact-map__img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 480; object-fit: cover; }
.contact-map__cta {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  background: var(--forest); color: #fff; font-size: 0.9rem; font-weight: 600; line-height: 1;
  border-radius: var(--radius-sm); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.contact-map__pin { display: inline-flex; }
.contact-map__pin svg { width: 16px; height: 16px; }
.contact-map:hover .contact-map__cta { background: var(--pine-dark); }
.contact-map:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

@media (max-width: 640px) {
  .contact-form__row { grid-template-columns: 1fr; }
}
.prose { max-width: var(--measure); font-size: 1.05rem; color: var(--text); }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 1.5rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.22rem; margin-top: 1.4em; }
.prose p, .prose ul, .prose ol { margin-block: 0 1em; }
.prose img { border-radius: var(--radius-sm); margin-block: 1.2em; }
.prose a { color: var(--pine); }
.lead { font-size: 1.2rem; color: var(--muted); max-width: var(--measure); margin: 0 0 8px; }

.panel {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.panel + .panel { margin-top: 22px; }
.panel__title { font-size: 1.05rem; margin: 0 0 14px; }
.panel--sticky { position: sticky; top: 96px; }

.info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.info-list li { display: flex; flex-direction: column; gap: 1px; }
.info-list dt, .info-list .info-label { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.info-list .info-value { font-weight: 600; color: var(--text); }
.info-list a { color: var(--pine); text-decoration: none; }
.info-list a:hover { text-decoration: underline; }

.stat-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.stat-badge {
  display: inline-flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
}
.stat-badge__value { font-weight: 700; font-size: 1.1rem; }
.stat-badge__label { font-size: 0.72rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.04em; }

/* --------------------------------------------------------------- Gallery */

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.gallery a { display: block; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* --------------------------------------------------------- Downloads / map */

.downloads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.download {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
}
.download:hover { border-color: var(--pine); }
.download__icon { font-size: 1.2rem; flex: none; }
.download__name { font-weight: 600; word-break: break-word; }

.map-placeholder {
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, #EFE7D6, #EFE7D6 12px, #F4EEDF 12px, #F4EEDF 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-weight: 600;
}

.empty-state {
  text-align: center;
  padding: 56px 20px;
  color: var(--muted);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.empty-state strong { display: block; color: var(--forest); margin-bottom: 4px; }

/* ------------------------------------------------------------ Pagination */

.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 36px; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text); background: var(--cream);
  font-size: 0.92rem;
}
.pagination a:hover { background: #EFE6D4; }
.pagination .is-current { background: var(--pine); border-color: var(--pine); color: #fff; font-weight: 600; }
.pagination .is-disabled { opacity: 0.45; pointer-events: none; }

/* -------------------------------------------------------------- Homepage */

/* Feature cards row under the hero (icon + title + text + link) */
.feature-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.feature-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* icon + title share a row; description sits below, full width */
.feature-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.feature-card__icon {
  flex: none;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-green);
  color: #fff;
}
.feature-card__icon svg { width: 28px; height: 28px; }
/* image icons (e.g. the hammer PNG) carry their own circle, so drop the bg */
.feature-card__icon--img { background: transparent; }
.feature-card__icon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.feature-card__title { font-size: 1.18rem; margin: 0; color: var(--forest); }
.feature-card__text { color: var(--muted); font-size: 0.95rem; margin: 0 0 18px; flex: 1; }
.feature-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--forest);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.92rem;
}
.feature-card__link:hover { color: var(--pine); }

@media (max-width: 1024px) { .feature-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-cards { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- About page */
/* (hero uses the shared .hero--photo / .hero--light banner, same as facilities) */

/* small icon before an eyebrow label */
.eyebrow--icon { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow__icon { display: inline-flex; width: 20px; height: 20px; color: var(--pine); }
.eyebrow__icon svg { width: 100%; height: 100%; }

/* button leading icon */
.btn__icon { display: inline-flex; width: 18px; height: 18px; }
.btn__icon svg { width: 100%; height: 100%; }
.btn--light { background: #fff; color: var(--forest); }
.btn--light:hover { background: #F1EEE6; }

/* Kim jesteśmy: text + stat cards */
.about-about { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.about-about__title { display: flex; align-items: center; gap: 12px; font-size: 1.6rem; margin: 0 0 14px; }
.about-about__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: rgba(47, 107, 79, 0.12);
  color: var(--pine);
}
.about-about__title-icon svg { width: 20px; height: 20px; }
.about-about__btn { margin-top: 22px; }

/* signpost graphic next to "Kim jesteśmy" */
.about-about__media { margin: 0; }
.about-about__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1983 / 793;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* stat cards: full-width row below the "Kim jesteśmy" block */
.about-about__stats { margin-top: 44px; }

.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 22px 14px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.stat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: rgba(47, 107, 79, 0.12);
  color: var(--pine);
}
.stat-card__icon svg { width: 22px; height: 22px; }
.stat-card__value { font-size: 1.7rem; font-weight: 800; color: var(--forest); line-height: 1; }
.stat-card__label { font-size: 0.84rem; color: var(--muted); }

/* Nasze wartości */
.value-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.value-item { text-align: center; padding: 0 8px; }
.value-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--brand-green);
  color: #fff;
}
.value-item__icon svg { width: 28px; height: 28px; }
.value-item__title { font-size: 1.05rem; margin: 0 0 6px; }
.value-item__text { font-size: 0.9rem; color: var(--muted); margin: 0; }

/* CTA banner */
.cta-banner {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background-size: auto 115%;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
.cta-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(15, 30, 22, 0.88) 0%, rgba(15, 30, 22, 0.55) 45%, rgba(15, 30, 22, 0.10) 100%);
}
.cta-banner__inner { position: relative; z-index: 1; padding: 56px 44px; max-width: 560px; min-height: 200px; }
.cta-banner__title { color: #fff; font-size: 1.9rem; margin: 0 0 12px; position: relative; }
.cta-banner__title::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--amber); margin-top: 12px; }
.cta-banner__text { color: var(--on-dark); margin: 0 0 22px; font-size: 1rem; }
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 900px) {
  .about-about { grid-template-columns: 1fr; gap: 28px; }
  .about-about__stats { margin-top: 28px; }
  .value-row { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
}
@media (max-width: 600px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .value-row { grid-template-columns: repeat(2, 1fr); }
  .cta-banner__inner { padding: 36px 26px; }
}

.home-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.home-col__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.home-col__head h2 { font-size: 1.5rem; margin: 0; }
.home-col__head a { color: var(--amber); font-weight: 600; text-decoration: none; font-size: 0.9rem; }

.trail-band {
  background: linear-gradient(120deg, var(--pine-dark), var(--forest));
  color: #fff;
  border-radius: var(--radius);
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.trail-band h2 { color: #fff; margin: 0 0 6px; }
.trail-band p { margin: 0; color: var(--on-dark-link); }

.home-partners { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.home-partners a, .home-partners span { display: inline-flex; }
.home-partners img { height: 64px; width: auto; object-fit: contain; }
.partner-chip {
  align-items: center;
  padding: 14px 22px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--wood);
  text-decoration: none;
}
.partner-chip:hover { border-color: var(--pine); }

/* ------------------------------------------------------------------ Footer */

.site-footer {
  color: var(--on-dark);
  margin-top: 40px;
  padding-block: 56px 28px;
  /* background-color: var(--forest); */
  background-image:
    /* linear-gradient(180deg, rgba(23, 51, 38, 0.82) 0%, rgba(23, 51, 38, 0.88) 52%, rgba(23, 51, 38, 0.94) 100%), */
    url("/assets/tlo-gory-pttk-logo-stopka-546313ab.webp");
  background-repeat: no-repeat, no-repeat;
  /* keep the mountain ridge + PTTK emblem of the photo aligned to the top */
  background-position: center top, center top;
  background-size: cover, cover;
}
.site-footer a { color: var(--on-dark-link); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-top: 205px;
}
.site-footer__brand img { height: 52px; width: auto; margin-bottom: 14px; }
.site-footer__name { color: #fff; font-weight: 700; font-size: 0.98rem; margin: 0 0 8px; }
.site-footer__desc { font-size: 0.92rem; max-width: 360px; color: var(--on-dark-soft); margin: 0; }
.site-footer h3 { color: #fff; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 0.92rem; }
.site-footer ul a { text-decoration: none; color: #fff; }
.site-footer ul a:hover { color: #fff; text-decoration: underline; }
.footer-contact { font-style: normal; font-size: 0.92rem; line-height: 1.8; color: var(--on-dark); }
.footer-contact a { color: var(--amber-light); }

/* partners rendered by public_partners helper as section.public-partners */
.site-footer .public-partners { margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.site-footer .public-partners h2 { color: #fff; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 14px; }
.site-footer .public-partners ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
.site-footer .public-partners img { height: 46px; width: auto; object-fit: contain; }

.site-footer__bottom {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.82rem;
  color: var(--on-dark-soft);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* --------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
  .doc { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .panel--sticky { position: static; }
  .hero__title { font-size: 2.3rem; }
}

@media (max-width: 768px) {
  .site-nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background: var(--pine);
    padding: 16px 24px 22px;
    border-bottom: 3px solid var(--amber);
  }
  .site-header { position: relative; }
  .site-nav.is-open { display: flex; }
  .public-menu, .public-menu > ul { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  .public-menu li ul { position: static; display: block; background: transparent; border: none; box-shadow: none; padding-left: 14px; }
  .site-trail-link { justify-content: center; }
  .two-col, .home-split { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .hero__inner { padding-block: 60px; }
  .hero__title { font-size: 2rem; }
  .hero--feature .hero__inner { min-height: clamp(440px, 56vh, 560px); padding-block: 40px; }
  .hero--feature .hero__title { font-size: clamp(1.6rem, 6.5vw, 2.3rem); }
  /* narrow screens: content goes full-width, so anchor it with a slightly
     stronger bottom-weighted gradient while the top of the photo stays sunny */
  .hero--feature::after {
    background: linear-gradient(0deg,
      rgba(9, 22, 15, 0.84) 0%,
      rgba(9, 22, 15, 0.44) 34%,
      rgba(9, 22, 15, 0.10) 55%,
      rgba(9, 22, 15, 0) 72%);
  }
  .section { padding-block: 40px; }
}

@media (max-width: 480px) {
  .container { padding-inline: 16px; }
  .card-grid { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .hero__title { font-size: 1.7rem; }
  .trail-band { padding: 26px; }
}

/* =================================================================
   Theme: "PTTK Jelenia Góra" (light) — used by layouts/public_pttk.
   Applied only when <body class="theme-pttk">. Colours sampled directly
   from the reference PNG; background graphics (hero photo, footer
   mountains) are inherited from the default theme unchanged.
   ================================================================= */
body.theme-pttk {
  /* surfaces */
  --bg: #FDFDFD;          /* page background (white) */
  --cream: #F7F6F2;       /* cards & alt sections */
  --border: #E7E4DD;      /* hairline borders */
  --text: #1B2620;        /* body text */
  --muted: #5C6660;       /* secondary text */

  /* dark green used for headings and dark surfaces */
  --forest: #14281C;

  /* accent family: amber -> green (CTAs, eyebrows, "more" links) */
  --amber: #07491F;       /* primary buttons / accents (forest green, sampled from mockup) */
  --amber-dark: #053617;  /* accent hover */
  --amber-soft: #7FC79A;  /* accent on dark photo (hero eyebrow, active nav) */
  --amber-light: #BFE6CF; /* accent link on dark footer */

  /* round icon circles (feature cards) — olive green from the PNG */
  --brand-green: #3E5A2B;

  /* keep a green secondary accent in step with the theme */
  --wood: #4F5E2C;

  /* rectangular look — no rounded corners on boxes, cards, images, inputs */
  --radius: 0;
  --radius-sm: 0;
}

/* square off pill-shaped elements (buttons, badges, labels, tabs) */
body.theme-pttk .site-trail-link,
body.theme-pttk .btn,
body.theme-pttk .badge,
body.theme-pttk .tag,
body.theme-pttk .tabs,
body.theme-pttk .tab,
body.theme-pttk .entry-tag {
  border-radius: 0;
}

/* Header inverts to a light bar with dark text (kept as a colour change). */
body.theme-pttk .site-header {
  background: #FDFDFD;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
body.theme-pttk .site-brand { color: var(--forest); }
/* header uses the green logo variant (logo-shis-pttk-green.svg) on the light bar,
   so no darkening filter is needed */
body.theme-pttk .public-menu a { color: var(--text); }
body.theme-pttk .public-menu a:hover { color: var(--amber); background: rgba(0, 0, 0, 0.05); }
body.theme-pttk .public-menu a.is-active,
body.theme-pttk .public-menu a[aria-current="page"] { color: var(--amber); }
body.theme-pttk .site-nav-toggle { color: var(--text); border-color: rgba(0, 0, 0, 0.25); }

/* Mobile dropdown nav also light in this theme. */
@media (max-width: 768px) {
  body.theme-pttk .site-nav {
    background: #FDFDFD;
    border-bottom-color: var(--amber);
  }
}

/* ---- Strona obiektu -------------------------------------------------------
   Sygnatura strony to znak szlaku PTTK pod aktywna zakladka - ten sam
   gradient bialy/kolor/bialy, ktorego uzywa hero. Reszta zostaje cicha. */

.trail-blaze {
  flex: none;
  width: 22px;
  height: 34px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #fff 0 34%, var(--trail, var(--muted)) 34% 66%, #fff 66% 100%);
}
.trail-blaze--czerwony  { --trail: #DA3B2C; }
.trail-blaze--niebieski { --trail: #2E7BD1; }
.trail-blaze--zielony   { --trail: #45A45B; }
.trail-blaze--zolty     { --trail: #ECC24A; }
.trail-blaze--czarny    { --trail: #2A2A2A; }
.trail-blaze--none      { background: var(--cream); }

/* Tabliczka z przelęczy: wysokosc, pasmo, gmina, wspolrzedne. Liczby sa tu
   trescia, nie ozdoba, wiec dostaja cyfry tablicowe i wlasny stopien pisma -
   to one niosa charakter tej strony, a nie dodatkowy krój. */
.facility-plate {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin: 22px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.facility-plate__value {
  display: block;
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.facility-plate__label {
  display: block;
  margin-top: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Tekst i karta obiektu obok siebie. Kolumna tekstu zostaje przy mierze
   czytelnej, a fakty i przyciski przestaja byc schowane w trzeciej zakladce. */
.facility-layout {
  max-width: 1240px;
  margin-inline: auto;
}
@media (min-width: 1080px) {
  .facility-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    align-items: start;
  }
}

.facility-head { max-width: var(--measure); }
.facility-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; }
.facility-badge {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 5px 12px; border-radius: 999px;
  background: var(--cream); border: 1px solid var(--border); color: var(--forest);
}
.facility-badge--status { background: var(--pine); border-color: var(--pine); color: var(--on-dark); }
.facility-badge--heritage { background: var(--amber); border-color: var(--amber-dark); color: #fff; }

/* Wyrozniki to sześć najwazniejszych zdan o obiekcie - dostaja wlasne pola,
   a nie punkty listy, bo w wersji listowej ginely pod opisem. */
.facility-highlights {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  margin: 26px 0 0;
  padding: 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.facility-highlights__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  background: var(--cream);
  font-weight: 600;
  line-height: 1.4;
  color: var(--forest);
}
.facility-highlights__icon { display: inline-flex; flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--pine); }
.facility-highlights__icon svg { width: 100%; height: 100%; }

.facility-alerts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.facility-alert {
  display: grid; gap: 3px; padding: 14px 16px;
  border-left: 4px solid var(--amber); border-radius: var(--radius-sm); background: var(--cream);
}
.facility-alert span { color: var(--muted); font-size: 0.94rem; }

.facility-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Zakladki. Panele sa widoczne domyslnie - JS je chowa dopiero po podlaczeniu,
   wiec bez skryptu strona pozostaje jedna czytelna kolumna. Pasek zakladek
   (i chowanie naglowkow-przelacznikow) wlacza sie tylko od 768px w gore -
   ten sam prog, ktorego uzywa tabs_controller.js do wyboru trybu zakladek
   kontra akordeonu. Ponizej progu strona zostaje akordeonem: pasek nie
   pojawia sie wcale, a naglowki paneli sluza jako przelaczniki. */
.facility-tabs { margin-top: 40px; }
.facility-tabs__list { display: none; }
@media (min-width: 768px) {
  .facility-tabs.is-enhanced .facility-tabs__list {
    display: flex; flex-wrap: wrap; gap: 4px;
    border-bottom: 1px solid var(--border); margin-bottom: 28px;
  }
}
.facility-tabs__tab {
  position: relative; appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 1.02rem; color: var(--text);
  padding: 12px 18px 16px;
}
.facility-tabs__tab:hover { color: var(--pine); }
.facility-tabs__tab[aria-selected="true"] { color: var(--forest); }
.facility-tabs__tab[aria-selected="false"] { color: var(--muted); }
.facility-tabs__tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 9px;
  border-radius: 2px;
  background: linear-gradient(180deg, #fff 0 34%, var(--pine) 34% 66%, #fff 66% 100%);
  box-shadow: 0 0 0 1px var(--border);
}
.facility-tabs__tab:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }

.facility-tabs__panel { margin-bottom: 36px; }
.facility-tabs__toggle {
  display: block; width: 100%; text-align: left; appearance: none; cursor: pointer;
  border: 0; border-top: 1px solid var(--border); background: none;
  font: inherit; font-size: 1.15rem; font-weight: 700; color: var(--forest);
  padding: 16px 0;
}
.facility-tabs__toggle:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
@media (min-width: 768px) {
  .facility-tabs.is-enhanced .facility-tabs__panel { margin-bottom: 0; }
  .facility-tabs.is-enhanced .facility-tabs__toggle { display: none; }
}

.facility-section__title { font-size: 1.15rem; margin: 28px 0 12px; }
.facility-tabs__body > :first-child { margin-top: 0; }

/* Opis obiektu bywa dlugi. Naglowki dostaja wlosowa linie z amberowym
   znacznikiem - ten sam gest co znak szlaku: cicha kreska, ktora mowi
   "tu zaczyna sie nowy odcinek". Bez tego tekst czyta sie jak jeden blok. */
.facility-tabs__body .prose h2 {
  position: relative;
  margin-top: 2.4em;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 1.38rem;
  letter-spacing: -0.01em;
}
.facility-tabs__body .prose h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 44px;
  height: 3px;
  background: var(--pine);
}
.facility-tabs__body .prose > h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.facility-tabs__body .prose > h2:first-child::before { display: none; }
.facility-tabs__body .prose p { line-height: 1.72; }

.facility-facts { margin: 0; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.facility-facts__row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; background: var(--cream); padding: 11px 16px; }
.facility-facts dt { font-weight: 700; color: var(--forest); }
.facility-facts dd { margin: 0; color: var(--text); }
.facility-facts__period, .facility-facts__note { display: block; color: var(--muted); font-size: 0.9rem; }

/* SYGNATURA STRONY — drogowskaz.
   Schronisko stoi na przelęczy, bo schodza sie tam szlaki, wiec dojscia
   dostaja forme tablicy kierunkowej: pionowy slup, a na nim deski. Kazda
   deska zaczyna sie od znaku szlaku, ktory niesie konkretna informacje -
   za jakim kolorem isc. Numerowanie byloby tu klamstwem: to nie etapy
   jednej trasy, tylko rownorzedne warianty dojscia. */
.facility-routes {
  list-style: none;
  margin: 0;
  padding: 0 0 0 22px;
  display: grid;
  gap: 12px;
  position: relative;
}
.facility-routes::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--wood), #6E4526);
}
.facility-routes__item {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 18px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 3px var(--radius-sm) var(--radius-sm) 3px;
  box-shadow: var(--shadow-sm);
}
/* ramie deski do slupa */
.facility-routes__item::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 12px;
  height: 2px;
  background: var(--border);
}
.facility-routes__body { display: grid; gap: 6px; min-width: 0; }
.facility-routes__start { color: var(--forest); font-size: 1.08rem; line-height: 1.25; }
.facility-routes__meta { display: flex; flex-wrap: wrap; gap: 6px 8px; }
/* dane liczbowe i cechy trasy jako oddzielne znaczniki - czytelne skanem */
.facility-routes__meta > span {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
}
.facility-routes__desc { color: var(--text); font-size: 0.96rem; }

.facility-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.facility-gallery__item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); }
.facility-gallery__caption { margin: 8px 0 0; font-size: 0.9rem; color: var(--muted); }
.facility-gallery__credit { display: block; }

.facility-limitations { padding: 14px 16px; border-left: 4px solid var(--wood); background: var(--cream); border-radius: var(--radius-sm); }
.facility-editorial { margin-top: 28px; color: var(--muted); font-size: 0.9rem; }
.facility-back { margin-top: 36px; }

.facility-map { margin-bottom: 24px; }
.facility-map__canvas { height: 380px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--cream); }
.facility-map__fallback { margin: 10px 0 0; font-size: 0.9rem; }
.facility-map__credit { display: block; color: var(--muted); }
.facility-map__pin {
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--pine); border: 2px solid #fff; box-shadow: var(--shadow-sm);
}

/* Karta obiektu: stan, kontakt i to, co trzeba wiedziec przed wyjsciem z domu.
   Trzyma sie ekranu przy przewijaniu, bo opis jest dlugi, a decyzja "ide czy
   nie ide" zapada w dowolnym jego miejscu. */
.facility-rail { margin-top: 32px; }
@media (min-width: 1080px) {
  .facility-rail { position: sticky; top: 24px; margin-top: 0; }
}
.facility-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.facility-card__head {
  padding: 16px 20px;
  background: var(--forest);
  color: var(--on-dark);
}
.facility-card__status { margin: 0; font-weight: 800; font-size: 1.02rem; }
.facility-card__type { margin: 3px 0 0; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-soft); }
.facility-card__body { padding: 18px 20px 20px; display: grid; gap: 14px; }
.facility-card__actions { display: grid; gap: 8px; }
.facility-card__actions .btn { width: 100%; justify-content: center; }
.facility-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.facility-card__list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.94rem; }
.facility-card__key { color: var(--muted); }
.facility-card__val { font-weight: 700; color: var(--forest); font-variant-numeric: tabular-nums; }
.facility-card__note { margin: 0; font-size: 0.86rem; color: var(--muted); line-height: 1.5; }
.facility-card__sep { height: 1px; background: var(--border); }

@media (max-width: 767px) {
  .facility-facts__row { grid-template-columns: 1fr; gap: 2px; }
  .facility-map__canvas { height: 260px; }
  .facility-plate { gap: 10px 22px; }
  .facility-plate__value { font-size: 1.12rem; }
  .facility-routes { padding-left: 0; }
  .facility-routes::before { display: none; }
  .facility-routes__item::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .facility-tabs__tab, .facility-tabs__toggle { transition: none; }
}