/* =============================================================================
   LECHPAK — custom.css
   Zadanie 03 — CSS styling dla serwisu B2B.
   Zrealizowane 2026-04-21.

   Źródło prawdy: prototype/index-prototype-approved.html (<style> frozen).
   Dodatki: galeria + lightbox (Zadanie 04), print, reduced-motion wrapper.

   Zasada: Tailwind CDN pokrywa ~90% stylów. Ten plik zawiera wyłącznie rzeczy,
   których Tailwind nie daje natywnie (clip-path, SVG patterns, animacje,
   lightbox, form-input variant).
   ============================================================================= */

:root {
  --brand-navy: #0E121A;
  --brand-ecru: #F7F5ED;
  --brand-ecru-deep: #EBE5D0;
  --brand-bluegrey: #7C959B;
  --brand-bluegrey-light: #CBD8D8;
  --brand-taupe: #8C847D;
  --brand-taupe-light: #C9C4BA;
  --brand-coral: #FF8E5C;

  /* Fala 3B — L12. Vertical rhythm vars (dostępne jako opcja dla custom sections) */
  --space-xs: 0.5rem;   /* 8px  — tight gaps */
  --space-sm: 1rem;     /* 16px — default gap */
  --space-md: 1.5rem;   /* 24px — medium spacing */
  --space-lg: 2.5rem;   /* 40px — large spacing */
  --space-xl: 4rem;     /* 64px — section padding mobile */
  --space-2xl: 6rem;    /* 96px — section padding desktop */
  --space-3xl: 8rem;    /* 128px — hero padding */

  /* Content width */
  --content-width-sm: 42rem;   /* 672px — prose max */
  --content-width-md: 68ch;    /* ~68 char — body text */
  --content-width-lg: 80rem;   /* 1280px — container */
}


/* ====== TYPOGRAFIA BAZOWA ====== */
html { scroll-padding-top: 96px; scroll-behavior: smooth; }
body {
  font-family: 'Satoshi', system-ui, sans-serif;
  background: #F7F5ED;
  color: #0E121A;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* iOS — zapobiega zoomowi przy focusie na input */
@media (max-width: 767px) {
  input, textarea, select { font-size: 16px; }
}

/* ====== TRÓJKĄTNE ŚCINKI NAROŻNIKÓW (leitmotiv LECHPAK) ====== */
.notch-tr { clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.notch-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%); }
.notch-bl { clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
.notch-tl { clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px); }
.notch-diag { clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 40px 100%, 0 calc(100% - 40px)); }

/* ====== PATTERN TŁA — tylko w ciemnych sekcjach (subtelny akcent) ====== */
.bg-corrugated-dark {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(247,245,237,0.06) 14px 15px),
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(247,245,237,0.04) 60px 61px);
}
.bg-fluted-dark {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'><path d='M0 6 Q 3 0 6 6 T 12 6 T 18 6 T 24 6 T 30 6 T 36 6 T 42 6 T 48 6 T 54 6 T 60 6' stroke='%23F7F5ED' stroke-opacity='0.08' fill='none' stroke-width='1'/></svg>");
}

/* ====== HERO OVERLAY ====== */
.hero-overlay {
  background: linear-gradient(180deg,
    rgba(14,18,26,0.55) 0%,
    rgba(14,18,26,0.35) 40%,
    rgba(14,18,26,0.85) 100%);
}

/* ====== GRAIN/NOISE OVERLAY ====== */
.grain::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' /></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.08;
  mix-blend-mode: overlay;
}

/* ====== ANIMACJE ====== */
.fade-in-up { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-in-up.visible { opacity: 1; transform: translateY(0); }
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }
.stagger-7 { transition-delay: 0.7s; }

@keyframes bounce-arrow {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(8px); opacity: 1; }
}
.animate-bounce-arrow { animation: bounce-arrow 2.2s ease-in-out infinite; }

