/* ========================================================================== 
   Synameda About page (/apie-mus/)
   ========================================================================== */

body.snmd-about-page,
body.snmd-about-page .site-main,
body.snmd-about-page .page-content,
body.snmd-about-page article.page,
body.snmd-about-page .entry-content {
	width: 100%;
	max-width: none !important;
	margin: 0;
	padding: 0 !important;
	background: #f4f5f7;
}

body.snmd-about-page .entry-title,
body.snmd-about-page .page-header { display: none; }

body.snmd-about-page .elementor-widget-shortcode,
body.snmd-about-page .elementor-widget-shortcode > .elementor-widget-container,
body.snmd-about-page .elementor-shortcode {
	width: 100%;
	margin: 0;
	padding: 0;
}

.sa {
	--sa-ink: #1f1f1f;
	--sa-text: #40506a;
	--sa-border: #dfe7f1;
	--sa-blue: #3e6ae1;
	--sa-navy: #1f2b47;
	--sa-radius: 22px;
	--sa-max: 1400px;

	width: 100%;
	color: var(--sa-ink);
	font-family: var(--snmd-font-body, "Manrope", "Instrument Sans", system-ui, sans-serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.sa *,
.sa *::before,
.sa *::after { box-sizing: border-box; }

.sa :where(h1, h2, h3, p, ul, figure) { margin: 0; }
.sa :where(ul) { padding: 0; list-style: none; }

.sa h1,
.sa h2,
.sa h3 {
	font-family: var(--snmd-font-heading, "Instrument Sans", "Manrope", system-ui, sans-serif);
	font-weight: var(--snmd-weight-heading, 600);
	line-height: var(--snmd-leading-heading, 1.15);
	letter-spacing: -.03em;
	color: var(--sa-ink);
}

.sa h1 { font-size: clamp(42px, 5vw, 64px); }
.sa h2 { font-size: clamp(30px, 3.4vw, 46px); }
.sa h3 { font-size: clamp(19px, 1.6vw, 23px); letter-spacing: -.02em; }

.sa svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sa-section,
.sa-wrap {
	width: 100%;
	margin: 0;
	padding: 0;
}

.sa-wrap {
	max-width: var(--sa-max);
	margin-inline: auto;
}

/* Elementor owns spacing between the live split shortcodes. */
.sa:not(.sa--split) .sa-section { padding: 28px 18px; }
.sa:not(.sa--split):first-child .sa-section { padding-top: 42px; }

/* Intro ------------------------------------------------------------------ */

.sa-intro__layout {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr);
	align-items: center;
	gap: clamp(50px, 7vw, 105px);
}

.sa-intro__copy { padding: 30px 0; }

.sa-intro__label {
	margin-bottom: 18px !important;
	color: var(--sa-blue);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
}

.sa-intro h1 { max-width: 11ch; }

.sa-intro__copy > p:last-child {
	max-width: 650px;
	margin-top: 24px;
	color: var(--sa-text);
	font-size: 18px;
	line-height: 1.7;
}

.sa-intro__image {
	min-height: 430px;
	border-radius: var(--sa-radius);
	overflow: hidden;
	background: #ddd0bd;
}

.sa-intro__image img,
.sa-editorial__image img,
.sa-competence__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sa-intro__image img { min-height: 430px; }

/* Foundation ------------------------------------------------------------- */

.sa-foundation__layout {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: clamp(48px, 7vw, 110px);
	padding-top: clamp(34px, 4.2vw, 58px);
	border-top: 1px solid var(--sa-border);
}

.sa-foundation h2 { max-width: 13ch; }

.sa-foundation__copy {
	display: grid;
	gap: 18px;
	color: var(--sa-text);
}

/* Vision ----------------------------------------------------------------- */

.sa-editorial {
	display: grid;
	grid-template-columns: minmax(380px, .88fr) minmax(0, 1.12fr);
	align-items: center;
	gap: clamp(52px, 7vw, 112px);
}

.sa-editorial__image {
	height: clamp(500px, 47vw, 650px);
	border-radius: var(--sa-radius);
	overflow: hidden;
	background: #e2d4bc;
}

.sa-editorial__copy > p {
	max-width: 720px;
	margin-top: 22px;
	color: var(--sa-text);
}

.sa-categories { margin-top: 32px; }
.sa-categories h3 { font-size: 20px; }

.sa-categories ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
	margin-top: 14px;
	border-top: 1px solid var(--sa-border);
}

