/*
 * Fryzjer Bartek — Single Service
 * Uporządkowana wersja CSS.
 *
 * Zmiany organizacyjne:
 * - połączone wszystkie powtarzające się @media dla tych samych breakpointów,
 * - style bazowe znajdują się przed media queries,
 * - hover / touch / reduced-motion są zebrane w jednym miejscu,
 * - zachowana została kolejność reguł wewnątrz każdego typu @media.
 */
/* =========================================================
   SINGLE SERVICE — HERO
   ========================================================= */


/* =========================================================
   GŁÓWNY HERO
   ========================================================= */

section.showcase-hero.service-hero {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 100%;

	padding-top: 160px;

	background-image:
		var(--bartek-panel-glow);

	background-position: center;
	background-size: cover;
}


/* Ciemna warstwa nad tłem */

section.showcase-hero.service-hero::before {
	content: "";

	position: absolute;
	inset: 0;

	display: block;

	background:
		linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.20) 0%,
			rgba(102, 102, 102, 0.20) 100%
		),
		linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.90) 0%,
			rgba(0, 0, 0, 0.90) 100%
		);

	z-index: 1;
}


/* Dolne dekoracyjne zakończenie */

section.showcase-hero.service-hero::after {
	content: "";

	position: relative;

	z-index: 2;

	display: block;

	width: 100%;

	aspect-ratio: 1920 / 94;

	margin-top: 20px;

	background-image:
		url("/wp-content/themes/fryzjerbartek/assets/images/backgrounds/hero-bottom.png");

	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;
}


/* =========================================================
   INNER
   ========================================================= */

div.showcase-hero__inner.service-hero__inner {
	position: relative;

	z-index: 3;

	display: flex;
	align-items: center;

	gap: 48px;

	/*
	 * KLUCZOWA RÓŻNICA WZGLĘDEM HOMEPAGE:
	 * standardowa szerokość motywu.
	 */
	width: var(--theme-container-width);
	max-width: var(--theme-normal-container-max-width);

	margin-inline: auto;
}


/* =========================================================
   LEWA KOLUMNA
   ========================================================= */

div.showcase-hero__content.service-hero__content {
	display: flex;
	flex-direction: column;

	flex: 0 1 550px;

	min-width: 0;

	gap: 32px;
}


/* Logo przesyłane przez ACF */

div.showcase-hero__content.service-hero__content
> img.showcase-hero__logo.service-hero__logo {

	display: block;

	width: 100%;
	max-width: 350px;

	height: auto;

	object-fit: contain;
}


/* H1 */

div.showcase-hero__content.service-hero__content
> h1.showcase-hero__heading.service-hero__heading {

	margin: 0 !important;

	font-weight: 700;

	line-height: 1.08;
}


/* Opis */

div.showcase-hero__description.service-hero__description {
	max-width: 500px;

	color: var(--theme-palette-color-8);
}


div.showcase-hero__description.service-hero__description > :first-child {
	margin-top: 0;
}


div.showcase-hero__description.service-hero__description > :last-child {
	margin-bottom: 0;
}


/* Przyciski */

div.showcase-hero__actions.service-hero__actions {
	display: flex;
	flex-wrap: wrap;

	gap: 16px;
}


/* =========================================================
   GALERIA
   ========================================================= */

div.showcase-hero__gallery.service-hero__gallery {
	flex: 1 1 0;

	min-width: 0;

	display: grid;

	grid-template:
		"a b b c"
		"d b b e";

	grid-template-columns:
		minmax(90px, 0.65fr)
		minmax(0, 1fr)
		minmax(0, 1fr)
		minmax(90px, 0.65fr);

	grid-template-rows:
		repeat(2, minmax(0, 1fr));

	gap: 16px;

	justify-content: center;
	align-content: center;
	align-items: start;
}


/* Każde zdjęcie */

div.showcase-hero__gallery.service-hero__gallery
> figure {

	position: relative;

	margin: 0;

	min-width: 0;

	overflow: hidden;

	border-radius: 16px;

	border:
		1px solid
		var(--bartek-border-color);

	background: #111;
}


/* Obraz */

div.showcase-hero__gallery.service-hero__gallery
> figure
> img {

	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}