/* ====== NAV STICKY ====== */
#mainnav { transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease; }
.nav-scrolled {
  background-color: rgba(14, 18, 26, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(247, 245, 237, 0.08), 0 8px 32px rgba(0,0,0,0.2);
}

/* ====== CARDS HOVER ====== */
.card-tile { transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; }
.card-tile:hover { transform: translateY(-4px); }

/* ====== NUMBER BADGE (persony) ====== */
.num-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  font-family: 'Clash Grotesk'; font-weight: 600;
  font-size: 1.5rem;
  color: #FF8E5C;
  border: 1.5px solid #7C959B;
  background: rgba(247,245,237,0.03);
}

/* ====== BUTTON BASE ====== */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-family: 'Clash Grotesk'; font-weight: 500;
  font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: #FF8E5C; color: #0E121A;
  transition: background 0.3s ease, transform 0.2s ease;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.btn-primary:hover { background: #E87845; transform: translateY(-1px); }

/* btn-secondary — semi-transparent fill (Q3 → A) */
.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8125rem 1.75rem;
  font-family: 'Clash Grotesk'; font-weight: 500;
  font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(247,245,237,0.10);
  color: #F7F5ED;
  border: 1.5px solid rgba(247,245,237,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.btn-secondary:hover {
  background: rgba(247,245,237,0.18);
  border-color: rgba(247,245,237,0.85);
}

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-family: 'Clash Grotesk'; font-weight: 500;
  font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: #FF8E5C;
  transition: gap 0.3s ease;
}
.btn-ghost:hover { gap: 0.625rem; }

/* ====== PILL (standard, dark on light) ====== */
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  font-family: 'Clash Grotesk'; font-weight: 500;
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid currentColor;
  opacity: 0.7;
}
.pill-dot::before { content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 50%; display: inline-block; }

