/* ========================================================= Podstrona „O
 * mnie" ========================================================= */

/* ---------------------------- HERO ---------------------------- */
.ah-hero {
	position: relative;
	overflow: hidden;
	background: #fff;
	isolation: isolate;
}

.ah-hero__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 600px;
	z-index: 0;
}

.ah-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.04fr 0.96fr;
	grid-template-areas:
		"intro   photo"
		"history photo";
	align-items: start;
	gap: 8px 48px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 60px 40px 78px;
}

.ah-hero__intro {
	grid-area: intro;
	max-width: 600px;
	min-height: 430px;
}

.ah-hero__right {
	grid-area: photo;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ah-history {
	grid-area: history;
	max-width: 560px;
	margin-top: 0;
}

/* --- breadcrumb + nagłówek (na navy) --- */
.ah-crumb {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 26px;
}

.ah-crumb a {
	color: rgba(255, 255, 255, 0.7);
}

.ah-crumb a:hover {
	color: #fff;
}

.ah-crumb svg {
	width: 16px;
	height: 16px;
}

.ah-crumb span {
	color: #5ec163;
}

.ah-title {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(38px, 5vw, 60px);
	line-height: 1.08;
	letter-spacing: -0.5px;
	color: #fff;
	margin: 0 0 20px;
}

.ah-title .accent-green {
	color: #5ec163;
}

.ah-subtitle {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: clamp(16px, 1.4vw, 19px);
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
}

.ah-underline,
.ah-subtitle .accent-green {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: #5ec163;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* --- blok „Moja historia" (na bieli) --- */
.ah-eyebrow {
	display: inline-block;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--green);
	margin-bottom: 12px;
}

.ah-history__title {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(28px, 3.4vw, 40px);
	color: var(--navy);
	margin: 0 0 20px;
}

.ah-history__text {
	color: #5a6577;
	font-size: 16px;
	line-height: 1.72;
	margin: 0 0 16px;
	max-width: 505px;
}

.ah-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 18px;
	margin: 28px 0 30px;
}

.ah-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: none;
	padding: 0;
	color: var(--navy);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 13.5px;
	white-space: nowrap;
}

.ah-chip svg {
	width: 34px;
	height: 34px;
	padding: 7px;
	border-radius: 50%;
	background: rgba(60, 180, 197, 0.12);
	color: var(--teal);
	box-sizing: border-box;
	flex-shrink: 0;
}

/* Współdzielone bloki rtz/chips + rtz/chip w kontekście Hero O mnie. */
.ah-history .about__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 18px;
	margin: 28px 0 30px;
}

.ah-history .about-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--navy);
	font-family: var(--font-head);
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
}

.ah-card__icon svg {
	width: 30px;
	height: 30px;
}

.ah-history .about-chip svg,
.ah-history .about-chip__icon {
	box-sizing: border-box;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	padding: 7px;
	border-radius: 50%;
	background: rgba(60, 180, 197, 0.12);
	color: var(--teal);
}

.ah-history .btn {
	max-width: 100%;
}

/* --- zdjęcie (karta) --- */
.ah-photo {
	position: relative;
	z-index: 2;
	width: min(460px, 100%);
	aspect-ratio: 0.9 / 1;
	border-radius: 30px;
	overflow: hidden;
	background: linear-gradient(180deg, #fff 0%, #eef4fa 100%);
	box-shadow: 0 34px 74px rgba(16, 34, 79, 0.3);
}

.ah-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 4%;
}

/* --- cytat pod zdjęciem --- */
.ah-quote {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 100%;
	max-width: 440px;
	margin: 0;
	padding: 26px 16px 8px;
}

.ah-quote__mark {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 84px;
	line-height: 0.4;
	height: 34px;
	color: rgba(60, 180, 197, 0.38);
}

.ah-quote__text {
	font-family: var(--font-hand);
	font-weight: 700;
	font-size: clamp(30px, 3.1vw, 40px);
	line-height: 1.28;
	color: var(--navy);
	margin: 8px 0 0;
}

.ah-quote__hl {
	position: relative;
	display: inline-block;
}

.ah-quote__uline {
	position: absolute;
	left: -3%;
	bottom: -0.12em;
	width: 106%;
	height: 0.32em;
	overflow: visible;
}

.ah-quote__text .accent-green {
	position: relative;
	display: inline-block;
	color: inherit;
}

.ah-quote__text .accent-green::after {
	position: absolute;
	right: -3%;
	bottom: -0.12em;
	left: -3%;
	height: 0.32em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 34 12, 76 3, 117 8' stroke='%234CB050' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	content: "";
}

