:root {
  --ink: #1c1c1c;
  --muted: #6c6863;
  --paper: #f7f5f2;
  --white: #fff;
  --gold: #bd7d39;
  --gold-dark: #9a642d;
  --line: #dfd8cf;
  --charcoal: #171717;

  --max-width: 1920px;
  --gutter: clamp(24px, 4vw, 96px);

  /* Statusy lokali. Beże z rodziny --paper, tekst przyciemniony na tyle, żeby
     przy 11 px wersalikami trzymać kontrast AA (5,5–6,0:1). Samego --gold nie
     wolno tu użyć jako koloru tekstu — #bd7d39 na jasnym tle daje 3,4:1. */
  --status-free-bg: #f0e6d7;
  --status-free-ink: #7a5222;
  --status-free-line: #e0cdae;
  --status-reserved-bg: #ecebe7;
  --status-reserved-ink: #5f5a53;
  --status-reserved-line: #d8d3cc;
  --status-sold-bg: #f6ece9;
  --status-sold-ink: #9a3b2d;
  --status-sold-line: #e6cfc9;

  /* Kierunek zmiany ceny w historii cennika. Te same reguły co wyżej: kontrast
     AA na --paper (5,4:1 i 5,1:1), więc etykieta czyta się też przy 11 px. */
  --change-up: #9a3b2d;
  --change-down: #3d6b4a;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}

.page {
  width: 100%;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ───────── HERO ───────── */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* fallback — JS nadpisuje proporcjami wideo po loadedmetadata */
  min-height: 480px;
  background-color: #1c1c1c;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}

.hero-video.is-active {
  opacity: 1;
}

/* Top bar: logo (lewy) + hamburger (prawy) */
.hero-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(20px, 2vw, 40px) var(--gutter);
  pointer-events: none;
}

.hero-bar > * {
  pointer-events: auto;
}

.hero-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
}

.hero-logo__mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.hero-logo__text {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  text-align: center;
  line-height: 1.25;
}

.hero-menu {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  letter-spacing: 0;
}

.hero-menu span {
  display: block;
  width: 28px;
  height: 2px;
  background: #fff;
  transition: transform .2s ease, opacity .2s ease;
}

.hero-menu:hover span {
  opacity: 0.85;
}

.hero .container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-top: 80px;
  padding-bottom: 120px;
}

.hero-content {
  max-width: 640px;
}

.hero-eyebrow {
  margin: 0 0 22px;
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #f0e4d3;
}

.hero-content h1 {
  margin: 0 0 18px;
  font-size: clamp(36px, 4.2vw, 76px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.hero-content .small-line {
  margin: 18px 0 22px;
}

.hero-content .hero-eyebrow {
  margin: 0 0 22px;
}

.hero-lead {
  margin: 0;
  max-width: 480px;
  font-size: clamp(18px, 1.4vw, 24px);
  line-height: 1.6;
  color: #efe9e1;
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 32px;
  z-index: 2;
  transform: translateX(-50%);
  font-size: clamp(10px, 0.75vw, 12px);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #efe9e1;
  text-align: center;
}

/* Wariant z celem wychodzi z PHP jako <a> — reszta wyglądu bez zmian. */
a.hero-scroll {
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s ease;
}

a.hero-scroll:hover {
  opacity: 0.75;
}

a.hero-scroll:focus-visible {
  outline: 2px solid #efe9e1;
  outline-offset: 6px;
}

.hero-scroll::after {
  content: "˅";
  display: block;
  margin-top: 6px;
  font-size: 16px;
  opacity: 0.8;
}

/* ───────── SIGNUP ───────── */
.signup {
  width: 100%;
  background: linear-gradient(90deg, #faf9f7, #f0ede8);
  padding: clamp(48px, 6vw, 96px) 0;
}

.signup .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}

.eyebrow,
.intro h1,
.form-card h2,
.callback h2,
.why h2,
.location h2,
.schedule h2,
.gallery h2,
.apartments h2,
.local-list h3,
.footer h3 {
  text-transform: uppercase;
}

.eyebrow {
  margin: 0;
  font-size: clamp(12px, 0.85vw, 16px);
  font-weight: 600;
  letter-spacing: 2px;
}

/* Tekst wyłącznie dla czytników ekranu — widoczny nie jest, ale zostaje
   w drzewie dostępności (w przeciwieństwie do display: none). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.small-line {
  display: block;
  width: 40px;
  height: 2px;
  margin: 18px 0 32px;
  background: var(--gold);
}

.small-line.centered {
  margin: 14px auto 36px;
}

.intro h1 {
  margin: 0 0 32px;
  font-size: clamp(28px, 2.8vw, 48px);
  line-height: 1.25;
  font-weight: 500;
  max-width: 640px;
}

.lead {
  margin: 0 0 40px;
  max-width: 560px;
  color: #222;
  font-size: clamp(15px, 1.05vw, 19px);
  line-height: 1.65;
}

.benefit-list,
.why-grid,
.info-strip ul,
.local-list ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.benefit-list {
  display: grid;
  gap: 22px;
}

.benefit-list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  align-items: center;
  color: var(--muted);
  font-size: clamp(13px, 0.85vw, 15px);
  line-height: 1.5;
}

.benefit-list strong {
  display: block;
  color: var(--ink);
  font-size: clamp(14px, 0.95vw, 17px);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ─── Ikony (SVG przez mask-image) ─── */
.line-icon,
.big-icon {
  display: inline-block;
  background-color: var(--gold);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.line-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.crown  { -webkit-mask-image: url("../svg/crown.svg");   mask-image: url("../svg/crown.svg"); }
.shield { -webkit-mask-image: url("../svg/shield.svg");  mask-image: url("../svg/shield.svg"); }
.leaf   { -webkit-mask-image: url("../svg/leaf.svg");    mask-image: url("../svg/leaf.svg"); }
.tree   { -webkit-mask-image: url("../svg/tree.svg");    mask-image: url("../svg/tree.svg"); }
.pin    { -webkit-mask-image: url("../svg/pin.svg");     mask-image: url("../svg/pin.svg"); }
.diamond{ -webkit-mask-image: url("../svg/diamond.svg"); mask-image: url("../svg/diamond.svg"); }
.phone  { -webkit-mask-image: url("../svg/phone.svg");   mask-image: url("../svg/phone.svg"); }
.shop   { -webkit-mask-image: url("../svg/shop.svg");    mask-image: url("../svg/shop.svg"); }
.school { -webkit-mask-image: url("../svg/school.svg");  mask-image: url("../svg/school.svg"); }
.bag    { -webkit-mask-image: url("../svg/bag.svg");     mask-image: url("../svg/bag.svg"); }
.chat   { -webkit-mask-image: url("../svg/chat.svg");    mask-image: url("../svg/chat.svg"); }
.excavator   { -webkit-mask-image: url("../svg/excavator.svg");   mask-image: url("../svg/excavator.svg"); }
.scaffolding { -webkit-mask-image: url("../svg/scaffolding.svg"); mask-image: url("../svg/scaffolding.svg"); }
.roller      { -webkit-mask-image: url("../svg/roller.svg");      mask-image: url("../svg/roller.svg"); }
.keys        { -webkit-mask-image: url("../svg/keys.svg");        mask-image: url("../svg/keys.svg"); }
.phone-call  { -webkit-mask-image: url("../svg/phone-call.svg");  mask-image: url("../svg/phone-call.svg"); }
.clock       { -webkit-mask-image: url("../svg/clock.svg");       mask-image: url("../svg/clock.svg"); }

/* ───────── FORM CARD ───────── */
.form-card {
  padding: clamp(28px, 2.5vw, 48px) clamp(24px, 2.2vw, 44px) clamp(20px, 2vw, 36px);
  background: rgba(255, 255, 255, 0.97);
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(66, 52, 38, 0.12);
  width: 100%;
}

.form-card .wpcf7,
.form-card .wpcf7-form {
  width: 100%;
}

.form-card .wpcf7-form > p {
  width: 100%;
}

.form-card .wpcf7-form label {
  display: block;
  width: 100%;
}

.form-card h2 {
  margin: 0 0 28px;
  font-size: clamp(16px, 1.2vw, 22px);
  font-weight: 500;
  letter-spacing: 2px;
}

.form-card .wpcf7-form p {
  margin: 0;
}

.form-card .wpcf7-form-control-wrap {
  display: block;
}

.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card .field input {
  min-width: 0;
  width: 100%;
  height: 52px;
  margin-bottom: 14px;
  padding: 0 18px;
  border: 1px solid #dedbd7;
  outline: 0;
  background: #fff;
  color: #333;
  font-size: clamp(13px, 0.9vw, 15px);
  font-family: inherit;
}

.form-card .wpcf7-acceptance,
.form-card .check {
  display: block;
  margin: 20px 0 0;
}

.form-card .wpcf7-list-item {
  margin: 0;
}

.form-card .wpcf7-list-item-label {
  font-size: clamp(11px, 0.7vw, 13px);
  color: #5e5a55;
  line-height: 1.5;
}

.field {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  height: 52px;
  margin-bottom: 14px;
  border: 1px solid #dedbd7;
  background: #fff;
}

.field span {
  color: #888;
  text-align: center;
  font-size: 18px;
}

.field input {
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  color: #333;
  font-size: clamp(13px, 0.9vw, 15px);
  font-family: inherit;
}

.check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 16px;
  margin: 18px 0 0;
  color: #5e5a55;
  font-size: clamp(11px, 0.7vw, 13px);
  line-height: 1.5;
}

.check input {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid #aaa;
  border-radius: 2px;
  background: #fff;
}

.check input:checked {
  background: linear-gradient(var(--gold), var(--gold)) center / 10px 10px no-repeat #fff;
}

.check a,
.form-card .wpcf7-list-item-label a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}

.check a:hover,
.check a:focus-visible,
.form-card .wpcf7-list-item-label a:hover,
.form-card .wpcf7-list-item-label a:focus-visible {
  color: var(--gold);
  text-decoration-color: var(--gold-dark);
}

button,
.form-card input[type="submit"] {
  width: 100%;
  min-height: 56px;
  margin: 26px 0 18px;
  border: 0;
  border-radius: 2px;
  color: #fff;
  background: linear-gradient(90deg, #ba7430, #cb8b45);
  font: 500 clamp(13px, 0.9vw, 16px)/1.2 inherit;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}

.privacy {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #938c84;
  font-size: clamp(10px, 0.7vw, 13px);
}

.privacy::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background-color: var(--gold);
  -webkit-mask: url("../svg/check.svg") center / contain no-repeat;
          mask: url("../svg/check.svg") center / contain no-repeat;
}

/* ───────── WHY ───────── */
.why {
  width: 100%;
  background: #fff;
  padding: clamp(48px, 5vw, 96px) 0 clamp(56px, 6vw, 112px);
  text-align: center;
}

.why h2 {
  margin: 0;
  font-size: clamp(20px, 1.6vw, 30px);
  font-weight: 500;
  letter-spacing: 2px;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.why-grid article {
  padding: 18px clamp(20px, 2.2vw, 48px) 0;
  border-right: 1px solid var(--line);
}

.why-grid article:last-child {
  border-right: 0;
}

.big-icon {
  display: block;
  width: 100%;
  height: clamp(56px, 5vw, 88px);
  margin-bottom: 22px;
}

.why-grid h3 {
  margin: 0 0 14px;
  font-size: clamp(13px, 0.95vw, 17px);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.3;
}

.why-grid p {
  margin: 0;
  color: #5d5750;
  font-size: clamp(12px, 0.85vw, 15px);
  line-height: 1.7;
}

.info-strip {
  display: grid;
  grid-template-columns: 140px 1.1fr 1.2fr;
  gap: clamp(28px, 3vw, 56px);
  align-items: center;
  margin-top: clamp(40px, 4vw, 72px);
  padding: clamp(24px, 2.5vw, 44px) clamp(28px, 3vw, 56px);
  border: 1px solid #c99f72;
  text-align: left;
}

.mail-badge {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c58c4c, #a66a2f);
  font-size: 0;
}

.mail-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  background-color: #fff;
  -webkit-mask: url("../svg/mail.svg") center / contain no-repeat;
          mask: url("../svg/mail.svg") center / contain no-repeat;
}

.info-strip h3 {
  margin: 0 0 14px;
  font-size: clamp(16px, 1.3vw, 24px);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.info-strip p,
.info-strip li {
  margin: 0;
  color: #5b554d;
  font-size: clamp(12px, 0.85vw, 15px);
  line-height: 1.7;
}

.info-strip ul {
  border-left: 1px solid var(--line);
  padding-left: clamp(24px, 2.5vw, 44px);
  display: grid;
  gap: 10px;
}

.info-strip li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: center;
}

.info-strip li::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: var(--gold);
  -webkit-mask: url("../svg/check.svg") center / contain no-repeat;
          mask: url("../svg/check.svg") center / contain no-repeat;
}