/* Tag nad zdjęciem — białe z wyciemnieniem (feedback B.1) */
.pill-tag-on-image {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  font-family: 'Clash Grotesk'; font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(247, 245, 237, 0.92);
  color: #0E121A;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(14, 18, 26, 0.1), 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* ====== FORM ====== */
.form-input {
  width: 100%;
  padding: 0.875rem 1rem;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(14,18,26,0.2);
  font-family: 'Satoshi'; font-size: 1rem;
  color: #0E121A;
  transition: border-color 0.3s ease;
}
.form-input:focus { outline: none; border-bottom-color: #FF8E5C; }
.form-input::placeholder { color: rgba(14,18,26,0.4); }

/* ====== TYPOGRAFIA MONO ====== */
.mono { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* ====== MOBILE NAV ====== */
.mobile-menu { transform: translateX(100%); transition: transform 0.4s ease; }
.mobile-menu.open { transform: translateX(0); }

/* Mobile submenu (Oferta) — accordion + chevron rotation */
.mobile-nav-toggle { background: transparent; border: none; color: inherit; cursor: pointer; font: inherit; }
.mobile-nav-chevron { transition: transform 0.2s ease; }
.mobile-nav-children { display: flex; }
.mobile-nav-children.hidden { display: none; }

/* ====== ZESTAW ZNAKÓW FE (stopka) — oficjalny FEPW_RP_UE poziom ====== */
.eu-box {
  background: #ffffff;
  border-radius: 2px;
  padding: 1.25rem 1.5rem;
}
@media (min-width: 768px) {
  .eu-box { padding: 1.5rem 2rem; }
}
.eu-box img { display: block; max-width: 100%; height: auto; }

/* ====== TIMELINE 5 KROKÓW — spójne kreski przy każdym (feedback D.2.a) ====== */
.timeline-step { position: relative; }
@media (min-width: 1024px) {
  .timeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 32px;
    left: calc(50% + 40px);
    width: calc(100% - 80px);
    height: 0;
    border-top: 1.5px dashed rgba(124, 149, 155, 0.5);
  }
}

/* ====== FOCUS STATES (WCAG AA) ====== */
*:focus-visible {
  outline: 2px solid #FF8E5C;
  outline-offset: 3px;
  border-radius: 2px;
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline-color: #FF8E5C;
  outline-offset: 4px;
}

/* Skip link — ukryty do focus */
.sr-only:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ====== GALERIA + LIGHTBOX (Zadanie 04) ====== */
.gallery-item { position: relative; overflow: hidden; }
.gallery-item img { transition: transform 0.5s ease; cursor: zoom-in; }
.gallery-item:hover img { transform: scale(1.05); }
.cursor-zoom-in { cursor: zoom-in; }

.lightbox {
  position: fixed; inset: 0;
  background: rgba(14, 18, 26, 0.94);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.active { display: flex; }
.lightbox img {
  max-height: 90vh;
  max-width: 90vw;
  object-fit: contain;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: transparent;
  border: none;
  color: #F7F5ED;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  transition: color 0.2s;
  line-height: 1;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  color: #FF8E5C;
}
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev  { left: 1rem;  top: 50%; transform: translateY(-50%); font-size: 3rem; }
.lightbox-next  { right: 1rem; top: 50%; transform: translateY(-50%); font-size: 3rem; }

.lightbox-counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: #CBD8D8;
  font-family: 'Clash Grotesk', system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* ====== PRINT STYLES ====== */
@media print {
  .lightbox,
  #mainnav,
  #mobilemenu,
  .mobile-menu,
  .no-print { display: none !important; }
  footer .btn-primary,
  footer .btn-secondary { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  body { color: #000; background: #fff; }
  .fade-in-up { opacity: 1 !important; transform: none !important; }
}

/* ====== FORM VALIDATION + AJAX STATES (Zadania B2/B3) ====== */

/* Oznaczenie pól z błędem — czerwony border + subtelny shake */
.contact-form .input-error,
.contact-form input.invalid,
.contact-form textarea.invalid,
.contact-form select.invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25);
}

/* Pole valid (po blur i poprawnej walidacji) */
.contact-form input.field-valid,
.contact-form textarea.field-valid,
.contact-form select.field-valid {
  border-color: rgba(16, 185, 129, 0.6) !important;
}

/* Komunikat błędu pod polem (server-side z api/submit.php) */
.contact-form .error-message {
  display: block;
  color: #fca5a5;
  font-size: 0.8rem;
  margin-top: 0.35rem;
  line-height: 1.4;
}

/* Banner sukcesu — brand coral tint */
.contact-form .form-success-banner {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 142, 92, 0.12);
  border: 1px solid rgba(255, 142, 92, 0.45);
  color: #F7F5ED;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Banner błędu globalnego (429 / 500 / network) */
.contact-form .form-error-global {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #FECACA;
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Spinner loading — w przycisku submit */
.form-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(247, 245, 237, 0.3);
  border-top-color: #F7F5ED;
  border-radius: 50%;
  animation: formSpin 0.8s linear infinite;
  vertical-align: -2px;
  margin-right: 0.5rem;
}

@keyframes formSpin {
  to { transform: rotate(360deg); }
}

/* Submit disabled — subtelny fade */
.contact-form button[type="submit"][disabled] {
  opacity: 0.65;
  cursor: wait;
}

/* ====== REDUCED MOTION — globalny wrapper ====== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in-up { opacity: 1; transform: none; }
  .animate-bounce-arrow { animation: none; }
  .gallery-item img,
  .gallery-item:hover img { transform: none; }
  .card-tile:hover { transform: none; }
  .consent-banner { transition: none !important; transform: none !important; }
}

/* ====================================================== */
/* Cookie Consent Banner (B4) — animacja slide-up + a11y */
/* ====================================================== */
.consent-banner {
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  will-change: transform, opacity;
}
.consent-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
}
/* Gdy baner jest `.hidden` (Tailwind: display:none) – nie animujemy, tylko chowamy. */
.consent-banner.hidden { display: none; }

/* Checkboxy kategorii — spójne z brand */
.consent-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid rgba(247, 245, 237, 0.4);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.consent-checkbox:checked {
  background: #FF8E5C;
  border-color: #FF8E5C;
}
.consent-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: solid #0E121A;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consent-checkbox:focus-visible {
  outline: 2px solid #FF8E5C;
  outline-offset: 2px;
}
.consent-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ======================================================
   H1 — Nav widoczny na stronach bez hero_image
   ====================================================== */
body[data-page-hero="false"] nav[data-main]:not(.nav-scrolled),
body[data-page-hero="false"] nav#mainnav:not(.nav-scrolled) {
  background: rgba(14, 18, 26, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(124, 149, 155, 0.2);
}

/* ======================================================
   LECHPAK PROSE (replacement dla Tailwind typography
   plugin który nie istnieje na CDN)
   ====================================================== */
.lechpak-prose {
  color: var(--brand-navy);
  font-size: 1.0625rem;
  line-height: 1.75;
}
.lechpak-prose > * + * { margin-top: 1.25rem; }
.lechpak-prose p { max-width: 68ch; }

/* Nagłówki — zwięzła interlinia (body ma 1.75, nagłówki nie mogą dziedziczyć) */
.lechpak-prose h1,
.lechpak-prose h2,
.lechpak-prose h3,
.lechpak-prose h4,
.lechpak-prose h5,
.lechpak-prose h6 {
  line-height: 1.2;
  text-wrap: balance;
}

.lechpak-prose h2 {
  font-family: 'Clash Grotesk', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  margin-top: 3rem;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
  position: relative;
  padding-left: 1rem;
}
.lechpak-prose h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 4px;
  height: 0.75em;
  background: var(--brand-coral);
  border-radius: 1px;
}
.lechpak-prose h3 {
  font-family: 'Clash Grotesk', system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.lechpak-prose strong { font-weight: 600; color: var(--brand-navy); }
.lechpak-prose em { color: var(--brand-taupe); font-style: italic; }
.lechpak-prose a {
  color: var(--brand-coral);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.lechpak-prose a:hover { text-decoration-thickness: 2px; }
.lechpak-prose blockquote {
  border-left: 3px solid var(--brand-coral);
  padding: 1rem 0 1rem 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--brand-navy);
  background: linear-gradient(to right, rgba(255, 142, 92, 0.05), transparent);
  font-size: 1.1em;
}
.lechpak-prose blockquote p:last-of-type {
  font-style: normal;
  font-weight: 600;
  font-size: 0.9em;
  margin-top: 1rem;
  color: var(--brand-taupe);
}
.lechpak-prose ul,
.lechpak-prose ol { padding-left: 1.5rem; }
.lechpak-prose li { margin: 0.5rem 0; }
.lechpak-prose ul li::marker { color: var(--brand-coral); }
.lechpak-prose hr {
  position: relative;
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--brand-taupe-light), transparent);
  margin: 3rem 0;
  overflow: visible;
}
/* Fala 3B — L9. Decorative hr (diamond akcent w środku) */
.lechpak-prose hr::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--brand-coral);
  transform: translate(-50%, -50%) rotate(45deg);
}
.lechpak-prose img {
  border-radius: 2px;
  box-shadow: 0 10px 30px -10px rgba(14, 18, 26, 0.15);
  margin: 2rem 0;
}
.lechpak-prose code {
  background: var(--brand-ecru-deep);
  padding: 0.15em 0.4em;
  border-radius: 2px;
  font-size: 0.9em;
}
.lechpak-prose table {
  border-collapse: collapse;
  width: 100%;
  margin: 2rem 0;
  font-size: 0.95em;
}
.lechpak-prose th {
  background: var(--brand-navy);
  color: var(--brand-ecru);
  padding: 0.75rem 1rem;
  text-align: left;
  font-family: 'Clash Grotesk';
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.85em;
}
.lechpak-prose td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--brand-bluegrey-light);
}
.lechpak-prose tr:nth-child(even) td { background: rgba(247, 245, 237, 0.5); }