/* =========================================================
   5 ZDJĘĆ — układ jak na homepage
   ========================================================= */

div.showcase-hero__gallery.service-hero__gallery
> figure:nth-child(1) {

	grid-area: a;

	align-self: end;

	aspect-ratio: 1 / 1;
}


div.showcase-hero__gallery.service-hero__gallery
> figure:nth-child(2) {

	grid-area: b;

	width: 100%;

	border-radius: 32px;

	aspect-ratio: 1.15 / 1;
}


div.showcase-hero__gallery.service-hero__gallery
> figure:nth-child(3) {

	grid-area: c;

	align-self: end;

	aspect-ratio: 1 / 1;
}


div.showcase-hero__gallery.service-hero__gallery
> figure:nth-child(4) {

	grid-area: d;

	aspect-ratio: 1 / 1;
}


div.showcase-hero__gallery.service-hero__gallery
> figure:nth-child(5) {

	grid-area: e;

	aspect-ratio: 1 / 1;
}


/* =========================================================
   MNIEJ NIŻ 5 ZDJĘĆ
   Hero nadal wygląda poprawnie.
   ========================================================= */


/* Jedno zdjęcie */

div.showcase-hero__gallery.service-hero__gallery
:has(> figure:first-child:last-child) {

	grid-template:
		"a";

	grid-template-columns:
		1fr;

	grid-template-rows:
		auto;
}


div.showcase-hero__gallery.service-hero__gallery
:has(> figure:first-child:last-child)
> figure:first-child {

	grid-area: a;

	width: 100%;

	aspect-ratio: 4 / 3;

	border-radius: 32px;
}


/* Dwa zdjęcia */

div.showcase-hero__gallery.service-hero__gallery
:has(> figure:nth-child(2):last-child) {

	grid-template:
		"a b";

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	grid-template-rows:
		1fr;
}


div.showcase-hero__gallery.service-hero__gallery
:has(> figure:nth-child(2):last-child)
> figure {

	grid-area: auto;

	width: 100%;

	aspect-ratio: 3 / 4;
}


/* Trzy zdjęcia */

div.showcase-hero__gallery.service-hero__gallery
:has(> figure:nth-child(3):last-child) {

	grid-template:
		"a b c";

	grid-template-columns:
		0.8fr 1.15fr 0.8fr;

	grid-template-rows:
		1fr;

	align-items: center;
}


div.showcase-hero__gallery.service-hero__gallery
:has(> figure:nth-child(3):last-child)
> figure {

	grid-area: auto;

	width: 100%;
}


div.showcase-hero__gallery.service-hero__gallery
:has(> figure:nth-child(3):last-child)
> figure:nth-child(1),

div.showcase-hero__gallery.service-hero__gallery
:has(> figure:nth-child(3):last-child)
> figure:nth-child(3) {

	aspect-ratio: 3 / 4;
}


div.showcase-hero__gallery.service-hero__gallery
:has(> figure:nth-child(3):last-child)
> figure:nth-child(2) {

	aspect-ratio: 3 / 4;

	border-radius: 32px;
}


/* Cztery zdjęcia */

div.showcase-hero__gallery.service-hero__gallery
:has(> figure:nth-child(4):last-child) {

	grid-template:
		"a b"
		"c d";

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	grid-template-rows:
		repeat(2, minmax(0, 1fr));
}


div.showcase-hero__gallery.service-hero__gallery
:has(> figure:nth-child(4):last-child)
> figure {

	grid-area: auto;

	width: 100%;

	aspect-ratio: 4 / 3;

	border-radius: 16px;
}


/* =========================================================
   SINGLE SERVICE — OPIS USŁUGI
   ========================================================= */

