/* Domki Letniskowe Ruś — prototyp strony głównej (2026-10-06).
   Kolory i krój nagłówków wspólne z grafikami na Facebooka. */

:root {
  --papier: #f6f4ee;
  --papier-2: #ece8de;
  --las: #17251e;
  --las-2: #22352b;
  --tekst: #1d2621;
  --tekst-2: #4f5a53;
  --linia: #d6d0c2;
  --brzoza: #c8902f;      /* akcent: brzoza jesienią, przyciemniona dla kontrastu */
  --brzoza-jasna: #e6b45a;
  --jezioro: #2f5566;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --szer: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--tekst); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: var(--las); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brzoza); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; margin: 0; font-variation-settings: "opsz" 144, "SOFT" 30; }
p { margin: 0; }
.kontener { max-width: var(--szer); margin: 0 auto; padding: 0 32px; }
.etykieta { font: 500 12.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-2); }
.liczba { font-variant-numeric: tabular-nums lining-nums; }

/* Pasek górny */
.gora { border-bottom: 1px solid var(--linia); background: var(--papier); position: sticky; top: 0; z-index: 20; }
.gora .kontener { display: flex; align-items: center; gap: 32px; height: 68px; }
.znak { font: 600 19px/1 var(--serif); color: var(--las); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.znak span { font: 500 11px/1 var(--mono); letter-spacing: 0.1em; color: var(--tekst-2); margin-left: 10px; text-transform: uppercase; }
.menu { display: flex; gap: 26px; margin-left: auto; }
.menu a { font-size: 15px; color: var(--tekst); text-decoration: none; }
.menu a:hover { color: var(--brzoza); }
.przycisk { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px;
  background: var(--las); color: var(--papier); border: 1px solid var(--las); border-radius: 3px; font: 600 15px/1 var(--sans);
  text-decoration: none; cursor: pointer; }
.przycisk:hover { background: var(--las-2); color: var(--papier); }
.przycisk.jasny { background: transparent; color: var(--las); }
.przycisk.jasny:hover { background: var(--las); color: var(--papier); }
.gora .przycisk { min-height: 40px; padding: 0 16px; font-size: 14px; }

/* Otwarcie */
.otwarcie { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 640px; border-bottom: 1px solid var(--linia); }
.otwarcie-tekst { padding: 72px 56px 56px max(32px, calc((100vw - var(--szer)) / 2 + 32px)); display: flex; flex-direction: column; gap: 28px; }
.otwarcie h1 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.04; color: var(--las); }
.otwarcie h1 em { font-style: italic; color: var(--jezioro); }
.otwarcie .lead { font-size: 19px; color: var(--tekst-2); max-width: 30em; }
.skrot { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--linia); }
.skrot dt { font: 500 11.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-2); }
.skrot dd { margin: 4px 0 0; font-weight: 600; color: var(--las); }
.otwarcie .akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: auto; }
.zasady { padding: 0 0 16px; font-size: 14px; color: var(--tekst-2); }
.otwarcie .tel { font-size: 15px; color: var(--tekst-2); }
.otwarcie .tel a { color: var(--las); font-weight: 600; text-decoration: none; }
.otwarcie-foto { position: relative; min-height: 420px; }
.otwarcie-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.otwarcie-foto figcaption { position: absolute; left: 0; bottom: 0; background: var(--papier); padding: 10px 16px; }

/* Wyszukiwarka terminu */
.termin { background: var(--papier-2); border-bottom: 1px solid var(--linia); }
.termin form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 0; align-items: stretch; }
.pole { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 20px; border-right: 1px solid var(--linia); }
.pole:first-child { padding-left: 0; }
.pole label { font: 500 11.5px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-2); }
.pole input, .pole select { font: 500 16px/1.3 var(--sans); color: var(--tekst); background: transparent; border: 0; padding: 4px 0; min-height: 32px; }
.pole input:focus, .pole select:focus { outline: 2px solid var(--brzoza); outline-offset: 2px; }
.termin .przycisk { margin: 14px 0 14px 20px; }

