/* ================================
   STYLE CHARAKTERYSTYCZNE DLA PODSTRON
   ================================ */

/**********************
    O MNIE
**********************/

.subpage .section-about {
	padding: 16rem 0 6rem;
	background-color: #eae5e5;
	overflow: hidden;
}

.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 7rem;
	min-height: 58rem;
}

/* =========================
   ZDJĘCIE — LEWA STRONA
========================= */

.about-img-container {
	position: relative;
	width: 100%;
	max-width: 50rem;
	justify-self: start;
	align-self: center;
	overflow: visible;
	box-shadow: none;
}

.about-img-container::after {
	content: '';

	position: absolute;

	width: 92%;
	height: 92%;

	left: -3rem;
	bottom: -3rem;

	background-color: #ddd3cf;

	z-index: 0;
}

.about-img-container::before {
	content: '';

	position: absolute;
	inset: 0;

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

	z-index: 2;
	pointer-events: none;
}

.about-img-new {
	position: relative;
	z-index: 1;

	width: 100%;
	height: auto;

	display: block;

	filter: grayscale(0.05) brightness(0.95);

	box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.1);
}

/* =========================
   TEKST — PRAWA STRONA
========================= */

.about-text-container {
	padding: 2rem 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

/* MAŁE „O MNIE” */

.about-label {
	display: flex;
	align-items: center;
	gap: 2rem;

	font-family: 'Gruppo', sans-serif;
	font-size: 1.5rem;
	letter-spacing: 0.5rem;
	text-transform: uppercase;

	color: #555;

	margin-bottom: 3.5rem;
}

.about-label-line {
	display: block;
	width: 7rem;
	height: 1px;
	background-color: #999;
}

/* DUŻY NAGŁÓWEK */

.about-title {
	font-family: 'Cormorant Garamond', serif;

	font-size: 5.6rem;
	font-weight: 400;

	line-height: 0.96;
	letter-spacing: -0.1rem;

	color: #333;

	margin: 0 0 3.8rem;

	max-width: 58rem;
}

/* TEKST */

.about-description {
	max-width: 53rem;
}

.about-description p {
	font-family: 'Gruppo', sans-serif;

	font-size: 1.8rem;
	line-height: 1.55;
	letter-spacing: 0;

	color: #555;

	margin: 0 0 2.4rem;
}

.about-description p:last-child {
	margin-bottom: 0;
}

/**********************
    PORTFOLIO
**********************/

.portfolio {
	padding: 7rem 0 12rem;
}

.portfolio .heading-secondary {
	text-align: center;
	margin-bottom: 8rem;
}

.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
}

.portfolio-grid img {
	width: 100%;
	height: 40rem;
	object-fit: cover;
	display: block;

	transition: transform 0.4s ease, opacity 0.4s ease;
}

.portfolio-grid img:hover {
	transform: scale(1.05);
	opacity: 0.9;
}
/* =========================================================
   ŚLUB
   ========================================================= */

.page-slub {
	background-color: #eae5e5;
}

.section-slub {
	padding: 16rem 0 7rem;
	background-color: #eae5e5;
}

/* =========================================================
		 LABEL
		 ========================================================= */

.slub-label {
	display: flex;
	align-items: center;
	gap: 2rem;

	font-family: 'Gruppo', sans-serif;
	font-size: 1.4rem;
	letter-spacing: 0.45rem;
	text-transform: uppercase;
	color: #555;

	margin-bottom: 3.5rem;
}

.slub-label-line {
	display: block;
	width: 7rem;
	height: 1px;
	background-color: #999;
}

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

.slub-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 7rem;

	min-height: 58rem;
}

.slub-hero-text {
	padding-left: 2rem;
}

.slub-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 6.2rem;
	font-weight: 400;
	line-height: 0.94;
	letter-spacing: -0.1rem;
	color: #333;

	margin: 0 0 3.8rem;
	max-width: 50rem;
}

.slub-intro {
	font-family: 'Gruppo', sans-serif;
	font-size: 1.7rem;
	line-height: 1.6;
	color: #555;

	max-width: 46rem;
	margin: 0 0 4rem;
}

.slub-link {
	display: inline-flex;
	align-items: center;
	gap: 2rem;

	font-family: 'Gruppo', sans-serif;
	font-size: 1.4rem;
	letter-spacing: 0.35rem;
	text-transform: uppercase;
	color: #555;

	text-decoration: none;

	transition: opacity 0.3s ease;
}

.slub-link:hover {
	opacity: 0.6;
}

.slub-link-line {
	display: block;
	width: 5rem;
	height: 1px;
	background-color: #777;
}

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

.slub-hero-image {
	width: 100%;
	max-width: 39rem;
	justify-self: center;
}

.slub-image-frame {
	position: relative;
	width: 100%;
	z-index: 1;
}

.slub-image-frame::after {
	content: '';
	position: absolute;

	width: 92%;
	height: 92%;

	right: -3rem;
	bottom: -3rem;

	background-color: #ddd3cf;

	z-index: -1;
}

.slub-img {
	width: 100%;
	height: auto;
	display: block;

	filter: brightness(0.97);

	box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.08);
}

