/**
 * Bloki ProseCaptain (squares/*) w barwach Inprogress.
 *
 * Wtyczka ma bazowy uklad na zmiennych --sq-*, kazda regula z jedna klasa.
 * Tutaj zawsze co najmniej dwie klasy (korzen bloku + element), wiec te
 * reguly wygrywaja niezaleznie od kolejnosci ladowania arkuszy. Wartosci z projektu Figmy
 * (Inprogress, ramka 6312:9860) przepiete na tokeny motywu.
 */

:root {
	--sq-container-width: var(--container-width);
	--sq-gap: 16px;
	--sq-radius: var(--radius-lg);
	--sq-radius-lg: var(--radius-2xl);

	--sq-color-text: var(--color-secondary-950);
	--sq-color-muted: #66737d;
	--sq-color-accent: var(--color-primary-600);
	--sq-color-on-accent: var(--color-white);
	--sq-color-surface: var(--color-white);
	--sq-color-surface-alt: var(--color-secondary-50);
	--sq-color-line: var(--color-secondary-100);
	--sq-color-dark: var(--color-secondary);
	--sq-color-on-dark: var(--color-white);
	--sq-color-on-dark-muted: var(--color-light-grey);
	--sq-color-accent-on-dark: var(--color-primary);
}

/* ---------- wspolne ---------- */

/* Na froncie font daje body; w kanwie edytora trzeba go podac blokom wprost. */
.sq-block.sq-block {
	font-family: Mukta, sans-serif;
}

/* Kanwa edytora nie ma Tailwinda (output.css), z ktorego na froncie pochodzi
   .container - bez tego tresc bloku przylegalaby do lewej krawedzi. */
.editor-styles-wrapper .sq-block .container {
	width: min(var(--container-width), 100% - 32px);
	margin-inline: auto;
}

.sq-block .sq-eyebrow {
	margin: 0 0 16px;
	color: var(--color-primary-700);
	font-size: var(--text-sm-size);
	line-height: 1.5;
}

.sq-block .sq-title {
	margin: 0;
	color: var(--sq-color-text);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}

/* ---------- jumbo ---------- */

.sq-jumbo .sq-jumbo__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 617px);
	align-items: end;
	gap: 40px;
	padding-block: 48px 0;
}

.sq-jumbo:not(.sq-jumbo--has-badges) .sq-jumbo__inner {
	align-items: center;
	padding-bottom: 48px;
}

.sq-jumbo .sq-jumbo__content {
	align-self: center;
	max-width: 624px;
	padding-bottom: 48px;
}

.sq-jumbo--dark .sq-jumbo__eyebrow {
	color: var(--color-primary);
}

.sq-jumbo .sq-jumbo__title {
	margin: 0 0 16px;
	font-size: clamp(2.5rem, 4.03vw, 3.75rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}

.sq-jumbo--dark .sq-jumbo__title {
	color: var(--color-white);
}

.sq-jumbo .sq-jumbo__subtitle {
	margin: 0 0 40px;
	font-size: clamp(var(--text-lg-size), 1.67vw, var(--text-2xl-size));
	line-height: 1.552;
}

.sq-jumbo--dark .sq-jumbo__subtitle {
	color: var(--color-light-grey);
}

/* Sygnet: trzy luki w bieli 8%, przyciete do pudelka po prawej. */
.sq-jumbo .sq-jumbo__decoration {
	inset: 0 0 auto auto;
	width: 415px;
	height: 100%;
	background-color: rgb(var(--color-white-rgb) / 0.08);
	-webkit-mask: url("../images/doradztwo/sygnet-luki.svg") -21px -133px / 899px 898px no-repeat;
	mask: url("../images/doradztwo/sygnet-luki.svg") -21px -133px / 899px 898px no-repeat;
}

.sq-jumbo .sq-jumbo__image {
	border-radius: var(--radius-2xl);
}

/* Kolaz z projektu: zdjecie i piec kafelkow w procentach pudelka 617x551,
   wiec przy mniejszej szerokosci skaluja sie razem. Dziala dla dokladnie
   pieciu odznak; przy innej liczbie odznaki leza rzedem na dole zdjecia. */
.sq-jumbo--has-badges .sq-jumbo__media {
	width: 100%;
	aspect-ratio: 617 / 551;
}

.sq-jumbo--has-badges .sq-jumbo__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 79.74%;
	height: 86.93%;
	object-fit: cover;
}

.sq-jumbo--decorated.sq-jumbo--has-badges .sq-jumbo__media::before {
	content: "";
	position: absolute;
	top: 49.91%;
	left: 35.49%;
	width: 64.51%;
	height: 50.09%;
	opacity: 0.32;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75'%3E%3Cpath d='M12 0v24M0 12h24' stroke='%23fff' stroke-width='4'/%3E%3C/svg%3E") 0 0 / 74.7px 74.7px repeat;
}