/* ───────── VISUAL BAND ───────── */
.visual-band {
  position: relative;
  width: 100%;
  min-height: clamp(280px, 30vw, 480px);
  background-color: #2a2520;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  display: flex;
  align-items: center;
}

.visual-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.05) 60%);
  pointer-events: none;
}

.visual-band .container {
  position: relative;
  z-index: 1;
}

.visual-band-caption {
  max-width: 640px;
}

.visual-band-caption h2 {
  margin: 0 0 18px;
  font-size: clamp(22px, 2.2vw, 42px);
  font-weight: 500;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 1px;
}

.visual-band-caption p {
  margin: 0;
  font-size: clamp(13px, 1vw, 18px);
  line-height: 1.65;
  color: #efe9e1;
}

/* ───────── LOCATION ───────── */
.location {
  position: relative;
  width: 100%;
  background: #f7f5f1;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(280px, 36%) 1fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}

.location h2 {
  margin: 0 0 18px;
  font-size: clamp(20px, 1.6vw, 30px);
  font-weight: 500;
  letter-spacing: 2px;
}

.location .local-list {
  /* Wyrównanie do lewej krawędzi .container'a: na wąskich ekranach = var(--gutter),
     na ekranach >var(--max-width) doliczamy połowę nadmiaru, żeby treść siedziała
     w tej samej kolumnie co reszta strony (zamiast lecieć aż do lewego brzegu viewportu). */
  padding-left: max(var(--gutter), calc((100vw - var(--max-width)) / 2 + var(--gutter)));
  padding-block: clamp(32px, 4vw, 56px);
}

.local-list h3 {
  margin: 0 0 32px;
  font-size: clamp(15px, 1.1vw, 20px);
  font-weight: 500;
  letter-spacing: 1px;
}

.local-list ul {
  display: grid;
  gap: 18px;
}

.local-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  align-items: center;
  margin: 0;
  color: #5a554e;
  font-size: clamp(13px, 0.95vw, 17px);
}

.local-list .line-icon {
  width: 22px;
  height: 22px;
}

.local-list li:not(:has(.line-icon))::before {
  content: "⌁";
  display: inline-block;
  width: 28px;
  color: var(--gold);
  font-size: 18px;
}

.map {
  width: 100%;
  height: clamp(420px, 48vw, 620px);
  background: #efece7;
  z-index: 0;
}

.map.leaflet-container {
  background: #efece7;
}

/* Wyszarzenie kafelków bazowych (CartoDB Positron) tak, żeby
   wpasować się w paletę paper/gold. Filter dotyczy TYLKO tile-pane,
   więc marker, popup i kontrolki zachowują pełen kolor. */
.map .leaflet-tile-pane {
  filter: grayscale(0.4) brightness(1.06) sepia(0.04);
}

.leaflet-popup-content {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
}

.leaflet-control-attribution {
  font-size: 9px;
  opacity: 0.7;
}

.leaflet-control-attribution a {
  color: var(--gold-dark);
}

/* Custom marker U10 — czarny kwadrat z białym U10, strzałka w dół */
.u10-marker {
  background: transparent;
  border: 0;
}

.u10-marker__pin {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 3px;
  background: #1c1c1c;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.30);
}

.u10-marker__pin::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #1c1c1c;
  border-bottom: 0;
}

.u10-marker__label {
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
}

/* POI markers (sklepy, CH itd. obok głównego U10) */
.u10-poi {
  background: transparent;
  border: 0;
  width: 0 !important;
  height: 0 !important;
  position: relative;
}