/* =========================================================
		 PAKIET
		 ========================================================= */

.slub-package {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 7rem;

	margin-top: 11rem;

	/* usuwamy sztuczną wysokość */
	min-height: 0;
}

.slub-package-image {
	width: 100%;
	max-width: 37rem;
	justify-self: center;
}

.slub-package-image .slub-image-frame::after {
	left: -3rem;
	right: auto;
	bottom: -3rem;

	width: 92%;
	height: 92%;
}

.slub-package-text {
	padding-right: 2rem;
}

.slub-package-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 5.4rem;
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.1rem;
	color: #333;

	margin: 0 0 4rem;
}

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

.slub-features {
	list-style: none;
	padding: 0;
	margin: 0;

	max-width: 52rem;
}

.slub-features li {
	display: grid;
	grid-template-columns: 4rem 1fr;
	column-gap: 2rem;

	margin-bottom: 2.6rem;
}

.slub-features li:last-child {
	margin-bottom: 0;
}

.feature-number {
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.8rem;
	color: #888;

	padding-top: 0.2rem;
}

.slub-features strong {
	display: block;

	font-family: 'Gruppo', sans-serif;
	font-size: 1.7rem;
	font-weight: 400;
	line-height: 1.4;
	color: #444;

	margin-bottom: 0.4rem;
}

.slub-features p {
	font-family: 'Gruppo', sans-serif;
	font-size: 1.4rem;
	line-height: 1.45;
	color: #777;

	margin: 0;
}

/* =========================================================
		 GALERIA ŚLUBNA
		 ========================================================= */
.slub-gallery-section {
	margin-top: 11rem;
	margin-bottom: 0;
	position: relative;
}

.slub-gallery-section .slub-label {
	/*
		 * Więcej przestrzeni między napisem
		 * "GALERIA ŚLUBNA" a zdjęciami
		 */
	margin-bottom: 5rem;
}

/* =========================================================
		 UKŁAD GALERII
		 ========================================================= */

.slub-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;

	width: 100%;
}

.slub-gallery-large {
	width: 100%;
	overflow: hidden;
}

.slub-gallery-large img {
	width: 100%;
	height: 58rem;

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

	display: block;

	transition: transform 0.5s ease;
}

.slub-gallery-small {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 1.2rem;

	width: 100%;
}

.slub-gallery-small img {
	width: 100%;
	height: 28.4rem;

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

	display: block;

	transition: transform 0.5s ease;
}

.slub-gallery img:hover {
	transform: scale(1.03);
}

/* =========================================================
		 OCHRONA UKŁADU
		 ========================================================= */

.section-slub {
	overflow: visible;
}

.page-slub main {
	display: block;
}

.page-slub #footer {
	position: relative;
	display: block;
	clear: both;
}
/**********************
    SZKOLENIA
**********************/

.section-szkolenia {
	padding: 16rem 0 12rem;
	background-color: #eae5e5;
	overflow: hidden;
}

.szkolenia-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 7rem;
	min-height: 58rem;
}

.szkolenia-text-container {
	padding: 2rem 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.szkolenia-label {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin-bottom: 4rem;

	font-family: 'Gruppo', sans-serif;
	font-size: 1.5rem;
	letter-spacing: 0.5rem;
	text-transform: uppercase;
	color: #555;
}

.szkolenia-label-line {
	display: block;
	width: 7rem;
	height: 1px;
	background-color: #999;
}

.szkolenia-title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 6.4rem;
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.15rem;
	color: #333;
	margin: 0 0 4rem;
	max-width: 65rem;
}

.szkolenia-text {
	font-family: 'Gruppo', sans-serif;
	font-size: 1.8rem;
	line-height: 1.55;
	letter-spacing: 0;
	color: #555;
	max-width: 54rem;
	margin-bottom: 0;
}

.szkolenia-info {
	display: flex;
	align-items: center;
	gap: 2.4rem;
	margin-top: 4.5rem;
}

.szkolenia-arrow {
	width: 5.6rem;
	height: 5.6rem;

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

	border-radius: 50%;
	background-color: #d9ceca;

	font-family: Arial, sans-serif;
	font-size: 2.4rem;
	font-weight: 300;
	color: #555;

	transition: transform 0.3s ease;
}

.szkolenia-info:hover .szkolenia-arrow {
	transform: translateX(0.5rem);
}

.szkolenia-info-text {
	font-family: 'Gruppo', sans-serif;
	font-size: 1.4rem;
	line-height: 1.4;
	letter-spacing: 0.35rem;
	color: #555;
}

.szkolenia-img-container {
	position: relative;
	width: 100%;
	max-width: 58rem;
	justify-self: end;
	overflow: visible;
}

.szkolenia-img-container::after {
	content: '';
	position: absolute;

	width: 92%;
	height: 92%;

	right: -3rem;
	bottom: -3rem;

	background-color: #ddd3cf;

	z-index: 0;
}

.szkolenia-img {
	position: relative;
	z-index: 1;

	width: 100%;
	height: 48rem;

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

	display: block;

	filter: grayscale(0.05) brightness(0.95);

	box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.1);
}