/* ==========================================================================
   SCHODY SKIBA — ARKUSZ STYLÓW DEDYKOWANYCH
   Kompatybilny z Tailwind CSS (CDN) i czystym środowiskiem statycznym
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. REGULARNE STYLE BAZOWE & SCROLLBAR
   -------------------------------------------------------------------------- */
@layer base {
  html, body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Wygodne przewijanie z uwzględnieniem przyklejonego nagłówka (Sticky Header) */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem; /* Wysokość nawigacji przy skokach do kotwic */
}

@media (min-width: 768px) {
  html {
    scroll-padding-top: 6.5rem;
  }
}

/* Dostosowany, luksusowy pasek przewijania w kolorystyce drewna */
::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: #f6f3ed;
}

::-webkit-scrollbar-thumb {
  background: #d1c4c0;
  border-radius: 9999px;
  border: 2px solid #f6f3ed;
}

::-webkit-scrollbar-thumb:hover {
  background: #815524;
}

/* --------------------------------------------------------------------------
   2. UKŁAD MASONRY DLA PEŁNEJ GALERII (39 REALIZACJI)
   -------------------------------------------------------------------------- */
.gallery-masonry {
  column-count: 1;
  column-gap: 1.25rem;
}

@media (min-width: 640px) {
  .gallery-masonry {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .gallery-masonry {
    column-count: 3;
  }
}

@media (min-width: 1280px) {
  .gallery-masonry {
    column-count: 4;
  }
}

.gallery-tile {
  break-inside: avoid;
  margin-bottom: 1.25rem;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* --------------------------------------------------------------------------
   3. ANIMACJE FADE-IN (INTERSECTION OBSERVER)
   Dyskretne, profesjonalne ożywienie sekcji bez przesadzonych efektów
   -------------------------------------------------------------------------- */
.fade-in-section {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Opcjonalne opóźnienia kaskadowe dla kart */
.fade-delay-1 { transition-delay: 0.1s; }
.fade-delay-2 { transition-delay: 0.2s; }
.fade-delay-3 { transition-delay: 0.3s; }
.fade-delay-4 { transition-delay: 0.4s; }

/* --------------------------------------------------------------------------
   4. STICKY HEADER & NAWIGACJA
   -------------------------------------------------------------------------- */
#main-header {
  transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

#main-header.is-scrolled {
  box-shadow: 0 4px 20px -2px rgba(26, 20, 18, 0.08);
}

/* Aktywny link w menu nawigacyjnym (ScrollSpy) */
.nav-link.active {
  color: #815524 !important;
  position: relative;
}

.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #815524;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   5. LIGHTBOX & MODAL REALIZACJI
   -------------------------------------------------------------------------- */
#lightbox-modal {
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

#lightbox-img {
  transition: opacity 0.2s ease, transform 0.25s ease;
}

/* Płynny zoom i kursor na kafelkach */
.image-zoom-container img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-zoom-container:hover img {
  transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   6. DOSTĘPNOŚĆ & FOCUS
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #815524;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   7. DRUKOWANIE (PRINT STYLES)
   -------------------------------------------------------------------------- */
@media print {
  header, footer, #lightbox-modal, #mobile-nav-panel, button {
    display: none !important;
  }
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  main {
    padding-top: 0 !important;
  }
}

/* ========================================================================
   SCHODY SKIBA — ULEPSZENIA WERSJI MOBILNEJ (2026)
   Dotyczą tylko ekranów do 767px. Desktop bez zmian.
   ======================================================================== */
@media (max-width: 767px) {
  html { scroll-padding-top: 5.25rem; }
  body { overflow-x: clip; }
  main, section, footer { min-width: 0; }
  img, video, iframe { max-width: 100%; }

  /* Nagłówek i wygodne menu rozwijane */
  #main-header > div:first-child { min-height: 4.75rem; height: auto; padding-top: .7rem; padding-bottom: .7rem; }
  #main-header .font-headline-sm { font-size: 1.1rem; line-height: 1.25; }
  #mobile-nav-toggle-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  #mobile-nav-panel { max-height: calc(100dvh - 5rem); overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
  #mobile-nav-panel a { min-height: 44px; display: flex; align-items: center; line-height: 1.4; }

  /* Rytm sekcji i nagłówków */
  #page-home > section, #page-gallery > section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  #page-home h1 { font-size: clamp(2.05rem, 8.4vw, 3rem); line-height: 1.12; letter-spacing: -.025em; overflow-wrap: break-word; }
  #page-home h2, #page-gallery h1, #page-gallery h2 { font-size: clamp(1.7rem, 7vw, 2.3rem); line-height: 1.2; overflow-wrap: break-word; }
  #page-home h3, #page-gallery h3 { overflow-wrap: break-word; }
  #page-home p, #page-gallery p { overflow-wrap: break-word; }
  #page-home .gap-gutter, #page-gallery .gap-gutter { gap: 1.25rem; }

  /* Przyciski — wygodne w dotyku, bez wyjeżdżania poza ekran */
  #page-home button, #page-home a, #page-gallery button, #page-gallery a { -webkit-tap-highlight-color: transparent; }
  #page-home button, #page-gallery button { max-width: 100%; }
  #page-home button span, #page-gallery button span { overflow-wrap: anywhere; }
  #page-home .inline-flex, #page-gallery .inline-flex { min-width: 0; }

  /* Pierwszy ekran — zdjęcie i karta opisowa */
  #page-home > section:first-child .relative.aspect-\[16\/9\] { aspect-ratio: 4 / 5; max-height: 540px; }
  #page-home > section:first-child .relative.aspect-\[16\/9\] > img { object-position: center; }
  #page-home > section:first-child .absolute.bottom-space-md { padding: 1rem; }
  #page-home > section:first-child .absolute.bottom-space-md h2 { font-size: 1.25rem; line-height: 1.25; }

  /* Formularz — pola i upload czytelne na telefonach */
  #kalkulator-wyceny > div > div > div { min-width: 0; }
  #quote-form { min-width: 0; }
  #quote-form input:not([type="hidden"]):not([type="file"]),
  #quote-form textarea, #quote-form select { max-width: 100%; min-width: 0; font-size: 16px; }
  #quote-form input[type="file"] { max-width: 100%; }
  #quote-form #file-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #quote-form #submit-btn { width: 100%; min-height: 52px; padding: .85rem 1rem; text-align: center; line-height: 1.35; }
  #quote-form #submit-btn span:first-child { overflow-wrap: anywhere; }
  #quote-form .grid > div { min-width: 0; }
  #form-success-message { overflow-wrap: anywhere; }

  /* Galeria: pełna szerokość zdjęć, bez przypadkowego przepełnienia */
  .gallery-masonry { column-count: 1; column-gap: 0; }
  .gallery-tile { margin-bottom: 1rem; }
  .gallery-tile img { width: 100%; height: auto; }
  #lightbox-modal { padding: .5rem; }
  #lightbox-modal img { max-height: 72dvh; object-fit: contain; }

  /* Stopka: długie adresy nie rozszerzają strony */
  footer a, footer p { overflow-wrap: anywhere; }
}

/* Bardzo wąskie telefony (320–374px) */
@media (max-width: 374px) {
  #page-home h1 { font-size: 1.95rem; }
  #page-home > section, #page-gallery > section { padding-left: .9rem; padding-right: .9rem; }
  #kalkulator-wyceny .rounded-xl { padding-left: 1rem; padding-right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in-section { opacity: 1; transform: none; transition: none; }
}

/* FIX: brak poziomego przesuwania całej strony na telefonach (iOS/Android). */
@media (max-width: 767px) {
  html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* fallback dla iOS Safari zamiast samego clip */
  }
  #page-home, #page-gallery, #main-header {
    max-width: 100%;
  }
}