/* =========================================================
   ABOUT — about.css (CLEAN, zgodny z HERO / config.css)
   Pod markup z about.php
   ========================================================= */


/* Sekcja */
.about {
	width: 100%;
}

/* ✅ ten sam wrapper co hero__content (grid 1360) */
.about__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
}

/* Rows */
.about__row {
	display: grid;
	align-items: start;
	column-gap: var(--about-col-gap);
}

/* Row 1: media + content */
.about__row--top {
	grid-template-columns: var(--about-media-left-w) 1fr;
}

/* Row 2: content + media */
.about__row--bottom {
	grid-template-columns: 1fr var(--about-media-right-w);
	margin-top: var(--about-row-gap);
}

/* =========================================================
   MEDIA
   - padding 62px ma być TYLKO OD ŚRODKA (między obrazem i tekstem)
   - dlatego:
     * lewy obraz: padding po PRAWEJ
     * prawy obraz: padding po LEWEJ
   ========================================================= */

.about__media {
	box-sizing: border-box;
	padding: 0;
	overflow: visible;
}

/* LEWY obraz: dochodzi do lewego marginesu gridu */
.about__media--left {
	padding: 0 var(--about-img-pad) 0 0;
}

/* PRAWY obraz: dochodzi do prawego marginesu gridu */
.about__media--right {
	padding: 0 0 0 var(--about-img-pad);
}

/* Image wrap */
.about__img-wrap {
	position: relative;
	display: inline-block;
	line-height: 0;
	overflow: visible;
}

/* Image */
.about__img {
	display: block;
	object-fit: cover;
}

/* LEFT img */
.about__img--left {
	width: var(--about-img-left-w);
	height: var(--about-img-left-h);
}

/* RIGHT img */
.about__img--right {
	width: var(--about-img-right-w);
	height: var(--about-img-right-h);
}

/* ✅ prawa kolumna row 1: start wyrównany do obrazu (62px) */
.about__col--right {
	padding-top: var(--about-img-pad);
}

/* ✅ spacing: label -> title (globalna typografia jest w config.css) */
.about .section-title {
	margin-top: 25px;
}

/* CTA (systemowy .btn w config.css) */
.about__btn {
	margin-top: 40px;
}

/* Desc */
.about__desc {
	margin-top: 30px;
	font-family: var(--font-family-base);
	font-weight: 400;
	font-size: var(--about-desc-size);
	line-height: var(--about-desc-line);
	letter-spacing: 0;
	color: var(--color-grey);
}

.about__desc > *:first-child {
	margin-top: 0;
}

.about__desc > *:last-child {
	margin-bottom: 0;
}

.about__desc p {
	margin: 0 0 14px 0;
}

/* =========================================================
   ABOUT — kreski jako osobne elementy
   ========================================================= */

.about__lines {
	position: absolute;
	pointer-events: none;
	z-index: 2;
}

.about__line {
	position: absolute;
	display: block;
	height: 3px;
	background: #37205E;
	opacity: 0;
	will-change: transform, opacity;
}

/* =========================
   LEFT (3 kreski)
   1) 155x3, wychodzi 60px
   2) 412x3, wychodzi 25px
   3) 155x3, wychodzi 40px
   ========================= */

.about__lines--left {
	top: -8px;
	right: -60px;
	width: 472px;
	height: 19px;
}

.about__lines--left .about__line--1 {
	top: 0;
	right: 0;
	width: 155px;
	transform: translateX(120px);
}

.about__lines--left .about__line--2 {
	top: 8px;
	right: 35px;
	width: 412px;
	transform: translateX(170px);
}

.about__lines--left .about__line--3 {
	top: 16px;
	right: 20px;
	width: 155px;
	transform: translateX(95px);
}

/* =========================
   RIGHT (2 kreski)
   1) 412x3, 30px od prawej krawędzi zdjęcia
   2) 155x3, 10px od prawej krawędzi zdjęcia
   ========================= */

.about__lines--right {
	top: -18px;
	right: 0;
	width: 100%;
	height: 11px;
}

.about__lines--right .about__line--1 {
	top: 0;
	right: 30px;
	width: 412px;
	transform: translateX(-130px);
}

.about__lines--right .about__line--2 {
	top: 8px;
	right: 10px;
	width: 155px;
	transform: translateX(-85px);
}

/* =========================
   IN VIEW — każda kreska osobno
   ========================= */

.about__img-wrap.is-inview .about__lines--left .about__line--1 {
	animation: aboutLineInRight1 950ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.about__img-wrap.is-inview .about__lines--left .about__line--2 {
	animation: aboutLineInRight2 1350ms cubic-bezier(0.22, 1, 0.36, 1) 180ms forwards;
}

.about__img-wrap.is-inview .about__lines--left .about__line--3 {
	animation: aboutLineInRight3 900ms cubic-bezier(0.22, 1, 0.36, 1) 420ms forwards;
}

.about__img-wrap.is-inview .about__lines--right .about__line--1 {
	animation: aboutLineInLeft1 1100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.about__img-wrap.is-inview .about__lines--right .about__line--2 {
	animation: aboutLineInLeft2 900ms cubic-bezier(0.22, 1, 0.36, 1) 240ms forwards;
}

@keyframes aboutLineInRight1 {
	0% {
		opacity: 0;
		transform: translateX(120px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes aboutLineInRight2 {
	0% {
		opacity: 0;
		transform: translateX(170px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes aboutLineInRight3 {
	0% {
		opacity: 0;
		transform: translateX(95px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes aboutLineInLeft1 {
	0% {
		opacity: 0;
		transform: translateX(-130px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes aboutLineInLeft2 {
	0% {
		opacity: 0;
		transform: translateX(-85px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
	.about__row--top,
	.about__row--bottom {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}

	.about__row--bottom {
		margin-top: 80px;
	}

	.about__col--right {
		padding-top: 0;
	}

	.about__media--left,
	.about__media--right {
		padding: 0;
	}

	.about__img--left,
	.about__img--right {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 14;
	}

	.about__lines {
		display: none;
	}
}

@media (max-width: 640px) {
	.about .section-title {
		margin-bottom: var(--section-space-sm);
	}

	.about__row.about__row--bottom {
		margin-top: 20px;
	}
}

/* accessibility */
@media (prefers-reduced-motion: reduce) {

	.about__line {
		opacity: 1;
		transform: none;
		animation: none !important;
	}
}