/* ==========================================================================
   Prowansja - tokeny i nadpisania (demo, siteverse.pl/demo/prowansja/)
   Kierunek: "karta rezerwacyjna". Oliwka, krem i bursztyn (kolor swiec
   i wina, nie logo), Playfair Display w naglowkach i nazwach dan, Inter
   w opisach i cenach; bez kroju monospace (token --f-mono = Inter).
   Komponent podpisowy: PIECZEC I POSTRZEPIONA KARTA (js/podpis.js):
   papier z porwana krawedzia (clip-path) i okragla pieczec, ktora wraca
   w potwierdzeniu rezerwacji i przy polecanych daniach (gwiazdka).
   Wylacznie tokeny i nadpisania; limit 250 linii.
   ========================================================================== */

:root {
  --tlo:    #2C2E1C;
  --tlo-2:  #34361F;
  --tlo-3:  #3D3F26;
  --tekst:   #F5EFDD;
  --tekst-2: rgba(245, 239, 221, 0.74);
  --tekst-3: #A9A48C;
  --akcent:  #C98F3F;
  --akcent-tekst: #241F0F;
  --wlos:   rgba(245, 239, 221, 0.16);
  --wlos-2: rgba(245, 239, 221, 0.08);

  --tlo-jasne:         #F5EFDD;
  --tlo-jasne-2:       #EDE5CE;
  --tekst-na-jasnym:   #241F0F;
  --tekst-2-na-jasnym: rgba(36, 31, 15, 0.7);
  --tekst-3-na-jasnym: #7A7052;
  --wlos-na-jasnym:    rgba(36, 31, 15, 0.18);
  --wlos-2-na-jasnym:  rgba(36, 31, 15, 0.09);

  --papier: #F5EFDD;
  --atrament: #241F0F;
  --bursztyn-ciemny: #8A6A2E;

  --f-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-body:    "Inter", system-ui, "Segoe UI", sans-serif;
  --f-mono:    "Inter", system-ui, "Segoe UI", sans-serif;
  --waga-display: 500;
  --interlinia-display: 1.08;
  --tracking-display: -0.01em;
  --promien: 2px;

  --nawi-tlo: rgba(44, 46, 28, 0.8);
  --pole-tlo: rgba(245, 239, 221, 0.05);
  --tint:
    linear-gradient(180deg, rgba(44, 46, 28, 0.5) 0%, rgba(44, 46, 28, 0.18) 45%, rgba(44, 46, 28, 0.92) 100%);
}

h1 em, h2 em, h3 em { font-style: italic; color: var(--akcent); font-weight: 500; }
.nawi__marka { font-family: var(--f-display); text-transform: none; letter-spacing: 0.05em; font-size: 1.45rem; font-weight: 600; }
.nadtytul { letter-spacing: 0.22em; }
.liczba__v { font-family: var(--f-display); color: var(--akcent); }
.tabela td b { font-family: var(--f-display); font-weight: 500; }
.kal__slot small { text-transform: none; }

/* ---------- ornament: linia, galazka lawendy, linia ---------- */
.ornament { display: flex; align-items: center; gap: 12px; color: var(--akcent); }
.ornament i { flex: 1; height: 1px; background: currentColor; opacity: 0.5; }
.ornament svg, .lawenda { width: 20px; height: 20px; flex: none; color: var(--akcent); }

/* ---------- postrzepiona karta: papier z porwana gora i dolem ----------
   Wewnatrz karty tokeny sa przemapowane na atrament na papierze, wiec
   zwykle komponenty (formularz, kv, przyciski) dzialaja bez nadpisan. */
.postrzepiona {
  position: relative; background: var(--papier); color: var(--atrament);
  padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 56px) clamp(40px, 5vw, 64px);
  clip-path: polygon(0 12px, 4% 2px, 9% 10px, 15% 0, 22% 9px, 29% 2px, 36% 11px, 43% 1px, 50% 9px, 57% 0, 64% 10px, 71% 2px, 78% 11px, 85% 1px, 92% 9px, 100% 3px, 100% calc(100% - 10px), 95% calc(100% - 2px), 89% calc(100% - 11px), 82% calc(100% - 1px), 75% calc(100% - 9px), 68% 100%, 61% calc(100% - 10px), 54% calc(100% - 2px), 47% calc(100% - 11px), 40% calc(100% - 1px), 33% calc(100% - 9px), 26% 100%, 19% calc(100% - 10px), 12% calc(100% - 2px), 6% calc(100% - 11px), 0 calc(100% - 3px));
  --tekst: var(--atrament); --tekst-2: rgba(36, 31, 15, 0.72); --tekst-3: #7A7052;
  --wlos: rgba(36, 31, 15, 0.18); --wlos-2: rgba(36, 31, 15, 0.09);
  --pole-tlo: rgba(255, 255, 255, 0.55); --tlo-2: #EDE5CE; --tlo-3: #E6DDC2;
  --akcent-tekst: #F5EFDD;
}
.postrzepiona .nadtytul { color: var(--bursztyn-ciemny); }
.postrzepiona h1, .postrzepiona h2, .postrzepiona h3 { color: var(--atrament); }
.postrzepiona .przycisk--obrys { border-color: var(--atrament); color: var(--atrament); }
.postrzepiona--cien { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35)); }

