/* =========================================================================
 * Szablon: Obiekty komercyjne (Infidea)
 * Responsywny rebuild designu z Figmy. Style scope'owane pod .ok-page,
 * żeby nie kolidowały z motywem Astra.
 * Paleta: granat #152944 · szary #404E5C · złoto #D9BA8C
 * ====================================================================== */

.ok-page {
	--ok-navy: #152944;
	--ok-navy-2: #1d3a5f;
	--ok-slate: #404e5c;
	--ok-gold: #d9ba8c;
	--ok-gold-dark: #c9a878;
	--ok-bg-alt: #f9f9f9;
	--ok-border: #e7e9ee;
	--ok-radius: 14px;
	--ok-shadow: 0 4px 18px rgba(21, 41, 68, 0.10);
	--ok-shadow-lg: 0 14px 40px rgba(21, 41, 68, 0.14);
	--ok-maxw: 1180px;

	font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--ok-slate);
	background: #fff;
	font-size: 17px;
	line-height: 1.65;

	/* Wyjście z kontenera Astry na pełną szerokość (landing page). */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow-x: clip;
}

.ok-page * {
	box-sizing: border-box;
}

/* ---------- Layout ---------- */
.ok-container {
	width: 100%;
	max-width: var(--ok-maxw);
	margin: 0 auto;
	padding: 0 24px;
}
.ok-container--narrow {
	max-width: 860px;
}

.ok-section {
	padding: clamp(34px, 4.2vw, 60px) 0;
}
.ok-section--alt {
	background: var(--ok-bg-alt);
}

.ok-section__head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto clamp(22px, 2.6vw, 38px);
}
.ok-section__head--left {
	text-align: left;
	margin-left: 0;
}
.ok-section__title {
	color: var(--ok-navy);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.15;
	margin: 0;
	letter-spacing: -0.01em;
}
.ok-section__title--light {
	color: #fff;
}
.ok-section__sub {
	margin: 16px 0 0;
	font-size: 18px;
}

.ok-eyebrow {
	display: inline-block;
	margin: 0 0 12px;
	color: var(--ok-gold-dark);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.ok-eyebrow--light {
	color: var(--ok-gold);
}

/* ---------- Przyciski ---------- */
.ok-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 30px;
	border-radius: 500px;
	font-weight: 600;
	font-size: 17px;
	line-height: 1;
	text-decoration: none;
	border: 2px solid transparent;
	transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	cursor: pointer;
}
.ok-btn--solid {
	background: var(--ok-navy);
	color: var(--ok-gold);
}
.ok-btn--solid:hover {
	background: var(--ok-navy-2);
	color: var(--ok-gold);
	transform: translateY(-2px);
	box-shadow: var(--ok-shadow);
}
.ok-btn--ghost {
	background: transparent;
	color: #fff;
	border-color: var(--ok-gold);
}
.ok-btn--ghost:hover {
	background: var(--ok-gold);
	color: var(--ok-navy);
	transform: translateY(-2px);
}
/* Outline na jasnym tle (sekcja intro) */
.ok-btn--outline {
	background: transparent;
	color: var(--ok-navy);
	border-color: var(--ok-gold);
}
.ok-btn--outline:hover {
	background: var(--ok-gold);
	color: var(--ok-navy);
	transform: translateY(-2px);
}