/* ======================================================
   M4 — Reduced motion + noscript fallback
   ====================================================== */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lightbox { transition: none !important; }
}
.no-js .fade-in-up { opacity: 1; transform: none; }

/* ======================================================
   Fala 1C — H5. Consent banner z-index + viewport guard
   ====================================================== */
#consent-banner {
  position: fixed !important;
  inset: auto 0 0 0;
  z-index: 95; /* powyżej nav z-50, poniżej lightbox z-100 */
  max-height: 90vh;
  overflow-y: auto;
}

@media (max-width: 768px) {
  body:has(#consent-banner:not(.hidden)) main { padding-bottom: 120px; }
}

/* ======================================================
   Fala 1C — M5. Footer mobile accordion (<details>)
   ====================================================== */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ''; }

/* ======================================================
   Fala 1B — H3. Leaflet map overrides (brand)
   ====================================================== */
#contact-map.leaflet-container {
  background: var(--brand-ecru-deep);
  font-family: 'Satoshi', system-ui, sans-serif;
}
#contact-map .leaflet-popup-content-wrapper {
  border-radius: 2px;
  background: var(--brand-navy);
  color: var(--brand-ecru);
}
#contact-map .leaflet-popup-tip { background: var(--brand-navy); }
#contact-map .leaflet-popup-content {
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 0.875rem;
  margin: 0.75rem 1rem;
}
#contact-map .leaflet-popup-content strong {
  font-family: 'Clash Grotesk';
  color: var(--brand-coral);
}
#contact-map .leaflet-control-attribution {
  background: rgba(247, 245, 237, 0.9);
  font-size: 10px;
}
#contact-map [data-map-placeholder] { pointer-events: none; }
#contact-map.map-ready [data-map-placeholder] { display: none; }

