/* ==========================================================================
   Ayesha Web — motyw spójny z bookingiem (rezerwacje.ayesha.pl)
   ========================================================================== */

/* --- Fonty (self-hosted) --- */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokeny --- */
:root {
  --bursztyn: rgb(218, 165, 80);
  --bursztyn-jasny: rgb(232, 182, 100);
  --na-bursztynie: rgb(30, 15, 0);
  --krem: rgba(255, 230, 180, 0.85);
  /* Połowa drogi (per kanał RGB, bez alfa) między --krem (255,230,180)
     a --bursztyn (218,165,80) — dla .btn-amber:hover, bo --bursztyn-jasny
     (sam jaśniejszy odcień --bursztyn) różnił się od stanu bazowego za mało. */
  --krem-bursztynowy: rgb(237, 198, 130);
  --tekst: rgba(255, 255, 255, 0.85);
  --tekst-mocny: #fff;
  --szklo: rgba(30, 15, 0, 0.55);
  --szklo-hover: rgba(255, 255, 255, 0.08);
  --ramka: rgba(255, 200, 140, 0.35);
  --ramka-mocna: rgba(255, 200, 140, 0.5);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
}

/* --- Baza --- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--tekst);
  line-height: 1.6;
  background-color: rgb(24, 12, 0);
}

/* Wspólne tło całej strony — ten sam zabieg co w wizardzie bookingu */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(20, 10, 0, 0.5), rgba(20, 10, 0, 0.25)),
    url("../assets/img/tlo-1920.jpg");
  background-image:
    linear-gradient(rgba(20, 10, 0, 0.5), rgba(20, 10, 0, 0.25)),
    image-set(
      url("../assets/img/tlo-1920.webp") type("image/webp"),
      url("../assets/img/tlo-1920.jpg") type("image/jpeg")
    );
  background-size: cover;
  background-position: center;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--tekst-mocny);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

/* Litery rozbite przez main.js (efekt blur-in) — patrz initBlurText().
   text-shadow jest statyczny (nie animowany) — ten sam trzywarstwowy styl
   co drop-shadow logo w stopce (ostry kontakt -> środek -> miękka poświata),
   tylko jako text-shadow zamiast filter: drop-shadow (zwykły tekst, bez maski). */
.blur-text span {
  display: inline-block;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.9),
    0 4px 4px rgba(0, 0, 0, 0.55),
    0 8px 10px rgba(0, 0, 0, 0.45);
  will-change: transform, filter, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .blur-text span {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

p { margin: 0 0 1em; }

a { color: var(--bursztyn); }
a:hover { color: var(--bursztyn-jasny); }

.shell {
  /* Boczny margines na wąskich ekranach dawał teraz "- 2.5rem", ale to samo
     robi już padding-inline: clamp(...) na .header-inner/.hero/.section/
     .footer-inner (patrz niżej) — dublowały się, dając za duży margines na
     małych ekranach. .shell teraz tylko ogranicza max. szerokość treści. */
  max-width: 1100px;
  margin-inline: auto;
}

.eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--krem);
  margin-bottom: 0.9rem;
}

/* --- Przyciski --- */
.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--ramka);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-amber {
  background: var(--bursztyn);
  border-color: var(--bursztyn);
  color: var(--na-bursztynie);
}
/* Globalne "a:hover { color: var(--bursztyn-jasny) }" ma wyższą
   specyficzność niż samo ".btn-amber" (element + pseudoklasa > sama klasa),
   więc bez jawnego koloru tu tekst na hover przejmował ten sam jasny
   bursztyn co nowe tło — znikał. Dodatkowo przyciemniamy tekst (nie tylko
   powtarzamy bazowy kolor), żeby hover było widać także bez podnoszenia
   przycisku (usunięty transform). Tło na --krem-bursztynowy zamiast
   --bursztyn-jasny — sam jaśniejszy odcień --bursztyn różnił się od stanu
   bazowego za mało. */
.btn-amber:hover {
  background: var(--krem-bursztynowy);
  border-color: var(--krem-bursztynowy);
  color: #1a0d00;
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--tekst-mocny);
}
.btn-ghost:hover {
  background: var(--szklo-hover);
  border-color: var(--ramka-mocna);
}
a:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline: 2px solid var(--bursztyn);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 30;
  padding: 0.6rem 1.2rem;
  background: var(--bursztyn);
  color: var(--na-bursztynie);
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  font-weight: 500;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}