.sq-jumbo--has-badges .sq-jumbo__badges {
	position: absolute;
	left: 4%;
	bottom: 16%;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.sq-jumbo .sq-jumbo__badge {
	height: 91px;
	padding: 13px;
	border: 1px solid var(--color-grey);
	border-radius: var(--radius-lg);
	background: var(--color-light-grey);
}

.sq-jumbo .sq-jumbo__badge-image {
	width: auto;
	max-width: 160px;
	height: 100%;
	object-fit: contain;
}

.sq-jumbo__badges:has(> .sq-jumbo__badge:nth-child(5):last-child) {
	position: static;
	display: block;
}

.sq-jumbo__badges:has(> .sq-jumbo__badge:nth-child(5):last-child) > .sq-jumbo__badge {
	position: absolute;
	/* Blok, nie grid z bazy: w komorce grida height: 100% obrazka nie ma
	   do czego sie odniesc i logo PMP wychodzilo dolem poza kafelek. */
	display: block;
	height: 16.52%;
	padding: 2.4%;
}

.sq-jumbo__badges:has(> .sq-jumbo__badge:nth-child(5):last-child) .sq-jumbo__badge-image {
	width: 100%;
	max-width: none;
}

.sq-jumbo__badges:has(> .sq-jumbo__badge:nth-child(5):last-child) > :nth-child(1) { top: 47.37%; left: 56.40%; width: 24.64%; }
.sq-jumbo__badges:has(> .sq-jumbo__badge:nth-child(5):last-child) > :nth-child(2) { top: 47.37%; left: 82.33%; width: 17.34%; }
.sq-jumbo__badges:has(> .sq-jumbo__badge:nth-child(5):last-child) > :nth-child(3) { top: 65.34%; left: 9.56%;  width: 30.31%; }
.sq-jumbo__badges:has(> .sq-jumbo__badge:nth-child(5):last-child) > :nth-child(4) { top: 65.34%; left: 41.17%; width: 30.31%; }
.sq-jumbo__badges:has(> .sq-jumbo__badge:nth-child(5):last-child) > :nth-child(5) { top: 65.34%; left: 72.93%; width: 21.23%; }

/* ---------- logo section ---------- */

.sq-logo-section .sq-logo-section__title {
	color: var(--sq-color-muted);
	font-size: var(--text-sm-size);
}

.sq-logo-section--row .sq-logo-section__list {
	gap: var(--space-3);
}

/* Pudelko 128x76 z object-fit: poziome logotypy wychodza ok. 44px wysokosci
   jak w projekcie, a kwadratowe godla (Michigan) dostaja pelne 76px. */
.sq-logo-section .sq-logo-section__image {
	width: 128px;
	height: 76px;
	object-fit: contain;
}

/* ---------- how it works ---------- */

.sq-block.sq-how-it-works {
	padding-block: clamp(56px, 5vw, 64px);
	background: var(--color-secondary-50);
}

.sq-how-it-works .sq-heading {
	margin-bottom: 48px;
}

.sq-how-it-works .sq-title {
	font-size: clamp(2rem, 3.4vw, var(--text-5xl-size));
}

.sq-how-it-works .sq-subtitle {
	color: var(--sq-color-muted);
	font-size: var(--text-lg-size);
}

.sq-how-it-works .sq-how-it-works__step {
	gap: 16px;
	padding: 24px 20px;
	border-color: var(--color-secondary-100);
	border-radius: var(--radius-xl);
}

.sq-how-it-works .sq-how-it-works__number {
	background: var(--color-primary-600);
	font-size: var(--text-sm-size);
}

.sq-how-it-works .sq-how-it-works__step-title {
	color: var(--color-secondary);
	font-size: var(--text-xl-size);
	font-weight: 400;
	letter-spacing: 0;
}

.sq-how-it-works .sq-how-it-works__step-text {
	color: rgb(var(--color-secondary-rgb) / 0.8);
	font-size: var(--text-sm-size);
	line-height: 1.5714;
}

/* ---------- responsywnosc ---------- */

@media (max-width: 960px) {
	.sq-jumbo .sq-jumbo__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.sq-jumbo .sq-jumbo__content {
		max-width: none;
		padding-bottom: 32px;
	}

	.sq-jumbo .sq-jumbo__media {
		max-width: 617px;
		margin-inline: auto;
	}

	.sq-jumbo .sq-jumbo__decoration {
		opacity: 0.6;
	}
}

@media (max-width: 760px) {
	.sq-jumbo .sq-jumbo__inner {
		padding-top: 56px;
	}

	.sq-jumbo .sq-jumbo__title {
		font-size: clamp(2rem, 9.4vw, 3.5rem);
	}

	.sq-logo-section .sq-logo-section__image {
		width: 96px;
		height: 56px;
	}
}