/* ======================================================
   Fala 3A — L2. Skip link (WCAG 2.1 AA, visible on focus)
   ====================================================== */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.5rem;
  background: var(--brand-coral);
  color: var(--brand-navy);
  font-family: 'Clash Grotesk', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--brand-navy);
  outline-offset: 2px;
}

/* ======================================================
   Fala 3A — L1. Utility bar desktop offset
   Nav jest fixed top-[40px] na md+ (pod utility bar),
   body potrzebuje scroll-padding uwzględniającego utility+nav.
   ====================================================== */
@media (min-width: 768px) {
  html { scroll-padding-top: 136px; } /* 40px utility + ~96px nav */
}

/* ======================================================
   Fala 3B — L5. Gallery caption on hover
   Miniatury galerii (offer-detail, realizacje-detail, blog-detail)
   mają <figcaption> renderowany absolute — pokazuje się on hover/focus.
   ====================================================== */
.gallery-item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(to top, rgba(14, 18, 26, 0.92), rgba(14, 18, 26, 0));
  color: var(--brand-ecru);
  font-size: 0.85rem;
  font-family: 'Satoshi', system-ui, sans-serif;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  /* reset ewentualnego sr-only */
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  white-space: normal;
  margin: 0;
  border: 0;
  overflow: hidden;
}
.gallery-item:hover figcaption,
.gallery-item:focus-visible figcaption,
.gallery-item:focus-within figcaption {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .gallery-item figcaption { transition: opacity 0.1s; transform: none; }
}

/* ======================================================
   Fala 3B — L8. Drop cap (subtelny) — pierwsza litera
   Aktywne tylko na detail pages: .lechpak-prose.detail-body > p:first-of-type
   offer-detail, realizacje-detail, blog-detail dodają klasę detail-body.
   ====================================================== */
.lechpak-prose.detail-body > p:first-of-type::first-letter {
  font-family: 'Clash Grotesk', system-ui, sans-serif;
  font-size: 3em;
  font-weight: 600;
  line-height: 0.9;
  float: left;
  margin: 0.1em 0.1em 0 0;
  padding: 0.05em 0.15em 0.1em;
  color: var(--brand-coral);
  background: var(--brand-ecru-deep);
  border-radius: 2px;
}
@media (max-width: 640px) {
  .lechpak-prose.detail-body > p:first-of-type::first-letter {
    font-size: 2.5em;
  }
}

/* ======================================================
   Fala 3B — L12. Vertical rhythm utility classes (opcjonalne)
   Templates dalej używają Tailwind `py-16 md:py-24` — te utility
   są dostępne dla przyszłych custom sekcji bazujących na vars.
   ====================================================== */