section.content-section.content-section--media.service-description {
	width: 100%;

	background:
		linear-gradient(
			to bottom right,
			rgba(15, 15, 15, 0) 0%,
			rgba(15, 15, 15, 0.8) 50%
		) bottom right / 50% 50% no-repeat,

		linear-gradient(
			to bottom left,
			rgba(15, 15, 15, 0) 0%,
			rgba(15, 15, 15, 0.8) 50%
		) bottom left / 50% 50% no-repeat,

		linear-gradient(
			to top left,
			rgba(15, 15, 15, 0) 0%,
			rgba(15, 15, 15, 0.8) 50%
		) top left / 50% 50% no-repeat,

		linear-gradient(
			to top right,
			rgba(15, 15, 15, 0) 0%,
			rgba(15, 15, 15, 0.8) 50%
		) top right / 50% 50% no-repeat,

		linear-gradient(
			180deg,
			#0f0f0f 10%,
			rgba(15, 15, 15, 0) 25%,
			rgba(15, 15, 15, 0) 75%,
			#0f0f0f 90%
		),

		var(--bartek-pattern-lines) 0 0 / 500px 500px repeat,

		#0f0f0f;
}


/* =========================================================
   INNER
   ========================================================= */

section.service-description
> div.content-section__inner.service-description__inner {

	width: var(--theme-container-width);
	max-width: var(--theme-normal-container-max-width);

	margin-inline: auto;

	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		minmax(0, 1fr);

	gap: 64px;

	align-items: center;
}


/* =========================================================
   ZDJĘCIE
   ========================================================= */

figure.media-content__media.service-description__media {
	margin: 0;

	width: 100%;

	overflow: hidden;

	border-radius: 64px;

	border:
		1px solid
		var(--bartek-border-color);

	background: #000;
}


figure.media-content__media.service-description__media
> img.media-content__image.service-description__image {

	display: block;

	width: 100%;
	height: 100%;

	/*
	 * Proporcje podobne do przykładu,
	 * który pokazałeś.
	 */
	aspect-ratio: 1.35 / 1;

	object-fit: cover;
}


/* =========================================================
   PRAWA KOLUMNA
   ========================================================= */

div.media-content__content.service-description__content {
	display: flex;

	flex-direction: column;

	gap: 32px;

	min-width: 0;
}


/* =========================================================
   HEADING
   ========================================================= */

header.section-heading.service-description__heading {
	display: flex;

	flex-direction: column;

	align-items: flex-start;

	gap: 16px;
}


header.section-heading.service-description__heading
> * {

	margin: 0;
}


p.section-heading__eyebrow {
	color: var(--theme-palette-color-1);
	font-family: var(--bartek-heading-font);
	font-size: 14px;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	margin: 0;
}

p.section-heading__eyebrow::after {
	content: "";
	width: 50px;
	height: 1px;
	background: var(--theme-palette-color-1);
	display: block;
	margin-top: 8px;
}


header.section-heading.service-description__heading
> h2.section-heading__title {

	margin: 0;

	font-weight: 700;

	line-height: 1.1;
}


/* =========================================================
   TREŚĆ OPISU
   ========================================================= */

div.media-content__body.service-description__body {
	color: var(--theme-palette-color-8);

	line-height: 1.7;
}


div.media-content__body.service-description__body
> :first-child {

	margin-top: 0;
}


div.media-content__body.service-description__body
> :last-child {

	margin-bottom: 0;
}


/* =========================================================
   CENA + CZAS
   ========================================================= */

dl.service-description__facts {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 32px;

	margin: 0;
}


/* Pojedynczy kafel */

div.service-description__fact {
	position: relative;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	min-height: 122px;

	padding:
		16px
		24px;

	border-radius: 16px;

	border:
		1px solid
		var(--bartek-border-color);

	background:
		linear-gradient(
			277deg,
			rgba(255, 255, 255, 0.10) 0%,
			rgba(255, 255, 255, 0.02) 100%
		);

	backdrop-filter:
		blur(3px);

	text-align: center;
}


/* =========================================================
   IKONY
   ========================================================= */

div.service-description__fact::before {
	content: "";

	display: block;

	width: 48px;
	height: 48px;

	margin-bottom: 8px;

	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}


/* Cena */

div.service-description__fact--price::before {
	background-image:
		url("/wp-content/themes/fryzjerbartek/assets/icons/price-list.svg");
}


/* Czas */

div.service-description__fact--duration::before {
	background-image:
		url("/wp-content/themes/fryzjerbartek/assets/icons/service-duration-color.svg");
}


/* =========================================================
   WARTOŚĆ
   ========================================================= */