.u10-poi__dot {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.u10-poi__label {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #3c3a37;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

/* ───────── TEAM ───────── */
.team {
  width: 100%;
  background: #ece7df;
  padding: clamp(56px, 6vw, 112px) 0;
  text-align: center;
}

.team .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team h2 {
  margin: 0;
  font-size: clamp(20px, 1.6vw, 30px);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.team-lead {
  max-width: 640px;
  margin: 0 0 clamp(36px, 4vw, 64px);
  color: #4d4943;
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.6;
}

.team-grid {
  width: 100%;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 40px);
  margin: 0 0 clamp(36px, 4vw, 64px);
}

.team-grid figure {
  margin: 0;
}

.team-grid img {
  width: 100%;
  display: block;
}

.team-grid figcaption {
  padding: clamp(14px, 1.4vw, 22px) clamp(12px, 1.2vw, 20px);
  border: 1px solid var(--line);
  border-top: 0;
  text-align: center;
  line-height: 1.4;
}

.team-grid figcaption strong {
  display: block;
  color: var(--ink);
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.team-grid figcaption .role {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: clamp(10px, 0.7vw, 12px);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.team-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2vw, 36px);
  width: 100%;
  max-width: 720px;
  text-align: left;
}

.team-cta .chat-icon {
  display: inline-block;
  flex-shrink: 0;
  width: clamp(36px, 3vw, 52px);
  height: clamp(36px, 3vw, 52px);
  background-color: var(--gold);
  -webkit-mask: url("../svg/chat.svg") center / contain no-repeat;
          mask: url("../svg/chat.svg") center / contain no-repeat;
}

.team-cta p {
  flex: 1;
  margin: 0;
  color: var(--ink);
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.team-cta p strong {
  display: inline;
  font-weight: 600;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 52px;
  padding: 0 clamp(28px, 3vw, 48px);
  border-radius: 2px;
  color: #fff;
  background: linear-gradient(90deg, #ba7430, #cb8b45);
  font-size: clamp(12px, 0.85vw, 15px);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity .15s ease;
}

.cta-button:hover {
  opacity: 0.92;
}

/* ───────── PAGE (strony tekstowe) ───────── */
.page-header {
  position: relative;
  width: 100%;
  background: #f7f5f1;
  padding: clamp(96px, 10vw, 160px) 0 clamp(40px, 4vw, 64px);
}

/* hero-bar w jasnym wariancie page-header — ciemne logo */
.page-header:not(.page-header--image) .hero-logo {
  color: var(--ink);
}

.page-header:not(.page-header--image) .hero-logo__mark {
  border-color: var(--ink);
}

.page-title {
  margin: 0;
  font-size: clamp(28px, 3vw, 52px);
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink);
}

.page-header .small-line {
  margin: clamp(16px, 2vw, 28px) 0 0;
}

/* wariant z obrazem tła pod tytułem */
.page-header--image {
  position: relative;
  background-color: #1c1c1c;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: clamp(120px, 14vw, 240px) 0 clamp(80px, 9vw, 144px);
  color: #fff;
  overflow: hidden;
}

.page-header--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.65) 100%);
  pointer-events: none;
}

.page-header--image .container {
  position: relative;
  z-index: 1;
}

.page-header--image .page-title {
  color: #fff;
}

.page-content-section {
  width: 100%;
  background: var(--paper);
  padding: clamp(32px, 4vw, 64px) 0 clamp(64px, 7vw, 128px);
}

.page-content {
  width: 100%;
  color: var(--ink);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.75;
}

.page-content > *:first-child {
  margin-top: 0;
}

.page-content > *:last-child {
  margin-bottom: 0;
}

.page-content p {
  margin: 0 0 1.2em;
}

.page-content h2 {
  margin: clamp(40px, 4vw, 64px) 0 18px;
  font-size: clamp(20px, 1.6vw, 28px);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
}

.page-content h3 {
  margin: clamp(32px, 3.2vw, 48px) 0 14px;
  font-size: clamp(17px, 1.2vw, 22px);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--ink);
}

.page-content h4 {
  margin: 24px 0 12px;
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 600;
  color: var(--ink);
}

.page-content h5,
.page-content h6 {
  margin: 20px 0 10px;
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 600;
}

.page-content ul,
.page-content ol {
  margin: 0 0 1.4em;
  padding-left: 1.5em;
}

.page-content li {
  margin-bottom: 0.5em;
}

.page-content li::marker {
  color: var(--gold);
}

.page-content a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}

.page-content a:hover,
.page-content a:focus-visible {
  color: var(--gold);
  text-decoration-color: var(--gold-dark);
}

.page-content strong,
.page-content b {
  font-weight: 600;
  color: var(--ink);
}

.page-content em,
.page-content i {
  font-style: italic;
}

.page-content blockquote {
  margin: clamp(20px, 2.4vw, 36px) 0;
  padding: clamp(14px, 1.6vw, 24px) clamp(18px, 2vw, 32px);
  border-left: 3px solid var(--gold);
  background: #f7f5f1;
  color: #3c3a37;
  font-style: italic;
}

.page-content blockquote p:last-child {
  margin-bottom: 0;
}

.page-content hr {
  margin: clamp(28px, 3vw, 48px) 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.page-content img,
.page-content figure {
  max-width: 100%;
  height: auto;
  margin: clamp(20px, 2vw, 32px) 0;
}

.page-content figure {
  margin-left: 0;
  margin-right: 0;
}

.page-content figcaption {
  margin-top: 10px;
  font-size: clamp(12px, 0.85vw, 14px);
  color: var(--muted);
  text-align: center;
}

.page-content table {
  width: 100%;
  margin: 0 0 1.4em;
  border-collapse: collapse;
}

.page-content th,
.page-content td {
  padding: 12px 16px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.page-content th {
  background: #f7f5f1;
  font-weight: 600;
}

.page-content code {
  padding: 2px 6px;
  background: #f0ede8;
  border-radius: 2px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.92em;
}

.page-content pre {
  margin: 0 0 1.4em;
  padding: 16px 20px;
  background: #1c1c1c;
  color: #efe9e1;
  border-radius: 2px;
  overflow-x: auto;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: clamp(12px, 0.85vw, 14px);
  line-height: 1.55;
}

.page-content pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}

/* ───────── FOOTER ───────── */
.footer {
  width: 100%;
  background: var(--charcoal);
  color: #f1eee9;
  padding: clamp(48px, 5vw, 96px) 0 clamp(36px, 4vw, 72px);
}

.footer .container {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.4fr) minmax(220px, 1fr);
  gap: clamp(40px, 5vw, 96px);
}

/* Kolumna menu wychodzi z PHP tylko przy przypisanym menu (Wygląd → Menu) —
   dopiero wtedy stopka przechodzi na cztery kolumny. */
.footer .container:has(.footer-menu) {
  grid-template-columns: minmax(200px, 1fr) minmax(240px, 1.25fr) minmax(150px, 0.7fr) minmax(200px, 1fr);
  gap: clamp(32px, 4vw, 80px);
}

.logo {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}

.logo span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin: 0 auto 12px;
  border: 2px solid #fff;
  font-size: 22px;
}

.logo strong {
  display: block;
  font-size: clamp(15px, 1.05vw, 20px);
  line-height: 1.25;
  letter-spacing: 6px;
  font-weight: 400;
}

.footer p {
  margin: 18px 0 0;
  color: #d0cbc5;
  font-size: clamp(12px, 0.85vw, 15px);
  line-height: 1.65;
}

.footer h3 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 500;
  letter-spacing: 1px;
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.contact-line {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 14px;
  color: #d0cbc5;
  font-size: clamp(12px, 0.85vw, 15px);
  line-height: 1.5;
}

.contact-line a {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}

.contact-line a:hover {
  color: #fff;
}

.contact-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.contact-line--phone .contact-icon { -webkit-mask-image: url("../svg/phone.svg"); mask-image: url("../svg/phone.svg"); }
.contact-line--mail  .contact-icon { -webkit-mask-image: url("../svg/mail.svg");  mask-image: url("../svg/mail.svg"); }
.contact-line--globe .contact-icon { -webkit-mask-image: url("../svg/globe.svg"); mask-image: url("../svg/globe.svg"); }