.ah-quote__author {
	font-family: var(--font-hand);
	font-weight: 700;
	font-size: 26px;
	color: var(--green);
	margin-top: 16px;
}

/* --- dekoracje hero (na navy) --- */
.ah-deco {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.ah-deco--pi {
	top: 82px;
	left: 3.5%;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 42px;
	color: rgba(255, 255, 255, 0.5);
}

.ah-deco--sqrt {
	top: 198px;
	left: 6%;
	width: 60px;
	height: 42px;
}

.ah-deco--graph {
	top: 248px;
	left: 2.5%;
	width: 100px;
	height: 88px;
}

.ah-deco--frac {
	top: 80px;
	right: 3%;
	width: 44px;
	height: 50px;
}

.ah-deco--plus {
	top: 198px;
	right: 3.5%;
	width: 30px;
	height: 30px;
}

/* ---------------------------- JAK PROWADZĘ ZAJĘCIA
 * ---------------------------- */
.ah-approach {
	position: relative;
	overflow: hidden;
	background: #eef1f8;
	padding: 78px 0 92px;
}

.ah-approach__head {
	position: relative;
	z-index: 2;
	text-align: center;
}

.ah-eyebrow--center {
	display: block;
	text-align: center;
}

.ah-approach__title {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(26px, 3.4vw, 38px);
	color: var(--navy);
	margin: 2px 0 0;
}

.ah-approach__accent {
	position: relative;
	display: inline-block;
}

.ah-approach__underline {
	position: absolute;
	left: 2%;
	bottom: -0.32em;
	width: 96%;
	height: 0.4em;
	overflow: visible;
}

.ah-approach__title .accent-green {
	position: relative;
	display: inline-block;
	color: var(--green);
}

.ah-approach__title .accent-green::after {
	content: "";
	position: absolute;
	left: 2%;
	bottom: -0.32em;
	width: 96%;
	height: 0.4em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M4 7 C 30 11, 70 3, 116 7' stroke='%235EC163' stroke-width='3.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	pointer-events: none;
}

/* kreskowany ślad łączący karty */
.ah-approach__trail {
	position: absolute;
	left: 0;
	right: 0;
	top: 300px;
	width: 100%;
	height: 120px;
	z-index: 1;
}

.ah-approach__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: 1160px;
	margin: 50px auto 0;
	padding: 0 40px;
}

.ah-card {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"icon title"
		"text text";
	column-gap: 18px;
	align-items: center;
	background: #fff;
	border-radius: 20px;
	padding: 32px 30px 30px;
	box-shadow: 0 16px 40px rgba(16, 34, 79, 0.08);
}

.ah-card__icon {
	grid-area: icon;
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: #eaf0f8;
	color: var(--navy);
}

.ah-card__title {
	grid-area: title;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 20px;
	color: var(--navy);
	margin: 0;
}

.ah-card__uline {
	display: block;
	width: 44px;
	height: 3px;
	border-radius: 3px;
	background: var(--green);
	margin-top: 10px;
}

.ah-card__text {
	grid-area: text;
	margin: 22px 0 0;
	color: #5a6577;
	font-size: 15px;
	line-height: 1.7;
}

.ah-card__text strong {
	color: var(--navy);
	font-weight: 700;
}

/* ---------------------------- RESPONSYWNOŚĆ ---------------------------- */
@media (max-width: 980px) {

	.ah-approach__grid {
		grid-template-columns: 1fr;
		gap: 20px;
		max-width: 560px;
	}

	.ah-approach__trail {
		display: none;
	}
}

@media (max-width: 900px) {

	.ah-hero {
		background: #fff;
	}

	.ah-hero__bg {
		display: none;
	}

	.ah-hero__inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"intro"
			"photo"
			"history";
		gap: 0;
		padding: 44px 24px 0;
		background: linear-gradient(180deg, #10224f 0%, #1b3a7b 100%);
	}

	.ah-hero__intro {
		max-width: none;
		min-height: 0;
	}

	.ah-hero__right {
		margin: 28px 0 0;
		align-self: auto;
	}

	.ah-photo {
		width: min(340px, 100%);
	}

	.ah-quote {
		display: none;
	}

	/* biały panel historii, pełna szerokość, zaokrąglony top */
	.ah-history {
		margin: 34px -24px 0;
		max-width: none;
		background: #fff;
		padding: 40px 24px;
		border-radius: 30px 30px 0 0;
	}

	.ah-deco {
		display: none;
	}
}

@media (max-width: 460px) {

	.ah-chips {
		gap: 10px;
	}

	.ah-history .about__chips {
		gap: 10px;
	}

	.ah-chip {
		font-size: 13px;
		padding: 9px 15px;
	}

	.ah-card {
		padding: 26px 24px 26px;
	}
}