/* ==========================================================================
   np-intro-tiles — trzy pionowe kafelki na stronie głównej (index.html).
   Neutralne stylistycznie, zgodne z tokenami reszty serwisu.
   ========================================================================== */

/* -------------------- Hero: podtytuł pod H1 -------------------- */
.np-hero-subtitle {
	display: block;
	margin: 10px 0 0;
	color: #ffffff !important;
	font-family: "Cormorant Garamond", serif !important;
	font-size: clamp(20px, 2.4vw, 34px) !important;
	font-weight: 400 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase;
	text-shadow: 0 5px 26px rgba(0, 0, 0, .54) !important;
}


.np-intro-tiles {
	padding: clamp(56px, 7vw, 96px) 0 clamp(72px, 9vw, 120px);
	background: #fff;
}
.np-intro-tiles__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.4vw, 32px);
	max-width: 1680px;
	margin: 0 auto;
	padding: 0 32px;
	align-items: stretch;
}
.np-intro-tile {
	display: flex;
	flex-direction: column;
	padding: clamp(34px, 3.4vw, 52px) clamp(28px, 3vw, 40px);
	border-radius: 28px;
	background: #f4f2ee;
	box-shadow: 0 16px 44px rgba(0,0,0,.06);
}
.np-intro-tile--dark {
	background: linear-gradient(160deg, #241a00, #0c0c0c 60%);
	color: #fff;
}
.np-intro-tile__eyebrow {
	display: block;
	margin-bottom: 18px;
	color: #9a7300;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.np-intro-tile--dark .np-intro-tile__eyebrow { color: #ffb403; }
.np-intro-tile h3 {
	margin: 0 0 20px;
	color: #181818;
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(26px, 2.4vw, 32px);
	font-weight: 500;
	line-height: 1.2;
}
.np-intro-tile--dark h3 { color: #fff; }
.np-intro-tile h6 {
	margin: 26px 0 10px;
	color: #846300;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.np-intro-tile--dark h6 { color: #ffb403; }
.np-intro-tile h6:first-child { margin-top: 0; }
.np-intro-tile p {
	margin: 0 0 16px;
	color: #4c4c4c;
	font-size: 16px;
	line-height: 1.78;
}
.np-intro-tile--dark p { color: rgba(255,255,255,.82); }
.np-intro-tile p:last-child { margin-bottom: 0; }
.np-intro-tile__signature p {
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(19px, 1.7vw, 22px);
	line-height: 1.6;
}

@media (max-width: 1099px) {
	.np-intro-tiles__grid { grid-template-columns: 1fr; max-width: 720px; }
}
@media (max-width: 699px) {
	.np-intro-tiles__grid { padding: 0 18px; }
}

/* -------------------- Wiersze 1/3 + 2/3 (tekst / obraz) -------------------- */
.np-intro-row { padding: 0; }
.np-intro-row + .np-intro-row { margin-top: clamp(20px, 2.4vw, 32px); }
.np-intro-row__grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: clamp(20px, 2.4vw, 32px);
	max-width: 1680px;
	margin: 0 auto;
	padding: 0 32px;
	align-items: stretch;
}
.np-intro-row__grid--reverse { grid-template-columns: 2fr 1fr; }
.np-intro-row__grid--reverse .np-intro-col:first-child { order: 2; }
.np-intro-row__grid--reverse .np-intro-col:last-child { order: 1; }

.np-intro-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(34px, 3.4vw, 52px) clamp(28px, 3vw, 40px);
	border-radius: 28px;
	background: #f4f2ee;
	box-shadow: 0 16px 44px rgba(0,0,0,.06);
}
.np-intro-col--dark {
	background: linear-gradient(160deg, #241a00, #0c0c0c 60%);
	color: #fff;
	padding-top: clamp(18px, 1.8vw, 26px);
	padding-bottom: clamp(18px, 1.8vw, 26px);
}
.np-intro-col--heading h3 {
	margin: 0;
	color: #181818;
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(30px, 3vw, 42px);
	font-weight: 500;
	line-height: 1.18;
}
.np-intro-col--heading__lead {
	margin: 16px 0 0 !important;
	color: #5b5b5b !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
}
.np-intro-col--dark.np-intro-col--heading h3 { color: #fff; }

.np-intro-col--image { padding: 0; overflow: hidden; }
.np-intro-col--image img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: center; }
.np-intro-col--image-pair { padding: 0; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: transparent; box-shadow: none; }
.np-intro-col--image-pair img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: center; border-radius: 28px; box-shadow: 0 16px 44px rgba(0,0,0,.06); }

@media (max-width: 1099px) {
	.np-intro-row__grid,
	.np-intro-row__grid--reverse { grid-template-columns: 1fr; }
	.np-intro-row__grid--reverse .np-intro-col:first-child,
	.np-intro-row__grid--reverse .np-intro-col:last-child { order: initial; }
	.np-intro-col--image-pair { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 699px) {
	.np-intro-row__grid { padding: 0 18px; }
	.np-intro-col--image-pair { grid-template-columns: 1fr; }
}

/* -------------------- Podpis dołączony do ciemnej karty "Doświadczenie" -------------------- */
.np-intro-signature {
	margin-top: 10px !important;
	padding-top: 10px;
	border-top: 1px solid rgba(255,255,255,.14);
	font-family: "Cormorant Garamond", serif;
	font-size: 17px !important;
	font-style: italic;
	color: rgba(255,255,255,.9) !important;
}
.np-intro-signature--light {
	border-top: 1px solid rgba(0,0,0,.1);
	color: #4c4c4c !important;
}