/* Nagrobki Skałkowe — style uzupełniające Tailwind (CDN) */

html { scroll-behavior: smooth; }

/* ---- Hero carousel ---- */
.hero-carousel { position: relative; overflow: hidden; }
.hero-slide {
  position: relative;
  min-height: 62vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}
.hero-slide::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,30,20,.78) 0%, rgba(14,30,20,.45) 55%, rgba(14,30,20,.15) 100%);
}
.hero-slide-content { position: relative; z-index: 1; }
.hero-dot { transition: background-color .2s, transform .2s; }
.hero-dot.active { background-color: #fff; transform: scale(1.25); }

/* ---- Fade-in on scroll ---- */
/* Domyślnie w pełni widoczne — animacja pojawiania się włącza się dopiero,
   gdy JS doda klasę .js-reveal na elemencie <html> (patrz site.js). Dzięki
   temu treść (np. zdjęcia) nigdy nie zniknie, jeśli skrypt się nie wykona. */
.reveal { opacity: 1; transform: none; }
.js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js-reveal .reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---- Gallery ---- */
.gallery-item img { transition: transform .35s ease; }
.gallery-item:hover img { transform: scale(1.06); }

/* ---- Lightbox ---- */
#lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(14,20,14,.92); display: none; align-items: center; justify-content: center; }
#lightbox.open { display: flex; }
#lightbox img { max-height: 88vh; max-width: 92vw; border-radius: .25rem; box-shadow: 0 10px 40px rgba(0,0,0,.5); }

/* prevent image drag/save affordance (informational, not a real protection) */
.no-select img { user-select: none; -webkit-user-drag: none; }

/* Tailwind resetuje domyślną szerokość ramki do 0 — same klasy koloru ramki
   (np. border-stone-300) nic nie pokażą bez jawnej szerokości. Przywraca to
   widoczną ramkę na polach formularza (np. formularz kontaktowy). */
input, textarea, select { border-width: 1px; }

/* ---- FAQ accordion ---- */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary { -webkit-tap-highlight-color: transparent; }
.faq-item[open] { background-color: #fff; }

/* ---- Gallery: price badge + caption ---- */
.gallery-price-badge {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  background: rgba(14,30,20,.85); color: #fff; font-size: .7rem; font-weight: 600;
  padding: .2rem .55rem; border-radius: 999px; line-height: 1.4; pointer-events: none;
}
#lightbox-caption { color: #fff; text-align: center; max-width: 92vw; margin-top: .75rem; }
#lightbox-caption .lightbox-price { display: inline-block; margin-top: .25rem; font-weight: 600; color: #cfe8d4; }

/*** dolna belka szybkiego kontaktu (.gtx) ***/
/* Pływająca "pigułka" przypięta do dołu ekranu: Telefon · Facebook · WhatsApp
   (wyróżniony) · Instagram · Do góry. Etykiety są zawsze widoczne (na telefonie
   nie ma hover), a belka leży pod oknami modalnymi (cookies, lightbox). */
.gtx {
  --gtx-bg: rgba(28, 53, 36, .94);      /* ciemna zieleń strony (stone-900) */
  --gtx-line: rgba(255, 255, 255, .14);
  --gtx-text: rgba(255, 255, 255, .88);
  --gtx-accent: #25d366;                /* kolor WhatsApp */
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  max-width: 460px;
  margin: 0 auto;
  z-index: 45;                          /* nad nagłówkiem (40), pod modalami (60) */
}
.gtx-box {
  height: 62px;
  border: 1px solid var(--gtx-line);
  border-radius: 24px;
  background: var(--gtx-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.gtx-container {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0 6px;
  list-style: none;
  align-items: center;
  justify-content: space-around;
}
.gtx__item { position: relative; flex: 1 1 0; display: flex; justify-content: center; }
.gtx__item-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 52px;
  padding: 6px 4px;
  border-radius: 16px;
  color: var(--gtx-text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, transform .2s ease, color .2s ease;
}
.gtx__item-icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; }
.gtx__item-icon svg { width: 22px; height: 22px; }
.gtx__item-text { font-size: 10.5px; line-height: 1; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }

.gtx__item-link:hover,
.gtx__item-link:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; }
.gtx__item-link:active { transform: scale(.94); }
.gtx__item-link:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* Wyróżniona akcja (WhatsApp) — okrągły przycisk wystający ponad belkę */
.gtx__item--main .gtx__item-link { padding: 0 4px 5px; background: none !important; }
.gtx__item--main .gtx__item-icon {
  width: 54px;
  height: 54px;
  margin-top: -26px;
  border-radius: 50%;
  background: var(--gtx-accent);
  color: #fff;
  border: 4px solid var(--gtx-bg);
  box-shadow: 0 8px 18px rgba(37, 211, 102, .35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gtx__item--main .gtx__item-icon svg { width: 26px; height: 26px; }
.gtx__item--main .gtx__item-link:hover .gtx__item-icon { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(37, 211, 102, .45); }

/* Miejsce na belkę, żeby nie zasłaniała stopki i końca strony */
body > footer { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }  /* miejsce na belkę wewnątrz ciemnej stopki */
html { scroll-behavior: smooth; }

@media (max-width: 380px) {
  .gtx { left: 6px; right: 6px; }
  .gtx__item-link { min-width: 44px; }
  .gtx__item-text { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gtx * { transition: none !important; }
}
@media print { .gtx { display: none; } body > footer { padding-bottom: 0; } }