/* Liczby */
.liczby { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--linia); }
.liczby div { padding: 30px 20px 26px; border-right: 1px solid var(--linia); }
.liczby div:last-child { border-right: 0; }
.liczby b { display: block; font: 500 42px/1 var(--serif); color: var(--las); font-variation-settings: "opsz" 144; }
.liczby b small { font-size: 0.45em; margin-left: 3px; }
.liczby span { display: block; margin-top: 10px; font-size: 14.5px; color: var(--tekst-2); line-height: 1.4; }

/* Sekcje */
.sekcja { padding: 104px 0; border-bottom: 1px solid var(--linia); }
.naglowek { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; margin-bottom: 56px; align-items: end; }
.naglowek h2 { font-size: clamp(34px, 3.4vw, 50px); line-height: 1.08; color: var(--las); }
.naglowek p { font-size: 18px; color: var(--tekst-2); max-width: 36em; }

/* Domki */
.domki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.domek { display: flex; flex-direction: column; gap: 18px; }
.domek .foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--papier-2); position: relative; }
.domek .foto img { width: 100%; height: 100%; object-fit: cover; }
.domek .brak { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px;
  border: 1px dashed var(--tekst-2); font: 500 13px/1.5 var(--mono); color: var(--tekst-2); }
.domek h3 { font-size: 30px; color: var(--las); }
.domek dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0; font-size: 15.5px; }
.domek dt { color: var(--tekst-2); }
.domek dd { margin: 0; }

/* Działka */
.dzialka { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.plan { background: #fbfaf6; border: 1px solid var(--linia); padding: 20px; }
.plan svg { width: 100%; height: auto; display: block; }
.plan .etykieta { margin-top: 12px; }
.lista-punkty { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linia); }
.lista-punkty li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--linia); font-size: 16px; }
.lista-punkty li b { font: 500 13px/1.6 var(--mono); color: var(--brzoza); }

/* Wnętrza */
.wnetrza { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 120px; gap: 16px; }
.wnetrza figure { margin: 0; position: relative; overflow: hidden; background: var(--papier-2); }
.wnetrza img { width: 100%; height: 100%; object-fit: cover; }
.wnetrza figcaption { position: absolute; left: 0; bottom: 0; right: 0; padding: 10px 14px; background: rgba(23, 37, 30, 0.86); color: var(--papier); font-size: 13.5px; line-height: 1.4; }
.w-salon { grid-column: span 7; grid-row: span 4; }
.w-syp { grid-column: span 5; grid-row: span 2; }
.w-kuch { grid-column: span 5; grid-row: span 2; }
.w-taras { grid-column: span 7; grid-row: span 3; }
.w-laz { grid-column: span 5; grid-row: span 3; }