/* Menu w stopce — te same rozmiary co lista kontaktowa, tylko bez ikon. */
.footer-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.footer-menu-list a {
  color: #d0cbc5;
  font-size: clamp(12px, 0.85vw, 15px);
  line-height: 1.5;
  text-decoration: none;
  transition: color .15s ease;
}

.footer-menu-list a:hover,
.footer-menu-list .current-menu-item > a {
  color: #fff;
}

.footer-brand {
  text-align: center;
}

.footer-brand p {
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

.socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
  color: #fff;
  font-size: clamp(18px, 1.4vw, 24px);
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: inherit;
  text-decoration: none;
  transition: opacity .15s ease;
}

.social-link:hover {
  opacity: 0.75;
}

.social-link .social-icon {
  display: block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.social-link--facebook  .social-icon { -webkit-mask-image: url("../svg/facebook.svg");  mask-image: url("../svg/facebook.svg"); }
.social-link--instagram .social-icon { -webkit-mask-image: url("../svg/instagram.svg"); mask-image: url("../svg/instagram.svg"); }
.social-link--mail      .social-icon { -webkit-mask-image: url("../svg/mail.svg");      mask-image: url("../svg/mail.svg"); }

.copyright {
  width: 100%;
  background: #151515;
  color: #9c9893;
  font-size: clamp(11px, 0.75vw, 13px);
  padding: clamp(14px, 1.5vw, 24px) 0;
}

.copyright .container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(40px, 8vw, 160px);
}

.copyright a {
  color: #d8d3cc;
  text-decoration: none;
}

/* ───────── CALLBACK („ZADZWONIMY DO CIEBIE") ───────── */
/* Formularz leży wprost na kremowym tle — świadomie BEZ .form-card.
   Wszystko pod .callback, żeby nie mieszać się ze scope'em karty w signup. */
.callback {
  --cb-h: clamp(46px, 3.4vw, 56px);  /* jedna wysokość dla inputów i przycisku */
  --cb-alert: #9a3b2d;               /* błąd musi odróżniać się od złota */
  width: 100%;
  background: var(--paper);
  padding: clamp(40px, 4.5vw, 80px) 0; /* poziomy odstęp daje dopiero .container */
}

.callback .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(28px, 4vw, 80px);
  align-items: center;
}

/* ─── Lewa kolumna: ikona nad nagłówkiem ─── */
.callback-intro {
  display: grid;
  justify-items: start;
}

.callback-icon {
  width: clamp(40px, 3.2vw, 48px);
  height: clamp(40px, 3.2vw, 48px);
  margin: 0 0 clamp(18px, 1.8vw, 26px);
}

.callback h2 {
  margin: 0 0 10px;
  font-size: clamp(16px, 1.2vw, 22px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 3px;
}

.callback-text {
  margin: 0;
  color: var(--muted);
  font-size: clamp(13px, 0.85vw, 15px);
  line-height: 1.6;
}

/* ─── Prawa kolumna: formularz ─── */
.cb-form,
.cb-form .wpcf7 {
  width: 100%;
}

.cb-form .wpcf7-form {
  display: grid;
  row-gap: clamp(16px, 1.6vw, 22px); /* w tej przerwie mieści się komunikat walidacji */
}

/* Pasek: [imię] [telefon] [przycisk]; trzeci tor auto — szerokość z treści. */
.cb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: clamp(10px, 1vw, 16px);
  margin: 0;
}

/* min-width: 0 jest OBOWIĄZKOWE — domyślne min-width: auto elementu siatki
   bierze rozmiar wewnętrzny inputa (CF7 renderuje size="40") i rozepchnęłoby
   pasek poza kontener; sam minmax(0, 1fr) na torze tego nie załatwia. */
.cb-field,
.cb-action {
  display: block;
  min-width: 0;
}

/* Między komórką siatki a <input> CF7 wstawia dodatkowy span — musi być blokiem
   na całą komórkę, bo inaczej input nie ma od czego wziąć 100%. */
.callback .wpcf7-form-control-wrap {
  position: relative; /* punkt zaczepienia dla .wpcf7-not-valid-tip */
  display: block;
  min-width: 0;
}

.cb-action {
  position: relative; /* pod spinner, wstrzykiwany przez JS CF7 za przyciskiem */
}

.callback input[type="text"],
.callback input[type="tel"] {
  width: 100%;
  min-width: 0;
  height: var(--cb-h);
  padding: 0 clamp(14px, 1.2vw, 20px);
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  font: 400 clamp(13px, 0.9vw, 15px)/1.2 inherit;
  transition: border-color .15s ease;
}

/* Wersaliki tylko na placeholderze — text-transform na samym inpucie
   podnosiłby też wpisywane imię i nazwisko. */
.callback input[type="text"]::placeholder,
.callback input[type="tel"]::placeholder {
  color: #9b958d;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 1; /* Firefox domyślnie przygasza placeholder */
}

.callback input[type="text"]:hover,
.callback input[type="tel"]:hover {
  border-color: #cfc7bc;
}

/* .form-card ma outline: 0 bez żadnego :focus — tutaj fokus zostaje widoczny. */
.callback input[type="text"]:focus-visible,
.callback input[type="tel"]:focus-visible,
.callback input[type="checkbox"]:focus-visible,
.callback input[type="submit"]:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
}

/* Globalna reguła `button` i `.form-card input[type="submit"]` tu nie sięgają
   (submit to <input> poza kartą), więc przycisk stylujemy od zera. */
.callback input[type="submit"] {
  width: 100%;
  height: var(--cb-h);
  padding: 0 clamp(20px, 2vw, 36px);
  border: 0;
  border-radius: 2px;
  color: #fff;
  background: linear-gradient(90deg, #ba7430, #cb8b45);
  font: 500 clamp(12px, 0.85vw, 15px)/1.2 inherit;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .15s ease, opacity .15s ease;
}

.callback input[type="submit"]:hover,
.callback input[type="submit"]:focus-visible {
  filter: brightness(1.06);
}

/* Zabezpieczenie na wypadek wyłączenia acceptance_as_validation — wtedy JS CF7
   blokuje przycisk do czasu zaznaczenia zgody. */
.callback input[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Spinner zostaje w rozmiarze 24px — jego ::before ma transform-origin policzony
   pod tę średnicę; zmieniamy tylko pozycję i kolory. */
.callback .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.35);
  opacity: 1;
}

.callback .wpcf7-spinner::before {
  background-color: #fff;
}

.callback .wpcf7-form.submitting input[type="submit"] {
  color: transparent; /* napis ustępuje miejsca spinnerowi */
}

/* ─── Drugi wiersz: zgoda | godziny ─── */
/* nowrap celowo: przy zawijaniu separator wylądowałby na początku drugiej linii.
   Teksty łamią się wewnątrz własnych bloków. */
.cb-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(12px, 1.2vw, 20px);
  margin: 0;
  color: var(--muted);
  font-size: clamp(11px, 0.75vw, 13px);
  line-height: 1.5;
}

/* Zgoda CF7 to trzy zagnieżdżone spany — spłaszczamy je do bloków,
   flexem robi się dopiero <label>. */
.callback .cb-meta .wpcf7-acceptance,
.callback .cb-meta .wpcf7-list-item {
  display: block;
  margin: 0;
}

.callback .cb-meta label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* CF7 dokleja spacje wokół etykiety pseudoelementami. */
.callback .wpcf7-list-item-label::before,
.callback .wpcf7-list-item-label::after {
  content: none;
}

.callback .cb-meta input[type="checkbox"] {
  appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid #bdb6ad;
  border-radius: 2px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease;
}

.callback .cb-meta input[type="checkbox"]:checked {
  border-color: var(--gold);
  background: linear-gradient(var(--gold), var(--gold)) center / 10px 10px no-repeat #fff;
}

.callback .cb-meta a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
  transition: color .15s ease;
}

.callback .cb-meta a:hover,
.callback .cb-meta a:focus-visible {
  color: var(--gold);
}

/* Separator to border sąsiada, nie pseudoelement — ma wysokość bloku obok
   (także przy dwóch linijkach) i gaśnie jednym border-left: 0. */
.cb-hours {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-left: clamp(12px, 1.2vw, 20px);
  border-left: 1px solid var(--line);
}

.cb-hours .line-icon {
  width: 16px;
  height: 16px;
}

