/* ========================================================================
   FRYZJER MĘSKI BARTEK — PODSTRONA „O NAS”
   Dedykowany CSS na bazie stylów użytych na stronie głównej.
   ======================================================================== */

:root {
	--bartek-pattern-barber: url("/wp-content/themes/fryzjerbartek/assets/images/backgrounds/barber-pattern.webp");
	--bartek-pattern-lines: url("/wp-content/themes/fryzjerbartek/assets/images/backgrounds/diagonal-lines.webp");
	--bartek-pattern-hair: url("/wp-content/themes/fryzjerbartek/assets/images/backgrounds/hair-pattern.webp");
	--bartek-panel-glow: url("/wp-content/themes/fryzjerbartek/assets/images/backgrounds/panel-glow.webp");
}

/* ========================================================================
   GŁÓWNA ZAWARTOŚĆ / WSPÓLNE KOMPONENTY
   ======================================================================== */


.site-main--about .content-section__inner {
	width: var(--theme-container-width);
	max-width: var(--theme-normal-container-max-width);
	margin-inline: auto;
}

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

.site-main--about p.showcase-hero__eyebrow {
	color: #FFF;
font-family: Cinzel;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: normal;
	margin-bottom: -32px;
}

.site-main--about h1 {
	font-weight: 400!important;
}

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

.site-main--about .section-heading__title {
	margin-top: 16px;
	margin-bottom: 0;
}



/* ========================================================================
   HERO „O NAS” — baza ze strony głównej + układ 3 zdjęć
   ======================================================================== */

section.showcase-hero.showcase-hero--about {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;
	background-image: var(--bartek-panel-glow);
	padding-top: 160px;
	width: 100%;
}

section.showcase-hero.showcase-hero--about::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;
}

section.showcase-hero.showcase-hero--about::after {
	content: "";
	width: 100%;
	aspect-ratio: 1920 / 94;
	background-image: url("/wp-content/themes/fryzjerbartek/assets/images/backgrounds/hero-bottom.png");
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
	z-index: 2;
	margin-top: 20px;
}

.site-main--about .about-hero__inner {
	position: relative;
	z-index: 3;
	display: flex;
	gap: 64px;
	width: var(--theme-container-width);
	max-width: var(--theme-normal-container-max-width);
	margin-inline: auto;
	align-items: center;
	justify-content: space-between;
}

.site-main--about .about-hero__content {
	width: 100%;
	max-width: 560px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.site-main--about .about-hero__heading {
	margin: 0 !important;
	font-weight: 700;
}

.site-main--about .about-hero__description {
	max-width: 540px;
}

.site-main--about .about-hero__description p {
	margin: 0;
}

.site-main--about .about-hero__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.site-main--about .about-hero__gallery {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: 225px 296px 225px;
	gap: 16px;
	justify-content: end;
	align-items: center;
}

.site-main--about .about-hero__image {
	margin: 0;
	border-radius: 16px;
	border: 1px solid #575757;
	overflow: hidden;
	background: #0f0f0f;
}

.site-main--about .about-hero__image--2 {
	border-radius: 32px;
}

.site-main--about .about-hero__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ========================================================================
   WSPÓLNY UKŁAD MEDIA + CONTENT
   Używany przez: historia salonu, kosmetyki, CTA
   ======================================================================== */

.site-main--about section.media-content > .media-content__inner {
	display: flex;
	gap: 64px;
	align-items: center;
}

.site-main--about section.about-products > .media-content__inner {
	gap: 0;
}


.site-main--about section.media-content .media-content__content {
	display: flex;
	flex-direction: column;
	gap: 64px;
	padding-top: 64px;
	padding-bottom: 64px;
}

.site-main--about section.media-content.about-products .media-content__content {
		width: 50%;
}

.site-main--about section.media-content.about-cta .media-content__content {
	padding-left: 0;
	padding-top: 64px;
	padding-bottom: 64px;
}

.site-main--about section.media-content.about-products .media-content__content {
position: relative; 
	z-index: 3;
}

.site-main--about section.media-content .media-content__media {
	margin: 0;
	position: relative;
	z-index: 1;
	border-radius: 32px;
	border: 1px solid #575757;
	overflow: hidden;
}

section.about-products .media-content__media {
	width: calc(50% + 32px);
	margin: 0;
	position: relative;
	margin-left: -32px;
	z-index: 1;
	flex-basis: inherit!important;
	width: calc(50% + 32px);
	border: none!important;
	margin-left: -32px;
}

.site-main--about section.about-products .media-content__media > img {
	border-radius: 32px;
	border: 1px solid #575757;
}

.site-main--about section.about-products .media-content__media::after {
	content: "";
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, rgba(15, 15, 15, 1) 0%, rgba(15, 15, 15, 1) 15%, rgba(15, 15, 15, 0) 40%), radial-gradient(circle, rgba(15, 15, 15, 0.18) 0%, rgba(15, 15, 15, 0.24) 50%, rgba(15, 15, 15, 0.30) 100%);
}