/*
 * W HTML mamy:
 *
 * <dt>Cena usługi</dt>
 * <dd>80 PLN</dd>
 *
 * ale wizualnie chcemy:
 *
 * 80 PLN
 * Cena usługi
 *
 * dlatego zmieniamy kolejność przez order.
 */

div.service-description__fact > dd {
	order: 1;

	margin: 0 0 4px;

	color: #fff;

	font-family:
		var(--bartek-heading-font);

	font-size: 20px;

	font-weight: 700;

	line-height: normal;

	text-transform: uppercase;
}


/* Etykieta */

div.service-description__fact > dt {
	order: 2;

	margin: 0;

	color: #b4b4b4;

	font-size: 12px;

	font-weight: 400;

	line-height: normal;
}


/*
 * Pseudo-element musi być przed wartością.
 */

div.service-description__fact::before {
	order: 0;
}


/* =========================================================
   SINGLE SERVICE — GALERIA ZDJĘĆ
   ========================================================= */

section.content-section.service-gallery {
	width: 100%;
}


/* =========================================================
   INNER
   ========================================================= */

section.service-gallery
> div.content-section__inner.service-gallery__inner {

	width: var(--theme-container-width);
	max-width: var(--theme-normal-container-max-width);

	margin-inline: auto;
}


/* =========================================================
   HEADING
   ========================================================= */

header.section-heading.service-gallery__heading {
	display: flex;
	flex-direction: column;

	gap: 16px;

	margin-bottom: 40px;
}


header.section-heading.service-gallery__heading
> * {
	margin: 0;
}


/* =========================================================
   GRID
   ========================================================= */

ul.media-gallery__list.service-gallery__list {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	grid-template-rows:
		repeat(2, minmax(0, 1fr));

	gap: 16px;

	list-style: none;

	padding: 0;
	margin: 0;
}


/* =========================================================
   ELEMENTY
   ========================================================= */

li.service-gallery__item {
	min-width: 0;

	margin: 0;
}


/*
 * Pierwsze zdjęcie:
 * wysokie / pionowe
 */

li.service-gallery__item:first-child {
	grid-row: 1 / span 2;
}


/* =========================================================
   LINK
   ========================================================= */

a.service-gallery__link {
	position: relative;

	display: block;

	width: 100%;
	height: 100%;

	overflow: hidden;

	border-radius: 32px;

	background: #0f0f0f;

	cursor: zoom-in;
}


/* =========================================================
   PIERWSZE ZDJĘCIE — PIONOWE
   ========================================================= */

li.service-gallery__item:first-child
> a.service-gallery__link {

	height: 100%;

	min-height: 0;
}


/*
 * Dzięki grid-row: span 2 pierwsze zdjęcie
 * automatycznie dopasowuje się do wysokości
 * dwóch zdjęć po prawej + gap.
 */


/* =========================================================
   POZOSTAŁE ZDJĘCIA — POZIOME 4:3
   ========================================================= */

li.service-gallery__item:not(:first-child)
> a.service-gallery__link {

	aspect-ratio: 4 / 3;
}


/* =========================================================
   IMAGE
   ========================================================= */

img.media-gallery__image.service-gallery__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	transition:
		scale 600ms
		cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   OVERLAY
   ========================================================= */

a.service-gallery__link::before {
	content: "";

	position: absolute;
	inset: 0;

	z-index: 1;

	pointer-events: none;

	background:
		linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.08),
			rgba(0, 0, 0, 0)
		);

	opacity: 0;

	transition:
		opacity 280ms ease;
}


/* =========================================================
   WIĘCEJ NIŻ 5 ZDJĘĆ
   ========================================================= */

/*
 * Pierwsze 5:
 *
 * ┌──────────────┬──────────────┬──────────────┐
 * │              │      2       │      3       │
 * │      1       ├──────────────┼──────────────┤
 * │              │      4       │      5       │
 * └──────────────┴──────────────┴──────────────┘
 *
 * Każde kolejne zdjęcie układa się normalnie
 * w dalszych komórkach gridu.
 */

li.service-gallery__item:nth-child(n + 6)
> a.service-gallery__link {

	aspect-ratio: 4 / 3;
}