/* ---------- Baner (nagłówek strony) ---------- */
.ok-banner {
	background-size: cover;
	background-position: center;
	color: #fff;
	min-height: clamp(300px, 34vw, 400px);
	display: flex;
	align-items: center;
}
.ok-banner__inner {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.ok-banner__title {
	color: #fff;
	font-weight: 700;
	font-size: clamp(34px, 5.2vw, 60px);
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0;
	max-width: 60%;
}
.ok-banner__phone {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 30px;
	background: var(--ok-navy);
	text-decoration: none;
}
.ok-banner__phone-label {
	color: var(--ok-gold);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
}
.ok-banner__phone-num {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.1;
}
.ok-banner__phone-num svg {
	color: var(--ok-gold);
	width: 28px;
	height: 28px;
}

/* ---------- Sekcja intro (tekst + zdjęcie) ---------- */
.ok-intro__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: stretch;
}
.ok-intro__text .ok-section__title {
	margin-bottom: 18px;
	text-align: left;
}
.ok-intro__text p {
	margin: 0 0 16px;
}
.ok-intro__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 26px;
}
.ok-intro__media {
	height: 100%;
}
.ok-intro__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* ---------- Siatki ---------- */
.ok-grid {
	display: grid;
	gap: 24px;
}
.ok-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}
.ok-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

/* ---------- Karty: Rodzaje obiektów (ikona po lewej, tekst po prawej) ---------- */
.ok-card {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	background: #fff;
	padding: 26px 28px;
	box-shadow: -6px 9px 16px -9px rgba(21, 41, 68, 0.22),
		6px 9px 16px -9px rgba(21, 41, 68, 0.22);
}
.ok-card__icon {
	flex: 0 0 auto;
	color: var(--ok-gold);
	line-height: 0;
}
.ok-card__icon svg {
	width: 46px;
	height: 46px;
	stroke-width: 1.4;
}
.ok-card__body {
	min-width: 0;
}
.ok-card__title {
	color: #152944;
	font-weight: 700;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 2px 0 8px;
}
.ok-card__desc {
	margin: 0;
	font-weight: 400;
	font-size: 17px;
	color: #505e5c;
	line-height: 1.5;
}

/* ---------- Cele wyceny (zdjęcie po lewej, treść + lista po prawej) ---------- */
.ok-purposes__inner {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: stretch;
}
.ok-purposes__media {
	height: 100%;
}
.ok-purposes__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}
.ok-purposes__content .ok-section__title {
	text-align: left;
	margin-bottom: 14px;
}
.ok-purposes__intro {
	margin: 0 0 22px;
}
.ok-purposes__list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}
.ok-purpose {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 15px 0;
	border-bottom: 1px solid var(--ok-border);
}
.ok-purpose:first-child {
	padding-top: 0;
}
.ok-purpose__icon {
	flex: 0 0 auto;
	color: var(--ok-gold-dark);
	line-height: 0;
	margin-top: 1px;
}
.ok-purpose__icon svg {
	width: 26px;
	height: 26px;
}
.ok-purpose__title {
	color: var(--ok-navy);
	font-weight: 700;
	font-size: 18px;
	margin: 0 0 2px;
}
.ok-purpose__desc {
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
}

/* ---------- Kroki ---------- */
.ok-steps__grid {
	counter-reset: ok-step;
}
.ok-step {
	position: relative;
	text-align: center;
	padding: 40px 24px 32px;
}
.ok-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--ok-navy);
	color: var(--ok-gold);
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 20px;
}
.ok-step__title {
	color: var(--ok-navy);
	font-weight: 700;
	font-size: 20px;
	margin: 0 0 10px;
}
.ok-step__desc {
	margin: 0;
	font-size: 16px;
}
/* łącznik między krokami (desktop) */
.ok-steps__grid .ok-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 76px;
	right: -12px;
	width: 24px;
	height: 2px;
	background: var(--ok-gold);
	opacity: 0.5;
}

/* ---------- Wymagane dokumenty (pełna szerokość, zdjęcie przy prawej krawędzi) ---------- */
.ok-section.ok-docs {
	padding: 0;
	background: var(--ok-bg-alt);
}
.ok-docs__grid {
	display: grid;
	grid-template-columns: 1fr clamp(360px, 42vw, 720px);
	align-items: stretch;
	min-height: 520px;
}
.ok-docs__content {
	align-self: center;
	padding: clamp(44px, 5vw, 76px) clamp(24px, 4vw, 56px) clamp(44px, 5vw, 76px)
		max(24px, calc((100vw - var(--ok-maxw)) / 2 + 24px));
}
.ok-docs__intro {
	margin: 0 0 22px;
}
.ok-docs__outro {
	margin: 20px 0 0;
}
.ok-docs__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}
.ok-doclist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.ok-doclist li {
	position: relative;
	padding-left: 22px;
	font-size: 16px;
	line-height: 1.5;
}
.ok-doclist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ok-gold);
}