/* Pies — sekcja ciemna */
.ciemna { background: var(--las); color: var(--papier); border-bottom: 0; }
.ciemna h2 { color: var(--papier); }
.ciemna .naglowek p, .ciemna .etykieta { color: #b9c2bb; }
.pies { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.pies img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pies ul { list-style: none; margin: 0; padding: 0; }
.pies li { padding: 18px 0; border-bottom: 1px solid #344a3e; font-size: 17px; }
.pies li b { display: block; font: 500 26px/1.2 var(--serif); color: var(--brzoza-jasna); margin-bottom: 4px; }

/* Ceny */
.pas { display: flex; height: 64px; margin-bottom: 10px; border: 1px solid var(--las); }
.pas div { display: flex; align-items: flex-end; padding: 6px 8px; font: 500 12px/1 var(--mono); border-right: 1px solid rgba(255, 255, 255, 0.35); overflow: hidden; white-space: nowrap; }
.pas div:last-child { border-right: 0; }
.c369 { background: #e9e2cf; color: var(--tekst); }
.c449 { background: #d8c79c; color: var(--tekst); }
.c499 { background: #b8a26a; color: var(--las); }
.c549 { background: #8f8a5c; color: #fff; }
.c649 { background: var(--las-2); color: #fff; }
.miesiace { display: flex; margin-bottom: 40px; }
.miesiace span { font: 500 12px/1 var(--mono); color: var(--tekst-2); border-left: 1px solid var(--linia); padding-left: 6px; }
.tabela-ramka { overflow-x: auto; }
.cennik { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 640px; }
.cennik th { text-align: left; font: 500 12px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-2); padding: 12px 16px 12px 0; border-bottom: 1px solid var(--las); }
.cennik td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--linia); vertical-align: top; }
.cennik td.cena { font: 500 22px/1.1 var(--serif); color: var(--las); white-space: nowrap; }
.cennik td.cena small { font: 400 13px/1 var(--sans); color: var(--tekst-2); }
.w-cenie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.w-cenie h3 { font-size: 22px; color: var(--las); margin-bottom: 10px; }
.w-cenie p { color: var(--tekst-2); font-size: 15.5px; }

/* Zanim zarezerwujecie */
.uczciwie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.uczciwie div { padding: 22px 0; border-top: 1px solid var(--linia); }
.uczciwie h3 { font: 600 17px/1.4 var(--sans); color: var(--las); margin-bottom: 6px; letter-spacing: 0; }
.uczciwie p { color: var(--tekst-2); font-size: 16px; }

/* Okolica */
.okolica { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.okolica img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.odleglosci { list-style: none; margin: 0; padding: 0; }
.odleglosci li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linia); }
.odleglosci li:first-child { border-top: 1px solid var(--las); }
.odleglosci b { font: 500 22px/1.2 var(--serif); color: var(--jezioro); }
.odleglosci strong { display: block; font-weight: 600; }
.odleglosci span { color: var(--tekst-2); font-size: 15px; }

/* Opinie i gospodarze */
.zaufanie { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
.oceny { display: flex; gap: 40px; margin: 28px 0 32px; }
.oceny b { display: block; font: 500 54px/1 var(--serif); color: var(--las); }
.oceny span { font-size: 14.5px; color: var(--tekst-2); }
.cytat { border-top: 1px solid var(--las); padding-top: 20px; margin-bottom: 28px; }
.cytat p { font: 400 22px/1.45 var(--serif); color: var(--tekst); font-style: italic; }
.cytat .brakuje { font: 500 13px/1.5 var(--mono); font-style: normal; color: var(--tekst-2); border: 1px dashed var(--tekst-2); padding: 12px 14px; }
.gospodarze p + p { margin-top: 16px; }
.gospodarze p { font-size: 18px; }

/* Pasy: voucher i niespodzianka */
.pasy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--linia); }
.pasy > div { padding: 64px 32px 64px max(32px, calc((100vw - var(--szer)) / 2 + 32px)); }
.pasy > div + div { border-left: 1px solid var(--linia); padding-left: 56px; padding-right: max(32px, calc((100vw - var(--szer)) / 2 + 32px)); background: var(--papier-2); }
.pasy h2 { font-size: 34px; color: var(--las); margin: 12px 0 14px; }
.pasy p { color: var(--tekst-2); max-width: 30em; margin-bottom: 22px; }

/* Kontakt i stopka */
.kontakt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.kontakt div { border-top: 1px solid var(--las); padding-top: 18px; }
.kontakt b { display: block; font: 500 28px/1.2 var(--serif); color: var(--las); margin: 8px 0; }
.kontakt b a { text-decoration: none; }
.stopka { background: var(--las); color: #b9c2bb; padding: 56px 0 96px; font-size: 14.5px; }
.stopka .kontener { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.stopka a { color: var(--papier); }
.stopka .znak { color: var(--papier); display: inline-block; margin-bottom: 14px; }

/* Pasek na telefonie */
.pasek-tel { display: none; }

@media (max-width: 980px) {
  .menu { display: none; }
  .otwarcie { grid-template-columns: 1fr; }
  .otwarcie-foto { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .otwarcie-tekst { padding: 36px 24px 40px; }
  .termin form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pole { border-bottom: 1px solid var(--linia); padding-left: 0; }
  .pole:nth-child(2n) { border-right: 0; padding-left: 16px; }
  .termin .przycisk { grid-column: 1 / -1; margin: 16px 0; }
  .liczby { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .liczby div:nth-child(3) { border-right: 0; }
  .liczby div:nth-child(-n + 3) { border-bottom: 1px solid var(--linia); }
  .naglowek, .domki, .dzialka, .pies, .okolica, .zaufanie, .uczciwie, .w-cenie, .kontakt, .pasy { grid-template-columns: 1fr; }
  .uczciwie { gap: 0; }
  .pasy > div, .pasy > div + div { padding: 48px 24px; border-left: 0; }
  .sekcja { padding: 72px 0; }
  .wnetrza { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }
  .w-salon, .w-taras { grid-column: span 2; grid-row: span 2; }
  .w-syp, .w-kuch, .w-laz { grid-column: span 1; grid-row: span 2; }
  .stopka .kontener { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .kontener { padding: 0 20px; }
  .gora .kontener { height: 58px; gap: 12px; }
  .gora .przycisk { display: none; }
  .znak span { display: none; }
  .liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .liczby div { padding: 22px 16px 20px; border-bottom: 1px solid var(--linia); }
  .liczby div:nth-child(3) { border-right: 1px solid var(--linia); }
  .liczby div:nth-child(2n) { border-right: 0; }
  .liczby b { font-size: 34px; }
  .pas div { font-size: 0; }
  .miesiace span { font-size: 10px; padding-left: 3px; }
  .oceny { gap: 28px; }
  .oceny b { font-size: 44px; }
  .pasek-tel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--papier); border-top: 1px solid var(--linia); }
  .pasek-tel .przycisk { min-height: 48px; white-space: nowrap; padding: 0 12px; }
  .otwarcie h1 { font-size: 34px; }
  .otwarcie .lead { font-size: 17px; }
  .otwarcie-foto img { object-position: 55% 12%; }
  .naglowek { margin-bottom: 36px; }
  .stopka { padding-bottom: 110px; }
}

/* --- podstrony i wielojęzyczność --- */
.jezyki { display: flex; gap: 4px; margin-left: 8px; font: 500 12.5px/1 var(--mono); letter-spacing: 0.06em; }
.jezyki a, .jezyki span { padding: 8px 8px; border: 1px solid transparent; border-radius: 3px; text-decoration: none; color: var(--tekst-2); }
.jezyki span { border-color: var(--las); color: var(--las); }
.jezyki a:hover { color: var(--brzoza); }
.gora .menu { margin-left: auto; }
.gora .menu a[aria-current] { color: var(--las); text-decoration: underline; text-underline-offset: 6px; }
.mob { display: none; margin-left: auto; position: relative; }
.mob summary { list-style: none; cursor: pointer; padding: 10px 14px; border: 1px solid var(--las); border-radius: 3px; font: 600 14px/1 var(--sans); }
.mob summary::-webkit-details-marker { display: none; }
.mob nav { position: absolute; right: 0; top: 52px; min-width: 220px; background: var(--papier); border: 1px solid var(--linia); display: flex; flex-direction: column; box-shadow: 0 12px 30px rgba(23, 37, 30, 0.12); }
.mob nav a { padding: 16px 20px; text-decoration: none; color: var(--tekst); border-bottom: 1px solid var(--linia); }
.mob nav a:last-child { border-bottom: 0; }
.podstrona { padding: 72px 0 16px; border-bottom: 0; }
.tytul { font-size: clamp(38px, 4.4vw, 62px); line-height: 1.05; color: var(--las); margin-top: 12px; max-width: 18em; }
.podstrona .lead { font-size: 19px; color: var(--tekst-2); max-width: 36em; }
.portale-linia { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.pas-domek2 { background: var(--papier-2); }
.tekst-prawny { max-width: 760px; }
.tekst-prawny h2 { font-size: 26px; margin: 36px 0 10px; color: var(--las); }
.tekst-prawny p { color: var(--tekst); font-size: 17px; }
.stopka .znak { color: var(--papier); }
@media (max-width: 980px) {
  .gora .menu, .gora .gora-tel { display: none; }
  .mob { display: block; }
  .jezyki { margin-left: auto; }
  .mob { margin-left: 8px; }
}
@media (max-width: 600px) {
  .podstrona { padding: 40px 0 8px; }
  .gora .kontener { gap: 6px; }
  .gora .znak { font-size: 15.5px; }
  .jezyki { gap: 0; margin-left: auto; font-size: 11.5px; }
  .jezyki a, .jezyki span { padding: 8px 5px; }
  .mob { margin-left: 4px; }
  .mob summary { padding: 9px 10px; font-size: 13px; }
  .mob nav { right: -4px; }
}