.sa-categories li {
	padding: 11px 0;
	border-bottom: 1px solid var(--sa-border);
	color: #2f3f58;
	font-size: 16px;
	line-height: 1.45;
}

.sa-inline-note {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--sa-border);
}

.sa-inline-note h3 { font-size: 20px; }
.sa-inline-note p { margin-top: 8px; color: var(--sa-text); font-size: 16px; }

/* Competence ------------------------------------------------------------- */

.sa-competence__panel {
	display: grid;
	grid-template-columns: minmax(0, 1.07fr) minmax(380px, .93fr);
	gap: clamp(48px, 6vw, 94px);
	align-items: stretch;
	padding: clamp(34px, 4vw, 58px);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-radius);
	background: #fff;
}

.sa-competence__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sa-competence__copy > p {
	max-width: 720px;
	margin-top: 20px;
	color: var(--sa-text);
}

.sa-checklist {
	display: grid;
	gap: 13px;
	margin-top: 28px !important;
}

.sa-checklist li,
.sa-transparency__columns li {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	align-items: start;
	gap: 12px;
}

.sa-checklist li { color: #2f3f58; font-size: 16px; line-height: 1.55; }

.sa-checklist li > span,
.sa-transparency__columns li > span {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border-radius: 50%;
	background: #eaf0ff;
	color: var(--sa-blue);
}

.sa-checklist svg,
.sa-transparency__columns svg { width: 13px; height: 13px; }

.sa-competence__note {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--sa-border);
}

.sa-competence__note h3 { font-size: 20px; }
.sa-competence__note p { margin-top: 7px; color: var(--sa-text); font-size: 16px; }

.sa-competence__image {
	min-height: 560px;
	border-radius: calc(var(--sa-radius) - 6px);
	overflow: hidden;
	background: #cbc4b8;
}

/* Transparency ----------------------------------------------------------- */

.sa-transparency__panel {
	padding: clamp(42px, 5.2vw, 74px);
	border-radius: var(--sa-radius);
	background: var(--sa-navy);
	color: #fff;
}

.sa-eyebrow {
	margin-bottom: 16px !important;
	color: #aebce7;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .055em;
	text-transform: uppercase;
}

.sa-transparency h2,
.sa-transparency h3 { color: #fff; }

.sa-transparency__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr);
	align-items: end;
	gap: clamp(42px, 7vw, 105px);
}

.sa-transparency__head h2 { max-width: 13ch; }

.sa-transparency__head > p {
	color: rgba(255, 255, 255, .78);
	font-size: 18px;
}

.sa-transparency__columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin-top: clamp(42px, 5vw, 64px);
	padding-top: clamp(32px, 4vw, 48px);
	border-top: 1px solid rgba(255, 255, 255, .2);
}

.sa-transparency__columns > div { padding-right: clamp(28px, 5vw, 72px); }
.sa-transparency__columns > div + div {
	padding-right: 0;
	padding-left: clamp(28px, 5vw, 72px);
	border-left: 1px solid rgba(255, 255, 255, .2);
}

.sa-transparency__columns h3 { margin-bottom: 20px; font-size: 22px; }
.sa-transparency__columns ul { display: grid; gap: 15px; }
.sa-transparency__columns li { color: rgba(255, 255, 255, .8); font-size: 16px; line-height: 1.55; }

.sa-transparency__columns li > span {
	background: rgba(126, 160, 255, .18);
	color: #c5d1f5;
}

.sa-transparency__columns li > .sa-list-cross {
	background: rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .7);
}

/* Final route ------------------------------------------------------------ */

.sa-route__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 42px;
	padding-top: 34px;
	border-top: 1px solid var(--sa-border);
}

.sa-route h2 { font-size: clamp(28px, 3vw, 40px); }

.sa-route__layout > div:first-child p {
	max-width: 760px;
	margin-top: 13px;
	color: var(--sa-text);
	font-size: 17px;
}

.sa-route__actions {
	display: flex;
	align-items: center;
	gap: 26px;
}