.section-pad { padding: var(--space-xl) 0; }
.section-pad-lg { padding: var(--space-2xl) 0; }
@media (min-width: 768px) {
  .section-pad { padding: var(--space-2xl) 0; }
  .section-pad-lg { padding: var(--space-3xl) 0; }
}

/* ======================================================
   STICKY NAV COMPACT (scroll > 120px)
   Utility bar fade out + main nav h-20 → h-14 + logo→sygnet
   + compact contact icons (tel/email) pojawiają się w nav.
   ====================================================== */

/* Utility bar — animowana kolaps */
#utility-bar {
  transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
  max-height: 48px;
  overflow: hidden;
}
#utility-bar.utility-collapsed {
  transform: translateY(-100%);
  opacity: 0;
  max-height: 0;
  pointer-events: none;
}

/* Main nav transitions (rozszerzenie istniejących — padding też dostraja wysokość) */
#mainnav {
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease,
              box-shadow 0.3s ease, padding 0.3s ease, top 0.3s ease;
}
#mainnav.nav-scrolled > div {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Stan scrolled — logo swap (tylko desktop >=1024) + compact contact reveal.
   Mobile/tablet (<lg): po scroll zostaje pełne logo — minimalistyczny top bar
   (logo + burger), a kanały kontaktu obsługuje #bottom-bar. */
.nav-logo-full { display: inline-flex; transition: opacity 0.2s ease; }
.nav-logo-compact { display: none; transition: opacity 0.2s ease; }
@media (min-width: 1024px) {
  #mainnav.nav-scrolled .nav-logo-full { display: none; }
  #mainnav.nav-scrolled .nav-logo-compact { display: inline-flex; }
}

/* Compact contact: widoczny tylko na desktop (>=768) i tylko po scroll.
   !important by nadpisać Tailwind utility `.hidden` (display: none). */
@media (min-width: 768px) {
  #mainnav.nav-scrolled .nav-compact-contact { display: flex !important; }
}

/* Scrolled: mniejszy padding przycisków / linków + lekko mniejsza typografia */
#mainnav.nav-scrolled ul li > a,
#mainnav.nav-scrolled .btn-primary,
#mainnav.nav-scrolled .btn-secondary {
  font-size: 0.8125rem;
}
#mainnav.nav-scrolled .btn-primary,
#mainnav.nav-scrolled .btn-secondary {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

/* Desktop: po scroll nav zsuwa się z top:40px na top:0 (utility bar znika) */
@media (min-width: 768px) {
  body.is-scrolled #mainnav {
    top: 0;
  }
}

/* Reduced motion — brak animacji */
@media (prefers-reduced-motion: reduce) {
  #utility-bar,
  #mainnav,
  .nav-logo-full,
  .nav-logo-compact,
  .nav-compact-contact,
  #bottom-bar {
    transition: none !important;
  }
}

/* Bottom bar (mobile <lg) — padding body żeby ostatnia sekcja nie była zasłaniana
   + safe-area inset dla iOS (notch + home indicator). */
@media (max-width: 1023.98px) {
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}
#bottom-bar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Isolation — bottom bar tworzy własny stacking context, żeby coralowy CTA-banner
     pod nim (np. sekcja "Zapytaj o ofertę") nie prześwitywał przez półprzezroczyste
     overlaye ani nie wpływał na percepcję granic sekcji Kontakt (coral-on-coral). */
  isolation: isolate;
}

/* Kontakt (primary w bottom barze) — inset ring + text-shadow utrzymują widoczność
   ikony/tekstu nawet wtedy, gdy pod barem znajduje się coralowy CTA banner
   (bez tego: coral-on-coral = sekcja wizualnie „znika" przy scroll do końca strony). */
#bottom-bar .bottom-bar-contact {
  box-shadow: inset 0 0 0 2px rgba(14, 18, 26, 0.18);
}
#bottom-bar .bottom-bar-contact svg,
#bottom-bar .bottom-bar-contact span {
  filter: drop-shadow(0 1px 0 rgba(247, 245, 237, 0.35));
}