/* =====================================================================
   GAŁĄŹ FOTOGRAFICZNA
   ===================================================================== */

/* ---------------------------------------------------------------------
   NAGŁÓWEK ZE ZDJĘCIEM
   --------------------------------------------------------------------- */

.dm-hero-foto {
	position: relative;
	min-height: 62vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.dm-hero-foto--sesja {
	min-height: 52vh;
}

.dm-hero-foto__tlo {
	position: absolute;
	inset: 0;
	background: var(--dm-tlo-zdjecia);
}

.dm-hero-foto__tlo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

/*
 * Dwie warstwy zacienienia w jednym elemencie: pionowa buduje kontrast
 * pod panelem, pozioma ratuje czytelność tam, gdzie po lewej stronie
 * kadru wypada jasne niebo. Jedna warstwa musiałaby być tak mocna,
 * że zdjęcie przestaje być widoczne.
 */
.dm-hero-foto__zacienienie {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, var(--dm-zaslona-2-a66), var(--dm-zaslona-2-a12) 58%, var(--dm-zaslona-2-a0)),
		linear-gradient(to top, var(--dm-zaslona-2-a72), var(--dm-zaslona-2-a12) 66%);
}

.dm-hero-foto__panel {
	position: relative;
	max-width: 62rem;
	margin: 0 clamp(2.2rem, 6vw, 9.2rem) clamp(3.4rem, 5vw, 6.2rem);
	padding: clamp(2.8rem, 3.4vw, 4.2rem);
	background: var(--dm-cien-ciemny-a82);
	border-radius: var(--dm-r-panel);
	color: var(--dm-tekst-jasny);
}

.dm-hero-foto__panel--mocny {
	max-width: 66rem;
	background: var(--dm-cien-ciemny-a92);
}

.dm-hero-foto__tytul {
	font-family: var(--dm-pismo-tyt);
	font-weight: 300;
	font-size: clamp(3.4rem, 4.2vw, 5.8rem);
	line-height: 1.04;
	margin: 1.2rem 0 0;
	color: var(--dm-tekst-jasny);
}

.dm-hero-foto--sesja .dm-hero-foto__tytul {
	font-size: clamp(3.2rem, 3.8vw, 5.2rem);
	line-height: 1.06;
}

/*
 * Tekst na ciemnym panelu jest jasny, nie szary. Wartość poniżej
 * to biel o obniżonej nieprzezroczystości - to jedyny dopuszczalny
 * sposób budowania hierarchii na ciemnym tle.
 */
.dm-hero-foto__lead {
	font-size: var(--dm-txt-akapit);
	line-height: 1.85;
	color: var(--dm-tekst-jasny-a88);
	max-width: 44rem;
	margin: 1.6rem 0 2.4rem;
}

.dm-hero-foto--sesja .dm-hero-foto__lead {
	margin-bottom: 0;
	max-width: 46rem;
}

.dm-hero-foto__akcje {
	display: flex;
	gap: 1.4rem;
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
   KARTY RODZAJÓW SESJI
   --------------------------------------------------------------------- */

.dm-karty-sesji {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
	gap: var(--dm-gap);
}

.dm-karta-sesji {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--dm-ramka);
	border-radius: var(--dm-r-blok);
	overflow: hidden;
	transition: box-shadow 300ms, transform 300ms;
}

.dm-karta-sesji:hover {
	box-shadow: 0 18px 40px var(--dm-cien-cieply-a12);
	transform: translateY(-3px);
}

/*
 * Kadr kwadratowy zamiast pionowego 4:5 - 27.08.2026.
 * Na zdjęciu rodzaju sesji liczy się scena, a nie wzrost człowieka:
 * pionowy kadr obcinał scenografię z obu stron.
 */
.dm-karta-sesji__kadr {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--dm-tlo-zdjecia);
}

.dm-karta-sesji__kadr img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dm-czas-hover) var(--dm-krzywa);
}

.dm-karta-sesji:hover .dm-karta-sesji__kadr img {
	transform: scale(1.04);
}

.dm-karta-sesji__tresc {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 2.2rem 2.2rem 2.4rem;
}

.dm-karta-sesji__tytul {
	display: block;
	font-family: var(--dm-pismo-tyt);
	font-size: 2.6rem;
	line-height: 1.15;
}