.sa-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--snmd-button-height, 40px);
	padding: 0 var(--snmd-button-padding-x, 36px);
	border: var(--snmd-button-1-border-width, 1px) solid var(--snmd-color-primary-button-border, #3e6ae1);
	border-radius: var(--snmd-radius-button, 4px);
	background: var(--snmd-color-primary-button, #3e6ae1);
	color: var(--snmd-color-primary-button-text, #fff) !important;
	font-family: var(--snmd-font-ui, "Manrope", system-ui, sans-serif);
	font-size: var(--snmd-button-font-size, 16px);
	font-weight: var(--snmd-weight-ui, 500);
	line-height: 1;
	text-decoration: none !important;
	white-space: nowrap;
	box-shadow: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.sa-text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--sa-ink) !important;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none !important;
}

.sa-text-link svg { width: 18px; height: 18px; transition: transform .2s ease; }

.sa-button:focus-visible,
.sa-text-link:focus-visible {
	outline: 3px solid rgba(62, 106, 225, .28);
	outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.sa-button:hover {
		border-color: var(--snmd-color-primary-button-border-hover, #3e6ae1);
		background: var(--snmd-color-primary-button-hover, #3e6ae1);
		color: var(--snmd-color-primary-button-text-hover, #fff) !important;
	}

	.sa-text-link:hover svg { transform: translateX(3px); }
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1080px) {
	.sa-intro__layout { grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); gap: 50px; }
	.sa-editorial { grid-template-columns: minmax(330px, .85fr) minmax(0, 1.15fr); gap: 50px; }
	.sa-competence__panel { grid-template-columns: minmax(0, 1fr) minmax(330px, .8fr); gap: 42px; }
	.sa-route__layout { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 767px) {
	.sa { font-size: 16px; }
	.sa:not(.sa--split) .sa-section { padding: 20px 18px; }
	.sa h1 { font-size: clamp(36px, 10.5vw, 43px); }
	.sa h2 { font-size: clamp(28px, 8.5vw, 36px); }

	.sa-intro__layout,
	.sa-foundation__layout,
	.sa-editorial,
	.sa-competence__panel,
	.sa-transparency__head,
	.sa-transparency__columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.sa-intro__layout { gap: 26px; }
	.sa-intro__copy { padding: 4px 0 0; }
	.sa-intro__label { margin-bottom: 13px !important; font-size: 16px; }
	.sa-intro__copy > p:last-child { margin-top: 17px; font-size: 16px; line-height: 1.65; }
	.sa-intro__image,
	.sa-intro__image img { min-height: 0; height: auto; aspect-ratio: 1.25 / 1; }

	.sa-foundation__layout { gap: 22px; padding-top: 28px; }
	.sa-foundation__copy { gap: 14px; }

	.sa-editorial { gap: 30px; }
	.sa-editorial__image { height: auto; aspect-ratio: 1.12 / 1; }
	.sa-editorial__copy > p { margin-top: 16px; }
	.sa-categories { margin-top: 24px; }
	.sa-categories ul { grid-template-columns: minmax(0, 1fr); }
	.sa-categories li { padding: 9px 0; }
	.sa-inline-note { margin-top: 24px; padding-top: 20px; }

	.sa-competence__panel { gap: 28px; padding: 26px 22px 22px; border-radius: 16px; }
	.sa-competence__copy > p { margin-top: 15px; }
	.sa-checklist { gap: 11px; margin-top: 22px !important; }
	.sa-competence__note { margin-top: 24px; padding-top: 20px; }
	.sa-competence__image { min-height: 0; aspect-ratio: 1 / .88; order: -1; }

	.sa-transparency__panel {
		width: calc(100% + 36px);
		margin-left: -18px;
		padding: 38px 24px;
		border-radius: 0;
	}

	.sa-transparency__head { gap: 18px; }
	.sa-transparency__head > p { font-size: 16px; }
	.sa-transparency__columns { gap: 30px; margin-top: 32px; padding-top: 28px; }
	.sa-transparency__columns > div { padding-right: 0; }
	.sa-transparency__columns > div + div { padding: 28px 0 0; border-top: 1px solid rgba(255, 255, 255, .2); border-left: 0; }

	.sa-route__layout { gap: 24px; padding-top: 28px; }
	.sa-route__layout > div:first-child p { margin-top: 10px; font-size: 16px; }
	.sa-route__actions { align-items: stretch; flex-direction: column; gap: 17px; }
	.sa-button { width: 100%; }
	.sa-text-link { justify-content: center; min-height: 36px; }
}