/* ─── Komunikaty CF7 ─── */
/* Tip jest wstrzykiwany DO wrapa; absolutny nie zmienia wysokości paska
   i mieści się w row-gap formularza. Stąd krótkie treści w _messages. */
.callback .wpcf7-not-valid-tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  color: var(--cb-alert);
  font-size: clamp(11px, 0.72vw, 12px);
  line-height: 1.3;
  pointer-events: none;
}

.callback input.wpcf7-not-valid {
  border-color: var(--cb-alert);
}

/* Pełny łańcuch selektorów jest konieczny — reguła wtyczki to
   `.wpcf7 form .wpcf7-response-output` (0,3,1) i krótszy selektor jej nie przebije. */
.callback .wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding: 12px clamp(12px, 1.2vw, 18px);
  border: 0;
  border-left: 2px solid var(--gold);
  background: #fff;
  color: var(--ink);
  font-size: clamp(12px, 0.8vw, 14px);
  line-height: 1.5;
}

.callback .wpcf7 form.invalid .wpcf7-response-output,
.callback .wpcf7 form.unaccepted .wpcf7-response-output,
.callback .wpcf7 form.failed .wpcf7-response-output,
.callback .wpcf7 form.aborted .wpcf7-response-output,
.callback .wpcf7 form.spam .wpcf7-response-output {
  border-left-color: var(--cb-alert);
}

/* ───────── GALLERY ───────── */
.gallery {
  width: 100%;
  background: #1a1a1a;
  padding: clamp(48px, 5vw, 96px) 0 clamp(56px, 6vw, 112px);
  text-align: center;
  color: #f1eee9;
}

.gallery h2 {
  margin: 0;
  font-size: clamp(20px, 1.6vw, 30px);
  font-weight: 500;
  letter-spacing: 4px;
  color: #fff;
}

.gallery-subheading {
  margin: 0;
  color: #b9b3ab;
  font-size: clamp(11px, 0.8vw, 14px);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Mozaika: 2 kolumny × 3 wiersze. Kafel 1 zajmuje lewą kolumnę na dwa wiersze,
   kafle 2 i 3 prawą kolumnę, kafel 4 rozciąga się na całą szerokość.
   aspect-ratio trzyma proporcje bloku niezależnie od wysokości zdjęć. */
.gallery-mosaic {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: 1.2fr 1fr 1fr;
  aspect-ratio: 1180 / 615;
  gap: 4px;
  margin: clamp(24px, 3vw, 48px) 0 0;
}

.gallery-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: #111;
  cursor: pointer;
}

.gallery-tile:nth-child(1) { grid-column: 1;      grid-row: 1 / 3; }
.gallery-tile:nth-child(2) { grid-column: 2;      grid-row: 1; }
.gallery-tile:nth-child(3) { grid-column: 2;      grid-row: 2; }
.gallery-tile:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }

/* Warianty dla niepełnej mozaiki — liczbę kafli wypisuje PHP w klasie.
   Bez nich aspect-ratio trzymałby wysokość trzech wierszy mimo braku kafli. */
.gallery-mosaic--3 {
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 1180 / 420;
}

.gallery-mosaic--2 {
  grid-template-rows: 1fr;
  aspect-ratio: 1180 / 420;
}

.gallery-mosaic--2 .gallery-tile:nth-child(1) { grid-row: 1; }

.gallery-mosaic--1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  aspect-ratio: 2 / 1;
}

.gallery-mosaic--1 .gallery-tile:nth-child(1) { grid-column: 1; grid-row: 1; }

.gallery-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .15s ease;
}

.gallery-tile:hover img,
.gallery-tile:focus-visible img {
  opacity: 0.88;
}

.gallery-tile__counter {
  position: absolute;
  top: clamp(10px, 1vw, 18px);
  left: clamp(10px, 1vw, 18px);
  color: var(--gold);
  font-size: clamp(10px, 0.75vw, 13px);
  font-weight: 500;
  letter-spacing: 2px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Wariant obrysowany — motyw go nie ma. Reset globalnej reguły `button`
   (width:100%, min-height, margin, gradient) jak w .hero-menu. */
.gallery-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 52px;
  margin: clamp(32px, 4vw, 56px) auto 0;
  padding: 0 clamp(28px, 3vw, 48px);
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: transparent;
  color: var(--gold);
  font-size: clamp(12px, 0.85vw, 15px);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color .15s ease, background-color .15s ease;
}

.gallery-cta:hover,
.gallery-cta:focus-visible {
  background: var(--gold);
  color: #fff;
}

/* ───────── LIGHTBOX ───────── */
/* Atrybut `hidden` trzyma okno poza drzewem dostępności i poza kolejnością
   tabowania. Reguła UA [hidden] przegrywa z autorskim display: grid poniżej,
   więc tę parę trzeba zapisać jawnie — bez niej okno byłoby zawsze widoczne. */
.lightbox[hidden] {
  display: none;
}

/* Jawny wiersz minmax(0, 1fr) jest konieczny: przy wierszu auto i scenie
   z height: 100% powstaje zależność cykliczna i obraz wychodzi poza padding,
   wjeżdżając na licznik. Tu wiersz bierze całą wysokość po odjęciu paddingu,
   scena go wypełnia (align-self), a max-height obrazu ma się do czego odnieść. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 1.5vw, 24px);
  padding: clamp(56px, 6vw, 88px) clamp(12px, 3vw, 48px);
  background: rgba(0, 0, 0, 0.96);
  overscroll-behavior: contain;
}

.lightbox__stage {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
  margin: 0;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Wszystkie trzy przyciski muszą zresetować globalną regułę `button`. */
.lightbox__btn {
  display: grid;
  place-items: center;
  width: clamp(40px, 4vw, 56px);
  min-height: 0;
  height: clamp(40px, 4vw, 56px);
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.lightbox__btn:hover,
.lightbox__btn:focus-visible {
  border-color: var(--gold);
  background: rgba(189, 125, 57, 0.2);
}

.lightbox__nav--prev { grid-column: 1; }
.lightbox__nav--next { grid-column: 3; }

/* Strzałki i krzyżyk rysowane obrotem kwadratu — bez dodatkowych plików SVG. */
.lightbox__nav span {
  width: 11px;
  height: 11px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.lightbox__nav--prev span { transform: translateX(2px) rotate(-135deg); }
.lightbox__nav--next span { transform: translateX(-2px) rotate(45deg); }

.lightbox__close {
  position: absolute;
  top: clamp(12px, 2vw, 28px);
  right: clamp(12px, 3vw, 48px);
}

.lightbox__close span {
  position: relative;
  width: 15px;
  height: 15px;
}

.lightbox__close span::before,
.lightbox__close span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
}

.lightbox__close span::before { transform: rotate(45deg); }
.lightbox__close span::after  { transform: rotate(-45deg); }

.lightbox__counter {
  position: absolute;
  bottom: clamp(16px, 2.5vw, 34px);
  left: 0;
  right: 0;
  margin: 0;
  color: var(--gold);
  font-size: clamp(11px, 0.8vw, 14px);
  font-weight: 500;
  letter-spacing: 3px;
  text-align: center;
}

/* ───────── SCHEDULE (HARMONOGRAM) ───────── */
.schedule {
  width: 100%;
  background: var(--paper);
  padding: clamp(48px, 5vw, 96px) 0 clamp(56px, 6vw, 112px);
  text-align: center;
}

.schedule h2 {
  margin: 0;
  font-size: clamp(20px, 1.6vw, 30px);
  font-weight: 500;
  letter-spacing: 2px;
}

/* Liczbę kolumn podaje PHP w style="--steps: N".
   gap MUSI zostać 0 — odstępy robi padding kroku; przerwa w siatce
   rozcięłaby poziomą linię na kawałki. */
.schedule-track {
  display: grid;
  grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr));
  gap: 0;
  margin: clamp(24px, 3vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

/* Wiersze: ikona / szyna / treść. Ostatni to 1fr, więc treść wypełnia resztę
   wysokości kroku — a że wszystkie kroki są w jednym wierszu toru, mają równą
   wysokość i terminy trafiają w jeden rząd niezależnie od tego, na ile linii
   zawinie się etykieta. */
.schedule-step {
  position: relative;
  overflow: hidden; /* przycina odcinki linii dokładnie do krawędzi kroku */
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  padding: 0 clamp(12px, 1.6vw, 32px);
}

/* Maskę i kolor dziedziczy z .big-icon — tutaj tylko rozmiar. */
.schedule-icon {
  width: clamp(44px, 3.6vw, 64px);
  height: clamp(44px, 3.6vw, 64px);
  margin: 0 0 clamp(16px, 1.6vw, 26px);
}

/* Szyna wielkości kropki; jej pseudoelementy rysują lewą i prawą połowę
   linii. Nadmiar (100vw) obcina overflow kroku, więc odcinki kończą się na
   krawędziach kroku i stykają się z sąsiadami bez szczeliny. */
.schedule-rail {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  margin: 0 0 clamp(16px, 1.6vw, 26px);
}

/* Grubość i kolor odcinka w zmiennych — wariant „zakończony" podmienia je
   raz, a działa tak samo w osi poziomej i pionowej. */
.schedule-rail::before,
.schedule-rail::after {
  content: "";
  position: absolute;
  --rail-w: 1px;
  --rail-c: var(--line);
  top: calc(50% - var(--rail-w) / 2);
  width: 100vw;
  height: var(--rail-w);
  background: var(--rail-c);
}

.schedule-rail::before { right: 50%; }
.schedule-rail::after  { left: 50%; }

/* Linia zaczyna się w środku pierwszej kropki i kończy w środku ostatniej. */
.schedule-step:first-child .schedule-rail::before,
.schedule-step:last-child  .schedule-rail::after {
  content: none;
}

.schedule-dot {
  position: relative;
  z-index: 1;
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--paper);
}