/* =========================================================
   SINGLE SERVICE — POZOSTAŁE USŁUGI
   ========================================================= */

section.content-section.related-services {
	width: 100%;
}


/* =========================================================
   INNER
   ========================================================= */

section.related-services
> div.content-section__inner.related-services__inner {

	width: var(--theme-container-width);
	max-width: var(--theme-normal-container-max-width);

	margin-inline: auto;
}


/* =========================================================
   HEADING
   ========================================================= */

header.section-heading.related-services__heading {
	display: flex;
	flex-direction: column;

	gap: 16px;

	margin-bottom: 40px;
}


header.section-heading.related-services__heading
> * {
	margin: 0;
}


/*
 * Nadtytuł korzysta już z globalnego:
 *
 * .section-heading__eyebrow
 *
 * czyli koloru złotego + kreski.
 */


/* =========================================================
   LISTA
   ========================================================= */

ul.related-services__list {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 32px;

	list-style: none;

	padding: 0;
	margin: 0;
}


/* =========================================================
   ITEM
   ========================================================= */

li.related-services__item {
	min-width: 0;

	margin: 0;
}


/* =========================================================
   KARTA
   ========================================================= */

a.related-service-card {
	position: relative;

	display: grid;

	grid-template-columns:
		100px
		minmax(0, 1fr)
		40px;

	align-items: center;

	gap: 32px;

	width: 100%;
	min-height: 102px;

	padding:
		0
		16px
		0
		0;

	overflow: hidden;

	border-radius: 100px;

	border:
		1px solid
		var(--bartek-border-color);

	background:
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.03) 0%,
			rgba(255, 255, 255, 0.08) 100%
		),
		#0f0f0f;

	color: #fff;

	text-decoration: none;
}


/* =========================================================
   ZDJĘCIE
   ========================================================= */

img.related-service-card__image {
	grid-column: 1;
	grid-row: 1;

	display: block;

	width: 100px;
	height: 100px;

	aspect-ratio: 1 / 1;

	border-radius: 50%;

	object-fit: cover;
	object-position: center;

	flex-shrink: 0;
}


/* =========================================================
   TYTUŁ
   ========================================================= */

span.related-service-card__title {
	grid-column: 2;
	grid-row: 1;

	min-width: 0;

	color: #dedede;

	font-family: inherit;

	font-size: 16px;

	font-weight: 600;

	line-height: 1.35;
}


/* =========================================================
   STRZAŁKA
   ========================================================= */

span.related-service-card__arrow {
	grid-column: 3;
	grid-row: 1;

	display: block;

	width: 32px;
	height: 48px;

	justify-self: end;

	font-size: 0;

	background:
		url("/wp-content/themes/fryzjerbartek/assets/icons/related-arrow.svg")
		center / contain
		no-repeat;
}


/* =========================================================
   BRAK ZDJĘCIA
   ========================================================= */

/*
 * Jeśli któraś usługa nie ma zdjęcia wyróżniającego,
 * karta nadal wygląda poprawnie i nie zostawia
 * pustej przestrzeni z lewej.
 */

a.related-service-card:not(:has(img.related-service-card__image)) {
	grid-template-columns:
		minmax(0, 1fr)
		40px;

	padding-left: 32px;
}


a.related-service-card:not(:has(img.related-service-card__image))
span.related-service-card__title {
	grid-column: 1;
}


a.related-service-card:not(:has(img.related-service-card__image))
span.related-service-card__arrow {
	grid-column: 2;
}


main#main-content {
	margin-bottom: 96px;
}