.site-main--about section.media-content .media-content__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.site-main--about section.media-content .media-content__body {
	line-height: 1.75;
}

.site-main--about section.media-content .media-content__body p:last-child {
	margin: 0;
}

/* ========================================================================
   O NAS — HISTORIA SALONU
   ======================================================================== */

.site-main--about section.about-story > .about-story__inner {
	align-items: stretch;
}

.site-main--about .about-story__media {
	flex: 0 0 300px !important;
	min-height: 620px;
}

.site-main--about .about-story__image {
	object-position: center;
}

.site-main--about .about-story__content {
	justify-content: center;
}

/* ========================================================================
   NAJWAŻNIEJSZE INFORMACJE / HIGHLIGHTS
   Bazuje na estetyce kart z sekcji lojalnościowej i cennika.
   ======================================================================== */

.site-main--about section.about-highlights {
	width: 100%;
}

.site-main--about .about-highlights__inner {
	padding: 32px;
	border-radius: 32px;
	border: 1px solid #575757;
	background:#000;
}

.site-main--about .about-highlights__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 64px;
}

.site-main--about .about-highlight {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	position: relative;
	text-align: center;
}

.site-main--about li.about-highlight:not(:last-child)::after {
	content: "";
	width: 1px;
	height: 100%;
	background: linear-gradient(
		180deg,
		rgba(170, 137, 98, 0) 0%,
		#AA8962 10%,
		#AA8962 90%,
		rgba(170, 137, 98, 0) 100%
	);
	position: absolute;
	right: -32px;
}

.site-main--about .about-highlight__icon,
.site-main--about .about-highlight__icon img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: contain;
}