/* ─── Etap zakończony ─── */
.schedule-step.is-done .schedule-dot {
  background: var(--gold);
}

/* Każdy zakończony etap złoci swoją PRAWĄ połowę odcinka, a lewą tylko wtedy,
   gdy poprzedni też jest zakończony. Dzięki temu:
   — między dwoma zakończonymi etapami linia jest złota na całej długości,
   — za ostatnim zakończonym urywa się na granicy kroku, czyli dokładnie
     w połowie drogi do następnej kropki (kropki stoją w środkach równych
     kolumn, więc granica kroku = punkt w połowie odległości). */
.schedule-step.is-done .schedule-rail::after,
.schedule-step.is-done + .schedule-step.is-done .schedule-rail::before {
  --rail-w: 2px;
  --rail-c: var(--gold);
}

/* Etykieta w wierszu elastycznym (przykleja się do góry), termin w wierszu
   auto — czyli zawsze przy dolnej krawędzi kroku. */
.schedule-body {
  display: grid;
  grid-template-rows: 1fr auto;
  width: 100%;
}

.schedule-label {
  margin: 0 0 10px;
  align-self: start;
  color: var(--ink);
  font-size: clamp(13px, 0.95vw, 17px);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.3;
}

.schedule-date {
  margin: 0;
  color: var(--muted);
  font-size: clamp(12px, 0.8vw, 14px);
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Stopka sekcji: krótkie kreski po obu stronach tekstu (flex-grow 0). */
.schedule-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 20px);
  margin: clamp(40px, 4vw, 72px) 0 0;
  color: var(--muted);
  font-size: clamp(12px, 0.85vw, 15px);
  line-height: 1.5;
}

.schedule-note::before,
.schedule-note::after {
  content: "";
  flex: 0 0 40px;
  height: 1px;
  background: var(--line);
}

.schedule-note span {
  min-width: 0;
}

/* ───────── APARTMENTS (LISTA MIESZKAŃ) ───────── */
.apartments {
  width: 100%;
  background: var(--paper);
  padding: clamp(48px, 5vw, 96px) 0 clamp(56px, 6vw, 112px);
  text-align: center;
}

.apartments h2 {
  margin: 0;
  font-size: clamp(20px, 1.6vw, 30px);
  font-weight: 500;
  letter-spacing: 2px;
}

.apartments .container {
  max-width: 1280px;
}

/* Wszystkie kontrolki wychodzą z PHP jako [hidden] i odsłania je JS. Reguła UA
   [hidden]{display:none} przegrywa z autorskim display, więc każdy element
   sterowany atrybutem musi mieć własną regułę — i powtórkę w media query. */
.apartments-tabs[hidden],
.apartments-filters[hidden],
.apartments-row[hidden],
.apartments-more[hidden],
.apartments-empty[hidden] {
  display: none;
}

/* Limit startowy dotyczy wyłącznie przeglądarek z JS-em: bez niego nie ma
   przycisku dobierania wierszy, więc tabela musi pokazać komplet. Klasa
   .is-ready oddaje sterowanie widocznością JS-owi zaraz po podpięciu zdarzeń. */
@media (scripting: enabled) {
  .apartments:not(.is-ready) .apartments-row[data-initial-hidden] {
    display: none;
  }
}

/* ─── Zakładki budynków ─── */
.apartments-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0 0 clamp(20px, 2vw, 32px);
}

/* Reset globalnej reguły `button` (width:100%, min-height, margin, gradient),
   jak w .gallery-cta. Uppercase i letter-spacing trzeba zadeklarować ponownie,
   bo reset zabiera je razem z resztą. */
.apartments-tab {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 18px);
  flex: 1 1 240px;
  width: auto;
  min-height: 64px;
  margin: 0;
  padding: 0 clamp(16px, 1.6vw, 28px);
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--white);
  color: var(--muted);
  font-size: clamp(11px, 0.8vw, 14px);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.apartments-tab:hover {
  color: var(--ink);
  border-color: var(--gold);
}

.apartments-tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.apartments-tab__mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1px solid currentColor;
  font-size: clamp(12px, 0.85vw, 15px);
  letter-spacing: 0;
}

.apartments-tab__count {
  color: inherit;
  opacity: .65;
}

.apartments-tab__count::before {
  content: "·";
  margin: 0 6px 0 2px;
}

/* ─── Pasek filtrów ─── */
.apartments-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2vw, 40px);
  margin: 0 0 clamp(16px, 1.6vw, 24px);
  padding: 0 clamp(4px, 0.6vw, 12px);
}

.apartments-filter {
  position: relative;
  display: inline-flex;
}

/* Strzałka rysowana obróconym kwadratem zamiast kolejnego pliku SVG.
   pointer-events: none jest obowiązkowe — inaczej klik w strzałkę nie otwiera listy. */
.apartments-filter::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg);
  pointer-events: none;
}

.apartments-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 26px 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 500 clamp(11px, 0.8vw, 13px)/1.2 inherit;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}

.apartments-check {
  margin: 0;
  gap: 10px;
  align-items: center;
  color: var(--ink);
  font-size: clamp(11px, 0.8vw, 13px);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}

.apartments-check input {
  border-color: var(--gold);
  cursor: pointer;
}

/* ─── Tabela ─── */
.apartments-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.apartments-table th {
  padding: 12px clamp(8px, 0.8vw, 18px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: clamp(10px, 0.72vw, 12px);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}

.apartments-table td {
  padding: clamp(10px, 0.8vw, 14px) clamp(8px, 0.8vw, 18px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: clamp(12px, 0.9vw, 15px);
  vertical-align: middle;
}

.apartments-row:hover td {
  background: rgba(189, 125, 57, 0.06);
}

/* Link do karty lokalu. --gold jako kolor tekstu daje na jasnym tle 3,4:1
   (patrz :root), więc numer zostaje w --ink, a złoto sygnalizuje klikalność
   podkreśleniem. Padding + inline-block, żeby cel dotykowy miał sensowną
   wysokość, a nie 20 px samego tekstu. */
.apartments-number {
  display: inline-block;
  padding: 4px 0;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color .15s ease;
}

.apartments-number:hover {
  color: var(--gold-dark);
}

.apartments-number:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
}

/* Kwoty i metraż rozdzielane twardą spacją — bez tego „765 000 zł” łamie się
   w wąskiej kolumnie na dwie linie. */
.apartments-cell--number {
  white-space: nowrap;
}

.apartments-cell--total {
  font-weight: 600;
}

.apartments-ask {
  color: var(--muted);
  font-style: italic;
}

.apartments-table th:last-child,
.apartments-table td:last-child {
  text-align: right;
}

/* ─── Pigułki statusu ─── */
.apartments-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: clamp(10px, 0.72vw, 12px);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.apartments-badge--available {
  background: var(--status-free-bg);
  border-color: var(--status-free-line);
  color: var(--status-free-ink);
}

.apartments-badge--reserved {
  background: var(--status-reserved-bg);
  border-color: var(--status-reserved-line);
  color: var(--status-reserved-ink);
}

.apartments-badge--sold {
  background: var(--status-sold-bg);
  border-color: var(--status-sold-line);
  color: var(--status-sold-ink);
}

/* ─── Stopka sekcji ─── */
.apartments-empty {
  margin: clamp(32px, 4vw, 56px) 0 0;
  color: var(--muted);
  font-size: clamp(12px, 0.85vw, 15px);
}

.apartments-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  margin: clamp(20px, 2vw, 32px) 0 0;
}