/* =========================================================
   INTERAKCJE DESKTOP — HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

div.service-description__fact {
		transition:
			translate 280ms cubic-bezier(.22, 1, .36, 1),
			border-color 280ms ease,
			background-color 280ms ease;
	}


	div.service-description__fact:hover {
		translate: 0 -3px;

		border-color:
			rgba(170, 137, 98, 0.62);
	}


	figure.service-description__media
	> img.service-description__image {

		transition:
			scale 700ms cubic-bezier(.22, 1, .36, 1);
	}


	figure.service-description__media:hover
	> img.service-description__image {

		scale: 1.02;
	}


a.service-gallery__link:hover
	img.service-gallery__image {

		scale: 1.025;
	}


	a.service-gallery__link:hover::before {

		opacity: 1;
	}


a.related-service-card {
		transition:
			translate 280ms cubic-bezier(.22, 1, .36, 1),
			border-color 280ms ease,
			background-color 280ms ease,
			box-shadow 280ms ease;
	}


	img.related-service-card__image {
		transition:
			scale 500ms cubic-bezier(.22, 1, .36, 1);
	}


	span.related-service-card__arrow {
		transition:
			translate 280ms cubic-bezier(.22, 1, .36, 1);
	}


	a.related-service-card:hover {
		translate: 0 -3px;

		border-color:
			rgba(170, 137, 98, 0.72);

		box-shadow:
			0 12px 30px
			rgba(0, 0, 0, 0.18);
	}


	a.related-service-card:hover
	img.related-service-card__image {

		scale: 1.04;
	}


	a.related-service-card:hover
	span.related-service-card__arrow {

		translate: 4px 0;
	}

}


/* =========================================================
   RESPONSYWNOŚĆ — <= 1100px
   ========================================================= */

@media (max-width: 1100px) {

section.showcase-hero.service-hero {
		padding-top: 128px;
	}


	div.showcase-hero__inner.service-hero__inner {

		flex-direction: column;

		align-items: stretch;

		gap: 48px;
	}


	div.showcase-hero__content.service-hero__content {

		flex: none;

		width: 100%;

		max-width: 680px;
	}


	div.showcase-hero__gallery.service-hero__gallery {

		width: 100%;
	}

}


/* =========================================================
   TABLET — <= 1024px
   ========================================================= */

@media (max-width: 1024px) {

section.service-description
	> div.content-section__inner.service-description__inner {

		grid-template-columns:
			1fr;

		gap: 48px;
	}


	/*
	 * Na tabletach najpierw zdjęcie,
	 * następnie opis.
	 */

	figure.media-content__media.service-description__media {

		width: 100%;

		border-radius: 48px;
	}


	figure.media-content__media.service-description__media
	> img.media-content__image.service-description__image {

		aspect-ratio: 16 / 9;
	}


	div.media-content__content.service-description__content {

		width: 100%;

		max-width: 760px;

		margin-inline: auto;
	}


header.section-heading.service-gallery__heading {
		margin-bottom: 32px;
	}


	ul.media-gallery__list.service-gallery__list {

		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		grid-template-rows:
			auto;

		gap: 16px;
	}


	/*
	 * Pierwsze zdjęcie nadal wysokie
	 * i zajmuje dwa rzędy.
	 */

	li.service-gallery__item:first-child {

		grid-row:
			span 2;
	}


	a.service-gallery__link {

		border-radius: 24px;
	}


header.section-heading.related-services__heading {
		margin-bottom: 32px;
	}


	ul.related-services__list {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 24px;
	}


	a.related-service-card {
		grid-template-columns:
			88px
			minmax(0, 1fr)
			34px;

		min-height: 90px;

		gap: 24px;
	}


	img.related-service-card__image {
		width: 88px;
		height: 88px;
	}


	span.related-service-card__arrow {
		width: 28px;
		height: 42px;
	}

}


/* =========================================================
   MOBILE — <= 767px
   ========================================================= */