/* ---------- CTA / Formularz ---------- */
.ok-cta {
	background-size: cover;
	background-position: center;
	color: #fff;
}
.ok-cta__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}
.ok-cta__lead {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.88);
	margin: 14px 0 24px;
}
.ok-cta__contacts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.ok-cta__contacts a {
	color: var(--ok-gold);
	font-size: 22px;
	font-weight: 600;
	text-decoration: none;
}
.ok-cta__contacts a:hover {
	text-decoration: underline;
}
.ok-cta__form {
	background: #fff;
	border-radius: var(--ok-radius);
	padding: 32px;
	box-shadow: var(--ok-shadow-lg);
	color: var(--ok-slate);
}
.ok-form-placeholder {
	border: 2px dashed var(--ok-gold);
	border-radius: 10px;
	padding: 28px;
	text-align: center;
	color: var(--ok-navy);
	background: var(--ok-bg-alt);
}
.ok-form-placeholder code {
	background: rgba(21, 41, 68, 0.08);
	padding: 2px 6px;
	border-radius: 4px;
}
/* Lekkie dopasowanie pól Contact Form 7 wewnątrz białej karty */
.ok-cta__form .wpcf7-form-control-wrap input,
.ok-cta__form .wpcf7-form-control-wrap textarea,
.ok-cta__form input.wpcf7-form-control:not([type="submit"]),
.ok-cta__form textarea.wpcf7-form-control {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ok-border);
	border-radius: 8px;
	font: inherit;
	margin-bottom: 12px;
	background: #fff;
}
.ok-cta__form input.wpcf7-submit {
	width: 100%;
	padding: 14px 24px;
	border: 0;
	border-radius: 500px;
	background: var(--ok-navy);
	color: var(--ok-gold);
	font-weight: 600;
	font-size: 17px;
	cursor: pointer;
	transition: background 0.2s ease;
}
.ok-cta__form input.wpcf7-submit:hover {
	background: var(--ok-navy-2);
}

/* ---------- FAQ / akordeon ---------- */
.ok-accordion {
	display: grid;
	gap: 14px;
}
.ok-accordion__item {
	border: 1px solid #ececec;
	border-radius: 6px;
	background: var(--ok-bg-alt);
	overflow: hidden;
}
.ok-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	text-align: left;
	padding: 22px 26px;
	background-color: transparent !important;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	color: var(--ok-navy);
}
/* Nadpisanie domyślnych styli <button> z motywu — brak zmiany tła na hover/focus/open */
.ok-accordion__trigger:hover,
.ok-accordion__trigger:focus,
.ok-accordion__trigger:focus-visible,
.ok-accordion__trigger:active,
.ok-accordion__trigger[aria-expanded="true"] {
	background-color: transparent !important;
	color: var(--ok-navy) !important;
	box-shadow: none !important;
	outline: none;
}
/* Jedyny efekt hover — zmiana koloru strzałki */
.ok-accordion__trigger:hover .ok-accordion__chevron {
	border-color: var(--ok-gold-dark);
}
.ok-accordion__trigger:hover .ok-accordion__chevron::before {
	border-color: var(--ok-navy);
}
.ok-accordion__chevron {
	position: relative;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border: 1.5px solid var(--ok-gold);
	border-radius: 50%;
}
.ok-accordion__chevron::before {
	content: "";
	position: absolute;
	top: 40%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--ok-gold-dark);
	border-bottom: 2px solid var(--ok-gold-dark);
	transform: translate(-50%, -50%) rotate(45deg);
	transition: transform 0.2s ease, top 0.2s ease;
}
.ok-accordion__trigger[aria-expanded="true"] .ok-accordion__chevron::before {
	top: 56%;
	transform: translate(-50%, -50%) rotate(-135deg);
}
.ok-accordion__panel {
	padding: 0 26px 24px;
}
.ok-accordion__panel p {
	margin: 0;
	font-size: 16px;
	color: #6b7682;
}
.ok-accordion__panel[hidden] {
	display: none;
}

