/* Photos of the practice; framing is reversible, full frames open on tap. */
.photography-nine .editorial-photo {
  position:relative; display:block; overflow:hidden; border-radius:26px;
  border:7px solid var(--surface); background:var(--bg); margin:0;
  box-shadow:8px 9px 0 #a0b7a9; isolation:isolate;
}
.photography-nine .editorial-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.photography-nine .editorial-photo:focus-visible { outline:3px solid #a88948; outline-offset:6px; }
.photography-nine .photo-zoom {
  position:absolute; right:12px; bottom:12px; display:grid; place-items:center;
  width:38px; height:38px; border-radius:50%; background:var(--surface); color:var(--green);
  font-size:23px; box-shadow:0 2px 10px #132c2626;
}
.photography-nine .care-photo{ aspect-ratio:21/9; margin-top:var(--space-4); border-width:5px; border-radius:18px; box-shadow:5px 6px 0 var(--edge); }
.photography-nine .care-photo img { object-position:70% 50%; }

@media(max-width:699px) {
  .photography-nine .editorial-photo { border-width:5px; border-radius:20px; box-shadow:5px 6px 0 var(--sage); }
  .photography-nine .care-photo{ aspect-ratio:16/9; margin-top:var(--space-4);}

  .photography-nine .photo-zoom { width:34px; height:34px; right:9px; bottom:9px; font-size:21px; }
}

/* Hero: prawdziwe zdjecie w miejscu sceny WebGL. Siatke ustawia composition.css — tu tylko ksztalt. */
.photography-nine .hero-photo {
  grid-column:2; grid-row:3; justify-self:center; align-self:center;
  width:100%; margin:0; z-index:2;
}
.photography-nine .hero-photo img {
  display:block; width:100%; height:auto; aspect-ratio:3/2;
  object-fit:cover; object-position:50% 48%;
  border-radius:24px;
  box-shadow:0 28px 44px -30px #11292399, 0 4px 14px -8px #11292344;
}
@media(max-width:1023px) {
  .photography-nine .hero-photo { grid-column:1 / -1; grid-row:3; max-width:600px; }
  .photography-nine .hero-photo img { border-radius:20px; }
}
@media(max-width:699px) {
  .photography-nine .hero-photo { order:3; width:calc(100% + 40px); margin:4px -20px 20px; align-self:center; }
  .photography-nine .hero-photo img { border-radius:18px; }
}


/* ══ RUCH: oddech zdjęć ═════════════════════════════════════════════════════
   Tokeny czasu i krzywej stoją na końcu refinement.css (blok „RUCH").

   PUŁAPKA 1 — skala idzie niezależną własnością `scale`, nie `transform`.
   `.portrait` ma własny transform (rotate 4deg plus scroll-lift dopisywany
   przez composition.js), a `.service-card:hover .service-art img` ma
   translateY+scale. Oddech pisany w transform kasowałby jedno i drugie.

   PUŁAPKA 2 — rosnące zdjęcie wychodzi poza ramkę. Każde z czterech musi
   mieć kadr, który je przycina. `.editorial-photo` i `.map-holder` przycinały
   już wcześniej; `.hero-photo` nie przycinał nic, a `.portrait` ma 10 px
   tła ramki, które rosnące zdjęcie by zjadło — stąd `.foto-kadr` w index.html.

   Cykl idzie 1 → 1.026 i nigdy poniżej 1: zejście pod 1 odsłoniłoby tło kadru.
   Cztery różne czasy i ujemne opóźnienia rozsuwają fazy — inaczej cała strona
   pulsowałaby równo, a to widać. */

@keyframes oddech{from{scale:1}to{scale:var(--oddech-skala)}}

/* Hero. Cień siedział na <img>, a przycięcie musi być na <figure> —
   overflow:hidden na rodzicu ucięłoby cień dziecka, więc cień przenosi się
   na figure, a img go oddaje. */
/* Rant jak pod kartami „Formy terapii” (refinement.css) — zdjęcie wygląda na
   uniesioną płytkę. Karty na moreli mają rant musztardowy; zdjęcie leży na mięcie
   hero, więc rant jest w ciemniejszej szałwii (ten sam co przy .editorial-photo).
   Rant idzie pierwszy, więc leży nad miękkimi cieniami. */
.photography-nine .hero-photo{overflow:hidden;border-radius:24px;box-shadow:0 5px 0 #a0b7a9,0 28px 44px -30px #11292399,0 4px 14px -8px #11292344}
.photography-nine .hero-photo img{box-shadow:none;animation:oddech var(--oddech-czas) var(--oddech-krzywa) infinite alternate}

/* Portret. Kadr ma promień ramki pomniejszony o jej obwódkę (36 − ~9,5 px),
   więc krzywizny zdjęcia i ramki biegną równolegle. Wcześniejszy łuk
   120 px w ramce o promieniu 36 px zostawiał w górnych rogach jasny klin. */
.photography-nine .portrait .foto-kadr{display:block;overflow:hidden;border-radius:26px}
.photography-nine .portrait .foto-kadr img{animation:oddech calc(var(--oddech-czas) + 4s) var(--oddech-krzywa) -8s infinite alternate}

.photography-nine .editorial-photo img{animation:oddech calc(var(--oddech-czas) + 2s) var(--oddech-krzywa) -14s infinite alternate}
.photography-nine .map-holder>img{animation:oddech calc(var(--oddech-czas) - 2s) var(--oddech-krzywa) -5s infinite alternate}

/* Zdjęcie poza ekranem nie ma po co oddychać. Klasę zdejmuje i nakłada
   refinement.js; gdy JS nie wstanie, animacje po prostu chodzą. */
.photography-nine .hero-photo.foto-spi img,
.photography-nine .portrait .foto-kadr.foto-spi img,
.photography-nine .editorial-photo.foto-spi img,
.photography-nine .map-holder.foto-spi>img{animation-play-state:paused}

@media (max-width:699px){
  .photography-nine .hero-photo{border-radius:18px}
  .photography-nine .portrait .foto-kadr{border-radius:20px} /* ramka 28 px − obwódka 8 px */
}

/* Zdjęcie w ramce przybliża się po najechaniu, jak na irenaustka.pl (2026-09-26).
   `transform`, bo oddech animuje osobną własność `scale` — oba się składają. */
@media (min-width:981px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  .photography-nine :is(.hero-photo,.portrait,.editorial-photo,.care-photo,.map-holder) img{ transition:transform .6s cubic-bezier(.16,1,.3,1); }
  .photography-nine :is(.hero-photo,.portrait,.editorial-photo,.care-photo,.map-holder):hover img{ transform:scale(1.07); }
}