.apartments-note {
  margin: 0;
  color: var(--muted);
  font-size: clamp(11px, 0.8vw, 14px);
  line-height: 1.5;
  text-align: left;
}

/* Reset globalnej reguły `button`, jak przy zakładkach. */
.apartments-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 52px;
  margin: 0 0 0 auto;
  padding: 0 clamp(28px, 3vw, 48px);
  border: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #ba7430, #cb8b45);
  color: var(--white);
  font-size: clamp(12px, 0.85vw, 15px);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .15s ease;
}

.apartments-more:hover {
  opacity: .92;
}

.apartments-tab:focus-visible,
.apartments-select:focus-visible,
.apartments-check input:focus-visible,
.apartments-more:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
}

/* ───────── CENNIK (LISTINGI Z HISTORIĄ CEN) ───────── */
/* Cennik jedzie na klasach .apartments-* — tabela ma wyglądać dokładnie tak jak
   lista mieszkań na stronie głównej. Tutaj żyje wyłącznie to, czego tam nie ma:
   sąsiadujące listingi, plakietka statusu przy numerze i panel historii cen. */

/* Kolejne listingi na jednej stronie nie mogą powtarzać pełnego paddingu sekcji,
   bo między tabelami zrobiłaby się dziura na dwa ekrany. */
.apartments--pricing + .apartments--pricing {
  padding-top: 0;
}

.apartments--pricing h2 {
  font-size: clamp(18px, 1.3vw, 24px);
}

/* Numer i plakietka statusu w jednej komórce: cennik nie ma kolumny „Status”,
   a pokazuje też lokale sprzedane. */
.pricing-id {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 0.7vw, 12px);
}

/* Lokal bez własnej karty (parking, komórka, boks) nie jest linkiem — zostaje
   sam numer, bez złotego podkreślenia sugerującego klikalność. */
.apartments-number--plain {
  border-bottom: 0;
  cursor: default;
}

/* ─── Historia cen ─── */
/* Reset globalnej reguły `button` (width:100%, min-height, margin, gradient),
   jak w .apartments-tab. Przycisk ma wyglądać jak link w tabeli. */
.pricing-history-toggle {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid var(--gold);
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(11px, 0.8vw, 13px);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: none;
  cursor: pointer;
  transition: color .15s ease;
}

.pricing-history-toggle:hover {
  color: var(--gold-dark);
}

.pricing-history-toggle:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
}

/* Kontrolki wychodzą z PHP jako [hidden] i odsłania je JS — autorski `display`
   przegrywa z regułą UA, więc każdy taki element potrzebuje własnej reguły
   (i powtórki w media query). Ten sam mechanizm co przy .apartments-tabs. */
.pricing-history-toggle[hidden],
.pricing-history[hidden] {
  display: none;
}

/* Bez JS-u panele są rozwinięte (przycisk „Sprawdź” nie miałby czego rozwijać),
   z JS-em znikają zanim moduł przejmie sterowanie — inaczej cennik mrugałby
   pełną historią wszystkich lokali. */
@media (scripting: enabled) {
  .apartments--pricing:not(.is-ready) .pricing-history {
    display: none;
  }
}

/* Selektor z .apartments-table, bo panel jest ostatnią (jedyną) komórką wiersza,
   a `.apartments-table td:last-child` wyrównuje takie komórki do prawej. */
.apartments-table .pricing-history td {
  padding: clamp(12px, 1vw, 18px) clamp(8px, 0.8vw, 18px) clamp(16px, 1.4vw, 24px);
  background: var(--white);
  text-align: left;
}

.pricing-history__heading {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: clamp(10px, 0.72vw, 12px);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.pricing-history__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-history__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px clamp(10px, 1vw, 20px);
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
}

.pricing-history__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.pricing-history__price {
  min-width: 220px;
  font-size: clamp(12px, 0.9vw, 15px);
  font-weight: 600;
}

.pricing-history__mkw {
  color: var(--muted);
  font-weight: 400;
}

.pricing-history__date {
  min-width: 180px;
  color: var(--muted);
  font-size: clamp(11px, 0.8vw, 13px);
}

.pricing-history__change {
  font-size: clamp(10px, 0.72vw, 12px);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pricing-history__change--increase {
  color: var(--change-up);
}

.pricing-history__change--decrease {
  color: var(--change-down);
}

/* ───────── KARTA MIESZKANIA (podstrona lokalu) ───────── */
.apartment-card {
  width: 100%;
  background: var(--paper);
  padding: clamp(48px, 5vw, 96px) 0 clamp(56px, 6vw, 112px);
}

.apartment-card .container {
  max-width: 1280px;
}

.apartment-card h2 {
  margin: 0;
  font-size: clamp(20px, 1.6vw, 30px);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Podsumowanie lokalu w hero: linijka danych, nie akapit tekstu. Domyślny
   .hero-lead jest na zdanie — tu ma być węższy krój i pełna szerokość, żeby
   „Mieszkanie 2 • Budynek A • Piętro +1 • 3 pokoje” nie łamało się po każdym
   członie. body_class() daje na tej podstronie klasę single-apartments. */
.single-apartments .hero-lead {
  max-width: none;
  font-size: clamp(13px, 1vw, 17px);
  letter-spacing: 1px;
}

.apartment-card__body {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--white);
  overflow: hidden;
}

.apartment-plan {
  margin: 0;
  padding: clamp(16px, 2vw, 40px);
  text-align: center;
}

.apartment-plan img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  max-width: 1040px;
}

/* Pasek danych: kolumny rozdzielone kreską, przycisk dosunięty do prawej.
   Kreski rysuje lewa krawędź sąsiada, więc pierwsza komórka jej nie dostaje. */
.apartment-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  border-top: 1px solid var(--line);
  padding: clamp(16px, 1.6vw, 24px) clamp(16px, 2vw, 40px);
}

.apartment-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 1 auto;
  padding-left: clamp(16px, 2vw, 32px);
  border-left: 1px solid var(--line);
}

.apartment-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.apartment-stat__label {
  color: var(--muted);
  font-size: clamp(10px, 0.72vw, 12px);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.apartment-stat__value {
  font-size: clamp(16px, 1.3vw, 24px);
  font-weight: 600;
  white-space: nowrap;
}

.apartment-download {
  margin-left: auto;
}

.apartment-note {
  margin: clamp(12px, 1.2vw, 18px) 0 0;
  color: var(--muted);
  font-size: clamp(11px, 0.8vw, 13px);
  line-height: 1.6;
}

.apartment-description {
  max-width: 720px;
  margin: clamp(24px, 3vw, 48px) 0 0;
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.7;
}

.apartment-back {
  margin: clamp(24px, 3vw, 40px) 0 0;
}

/* --gold jako kolor tekstu daje na jasnym tle 3,4:1 (patrz :root), więc linki
   na papierze biorą --gold-dark; złoto zostaje na podkreśleniu i hoverze. */
.apartment-back a {
  color: var(--gold-dark);
  font-size: clamp(12px, 0.85vw, 15px);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: border-color .15s ease;
}

.apartment-back a:hover {
  border-color: var(--gold);
}

.apartment-back a:focus-visible,
.apartment-download:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
}