/* ---------- Umów się na rozmowę (kontakt + mapa) ---------- */
.ok-kontakt__inner {
	display: grid;
	grid-template-columns: minmax(300px, 0.95fr) 1.1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}
.ok-kontakt__offices {
	display: grid;
	gap: 28px;
}
.ok-office {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--ok-border);
	border-radius: 0;
	box-shadow: var(--ok-shadow);
	padding: 30px 34px;
}
.ok-office::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 168px;
	height: 168px;
	transform: translateY(-50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9ba8c' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3l1.5 4-2 1.5a11 11 0 0 0 5 5l1.5-2 4 1.5v3a2 2 0 0 1-2 2A15 15 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") no-repeat center / contain;
	opacity: 0.16;
	pointer-events: none;
}
.ok-office > * {
	position: relative;
	z-index: 1;
}
.ok-office__city {
	color: var(--ok-navy);
	font-weight: 700;
	font-size: 22px;
	margin: 0 0 18px;
}
.ok-office__addr,
.ok-office__line {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	color: var(--ok-slate);
	text-decoration: none;
	font-size: 17px;
}
.ok-office__line:last-child {
	margin-bottom: 0;
}
.ok-office__ico {
	flex: 0 0 auto;
	color: var(--ok-gold-dark);
	line-height: 0;
}
.ok-office__ico svg {
	width: 20px;
	height: 20px;
}
.ok-office__line--primary {
	color: var(--ok-navy);
	font-weight: 700;
	font-size: 21px;
}
.ok-office__line--mail {
	text-decoration: underline;
	text-underline-offset: 2px;
}
a.ok-office__line:hover {
	color: var(--ok-gold-dark);
}
.ok-kontakt__map img {
	width: 100%;
	height: auto;
	display: block;
}

/* ============================ RESPONSYWNOŚĆ ============================ */
@media (max-width: 980px) {
	.ok-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
	.ok-intro__inner,
	.ok-purposes__inner,
	.ok-docs__grid,
	.ok-kontakt__inner {
		grid-template-columns: 1fr;
	}
	.ok-kontakt__map {
		order: -1;
		max-width: 460px;
		margin: 0 auto;
	}
	.ok-docs__grid {
		min-height: 0;
	}
	.ok-intro__media {
		height: 300px;
	}
	.ok-purposes__media {
		height: 320px;
		order: -1;
	}
	.ok-docs__content {
		padding-top: clamp(34px, 6vw, 56px);
		padding-bottom: 0;
	}
	.ok-docs__media {
		height: 320px;
	}
	.ok-cta__inner {
		grid-template-columns: 1fr;
	}
	.ok-steps__grid .ok-step:not(:last-child)::after {
		display: none;
	}
}

@media (max-width: 640px) {
	.ok-page {
		font-size: 16px;
	}
	.ok-grid--3,
	.ok-grid--2 {
		grid-template-columns: 1fr;
	}
	.ok-container {
		padding: 0 18px;
	}
	.ok-banner__inner {
		align-items: flex-start;
		flex-direction: column;
	}
	.ok-banner__title {
		max-width: 100%;
	}
	.ok-banner__phone {
		width: 100%;
	}
	.ok-banner__phone-label {
		font-size: 20px;
	}
	.ok-banner__phone-num {
		font-size: 26px;
	}
	.ok-intro__actions .ok-btn {
		width: 100%;
	}
	.ok-cta__form {
		padding: 24px 20px;
	}
}