@media (max-width: 767px) {

section.showcase-hero.service-hero {
		padding-top: 104px;
	}


	section.showcase-hero.service-hero::after {

		background-size: cover;
	}


	div.showcase-hero__inner.service-hero__inner {

		gap: 40px;
	}


	div.showcase-hero__content.service-hero__content {

		gap: 28px;
	}


	div.showcase-hero__content.service-hero__content
	> img.showcase-hero__logo.service-hero__logo {

		max-width: 260px;
	}


	div.showcase-hero__actions.service-hero__actions {

		flex-direction: column;

		width: 100%;
	}


	div.showcase-hero__actions.service-hero__actions
	> a.button {

		width: 100%;

		max-width: none;
	}


	/* ---------------------------------------------
	   Galeria — mobilny układ
	   --------------------------------------------- */

	div.showcase-hero__gallery.service-hero__gallery {

		display: grid;

		grid-template:
			"a c"
			"b b"
			"d e";

		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		grid-template-rows:
			auto;

		gap: 12px;
	}


	div.showcase-hero__gallery.service-hero__gallery
	> figure,

	div.showcase-hero__gallery.service-hero__gallery
	> figure:nth-child(1),

	div.showcase-hero__gallery.service-hero__gallery
	> figure:nth-child(2),

	div.showcase-hero__gallery.service-hero__gallery
	> figure:nth-child(3),

	div.showcase-hero__gallery.service-hero__gallery
	> figure:nth-child(4),

	div.showcase-hero__gallery.service-hero__gallery
	> figure:nth-child(5) {

		width: 100%;

		margin: 0;

		border-radius: 16px;
	}


	div.showcase-hero__gallery.service-hero__gallery
	> figure:nth-child(1) {

		grid-area: a;

		aspect-ratio: 1 / 1;
	}


	div.showcase-hero__gallery.service-hero__gallery
	> figure:nth-child(2) {

		grid-area: b;

		aspect-ratio: 16 / 10;
	}


	div.showcase-hero__gallery.service-hero__gallery
	> figure:nth-child(3) {

		grid-area: c;

		aspect-ratio: 1 / 1;
	}


	div.showcase-hero__gallery.service-hero__gallery
	> figure:nth-child(4) {

		grid-area: d;

		aspect-ratio: 1 / 1;
	}


	div.showcase-hero__gallery.service-hero__gallery
	> figure:nth-child(5) {

		grid-area: e;

		aspect-ratio: 1 / 1;
	}


	/* ---------------------------------------------
	   1 zdjęcie na mobile
	   --------------------------------------------- */

	div.showcase-hero__gallery.service-hero__gallery
	:has(> figure:first-child:last-child) {

		grid-template:
			"a";

		grid-template-columns:
			1fr;
	}


	/* ---------------------------------------------
	   2 zdjęcia na mobile
	   --------------------------------------------- */

	div.showcase-hero__gallery.service-hero__gallery
	:has(> figure:nth-child(2):last-child) {

		grid-template:
			"a b";

		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	/* ---------------------------------------------
	   3 zdjęcia na mobile
	   --------------------------------------------- */

	div.showcase-hero__gallery.service-hero__gallery
	:has(> figure:nth-child(3):last-child) {

		grid-template:
			"a b"
			"c c";

		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	/* ---------------------------------------------
	   4 zdjęcia na mobile
	   --------------------------------------------- */

	div.showcase-hero__gallery.service-hero__gallery
	:has(> figure:nth-child(4):last-child) {

		grid-template:
			"a b"
			"c d";

		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


section.service-description
	> div.content-section__inner.service-description__inner {

		gap: 32px;
	}


	/* Zdjęcie */

	figure.media-content__media.service-description__media {

		border-radius: 32px;
	}


	figure.media-content__media.service-description__media
	> img.media-content__image.service-description__image {

		/*
		 * Na telefonie trochę wyższe zdjęcie.
		 */

		aspect-ratio: 4 / 3;
	}


	/* Content */

	div.media-content__content.service-description__content {

		gap: 24px;

		max-width: none;
	}


	header.section-heading.service-description__heading {

		gap: 12px;
	}


	/* Fakty */

	dl.service-description__facts {

		grid-template-columns:
			1fr;

		gap: 16px;
	}


	div.service-description__fact {

		min-height: 110px;

		padding: 16px 20px;
	}


	div.service-description__fact::before {

		width: 42px;
		height: 42px;
	}


	div.service-description__fact > dd {

		font-size: 18px;
	}


header.section-heading.service-gallery__heading {

		gap: 12px;

		margin-bottom: 24px;
	}


	ul.media-gallery__list.service-gallery__list {

		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		grid-template-rows:
			auto;

		gap: 12px;
	}


	/*
	 * Na mobile pierwsze zdjęcie
	 * zajmuje całą szerokość.
	 */

	li.service-gallery__item:first-child {

		grid-column:
			1 / -1;

		grid-row:
			auto;
	}


	/*
	 * Pierwsze zdjęcie nadal lekko pionowe,
	 * ale nie tak wysokie jak na desktopie.
	 */

	li.service-gallery__item:first-child
	> a.service-gallery__link {

		aspect-ratio:
			4 / 3;
	}


	/*
	 * Pozostałe zdjęcia
	 * nadal poziome 4:3.
	 */

	li.service-gallery__item:not(:first-child)
	> a.service-gallery__link {

		aspect-ratio:
			4 / 3;
	}


	a.service-gallery__link {

		border-radius:
			20px;
	}


header.section-heading.related-services__heading {
		gap: 12px;

		margin-bottom: 24px;
	}


	ul.related-services__list {
		grid-template-columns:
			1fr;

		gap: 16px;
	}


	a.related-service-card {
		grid-template-columns:
			72px
			minmax(0, 1fr)
			28px;

		min-height: 74px;

		gap: 16px;

		padding-right: 16px;

		border-radius: 100px;
	}


	img.related-service-card__image {
		width: 72px;
		height: 72px;
	}


	span.related-service-card__title {
		font-size: 15px;
	}


	span.related-service-card__arrow {
		width: 24px;
		height: 36px;
	}


	a.related-service-card:not(:has(img.related-service-card__image)) {
		padding-left: 24px;
	}

}


/* =========================================================
   MAŁY MOBILE — <= 480px
   ========================================================= */

@media (max-width: 480px) {

ul.media-gallery__list.service-gallery__list {

		grid-template-columns:
			1fr;
	}


	li.service-gallery__item:first-child {

		grid-column:
			auto;
	}


	li.service-gallery__item:first-child
	> a.service-gallery__link,

	li.service-gallery__item:not(:first-child)
	> a.service-gallery__link {

		aspect-ratio:
			4 / 3;
	}

}


/* =========================================================
   URZĄDZENIA DOTYKOWE
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

a.related-service-card {
		transition:
			scale 140ms ease,
			border-color 140ms ease;
	}


	a.related-service-card:active {
		scale: 0.985;

		border-color:
			rgba(170, 137, 98, 0.72);
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

div.service-description__fact,
	figure.service-description__media
	> img.service-description__image {

		transition: none !important;
	}


img.media-gallery__image.service-gallery__image,
	a.service-gallery__link::before {

		transition:
			none !important;
	}


a.related-service-card,
	img.related-service-card__image,
	span.related-service-card__arrow {

		transition: none !important;
	}

}



/* =========================================================
   SINGLE SERVICE — ANIMACJE WEJŚCIOWE
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

	/* =====================================================
	   HERO
	   ===================================================== */

	html.service-animations-enabled
	.site-main--service
	.service-hero__logo,

	html.service-animations-enabled
	.site-main--service
	.service-hero__heading,

	html.service-animations-enabled
	.site-main--service
	.service-hero__description,

	html.service-animations-enabled
	.site-main--service
	.service-hero__actions,

	html.service-animations-enabled
	.site-main--service
	.service-hero__gallery > figure,


	/* =====================================================
	   OPIS FRYZURY
	   ===================================================== */

	html.service-animations-enabled
	.site-main--service
	.service-description__media,

	html.service-animations-enabled
	.site-main--service
	.service-description__heading,

	html.service-animations-enabled
	.site-main--service
	.service-description__body,

	html.service-animations-enabled
	.site-main--service
	.service-description__fact,


	/* =====================================================
	   GALERIA
	   ===================================================== */

	html.service-animations-enabled
	.site-main--service
	.service-gallery__heading,

	html.service-animations-enabled
	.site-main--service
	.service-gallery__item,


	/* =====================================================
	   POZOSTAŁE USŁUGI
	   ===================================================== */

	html.service-animations-enabled
	.site-main--service
	.related-services__heading,

	html.service-animations-enabled
	.site-main--service
	.related-services__item,


	/* =====================================================
	   ARTYKUŁY
	   ===================================================== */

	html.service-animations-enabled
	.site-main--service
	.service-articles__heading,

	html.service-animations-enabled
	.site-main--service
	.service-articles__slider {

		opacity: 0;
	}


	/* =====================================================
	   STAN KOŃCOWY
	   ===================================================== */

	html.service-animations-enabled
	.site-main--service
	.is-service-animated {

		opacity: 1 !important;
	}

}