/* --- Header ---
   Panel szkła (tło+blur+border) i rząd z logo/nav/cta to dwa osobne elementy,
   żeby przejście hero->zadokowany dało się animować wyłącznie przez opacity
   i transform (kompozytor GPU) — bez dotykania layoutu (height/padding) czy
   parametru backdrop-filter co klatkę, co powodowało jank przy scrollu. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  /* Gutter na OUTER elemencie, nie na .header-inner (który jest jednocześnie
     .shell) — inaczej padding dokładał się do centrowania shella (max-width
     1100 + margin:auto), wpychając logo/nav dodatkowo do środka zamiast
     zrównać się z krawędzią .shell w hero/stopce. Ten sam wzorzec co
     .hero + .hero .shell. */
  padding-inline: clamp(20px, 5vw, 70px);
}
.header-panel {
  position: absolute;
  inset: 0;
  background: rgba(30, 15, 0, 0.7);
  border-bottom: 1px solid var(--ramka);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 1;
  pointer-events: none;
}
.header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.75rem;
  transform: translateY(0);
}
.brand img {
  display: block;
  height: 58px;
  width: auto;
  transform: scale(1);
  transform-origin: left center;
  /* Ten sam trzywarstwowy cień co logo w stopce (.footer-logo) — nagłówek
     przed zadokowaniem panelu szkła siedzi bezpośrednio na zdjęciu tła. Tu
     bez sztuczki filter/mask na osobnych elementach (stopka jej potrzebowała
     przez mask-image) — to zwykły <img>, filter i tak renderuje się nad
     całym obrazkiem. */
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.9))
    drop-shadow(0 4px 4px rgba(0, 0, 0, 0.55))
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
}
.site-nav { display: none; gap: 1.75rem; margin-left: auto; }
.site-nav a {
  color: var(--tekst);
  text-decoration: none;
  font-size: 0.95rem;
}
.site-nav a:hover { color: var(--tekst-mocny); }
.header-cta {
  margin-left: auto;
  padding: 0.55rem 1.2rem;
  font-size: 0.9rem;
  white-space: nowrap;
}
@media (min-width: 820px) {
  .site-nav { display: flex; }
  .header-cta { margin-left: 0; }

  /* Stan spoczynkowy nagłówka na desktopie: duże logo nad hero, bez panelu szkła.
     Trzyma się bez zmian, dopóki JS (main.js) nie doda .is-docked po przekroczeniu
     progu scrolla — wtedy poniższe transition animują od razu do stanu docked
     (i odwrotnie przy zdjęciu klasy). Wszystko na opacity/transform (kompozytor
     GPU), bez dotykania layoutu. Te reguły są też pełnoprawnym stanem bez JS. */
  .header-panel {
    opacity: 0;
    will-change: opacity;
    transition: opacity 300ms ease;
  }
  .header-inner {
    transform: translateY(80px);
    will-change: transform;
    transition: transform 300ms ease;
  }
  .brand img {
    transform: scale(2.5862);
    will-change: transform;
    /* Osobna, wyraźnie nieliniowa krzywa dla loga — eleganckie wyhamowanie,
       odróżnione od reszty (panel/rząd na zwykłym ease). */
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .site-header.is-docked .header-panel { opacity: 1; }
  .site-header.is-docked .header-inner { transform: translateY(0); }
  .site-header.is-docked .brand img { transform: scale(1); }
}

/* --- Hero --- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 8rem 4rem;
  /* Boczny gutter jak w bookingu (ayesha.css: body.page-booking padding) —
     bez tego treść dotykała krawędzi viewportu. */
  padding-inline: clamp(20px, 5vw, 70px);
}
@media (min-width: 820px) {
  .hero { padding-block: 15rem 4rem; }
}
/* Wyjątek bez max-width/margin-inline (samo shrink-to-fit) dawał lewą
   krawędź hero przy .hero-paddingu, NIE w linii z .header-inner/.footer-inner
   (te centrują się na max 1100px względem pełnej szerokości viewportu, więc
   na szerokim ekranie ich lewa krawędź jest dalej w prawo niż sam padding).
   Zamiast usuwać centrowanie, wymuszamy width:100%, żeby .shell tu też
   rozciągał się do tego samego capu 1100px i tak samo się centrował —
   spójne w pionie ze wszystkimi innymi .shell. */
.hero .shell {
  width: 100%;
}
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  max-width: 21ch;
}
.hero .lead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  max-width: 46ch;
  margin: 0 0 2.2rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; }

/* --- Sekcje --- */
.section {
  padding-block: 5.5rem;
  padding-inline: clamp(20px, 5vw, 70px);
}
.section-head { max-width: 62ch; margin-bottom: 3rem; }
.section h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }

