/* =========================================================================
   Baza: reset, typografia, kontener, siatka, narzędzia
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* cel kotwicy ląduje tuż pod paskiem nawigacji (sekcje mają własny górny odstęp);
     karty, do których prowadzą linki (kalendarz, karty ścieżek), mają dodatkowe scroll-margin-top */
  scroll-padding-top: calc(var(--nav-h-scrolled) + env(safe-area-inset-top, 0px));
  /* miejsce na pasek przewijania zarezerwowane także wtedy, gdy przewijanie jest zablokowane (preloader,
     menu mobilne) — bez tego w Windows układ przeskakiwałby o szerokość paska po zniknięciu kurtyny */
  scrollbar-gutter: stable;
}

/* Lenis (przewijanie miękkie) — style z pakietu lenis.css */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: hidden; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
picture > img { width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
/* :where() zeruje specyficzność resetu — odstępy ustawione klasą listy (np. .team__grid) zawsze wygrywają */
:where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
figure { margin: 0; }
address { font-style: normal; }
[hidden] { display: none !important; }

/* --- Nagłówki --- */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--c-black);
  font-family: var(--font-display);
  font-weight: var(--w-display, 700);
  text-wrap: balance;
  font-kerning: normal;
}
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; letter-spacing: -0.005em; }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; }

.accent { color: var(--c-orange-deep); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-text); text-wrap: pretty; }
.small { font-size: var(--fs-small); line-height: 1.5; font-weight: 500; color: var(--c-muted); }
.num { font-variant-numeric: tabular-nums; }
p { text-wrap: pretty; }

::selection { background: var(--c-orange-soft); color: var(--c-black); }

/* --- Kontener i siatka --- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

.section { padding-block: var(--section-y); position: relative; }
.section--cream { background: var(--c-cream); }
.section--dark { background: var(--c-dark); color: rgba(255, 255, 255, 0.78); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--c-white); }

/* Wzór kropek z notesu: kropka 2 px co 24 px, maskowana gradientem (nie wchodzi pod tekst w środku). */
.dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--c-dots) 1px, transparent 1.3px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 35%, #000 100%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 35%, #000 100%);
}
.section--cream .dots { background-image: radial-gradient(circle at 1px 1px, #E4DDD2 1px, transparent 1.3px); }

/* --- Nagłówek sekcji (pigułka + H2 + lead) --- */
.section-head { display: grid; gap: 20px; }
.section-head--center { justify-items: center; text-align: center; max-width: 780px; margin-inline: auto; }
.section-head--center .lead { max-width: 640px; }
.section-head--split {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: var(--gap);
  align-items: end;
}
.section-head--split .section-head__title { display: grid; gap: 20px; justify-items: start; }
.section-head--split .lead { padding-bottom: 6px; max-width: 520px; justify-self: end; }
.section-head--action {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--gap);
}
.section-head--action .section-head__title { display: grid; gap: 20px; justify-items: start; }
.section-head h2 { max-width: 820px; }

@media (max-width: 1023px) {
  .section-head--split { grid-template-columns: 1fr; row-gap: 20px; }
  .section-head--split .lead { justify-self: start; }
}
@media (max-width: 767px) {
  .section-head--action { grid-template-columns: 1fr; row-gap: 24px; }
}

/* --- Ikony (sprite Lucide, grubość 1,75) --- */
.ic {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.ic--16 { width: 16px; height: 16px; }
.ic--18 { width: 18px; height: 18px; }
.ic--24 { width: 24px; height: 24px; }
.ic--28 { width: 28px; height: 28px; }
.ic--fill { fill: currentColor; }

/* Sygnet jako znak graficzny (separator, tło) */
.sygnet { fill: currentColor; }

/* --- Dostępność --- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed;
  left: 16px; top: 12px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--r-btn);
  background: var(--c-black);
  color: var(--c-white);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-base) var(--e-ui);
}
.skip-link:focus-visible { transform: translateY(0); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 2px;
  border-radius: 6px;
}
.section--dark :focus-visible, .site-footer :focus-visible { outline-color: var(--c-orange); }
/* sekcje i <main> dostają fokus programowo po kliknięciu kotwicy (scroll.js) — bez obrysu całej sekcji */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

/* Separator „/” z notesu LBEA */
.sep { color: var(--c-orange); font-weight: 500; margin-inline: 0.35em; }

/* Znacznik treści przykładowej (opinie i liczby do podmiany) — zawsze widoczny */
.mock-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--c-sand);
  color: var(--c-muted);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.mock-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-orange);
}

/* Ramki zdjęć z object-fit: <picture> musi wypełnić ramkę, żeby obraz mógł ją pokryć */
.hero__frame picture, .path-card__media picture, .about__frame picture, .person__photo picture { display: block; width: 100%; height: 100%; }
:where(nav ul, .site-footer ul, .mobile-menu ul) { list-style: none; margin: 0; padding: 0; }
/* bez mignięcia prostokąta podświetlenia po dotknięciu linku lub przycisku na telefonie (stan :active
   i fokus mają własne style) */
a, button, summary, label, [role="button"], [role="tab"] { -webkit-tap-highlight-color: transparent; }
.nowrap { white-space: nowrap; }
.booking, .path-card { scroll-margin-top: 24px; }
@media (max-width: 479px) { .hide-sm { display: none; } }