.dm-karta-sesji__opis {
	display: block;
	font-size: var(--dm-txt-maly);
	line-height: 1.8;
	color: var(--dm-tekst-2);
	margin: 1.2rem 0 1.4rem;
}

.dm-karta-sesji__meta {
	display: block;
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-3);
	margin-bottom: 1.8rem;
}

.dm-karta-sesji__cta {
	margin-top: auto;
	width: 100%;
}

/* ---------------------------------------------------------------------
   PAKIETY
   --------------------------------------------------------------------- */

.dm-pakiety {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
	gap: var(--dm-gap);
	align-items: stretch;
}

.dm-pakiet {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--dm-ramka);
	border-radius: var(--dm-r-blok);
	padding: 3rem 2.8rem 2.8rem;
	background: var(--dm-biel);
}

.dm-pakiet--wyrozniony {
	background: var(--dm-tlo-jasne);
	border-color: var(--dm-ramka-3);
}

.dm-pakiet__nazwa {
	font-family: var(--dm-pismo-tyt);
	font-weight: 400;
	font-size: 2.7rem;
	line-height: 1.2;
	margin: 0;
}

.dm-pakiet__podtytul {
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-3);
	margin-top: .4rem;
}

.dm-pakiet__cena {
	font-family: var(--dm-pismo-tyt);
	font-size: 3.8rem;
	line-height: 1.2;
	margin: 1.8rem 0 0;
}

.dm-pakiet__cta {
	margin-top: 2.2rem;
}

/*
 * Przycisk musi stać na tej samej wysokości we wszystkich kartach
 * rzędu, niezależnie od liczby pozycji na liście. `margin-top: auto`
 * na liście, a nie na przycisku: przycisk ma nad sobą stały odstęp.
 *
 * Górny margines wszedł 28.08.2026 w miejsce separatora, który stał
 * między ceną a listą - bez niego cena i pierwsza pozycja listy
 * stały jedna na drugiej.
 */
.dm-pakiet .dm-lista-ptaszki {
	margin-top: 2.2rem;
	margin-bottom: auto;
}

.dm-pakiety__nota {
	text-align: center;
	font-size: var(--dm-txt-maly);
	color: var(--dm-tekst-3);
	margin-top: 2.2rem;
}

/* ---------------------------------------------------------------------
   KONTAKT
   --------------------------------------------------------------------- */

/*
 * Po lewej treść strony, po prawej formularz.
 *
 * Kolumny nie są równe: formularz ma stałą, węższą szerokość, a reszta
 * bierze to, co zostało. Przy dwóch równych kolumnach pola formularza
 * robiły się szersze niż wiersz tekstu obok i to one przyciągały wzrok
 * jako pierwsze.
 *
 * Poniżej progu kolumny układają się jedna pod drugą - najpierw to,
 * po co ktoś tu wszedł, potem formularz.
 */
.dm-kontakt__uklad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(32rem, 46rem);
	gap: clamp(2.8rem, 4vw, 5.4rem);
	align-items: start;
}