/* --- Karty usług --- */
.services {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}
.card {
  background: var(--szklo);
  border: 1px solid var(--ramka);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, transform 0.25s;
}
.card:hover {
  border-color: var(--ramka-mocna);
  transform: translateY(-4px);
}
.card h3 { font-size: 1.55rem; margin-bottom: 0.2rem; }
.card-tag {
  font-size: 0.85rem;
  color: var(--krem);
  letter-spacing: 0.04em;
  margin: 0 0 1rem;
}
.card-desc { margin: 0 0 1.4rem; font-size: 0.97rem; }
.card details { margin: -0.9rem 0 1.4rem; }
.card summary {
  cursor: pointer;
  color: var(--bursztyn);
  font-size: 0.9rem;
  list-style: none;
}
.card summary::-webkit-details-marker { display: none; }
.card summary::after { content: " +"; }
.card details[open] summary::after { content: " −"; }
.card details .card-desc { margin-top: 1rem; }

/* Sygnatura: cennik jak karta menu — kropki prowadzą do ceny */
.pricelist {
  margin: auto 0 1.5rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}
.price-row {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: 0.98rem;
}
.price-row .czas { color: var(--krem); }
.price-row .kropki {
  flex: 1;
  border-bottom: 1px dotted var(--ramka);
  transform: translateY(-4px);
}
.price-row .cena {
  font-weight: 700;
  color: var(--tekst-mocny);
  font-variant-numeric: tabular-nums;
}
.card .btn { align-self: flex-start; }

/* --- O gabinecie --- */
.about-panel {
  background: var(--szklo);
  border: 1px solid var(--ramka);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 2rem;
  max-width: 760px;
}
.about-panel p { margin: 0; font-size: 1.08rem; line-height: 1.75; }

/* --- Kontakt --- */
.contact-grid { display: grid; gap: 1.5rem; }
@media (min-width: 820px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}
.contact-card {
  background: var(--szklo);
  border: 1px solid var(--ramka);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 2rem;
}
.contact-card h3 { font-size: 1.35rem; }
.contact-card address { font-style: normal; margin-bottom: 1.2rem; }
.phone {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--bursztyn);
  text-decoration: none;
  margin: 0.4rem 0 1rem;
}
.phone:hover { color: var(--bursztyn-jasny); }
.hours {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 280px;
}
.hours .dzien { color: var(--krem); }

/* --- Stopka --- */
.site-footer {
  border-top: 0;
  /* Eased (nieliniowy) gradient zamiast twardej krawędzi bloku — ten sam
     kształt krzywej co stopka szklanej karty w rezerwacji (ayesha.css:463),
     tylko przeskalowany do ciemniejszego szczytu (0.8 zamiast 0.5). */
  background: linear-gradient(
    to top,
    rgba(30, 15, 0, 0.8) 0%,
    rgba(30, 15, 0, 0.59) 19%,
    rgba(30, 15, 0, 0.434) 34%,
    rgba(30, 15, 0, 0.306) 47%,
    rgba(30, 15, 0, 0.222) 56.5%,
    rgba(30, 15, 0, 0.155) 65%,
    rgba(30, 15, 0, 0.101) 73%,
    rgba(30, 15, 0, 0.061) 80.2%,
    rgba(30, 15, 0, 0) 100%
  );
  padding-block: 4.4rem 2.2rem;
  margin-top: 3rem;
  /* Gutter tu, nie na .footer-inner (który jest jednocześnie .shell) — ten
     sam wzorzec co .site-header/.header-inner. Bez border, więc padding nie
     obcina tła (background-clip domyślnie border-box) — gradient nadal
     pełnej szerokości, edge-to-edge. */
  padding-inline: clamp(20px, 5vw, 70px);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
}
.footer-logo {
  display: inline-block;
  height: 51px;
  width: auto;
  aspect-ratio: 1153.32 / 489.36;
  /* Trzywarstwowy cień (ostry kontakt -> środek -> miękka poświata), żeby logo
     odcinało się od zdjęcia w tle. Musi siedzieć na INNYM elemencie niż maska:
     filter i mask na tym samym elemencie renderują się w kolejności
     filter -> mask, więc maska przycięłaby cień z powrotem do dokładnego
     kształtu liter, zanim zdąży być widoczny (kształt nadaje ::before). */
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.9))
    drop-shadow(0 4px 4px rgba(0, 0, 0, 0.55))
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45));
}
.footer-logo::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  background-color: var(--bursztyn);
  -webkit-mask: url("../assets/img/logo-ayesha.svg") center / contain no-repeat;
  mask: url("../assets/img/logo-ayesha.svg") center / contain no-repeat;
}

@media (max-width: 819px) {
  .footer-inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

/* --- Animacja reveal (stan nadawany przez js/main.js) --- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .btn { transition: none; }
  .card:hover { transform: none; }
}