/* ============================================================
   Nagłówek przyklejony — brief §101

   „Sticky. Transparentne na Hero. Po scrollowaniu: białe tło,
   zmniejszona wysokość."

   Przezroczystość obowiązuje wyłącznie tam, gdzie pod nagłówkiem
   jest ciemna fotografia (strona główna). Na białych podstronach
   przezroczysty pasek oznaczałby biały tekst na bieli.
   ============================================================ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  transition:
    background-color 240ms var(--ease-out-quart, ease),
    box-shadow 240ms var(--ease-out-quart, ease),
    padding 240ms var(--ease-out-quart, ease);
}

/* Stan po przewinięciu: białe tło, niższy pasek, cień odcinający od treści. */
.masthead.is-scrolled {
  background: var(--bg);
  box-shadow: 0 1px 0 var(--border), 0 6px 24px -18px oklch(0.21 0.008 260 / .5);
}
/* Wysokość pasa trzyma `min-height`, nie padding — nadpisanie samego
   paddingu nic nie dawało, bo minimum i tak wymuszało 72 px. */
.masthead.is-scrolled .wrap { min-height: 56px; }
.masthead.is-scrolled .logo__sub { display: none; }

/* --- Wariant nad fotografią ---------------------------------------- */
/*
 * Hero na stronie głównej jest ciemny, więc nagłówek może na nim leżeć
 * bez własnego tła. Znosimy też obramowanie dolne — nad zdjęciem czytałoby
 * się jak krawędź kadru, a nie jak element nawigacji.
 */
.has-hero .masthead:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
.has-hero .masthead:not(.is-scrolled) .logo__name,
.has-hero .masthead:not(.is-scrolled) .nav__link,
.has-hero .masthead:not(.is-scrolled) .header__tel { color: #fff; }
.has-hero .masthead:not(.is-scrolled) .logo__sub { color: oklch(1 0 0 / .78); }
.has-hero .masthead:not(.is-scrolled) .burger { border-color: oklch(1 0 0 / .55); color: #fff; }

/* Hero zaczyna się pod nagłówkiem, a nie za nim, dopóki nagłówek jest
   nieprzezroczysty. Przy wariancie przezroczystym musi wejść wyżej. */
.has-hero .hero { margin-top: calc(var(--header-h, 72px) * -1); padding-top: calc(var(--header-h, 72px) + var(--s-8)); }

@media (prefers-reduced-motion: reduce) {
  .masthead { transition: none; }
}