/* ==========================================================================
   CALLA — Usługa (single): Sekcje 1+2 — blok "jeden ekran"
   .usluga-intro opakowuje wspólnie hero (zdjęcie, sekcja 1) i case study
   (nagłówek+opis+CTA, sekcja 2, .usluga-cta-text) tak, żeby razem ZAWSZE
   zajmowały dokładnie wysokość jednego viewportu — bez wewnętrznego scrolla,
   na każdej szerokości/wysokości (decyzja Mike'a, 2026-08-26).
   100svh (small viewport height — stabilne na mobile Safari mimo chowającego
   się paska adresu) z fallbackiem 100vh dla przeglądarek bez wsparcia dla
   jednostek svh (deklaracja przed svh — CSS ignoruje nieznaną wartość i
   zostaje przy pierwszej poprawnej, svh nadpisuje ją tam gdzie wspierane).
   overflow-y (NIE skrócony "overflow") — pionowy scroll wewnątrz bloku jest
   zablokowany, ale pozioma technika full-bleed hero (ujemne marginesy,
   patrz niżej) musi zostać widoczna, inaczej "overflow: hidden" przycinałby
   ją razem z osią Y.
   ========================================================================== */

.usluga-intro {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* Hero — wyłącznie zdjęcie tła, bez tekstu (treść jest w sekcji 2,
   .usluga-cta-text). Full-bleed (100vw/-50vw) — ta sama technika co
   .cooperation/.pillar-video (patrz cooperation.css/pillar-video.css),
   bezpieczna dzięki overflow-x:hidden na <html> (global.css).
   Wysokość NIE jest już sztywna/clamp — zdjęcie jest elastycznym dzieckiem
   .usluga-intro (flex:1 1 auto) i wypełnia całą przestrzeń, która zostanie
   po naturalnej wysokości bloku tekstowego sekcji 2 (min-height:0 pozwala
   mu skurczyć się poniżej intrinsic rozmiaru <img>, inaczej flexbox
   domyślnie nie pozwoliłby mu zejść poniżej tego rozmiaru na niskich
   viewportach). */
.usluga-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background-color: var(--color-bg-alt);
}

.usluga-hero__image,
.usluga-hero__image img {
  width: 100%;
  height: 100%;
}

.usluga-hero__image img {
  display: block;
  object-fit: cover;
}

/* Nawigacja transparentna nad zdjęciem --------------------------------------
   Motyw dziś NIE MA gdzie indziej techniki "header nakłada się na hero jako
   overlay" — .site-header jest wszędzie position:fixed, zawsze z półprzezro-
   czystym białym tłem + blur, a body ma stały padding-top:header-height,
   który zawsze odpycha treść POD header (patrz header.css) — hero na innych
   szablonach (.solution-hero, .dlakogo-hero) zaczyna się więc POD nawigacją,
   nie POD NIĄ w sensie z-index.
   Ponieważ Figma (SinglePage_projektowanie) pokazuje nawigację jako overlay
   wyłącznie nad zdjęciem hero, ten override jest scoped WYŁĄCZNIE przez klasę
   body dodawaną automatycznie przez WP dla tego page_template (body_class()),
   bez modyfikacji header.php/site-header.php/header.css — .site-header
   zostaje position:absolute (płynie z dokumentem, nie jest sticky na tej
   podstronie) tak, żeby faktycznie leżeć NAD hero zamiast go odpychać.
   OTWARTE DO POTWIERDZENIA z Mike'em: czy po przewinięciu poza hero
   nawigacja ma stać się ponownie "sticky" (wymagałoby JS, poza zakresem tej
   rundy) — na razie po scrollu przewija się razem z resztą strony, wyłącznie
   na tym jednym szablonie. */
body.page-template-template-single-usluga-php {
  padding-top: 0;
}

body.page-template-template-single-usluga-php .site-header {
  position: absolute;
  top: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: var(--color-white);
}