/* ---------- pieczec: okragla, lekko przekrecona, odciskana ---------- */
.pieczec-p { position: absolute; top: -26px; right: 26px; width: 124px; height: 124px; transform: rotate(-9deg); z-index: 2; pointer-events: none; transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.pieczec-p svg.pieczec-p__pierscien { position: absolute; inset: 0; width: 100%; height: 100%; }
.pieczec-p__tekst { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.pieczec-p__gora { font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--atrament); }
.pieczec-p__dol { font-family: var(--f-body); font-weight: 600; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bursztyn-ciemny); }
.pieczec-p__tekst svg { width: 15px; height: 15px; color: var(--akcent); }
.pieczec-p.jest-czeka { opacity: 0; transform: rotate(-9deg) scale(1.45); }
.pieczec-p--w-tekscie { position: relative; top: auto; right: auto; display: block; margin: 0 auto; }
.pieczec-p--mala { width: 96px; height: 96px; }
.pieczec-p--mala .pieczec-p__gora { font-size: 10px; }
.pieczec-p--mala .pieczec-p__dol { font-size: 7.5px; }

/* ---------- pierwszy ekran: stol przy swiecach i karta na nim ---------- */
.hero-pr { position: relative; min-height: min(92vh, 900px); display: grid; align-items: center; padding-block: clamp(112px, 14vw, 170px) clamp(48px, 6vw, 88px); }
.hero-pr .postrzepiona { max-width: 660px; }
.hero-pr .tytul--1 { font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4.6rem); }
.hero-pr__meta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero-pr__godziny { font-size: var(--step--1); color: var(--tekst-2); line-height: 1.5; }
.hero-pr__godziny b { display: block; color: var(--tekst); font-weight: 500; }

/* ---------- karta dan: uklad redakcyjny ---------- */
.menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); }
.menu__dzial-tytul { font-family: var(--f-display); font-size: var(--step-2); font-weight: 500; line-height: 1.1; }
.menu__dzial-pod { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--akcent); margin-top: 8px; }
.menu__lista { margin-top: 20px; }
.danie { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--wlos-2); }
.danie__nazwa { font-family: var(--f-display); font-size: 1.12rem; font-weight: 500; line-height: 1.25; }
.danie__nazwa--polecane::after { content: " *"; color: var(--akcent); }
.danie__cena { font-variant-numeric: tabular-nums; color: var(--akcent); font-weight: 500; white-space: nowrap; padding-right: 6px; }
.danie__opis { grid-column: 1 / -1; font-size: var(--step--1); color: var(--tekst-2); margin-top: 4px; max-width: 46ch; line-height: 1.55; }
.danie__wege { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tekst-3); margin-left: 8px; }
.menu__nota { display: flex; align-items: center; gap: 10px; font-size: var(--step--1); color: var(--tekst-2); margin-top: 28px; }
.menu__nota b { color: var(--akcent); font-weight: 500; }
.piwnica { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); }

/* ---------- stoliki: plan sali jako siatka kart ---------- */
.stoliki { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stolik { border: 1px solid var(--wlos); padding: 16px 16px 14px; display: grid; gap: 6px; }
.stolik__nr { font-family: var(--f-display); font-size: var(--step-1); line-height: 1.1; }
.stolik__osob { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--akcent); }
.stolik__opis { font-size: var(--step--1); color: var(--tekst-2); }

/* ---------- wnetrze: galeria i fotografia w ramce papieru ---------- */
.galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.galeria figure { margin: 0; position: relative; overflow: hidden; }
.galeria figure:first-child { grid-row: span 2; }
.galeria img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.galeria figure:first-child img { aspect-ratio: auto; }
.galeria figcaption { position: absolute; left: 12px; bottom: 10px; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--papier); opacity: 0.85; }
.foto-papier { margin: 0; background: var(--papier); padding: 10px 10px 12px; transform: rotate(1.5deg); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35); max-width: 380px; justify-self: end; }
.foto-papier img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.foto-papier figcaption { font-family: var(--f-display); font-style: italic; color: var(--atrament); font-size: 0.95rem; padding: 10px 4px 0; }

/* ---------- potwierdzenie rezerwacji: ta sama karta z pieczecia ---------- */
.odpowiedz.postrzepiona { border: 0; border-radius: 0; }
.odpowiedz.postrzepiona .odpowiedz__glowa { padding-right: 120px; }
.odpowiedz.postrzepiona .odpowiedz__nadtytul { color: var(--bursztyn-ciemny); }
.odpowiedz.postrzepiona .odpowiedz__tytul { font-family: var(--f-display); font-weight: 500; }
.odpowiedz .pieczec-p { top: 22px; right: 24px; width: 104px; height: 104px; }
.rez__podsumowanie .kv__v em { display: block; font-style: normal; font-size: var(--step--1); color: var(--tekst-3); }

@media (max-width: 1000px) { .menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stoliki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .menu, .piwnica, .galeria { grid-template-columns: minmax(0, 1fr); }
  .galeria figure:first-child { grid-row: auto; }
  .foto-papier { justify-self: start; max-width: 320px; }
  .galeria figure:first-child img { aspect-ratio: 4 / 3; }
  .pieczec-p { width: 96px; height: 96px; top: -18px; right: 14px; }
  .pieczec-p__gora { font-size: 10px; }
  .pieczec-p__dol { font-size: 7.5px; }
  .odpowiedz.postrzepiona .odpowiedz__glowa { padding-right: 0; padding-top: 72px; }
  .odpowiedz .pieczec-p { top: 10px; right: 12px; width: 88px; height: 88px; }
}