/* ------------------------------------------------------------------
   Zdjecia w tresci wpisu – Blocksy Child (janadamski.eu)

   Zalozenie: klient wstawia zdjecia pojedynczo, jedno pod drugim.
   Motyw wyrownuje je do szerokosci kolumny tekstu, ujednolica odstepy
   i podpisy. Kadry nie sa przycinane.
------------------------------------------------------------------ */

.ja-content-media {
	--ja-img-gap: clamp(22px, 3vw, 34px);   /* odstep zdjecie – tekst */
	--ja-img-gap-tight: 12px;               /* odstep miedzy zdjeciami pod rzad */
	--ja-img-radius: 6px;
	--ja-img-caption: 13px;
}

/* ---------- podstawa ---------- */

.ja-content-media img {
	height: auto;
	max-width: 100%;
}

.ja-content-media .ja-img {
	display: block;
	margin: var(--ja-img-gap) 0;
	padding: 0;
	width: auto;          /* nadpisuje inline width z shortcode'u [caption] */
	max-width: 100%;
	clear: both;
}

/* Zdjecia duze – rowno z kolumna tekstu. */
.ja-content-media .ja-img--wide img {
	display: block;
	width: 100%;
	border-radius: var(--ja-img-radius);
}

/* Male pliki nie sa rozciagane, zeby nie zrobily sie rozmyte – tylko wysrodkowane. */
.ja-content-media .ja-img--narrow {
	text-align: center;
}

.ja-content-media .ja-img--narrow img {
	display: inline-block;
	width: auto;
	margin-inline: auto;
	border-radius: var(--ja-img-radius);
}

/* Zdjecia jedno pod drugim – ciasniejszy odstep, zeby czytalo sie jak seria. */
.ja-content-media .ja-img + .ja-img {
	margin-top: var(--ja-img-gap-tight);
}

/* Link wokol zdjecia nie moze dokladac wlasnych marginesow ani ramek. */
.ja-content-media .ja-img a {
	display: block;
	line-height: 0;
	border: 0;
	box-shadow: none;
}

.ja-content-media .ja-img--narrow a {
	display: inline-block;
}

/* ---------- podpisy ---------- */

.ja-content-media .ja-img figcaption,
.ja-content-media .ja-img .wp-caption-text {
	margin: 0;
	padding-top: 8px;
	font-size: var(--ja-img-caption);
	line-height: 1.5;
	text-align: center;
	opacity: 0.75;
}

/* Podpisany kadr trzyma sie razem – wiekszy odstep do nastepnego elementu. */
.ja-content-media .ja-img:has(figcaption),
.ja-content-media .ja-img:has(.wp-caption-text) {
	margin-bottom: var(--ja-img-gap);
}

/* ---------- porzadki po edytorze klasycznym ---------- */

/* Pusty akapit miedzy zdjeciami potrafi zrobic przypadkowa dziure. */
.ja-content-media p:empty {
	display: none;
}

/* Sztywna szerokosc z shortcode'u [caption]. */
.ja-content-media .wp-caption {
	width: auto !important;
	max-width: 100%;
}

/* Oplywanie tekstem zostaje nietkniete – klient czasem tego uzywa. */
.ja-content-media .alignleft,
.ja-content-media .alignright {
	max-width: 50%;
}

@media (max-width: 600px) {
	.ja-content-media .alignleft,
	.ja-content-media .alignright {
		float: none;
		max-width: 100%;
		margin-inline: auto;
	}
}