.site-main--about .about-highlight__value {
	color: #fff;
	font-family: Cinzel;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

.site-main--about .about-highlight__title {
	color: var(--theme-palette-color-1);
	font-family: Cinzel;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
}

.site-main--about .about-highlight__description {
	font-size: 16px;
	line-height: 1.7;
}

.site-main--about .about-highlights__footer {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: 64px;
	justify-content: center;
	position: relative;
}

.site-main--about .about-highlights__footer:before {
	content: "";
	width: 100%;
	height: 1px;
	background: linear-gradient(270deg, rgba(170, 137, 98, 0.00) 0%, #AA8962 10%, #AA8962 90%, rgba(170, 137, 98, 0.00) 100%);
	position: absolute;
	top: -32px;
}

.site-main--about .about-highlights__footer-icon,
.site-main--about .about-highlights__footer-icon img {
	display: block;
	width: 68px;
	height: 68px;
	flex: 0 0 68px;
	object-fit: contain;
}

.site-main--about .about-highlights__footer-text {
	margin: 0;
	font-family: Cinzel;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	max-width: 750px;
}

/* ========================================================================
   SZYBKI KONTAKT — przeniesiony ze strony głównej
   ======================================================================== */

div.background-sections-here {
	background:
	linear-gradient(
		to bottom right,
		rgba(15, 15, 15, 0.00) 0%,
		rgba(15, 15, 15, 0.80) 50%
	) bottom right / 50% 50% no-repeat,

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

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

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

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

	var(--bartek-pattern-lines) center / contain repeat,

	#0F0F0F;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.site-main--about section.about-quick-contact {
	width: 100%;
	
}

.site-main--about .about-quick-contact__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.site-main--about .about-quick-contact__heading {
	color: var(--theme-palette-color-1);
	font-family: Cinzel;
	font-size: 20px;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	margin: 0;
}

.site-main--about .about-quick-contact__heading::after {
	content: "";
	width: 50px;
	height: 1px;
	background: var(--theme-palette-color-1);
	display: block;
	margin-top: 8px;
}

.site-main--about .about-quick-contact__list {
	display: flex;
	list-style: none;
	gap: 32px;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
}

.site-main--about .about-quick-contact__list > li {
	display: flex;
	width: calc((100% - 32px) / 2);
}

.site-main--about .about-quick-contact__list > li > a {
	padding: 32px;
	display: flex;
	flex: 1 0 0;
	align-items: center;
	border-radius: 16px;
	border: 1px solid #575757;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.20) 100%),
		linear-gradient(270deg, rgba(33, 33, 33, 0.00) 0%, #212121 49.73%),
		#000;
}

.site-main--about .about-quick-contact__list > li > a.quick-contact-card--phone {
	background:
		linear-gradient(rgba(33, 33, 33, 0.45), rgba(33, 33, 33, 0.45)),
		linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%),
		linear-gradient(270deg, rgba(33, 33, 33, 0) 0%, #212121 49.73%),
		url("/wp-content/themes/fryzjerbartek/assets/images/contact/incoming-call.webp") right center / cover no-repeat,
		#000;
}

.site-main--about .about-quick-contact__list > li > a.quick-contact-card--email {
	background:
		linear-gradient(rgba(33, 33, 33, 0.45), rgba(33, 33, 33, 0.45)),
		linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%),
		linear-gradient(270deg, rgba(33, 33, 33, 0) 0%, #212121 49.73%),
		url("/wp-content/themes/fryzjerbartek/assets/images/contact/contact-us.webp") right center / cover no-repeat,
		#000;
}

.site-main--about .about-quick-contact__list > li > a.quick-contact-card--directions {
	background:
		linear-gradient(rgba(33, 33, 33, 0.45), rgba(33, 33, 33, 0.45)),
		linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%),
		linear-gradient(270deg, rgba(33, 33, 33, 0) 0%, #212121 49.73%),
		url("/wp-content/themes/fryzjerbartek/assets/images/contact/drive-to-us.webp") right center / cover no-repeat,
		#000;
}

.site-main--about .about-quick-contact__list > li > a.quick-contact-card--prices {
	background:
		linear-gradient(rgba(33, 33, 33, 0.45), rgba(33, 33, 33, 0.45)),
		linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%),
		linear-gradient(270deg, rgba(33, 33, 33, 0) 0%, #212121 49.73%),
		url("/wp-content/themes/fryzjerbartek/assets/images/contact/check-price.webp") right center / cover no-repeat,
		#000;
}

.site-main--about .quick-contact-card__content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.site-main--about .quick-contact-card__label {
	color: var(--theme-palette-color-1);
	font-family: Cinzel;
	font-size: 18px;
	font-weight: 700;
	line-height: normal;
}

.site-main--about .quick-contact-card__title {
	color: #fff;
	font-family: Cinzel;
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	display: flex;
	gap: 32px;
	align-items: center;
}

.site-main--about .quick-contact-card__icon {
	width: 76px;
	height: 76px;
	flex: 0 0 76px;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.site-main--about .quick-contact-card--directions .quick-contact-card__title::after,
.site-main--about .quick-contact-card--prices .quick-contact-card__title::after {
	content: "";
	display: block;
	height: 43px;
	width: 43px;
	flex: 0 0 43px;
	background: url("/wp-content/themes/fryzjerbartek/assets/icons/external-link.svg") center / contain no-repeat;
}

.site-main--about .quick-contact-card__icon--phone {
	background-image: url("/wp-content/themes/fryzjerbartek/assets/icons/phone.svg");
}

.site-main--about .quick-contact-card__icon--email {
	background-image: url("/wp-content/themes/fryzjerbartek/assets/icons/email.svg");
}

.site-main--about .quick-contact-card__icon--directions {
	background-image: url("/wp-content/themes/fryzjerbartek/assets/icons/directions.svg");
}

.site-main--about .quick-contact-card__icon--prices {
	background-image: url("/wp-content/themes/fryzjerbartek/assets/icons/price-list.svg");
}

/* ========================================================================
   ZESPÓŁ — tło ze strony głównej + wariant kart z pełnym bio
   ======================================================================== */

.site-main--about section.about-team {
	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(270deg, #0f0f0f 3%, rgba(15, 15, 15, 0) 10%, rgba(15, 15, 15, 0) 90%, #0f0f0f 97%),
		linear-gradient(180deg, #0f0f0f 10%, rgba(15, 15, 15, 0) 25%, rgba(15, 15, 15, 0) 75%, #0f0f0f 90%),
		linear-gradient(rgba(15, 15, 15, 0.85), rgba(15, 15, 15, 0.85)),
		var(--bartek-pattern-barber) center / contain repeat;
}

.site-main--about .about-team__heading {
	margin-bottom: 32px;
}

.site-main--about .about-team__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.site-main--about .about-team-card {
	height: 100%;
	overflow: hidden;
	border-radius: 32px;
	border: 1px solid #575757;
	background: rgba(15, 15, 15, 0.60);

	backdrop-filter: blur(3px);
}

.site-main--about .about-team-card__media {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-bottom: 1px solid #575757;
}

.site-main--about .about-team-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.site-main--about .about-team-card__content {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px;
}

.site-main--about .about-team-card__name {
	margin: 0;
	color: #fff;
	font-family: Cinzel;
	font-size: 28px;
	font-weight: 700;
	line-height: normal;
	text-align: center;
}

.site-main--about .about-team-card__role {
	margin: 0;
	color: var(--theme-palette-color-1);
	font-family: Cinzel;
	font-size: 20px;
	font-weight: 400;
	line-height: normal;
	text-align: center;
}

.site-main--about .about-team-card__bio {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.7;
}

/* ========================================================================
   KOSMETYKI PREMIUM
   ======================================================================== */


.site-main--about .about-products__media {
	flex-basis: 50% !important;
}

.site-main--about .about-products__image {
	aspect-ratio: 732 / 516;
}

/* ========================================================================
   CTA — wariant układu media + content
   ======================================================================== */

.site-main--about section.about-cta {
	width: 100%;
	margin-bottom: 96px;
}

.site-main--about section.about-cta > .about-cta__inner {
	gap: 64px;
}

.site-main--about .about-cta__media {
	flex: 0 0 44% !important;
	border: 0 !important;
	border-radius: 0 !important;
}

.site-main--about .about-cta__image {
	min-height: 100%;
	border-radius: 32px;
	border: 1px solid #575757;
}

.site-main--about .about-cta__content {
	justify-content: center;
	padding: 64px;
}

.site-main--about .about-cta__link {
	margin-top: 8px;
}

/* ========================================================================
   STOPKA — przeniesiona ze strony głównej
   ======================================================================== */

[data-footer*="type-1"] .ct-footer {
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(102, 102, 102, 0.2) 100%),
		linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
		linear-gradient(rgba(15, 15, 15, 0.85), rgba(15, 15, 15, 0.85)),
		var(--bartek-panel-glow) center / cover no-repeat;
}

[data-footer*="type-1"] .ct-footer::before {
	content: "";
	width: 100%;
	aspect-ratio: 1920 / 94;
	background-image: url("/wp-content/themes/fryzjerbartek/assets/images/backgrounds/hero-bottom.png");
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
	z-index: 2;
	display: block;
	transform: rotate(180deg);
	margin-bottom: 32px;
}

/* ========================================================================
   RESPONSIVE — zabezpieczenie układów dedykowanych dla „O nas”
   ======================================================================== */

@media (max-width: 1280px) {
	.site-main--about .about-hero__inner {
		gap: 40px;
	}

	.site-main--about .about-hero__gallery {
		grid-template-columns: repeat(3, minmax(150px, 1fr));
		max-width: 700px;
	}

	.site-main--about .quick-contact-card__title {
		font-size: 26px;
	}
}

@media (max-width: 1024px) {
	main#main-content.site-main--about {
		gap: 72px;
	}

	section.showcase-hero.showcase-hero--about {
		padding-top: 140px;
	}

	.site-main--about .about-hero__inner {
		flex-direction: column;
		align-items: stretch;
	}
	
	.site-main--about section.media-content > .media-content__inner {
		align-items: center;
		gap: 32px;
	}
	
	.site-main--about li.about-highlight:not(:last-child)::after {
		bottom: -32px;
	right: 0;
		left: 0;
		height: 1px;
		width: 100%;
		background: linear-gradient(270deg, rgba(170, 137, 98, 0.00) 0%, #AA8962 10%, #AA8962 90%, rgba(170, 137, 98, 0.00) 100%)
	}
	
	.site-main--about section.media-content .media-content__media {
	width: 100%;
	}
	
	.site-main--about section.about-products .media-content__media::after {
		display: none;
	}
	
	.site-main--about .about-highlights__footer-text {
		text-align: center;
	}

	.site-main--about .about-quick-contact__list > li {
		width: 100%;
	}
	
	.site-main--about .about-quick-contact__list {
		gap: 16px;
	}
	
	.site-main--about section.media-content.about-products .media-content__content {
		width: 100%;
		padding: 0;
	}
	
	.site-main--about .about-hero__content {
		max-width: 720px;
	}

	.site-main--about .about-hero__gallery {
		width: 100%;
		max-width: 820px;
		margin-inline: auto;
		justify-content: center;
	}

	.site-main--about .about-story__media {
		flex: initial !important;
		max-width: 33%;
		min-height: 0;
		margin-inline: auto;
	}

	.site-main--about .about-story__image {
		height: auto !important;
	}

	.site-main--about .about-highlights__list,
	.site-main--about .about-team__list {
		grid-template-columns: 1fr;
	}
	

	.site-main--about .about-team__item {
		max-width: 680px;
		width: 100%;
		margin-inline: auto;
	}

	.site-main--about section.about-products > .about-products__inner {
		flex-direction: column-reverse;
	}

	.site-main--about section.about-cta > .about-cta__inner {
		flex-direction: column;
	}

	.site-main--about .about-cta__media {
		flex: initial !important;
		max-height: 560px;
	}

	.site-main--about .about-cta__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.site-main--about section.media-content .media-content__media {
		border-radius: 32px!important;
		border: 1px solid #575757!important;
	}
	
	.site-main--about section.media-content.about-cta .media-content__content {
		padding: 0;
	}
	
	.site-main--about .about-hero__content {
		align-items: center;
		text-align: center;
	}
}

@media (max-width: 767px) {
	main#main-content.site-main--about {
		gap: 56px;
	}

	section.showcase-hero.showcase-hero--about {
		padding-top: 120px;
	}

	.site-main--about .about-hero__content {
		gap: 24px;
	}

	.site-main--about .about-hero__actions {
		width: 100%;
		flex-direction: column;
	}

	.site-main--about .about-hero__actions a.button,
	.site-main--about .about-cta__link {
		width: 100%;
	}

	.site-main--about .about-hero__gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.site-main--about .about-hero__image,
	.site-main--about .about-hero__image--2 {
		border-radius: 12px;
	}

	.site-main--about .about-story__content,
	.site-main--about .about-highlights__inner,
	.site-main--about section.about-products > .about-products__inner,
	.site-main--about .about-cta__content {
		padding: 32px 24px;
		border-radius: 32px;
	}

	.site-main--about .about-highlight {
		padding: 24px;
	}

	.site-main--about .about-highlights__footer {
		align-items: flex-start;
		padding: 24px;
	}

	.site-main--about .about-highlights__footer-text {
		font-size: 16px;
	}

	.site-main--about .about-quick-contact__list {
		gap: 16px;
	}

	.site-main--about .about-quick-contact__list > li {
		width: 100%;
	}

	.site-main--about .about-quick-contact__list > li > a {
		padding: 24px;
	}

	.site-main--about .quick-contact-card__label {
		font-size: 15px;
	}

	.site-main--about .quick-contact-card__title {
		font-size: clamp(18px, 5vw, 26px);
		gap: 12px;
		overflow-wrap: anywhere;
	}

	.site-main--about .quick-contact-card__icon {
		width: 56px;
		height: 56px;
		flex-basis: 56px;
	}

	.site-main--about .quick-contact-card--directions .quick-contact-card__title::after,
	.site-main--about .quick-contact-card--prices .quick-contact-card__title::after {
		width: 30px;
		height: 30px;
		flex-basis: 30px;
	}

	.site-main--about .about-team-card__content {
		padding: 24px;
	}

	.site-main--about .about-team-card__name {
		font-size: 28px;
	}

	.site-main--about section.about-cta {
		margin-bottom: 56px;
	}

	.site-main--about section.about-cta > .about-cta__inner {
		border-radius: 32px;
	}
}

@media (max-width: 480px) {
	.site-main--about .about-highlights__footer {
		flex-direction: column;
	}

	.site-main--about .about-highlights__footer-icon,
	.site-main--about .about-highlights__footer-icon img {
		width: 56px;
		height: 56px;
		flex-basis: 56px;
	}

	.site-main--about .about-quick-contact__list > li > a {
		align-items: flex-start;
		gap: 16px;
	}
}




/* =========================================================
   O NAS — ANIMACJE
   ========================================================= */


/* =========================================================
   HERO GALLERY — WEJŚCIE + PARALLAX
   ========================================================= */

div.showcase-hero__gallery.about-hero__gallery > figure {
	--mouse-x: 0px;
	--mouse-y: 0px;

	opacity: 0;

	translate:
		var(--mouse-x)
		var(--mouse-y);

	will-change:
		transform,
		translate,
		opacity;

	animation:
		aboutHeroImageEnter
		700ms
		cubic-bezier(.22, 1, .36, 1)
		forwards;

	transition:
		translate
		350ms
		cubic-bezier(.22, 1, .36, 1);
}


/*
 * Najpierw środkowe zdjęcie,
 * potem lewe i prawe.
 */

div.showcase-hero__gallery.about-hero__gallery > figure:nth-child(2) {
	animation-delay: 150ms;
}

div.showcase-hero__gallery.about-hero__gallery > figure:nth-child(1) {
	animation-delay: 280ms;
}

div.showcase-hero__gallery.about-hero__gallery > figure:nth-child(3) {
	animation-delay: 410ms;
}


@keyframes aboutHeroImageEnter {

	0% {
		opacity: 0;

		transform:
			translateY(32px)
			scale(0.94);
	}

	100% {
		opacity: 1;

		transform:
			translateY(0)
			scale(1);
	}
}


/* =========================================================
   STANY POCZĄTKOWE ANIMACJI SCROLL
   ========================================================= */

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

	/*
	 * HERO — lewa kolumna
	 */

	html.about-animations-enabled .site-main--about .about-hero__eyebrow,
	html.about-animations-enabled .site-main--about .about-hero__heading,
	html.about-animations-enabled .site-main--about .about-hero__description,
	html.about-animations-enabled .site-main--about .about-hero__actions,


	/*
	 * O SALONIE
	 */

	html.about-animations-enabled .site-main--about .about-story__media,
	html.about-animations-enabled .site-main--about .about-story__content,


	/*
	 * HIGHLIGHTS
	 */

	html.about-animations-enabled .site-main--about .about-highlight,
	html.about-animations-enabled .site-main--about .about-highlights__footer,


	/*
	 * QUICK CONTACT
	 */

	html.about-animations-enabled .site-main--about .about-quick-contact__heading,
	html.about-animations-enabled .site-main--about .about-quick-contact__list > li,


	/*
	 * TEAM
	 */

	html.about-animations-enabled .site-main--about .about-team__heading,
	html.about-animations-enabled .site-main--about .about-team__item,


	/*
	 * PRODUCTS
	 */

	html.about-animations-enabled .site-main--about .about-products__content,
	html.about-animations-enabled .site-main--about .about-products__media,


	/*
	 * CTA
	 */

	html.about-animations-enabled .site-main--about .about-cta__media,
	html.about-animations-enabled .site-main--about .about-cta__content {

		opacity: 0;
	}


	/*
	 * Stan końcowy.
	 *
	 * !important jest celowo — po animation.cancel()
	 * element nie może wrócić do opacity: 0.
	 */

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

		opacity: 1 !important;
	}

}


/* =========================================================
   DODATKOWE MICRO ANIMATIONS
   Tylko te, których nie masz już globalnie.
   ========================================================= */

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

	/* Highlighty */

	.site-main--about .about-highlight {
		transition:
			translate 260ms cubic-bezier(.22, 1, .36, 1),
			border-color 260ms ease;
	}

	.site-main--about .about-highlight__icon {
		transition:
			scale 260ms cubic-bezier(.22, 1, .36, 1);
	}

	.site-main--about .about-highlight:hover {
		translate: 0 -3px;
	}

	.site-main--about .about-highlight:hover .about-highlight__icon {
		scale: 1.045;
	}


	/* Zdjęcia sekcji media-content */

	.site-main--about .about-story__image,
	.site-main--about .about-products__image,
	.site-main--about .about-cta__image {
		transition:
			scale 600ms cubic-bezier(.22, 1, .36, 1);
	}

	.site-main--about .about-story__media,
	.site-main--about .about-products__media,
	.site-main--about .about-cta__media {
		overflow: hidden;
	}

	.site-main--about .about-story__media:hover .about-story__image,
	.site-main--about .about-products__media:hover .about-products__image,
	.site-main--about .about-cta__media:hover .about-cta__image {
		scale: 1.02;
	}

}


/* =========================================================
   MOBILE / TOUCH
   ========================================================= */

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

	.site-main--about .about-highlight {
		transition:
			scale 140ms ease;
	}

	.site-main--about .about-highlight:active {
		scale: 0.985;
	}

}


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

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

	div.showcase-hero__gallery.about-hero__gallery > figure {
		opacity: 1;

		animation: none;

		translate: 0 0 !important;

		transition: none;
	}


	.site-main--about .about-highlight,
	.site-main--about .about-highlight__icon,
	.site-main--about .about-story__image,
	.site-main--about .about-products__image,
	.site-main--about .about-cta__image {
		transition: none !important;
	}

}