@media (max-width: 61.99em) {

	.dm-kontakt__uklad {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Nagłówek stojący w kolumnie, nie nad całą stroną - wyrównany
 * do lewej razem z tekstem, który pod nim stoi.
 */
.dm-naglowek-sekcji.dm-naglowek-sekcji--lewo {
	text-align: left;
	margin-bottom: 0;
}

.dm-kontakt__formularz {
	border: 1px solid var(--dm-ramka);
	border-radius: var(--dm-r-blok);
	padding: clamp(2.6rem, 3vw, 3.8rem);
}

.dm-kontakt__kolumna {
	display: flex;
	flex-direction: column;
	gap: 2.2rem;
}

.dm-dane {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	font-size: var(--dm-txt-akapit);
	line-height: 1.6;
	color: var(--dm-tekst-ciemny);
}

.dm-dane li {
	display: flex;
	gap: 1.2rem;
	align-items: center;
}

.dm-dane__ikona {
	flex: 0 0 auto;
	display: flex;
	color: var(--dm-tekst-slaby);
}

.dm-faq {
	margin-top: 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	font-size: var(--dm-txt-maly);
	line-height: 1.8;
	color: var(--dm-tekst-2);
}

.dm-faq__pytanie {
	font-weight: 400;
	color: var(--dm-tekst);
}

/* ---------------------------------------------------------------------
   RAMKA Z LISTĄ NA PODSTRONIE SESJI
   --------------------------------------------------------------------- */

.dm-ramka-listy {
	padding: 2.6rem 2.8rem;
}

/* ---------------------------------------------------------------------
   PRZYCISKI GAŁĘZI FOTOGRAFICZNEJ

   Zieleń zamiast czerni (28.08.2026). Odcień wywodzi się z pierwszego
   koloru tęczy w znaku firmowym (#9BD9A6), przyciemnionego tak, żeby
   biały napis miał na nim kontrast 4,66:1 - pastel z logo daje pod
   białym tekstem około 1,7:1, czyli napis nieczytelny w słońcu
   i odpadający przy każdym sprawdzeniu dostępności.

   Sklep zostaje przy czerni: obie gałęzie mają wspólną stopkę i wspólny
   znak, ale osobne nagłówki i osobny język kolorów.
   --------------------------------------------------------------------- */

/*
 * CZERWIEŃ ZAMIAST ZIELENI - od 16.09.2026.
 * Poprzednie wartości: zieleń #457F58 i #3F7550, potem ciemna czerwień
 * #8B2A2E i #722226. Od 17.09.2026 jaśniejszy odcień: ciemna czerwień
 * na jasnym tle nagłówka wyglądała na prawie brązową, a ta sama barwa
 * na ciemnym panelu zdjęcia - na żywą czerwień. Kontrast białego napisu
 * na #A93439 to około 6,5:1.
 */
.dm-galaz-foto {
	--dm-akcent-foto: #A93439;
	--dm-akcent-foto-ciemny: #8B2A2E;
}

.dm-galaz-foto .dm-btn--pelny {
	background: var(--dm-akcent-foto);
	border-color: var(--dm-akcent-foto);
	color: var(--dm-tekst-jasny);
}

.dm-galaz-foto .dm-btn--pelny:hover,
.dm-galaz-foto .dm-btn--pelny:focus-visible {
	background: var(--dm-akcent-foto-ciemny);
	border-color: var(--dm-akcent-foto-ciemny);
	color: var(--dm-tekst-jasny);
}

.dm-galaz-foto .dm-btn--kontur {
	color: var(--dm-akcent-foto);
	border-color: var(--dm-akcent-foto);
}

.dm-galaz-foto .dm-btn--kontur:hover,
.dm-galaz-foto .dm-btn--kontur:focus-visible {
	background: var(--dm-akcent-foto);
	border-color: var(--dm-akcent-foto);
	color: var(--dm-tekst-jasny);
}

/*
 * Przycisk w panelu podstrony sesji.
 *
 * Zdanie wprowadzające ma tam wyzerowany dolny margines, bo przez
 * pół roku było ostatnim elementem panelu. Odstęp bierze na siebie
 * wiersz z przyciskiem.
 */
.dm-hero-foto--sesja .dm-hero-foto__akcje {
	margin: 2.8rem 0 0;
}

/* ---------------------------------------------------------------------
   KARTA Z KALENDARZEM NA STRONIE KONTAKTU

   Wszystko przy lewej krawędzi, w jednej linii: tytuł, separator, zdanie,
   przycisk i skróty kontaktu. Wcześniej tytuł i przycisk szły środkiem,
   a zdanie do lewej - trzy różne osie w jednej karcie.
   --------------------------------------------------------------------- */

.dm-karta-pastelowa--lewo {
	text-align: left;
}

.dm-karta-pastelowa--lewo .dm-karta__tytul,
.dm-karta-pastelowa--lewo .dm-karta__opis {
	text-align: left;
}

.dm-karta-pastelowa--lewo .dm-separator {
	margin: 1.4rem 0 1.6rem;
}

.dm-karta__akcje {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin-top: 2rem;
}

.dm-karta__ikony {
	display: inline-flex;
	gap: .8rem;
}

/*
 * Ikona kontaktu jest przyciskiem, nie ozdobnikiem: ma własne pole
 * dotyku 44 px, czyli tyle, ile najmniejszy cel wskazywany palcem.
 * Kolor bierze z akcentu gałęzi, więc zmienia się razem z przyciskami.
 */
.dm-ikona-kontakt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.4rem;
	height: 4.4rem;
	border: 1px solid var(--dm-akcent-foto, var(--dm-tekst));
	border-radius: 50%;
	color: var(--dm-akcent-foto, var(--dm-tekst));
	background: var(--dm-biel-a60);
	transition: background-color var(--dm-btn-czas), color var(--dm-btn-czas);
}

.dm-ikona-kontakt:hover,
.dm-ikona-kontakt:focus-visible {
	background: var(--dm-akcent-foto, var(--dm-tekst));
	color: var(--dm-tekst-jasny);
}

.dm-ikona-kontakt svg {
	display: block;
}

/*
 * Zdanie wprowadzające w kolumnie zaczyna się tam, gdzie nagłówek.
 *
 * `.dm-lead` ma ograniczoną szerokość i automatyczne marginesy boczne,
 * bo powstał dla nagłówka stojącego na środku strony. W kolumnie
 * wyrównanej do lewej te marginesy odsuwały je o kilkadziesiąt pikseli
 * od nagłówka i separatora - wyglądało to jak wcięcie akapitu.
 */
.dm-naglowek-sekcji--lewo .dm-lead {
	margin-inline: 0;
}

/* Telefon i e-mail pod zaproszeniem do rozmowy. */
.dm-kontakt__ikony {
	display: flex;
	gap: .8rem;
	margin: 2rem 0 0;
}

/* ---------------------------------------------------------------------
   INFORMACJE PRZED SESJĄ - rozwijane sekcje na podstronie sesji
   (od 16.09.2026)

   Akordeon ma wygląd z karty produktu (`sklep.css`). Tutaj tylko
   szerokość kolumny i odstępy - regulamin czytany na całą szerokość
   ekranu ma za długie wiersze.
   --------------------------------------------------------------------- */

.dm-informacje-sesji {
	max-width: 86rem;
	margin-inline: auto;
}

.dm-informacje-sesji .dm-akordeon {
	margin-top: 2.4rem;
}

.dm-informacje-sesji .dm-akordeon__tresc ol {
	padding-left: 2rem;
}

/* Podtytuły w opisie sesji (scenki). */
.dm-sesja .dm-tresc-akapitowa h3 {
	font-family: var(--dm-pismo-tyt);
	font-weight: 400;
	line-height: 1.3;
	margin: 3rem 0 1rem;
	color: var(--dm-tekst);
}

.dm-sesja .dm-tresc-akapitowa h3 + p {
	margin-top: 0;
}

/* Opis sesji bez listy „W każdej sesji" - jedna wyśrodkowana kolumna. */
.dm-sesja__opis-sam > div {
	max-width: 68rem;
	margin-inline: auto;
}

.dm-sesja__opis-sam .dm-tresc-akapitowa {
	max-width: none;
}

/* ---------------------------------------------------------------------
   PANEL NA ZDJĘCIU PODSTRONY SESJI - TELEFON (od 16.09.2026)

   Na wąskim ekranie panel z nagłówkiem, zdaniem i przyciskiem zajmował
   prawie całą wysokość zdjęcia i zakrywał osobę w kadrze - na sesjach
   przedszkolnych nie było widać dziecka wcale. Na telefonie zdjęcie
   stoi więc w całości (proporcja kadru 3:2, bez przycinania), a panel
   pod nim, lekko na nie nachodząc.
   --------------------------------------------------------------------- */

@media (max-width: 48em) {

	.dm-hero-foto--sesja {
		display: block;
		min-height: 0;
		padding-bottom: 2.4rem;
	}

	.dm-hero-foto--sesja .dm-hero-foto__tlo {
		position: relative;
		aspect-ratio: 3 / 2;
	}

	.dm-hero-foto--sesja .dm-hero-foto__tlo img {
		object-position: center;
	}

	.dm-hero-foto--sesja .dm-hero-foto__zacienienie {
		display: none;
	}

	.dm-hero-foto--sesja .dm-hero-foto__panel {
		margin: -3.2rem 1.6rem 0;
	}
}

/* ---------------------------------------------------------------------
   PASEK „W KAŻDEJ SESJI" NAD OPISEM (od 16.09.2026)

   Cztery krótkie pozycje w jednym rzędzie, w ramce, między nagłówkiem
   a opisem. Na wąskim ekranie zawijają się same.
   --------------------------------------------------------------------- */

.dm-pasek-sesji {
	margin: 2.6rem 0 3.2rem;
	padding: 2rem 2.4rem;
	border: 1px solid var(--dm-ramka);
	border-radius: var(--dm-r-blok);
}

.dm-pasek-sesji .dm-nadtytul {
	margin: 0;
}

/* Dwie kolumny po dwie pozycje - cztery w rzędzie nie mieszczą się
   w szerokości opisu i czwarta spadała sama do drugiego wiersza. */
.dm-lista-ptaszki--rzad {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 3.2rem;
	margin-top: 1.2rem;
}

@media (max-width: 30em) {

	.dm-lista-ptaszki--rzad {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
   TEKST NA ŚRODKU - PANELE I KARTY GAŁĘZI FOTOGRAFICZNEJ (od 17.09.2026)

   Panel na zdjęciu podstrony sesji, slajd strony Fotografia, karta
   rodzaju sesji i opis sesji: wszystko na jednej osi, pośrodku.
   Separatory stoją na środku już w szablonach.
   --------------------------------------------------------------------- */

.dm-hero-foto--sesja .dm-hero-foto__panel {
	text-align: center;
}

.dm-hero-foto--sesja .dm-hero-foto__lead {
	margin-inline: auto;
}

.dm-hero-foto--sesja .dm-hero-foto__akcje {
	justify-content: center;
}

/* Slajd strony Fotografia: od 29.09.2026 reguła wspólna w sklep.css. */

.dm-karta-sesji__tresc {
	text-align: center;
}

.dm-sesja__opis-sam > div {
	text-align: center;
}

/*
 * Na komputerze panel stoi w połowie wysokości zdjęcia, a nie przy
 * dolnej krawędzi. Na telefonie panel jest pod zdjęciem (blok wyżej),
 * więc reguła działa tylko od progu tabletu.
 */
@media (min-width: 48.0625em) {

	.dm-hero-foto--sesja {
		align-items: center;
	}

	.dm-hero-foto--sesja .dm-hero-foto__panel {
		margin-block: clamp(3.4rem, 5vw, 6.2rem);
	}

	.dm-hero-foto--panel-srodek .dm-hero-foto__panel {
		margin-inline: auto;
	}
}

/* ---------------------------------------------------------------------
   O MNIE NA STRONIE FOTOGRAFIA (od 17.09.2026)

   Przy długim tekście koło z portretem stało w połowie wysokości
   sekcji, więc na komputerze najpierw było widać sam tekst i pustą
   lewą kolumnę. Kolumny zaczynają się teraz na jednej wysokości,
   a portret jedzie przy przewijaniu obok tekstu.
   --------------------------------------------------------------------- */

@media (min-width: 48.0625em) {

	.dm-sekcja--historia .dm-kolo {
		position: sticky;
		top: 12rem;
	}
}

/* ---------------------------------------------------------------------
   SZEROKIE ZDJĘCIE POD GALERIĄ SESJI (od 17.09.2026)
   --------------------------------------------------------------------- */

.dm-zdjecie-szerokie {
	margin: 0;
	border-radius: var(--dm-r-blok);
	overflow: hidden;
}

.dm-zdjecie-szerokie img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------
   O MNIE - KOLUMNA Z TEKSTEM NA ŚRODKU (od 18.09.2026)

   Portret zostaje po lewej, a wszystko w prawej kolumnie - nadtytuł,
   nagłówek, kreska, tekst, cytat i przycisk - stoi na jednej osi
   pośrodku tej kolumny.
   --------------------------------------------------------------------- */

.dm-sekcja--historia .dm-dwie-kolumny > *:not(.dm-kolo) {
	text-align: center;
}

/* Blok akapitów i cytat mają własne `max-width`. Bez marginesu
   automatycznego stoją przy lewej krawędzi kolumny, choć wiersze w środku
   są już wyśrodkowane - widać to jako tekst przesunięty o kilkadziesiąt
   pikseli w lewo względem nagłówka i kreski nad nim. */
.dm-sekcja--historia .dm-dwie-kolumny .dm-tresc-akapitowa,
.dm-sekcja--historia .dm-dwie-kolumny .dm-cytat {
	margin-inline: auto;
}

.dm-sekcja--historia .dm-dwie-kolumny .dm-przyciski-rzad {
	justify-content: center;
}