/* ───────── RESPONSIVE ───────── */
@media (max-width: 1024px) {
  .signup .container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .form-card {
    max-width: none;
  }

  /* ─── Callback: kolumny pod sobą, przycisk pod polami ─── */
  .callback .container {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 4vw, 40px);
  }

  .cb-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .cb-action {
    grid-column: 1 / -1;
  }

  .cb-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* W pionie kreska nie ma czego rozdzielać. */
  .cb-hours {
    padding-left: 0;
    border-left: 0;
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }

  .why-grid article:nth-child(2) {
    border-right: 0;
  }

  .info-strip {
    grid-template-columns: 1fr;
  }

  .info-strip ul {
    border-left: 0;
    padding-left: 0;
  }

  .location {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .location .local-list {
    padding-right: var(--gutter);
  }

  .map {
    height: clamp(320px, 60vw, 480px);
  }

  /* ─── Galeria ─── */
  .gallery-mosaic {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 3 / 2;
  }

  .lightbox {
    padding: clamp(56px, 8vw, 72px) 12px clamp(72px, 10vw, 96px);
  }

  /* Strzałki schodzą pod obraz — na wąskim ekranie po bokach nie ma miejsca. */
  .lightbox {
    grid-template-columns: minmax(0, 1fr);
  }

  .lightbox__stage {
    grid-column: 1;
  }

  .lightbox__nav {
    position: absolute;
    bottom: clamp(12px, 3vw, 24px);
  }

  .lightbox__nav--prev { grid-column: 1; left: clamp(16px, 8vw, 64px); }
  .lightbox__nav--next { grid-column: 1; right: clamp(16px, 8vw, 64px); }

  /* ─── Harmonogram: oś obrócona do pionu ─── */
  /* Układ trzykolumnowy: [linia z kropką] [ikona] [tekst]. Kropka zostaje
     jedynym węzłem na linii, ikona stoi obok niej — dzięki temu nie trzeba
     wycinać linii spod ikony. */
  .schedule-track {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-step {
    grid-template-columns: 11px clamp(34px, 6vw, 44px) minmax(0, 1fr);
    grid-template-rows: none; /* w pionie kroki nie są równej wysokości */
    align-items: start;
    justify-items: start;
    column-gap: clamp(14px, 3vw, 24px);
    padding: clamp(16px, 3vw, 26px) 0; /* pion też bez gap — linia ma być ciągła */
    text-align: left;
  }

  /* grid-row: 1 jest konieczne — przy domyślnym auto-placement (sparse)
     kursor nie cofa się do kolumny 1, więc szyna spadłaby o wiersz niżej. */
  .schedule-rail {
    grid-column: 1;
    grid-row: 1;
    /* wyśrodkowanie kropki względem ikony obok */
    margin: calc((clamp(34px, 6vw, 44px) - 11px) / 2) 0 0;
  }

  /* Ten sam mechanizm obrócony o 90° — odcinki w pionie. Grubość i kolor
     nadal z --rail-w / --rail-c, więc wariant „zakończony" działa bez zmian. */
  .schedule-rail::before,
  .schedule-rail::after {
    top: auto;
    right: auto;
    left: calc(50% - var(--rail-w) / 2);
    width: var(--rail-w);
    height: 100vh;
  }

  .schedule-rail::before { bottom: 50%; }
  .schedule-rail::after  { top: 50%; }

  .schedule-icon {
    grid-column: 2;
    grid-row: 1;
    width: clamp(34px, 6vw, 44px);
    height: clamp(34px, 6vw, 44px);
    margin: 0;
  }

  .schedule-body {
    grid-column: 3;
    grid-row: 1;
    grid-template-rows: none; /* termin ma iść tuż pod etykietą, nie do dołu */
    width: auto;
  }

  /* Wariant z menu trzeba wymienić z nazwy — :has() podbija specyficzność. */
  .footer .container,
  .footer .container:has(.footer-menu) {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .lead,
  .hero-lead,
  .intro h1 {
    max-width: none;
  }

  /* ─── Lista mieszkań ─── */
  .apartments-table th,
  .apartments-table td {
    padding-left: 8px;
    padding-right: 8px;
  }

  .apartments-tab__count {
    display: none;
  }

  /* ─── Karta mieszkania: przycisk pod danymi, nie obok ─── */
  .apartment-download {
    flex: 1 1 100%;
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: 70vh;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .why-grid article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 24px;
    padding-top: 24px;
  }

  .why-grid article:last-child {
    border-bottom: 0;
  }

  .team-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .team-cta {
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }

  .team-cta p {
    text-align: center;
  }

  .copyright .container {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* ─── Callback: wszystko w jednej kolumnie ─── */
  .callback-intro {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }

  .callback-icon {
    grid-column: 1;
    grid-row: 1;
  }

  .cb-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 22px; /* zapas na absolutny komunikat walidacji między polami */
  }

  .cb-action {
    grid-column: 1;
  }

  /* ─── Galeria: jedna kolumna ─── */
  /* aspect-ratio wyłączone — wysokość wynika teraz z proporcji samych kafli. */
  .gallery-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    aspect-ratio: auto;
    gap: 8px;
  }

  .gallery-tile:nth-child(1),
  .gallery-tile:nth-child(2),
  .gallery-tile:nth-child(3),
  .gallery-tile:nth-child(4) {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 3 / 2;
  }

  .schedule-step {
    padding: 14px 0;
  }

  .schedule-note {
    gap: 10px;
  }

  .schedule-note::before,
  .schedule-note::after {
    flex-basis: 24px;
  }

  /* ─── Lista mieszkań: wiersze jako karty ─── */
  /* Siedem kolumn to ~700 px, czyli dwie szerokości ekranu na wiersz. Zamiast
     przewijania poziomego (którego motyw nigdzie nie sygnalizuje) rozkładamy
     wiersz pionowo, a nazwy kolumn wracają z atrybutu data-label. */
  .apartments-table thead {
    display: none;
  }

  .apartments-table,
  .apartments-table tbody,
  .apartments-row,
  .apartments-table td {
    display: block;
  }

  /* Powtórka reguły z bloku bazowego: display:block powyżej wygrywa z regułą UA
     [hidden] i bez tego filtrowanie przestałoby cokolwiek ukrywać na telefonie. */
  .apartments-row[hidden] {
    display: none;
  }

  .apartments-row {
    margin: 0 0 12px;
    padding: 4px 16px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--white);
  }

  .apartments-row:hover td {
    background: transparent;
  }

  .apartments-table td {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: baseline;
    padding: 10px 0;
    text-align: right;
  }

  .apartments-table td:last-child {
    border-bottom: 0;
    text-align: right;
  }

  .apartments-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: left;
  }

  /* Bez tego pigułka statusu rozciąga się na całą szerokość komórki-siatki. */
  .apartments-table td > * {
    justify-self: end;
  }

  .apartments-tab {
    flex: 1 1 100%;
    min-height: 52px;
  }

  .apartments-filters {
    gap: 14px 24px;
  }

  .apartments-footer {
    justify-content: center;
    text-align: center;
  }

  .apartments-note {
    text-align: center;
  }

  .apartments-more {
    width: 100%;
    margin: 0;
  }

  /* ─── Cennik: panel historii pod kartą wiersza ─── */
  /* Panel nie jest kolumną, tylko treścią rozwijaną pod lokalem — nie dostaje
     więc ani etykiety z data-label, ani wyrównania do prawej. Ujemny margines
     dokleja go do karty wiersza, żeby czytało się to jak jedna całość. */
  .pricing-history {
    display: block;
    margin: -12px 0 12px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-top: 0;
    background: var(--white);
  }

  .pricing-history[hidden] {
    display: none;
  }

  /* Selektor z .apartments-table, żeby przebić regułę `td:last-child` z tego
     samego bloku — panel jest jedyną komórką swojego wiersza. */
  .apartments-table .pricing-history td {
    display: block;
    padding: 0 0 12px;
    text-align: left;
  }

  .pricing-history td::before {
    content: none;
  }

  /* Reguła `td > * { justify-self: end }` wyrównuje wartości kolumn do prawej —
     w panelu historii dosięgłaby nagłówka i listy, bo Chrome respektuje
     justify-self także w układzie blokowym. */
  .pricing-history td > * {
    justify-self: stretch;
  }

  .pricing-history__price,
  .pricing-history__date {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  /* Pasek danych karty: cztery kolumny nie mieszczą się na telefonie, więc
     dane idą jedna pod drugą, a kreska rozdzielająca przenosi się na górę. */
  .apartment-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .apartment-stat {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .apartment-stat:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .apartment-download {
    margin-top: 20px;
  }
}