/**
 * Enskilt kontor template layouts.
 *
 * Scoped to section classes set by the page template so shared ACF blocks
 * keep their default look everywhere else.
 */

/* -------------------------------------------------------------------------- */
/* About — fill image + fun-fact overlay                                      */
/* -------------------------------------------------------------------------- */

.enskilt-about .text-image__split {
	--text-image-split-gap: clamp(2rem, 4vw, 3.125rem);
	align-items: center;
}

.enskilt-about .text-image__split .text-image__heading {
	max-inline-size: 18ch;
}

.enskilt-about .text-image__split .text-image__body {
	max-inline-size: 36.125rem;
}

.enskilt-about .text-image__split-media {
	align-self: center;
	aspect-ratio: 4 / 3;
	min-block-size: 0;
	overflow: visible;
}

.enskilt-about .text-image__split-media .text-image__media {
	z-index: 0;
}

.enskilt-about .enskilt-about__fact {
	--fun-fact-fill: #2ad2c9;
	inline-size: min(30.344rem, 92%);
	inset-block-end: -20px;
	inset-block-start: auto;
	inset-inline-end: 30px;
	inset-inline-start: auto;
	isolation: isolate;
	pointer-events: auto;
	position: absolute;
	z-index: 4;
}

.enskilt-about .enskilt-about__fact .fun-fact__layout {
	--fun-fact-box-max: 30.344rem;
	--fun-fact-copy-max: 20rem;
	--fun-fact-fill: #2ad2c9;
	--fun-fact-min-height: 16.5rem;
	--fun-fact-pad: 1.2rem;
	--fun-fact-tail-height: 2.725rem;
	--fun-fact-tail-left: auto;
	--fun-fact-tail-width: 4.69rem;
	justify-content: flex-end;
	padding-block-end: var(--fun-fact-tail-height);
}

.enskilt-about .enskilt-about__fact .fun-fact__box {
	--fun-fact-fill: #2ad2c9;
	background-color: #2ad2c9;
	inline-size: 100%;
	min-block-size: 16.5rem;
}

.enskilt-about .enskilt-about__fact .fun-fact__brand {
	font-size: 0.99rem;
	letter-spacing: 0.12em;
}

.enskilt-about .enskilt-about__fact .fun-fact__number {
	font-size: 2.15rem;
}

.enskilt-about .enskilt-about__fact .fun-fact__tail {
	inset-inline-end: 65px;
	inset-inline-start: auto;
	transform: scaleY(-1);
}

@container (min-width: 48rem) {
	.enskilt-about .text-image__split[data-media-position="right"] {
		grid-template-columns: minmax(0, 36.125rem) minmax(0, 1fr);
	}
}

@container (max-width: 48rem) {
	.enskilt-about .text-image__split-media {
		aspect-ratio: 4 / 3;
		min-block-size: 0;
		overflow: visible;
	}

	.enskilt-about .enskilt-about__fact {
		inset-block-end: 0;
		inset-inline: 0.75rem auto;
		inline-size: min(22rem, calc(100% - 1.5rem));
	}
}

/* -------------------------------------------------------------------------- */
/* Services — left-aligned intro                                              */
/* -------------------------------------------------------------------------- */

.enskilt-services .tjanster__intro {
	justify-items: start;
	margin-inline: 0;
	max-inline-size: none;
	text-align: start;
}

.enskilt-services .tjanster__body {
	max-inline-size: 52rem;
}

.enskilt-services .tjanster__actions {
	justify-content: flex-start;
}

/* -------------------------------------------------------------------------- */
/* Cases — centered intro                                                     */
/* -------------------------------------------------------------------------- */

.enskilt-cases .case__intro {
	align-items: center;
	flex-direction: column;
	justify-content: center;
	margin-inline: auto;
	max-width: 700px;
	text-align: center;
}

.enskilt-cases .case__heading,
.enskilt-cases .case__heading.type-heading {
	font-size: 34px;
	max-inline-size: 40ch;
}

.enskilt-cases .case__aside,
.enskilt-cases .case__more,
.enskilt-cases .case__more--header {
	align-items: center;
	display: grid;
	gap: 1.25rem;
	justify-items: center;
	margin-inline: 0;
	text-align: center;
}

.enskilt-case-row .text-image__split .text-image__heading {
	max-inline-size: 32ch;
}

.enskilt-case-row .text-image__content {
	gap: 1.25rem;
}

.enskilt-case-row .text-image__actions {
	margin-block-start: 1.25rem;
}

.enskilt-cases .case__more--footer {
	display: none;
}

.enskilt-cases .case__link-caption,
.enskilt-cases .case__link-caption.type-body {
	font-size: 18px;
	font-weight: 400;
	max-inline-size: 48.3125rem;
	text-transform: none;
}

.enskilt-cases .case__actions {
	justify-content: center;
}

@media (min-width: 64rem) {
	.enskilt-cases .case__more--header {
		display: grid;
	}
}

/* -------------------------------------------------------------------------- */
/* Quote — centered intro + person speech bubble                              */
/* -------------------------------------------------------------------------- */

.enskilt-quote .section__inner {
	container-type: inline-size;
	overflow: visible;
}

.enskilt-quote__layout {
	--enskilt-quote-fill: #ffc72c;
	--enskilt-quote-ink: var(--color-dark);
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	justify-items: center;
}

.enskilt-quote__intro {
	display: grid;
	gap: 1.25rem;
	justify-items: center;
	max-inline-size: 56.25rem;
	text-align: center;
}

.enskilt-quote__heading {
	margin: 0;
	max-inline-size: 22ch;
}

.enskilt-quote__body {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
	max-inline-size: 46rem;
}

.enskilt-quote__body > * {
	margin-block: 0 1em;
}

.enskilt-quote__body > *:last-child {
	margin-block-end: 0;
}

.enskilt-quote__box {
	--fun-fact-fill: var(--enskilt-quote-fill);
	--fun-fact-tail-height: 2.6rem;
	--fun-fact-tail-left: 2.5rem;
	--fun-fact-tail-width: 4.5rem;
	background: var(--enskilt-quote-fill);
	color: var(--enskilt-quote-ink);
	display: grid;
	gap: 1.75rem;
	inline-size: min(58rem, 100%);
	isolation: isolate;
	margin-block-end: var(--fun-fact-tail-height);
	overflow: visible;
	padding: clamp(4.25rem, 8vw, 5.5rem) clamp(2.5rem, 6vw, 4.75rem) clamp(3.5rem, 7vw, 4.75rem);
	position: relative;
}

.enskilt-quote__mark {
	color: inherit;
	font-family: var(--font-family-heading);
	font-size: 90px;
	font-weight: 400;
	line-height: 1;
	opacity: 1;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.enskilt-quote__mark--open {
	inset-block-start: 11px;
	inset-inline-start: 6px;
}

.enskilt-quote__mark--close {
	inset-block-end: -40px;
	inset-inline-end: 10px;
}

.enskilt-quote__person {
	align-items: center;
	display: flex;
	gap: 1.25rem;
	position: relative;
	z-index: 1;
}

.enskilt-quote__photo {
	background-color: #fff;
	block-size: 7.5rem;
	border-radius: 50%;
	flex: 0 0 7.5rem;
	inline-size: 7.5rem;
	overflow: clip;
}

.enskilt-quote__photo .media,
.enskilt-quote__photo .media img {
	aspect-ratio: 1;
	background-color: #fff;
	block-size: 100%;
	border-radius: 50%;
	inline-size: 100%;
	object-fit: contain;
	object-position: center bottom;
}

.enskilt-quote__identity {
	display: grid;
	gap: 0.15rem;
}

.enskilt-quote__name,
.enskilt-quote__role {
	color: inherit;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
}

.enskilt-quote__name {
	font-size: 17px;
}

.enskilt-quote__role {
	font-family: "Krona One", var(--font-family-heading);
	font-size: 13px;
	font-weight: 400;
}

.enskilt-quote__text,
.enskilt-quote__text.type-body {
	font-size: 16px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.45;
	margin: 0;
	max-inline-size: 44rem;
	position: relative;
	z-index: 1;
}

.enskilt-quote__text > * {
	margin-block: 0 0.8em;
}

.enskilt-quote__text > *:last-child {
	margin-block-end: 0;
}

.enskilt-quote__box .fun-fact__tail {
	transform: rotate(180deg);
}

/* -------------------------------------------------------------------------- */
/* FAQ — Krona One heading/questions, plus/x, white rules (Figma 1857:5550)  */
/* -------------------------------------------------------------------------- */

.enskilt-faq .faq__layout {
	--faq-answer-max: 100%;
	--faq-divider: rgb(255 255 255 / 0.5);
	--faq-list-gap: 2.5rem;
	--faq-stack-gap: 5rem;
	--faq-toggle-icon: 0.9725rem;
	--faq-toggle-size: 1.375rem;
}

.enskilt-faq .faq__layout[data-layout="stacked"] {
	--faq-toggle-icon: 0.9725rem;
	--faq-toggle-size: 1.375rem;
}

.enskilt-faq .faq__layout[data-layout="stacked"] .faq__intro,
.enskilt-faq .faq__layout[data-layout="stacked"] .faq__list {
	max-inline-size: 51.875rem;
	width: 100%;
}

.enskilt-faq .faq__heading,
.enskilt-faq .faq__heading.heading,
.enskilt-faq .faq__heading.type-heading {
	font-family: "Krona One", var(--font-family-heading);
	font-size: 35px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
	max-inline-size: none;
	text-transform: uppercase;
}

.enskilt-faq .faq__question,
.enskilt-faq .faq__question.type-heading {
	font-family: "Krona One", var(--font-family-heading);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.6;
	text-transform: uppercase;
}

.enskilt-faq .faq__toggle {
	background: transparent;
	border-radius: 0;
	color: #fff;
}

.enskilt-faq .faq__toggle-icon {
	block-size: var(--faq-toggle-icon);
	filter: brightness(0) invert(1);
	inline-size: var(--faq-toggle-icon);
}

.enskilt-faq .faq__answer,
.enskilt-faq .faq__answer.type-body {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	max-inline-size: 100%;
	padding-inline-end: 1.25rem;
}

.enskilt-faq .faq__item[data-open="true"] .faq__answer {
	--faq-answer-gap: 0.875rem;
	opacity: 1;
}

/* -------------------------------------------------------------------------- */
/* Personal — compact directory                                               */
/* -------------------------------------------------------------------------- */

.enskilt-personal .personal__heading,
.enskilt-personal .personal__heading.heading,
.enskilt-personal .personal__heading.type-heading {
	font-size: 29px;
	text-transform: uppercase;
}

.enskilt-personal .section__inner {
	max-inline-size: 1340px;
}

.personal__layout[data-layout="compact"] {
	--personal-gap: 3.75rem 6.25rem;
	--personal-intro-gap: 3.75rem;
	--personal-identity-gap: 0;
	--personal-compact-photo: 7.375rem;
}

.personal__layout[data-layout="compact"] .personal__intro {
	align-items: center;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.personal__layout[data-layout="compact"] .personal__aside {
	align-items: center;
	margin-inline-start: 0;
	text-align: center;
}

.personal__layout[data-layout="compact"] .personal__actions {
	justify-content: center;
}

.personal__layout[data-layout="compact"] .personal__grid {
	display: grid;
	gap: var(--personal-gap);
	grid-template-columns: 1fr;
	justify-items: start;
	margin-inline: auto;
	max-inline-size: 1340px;
	width: 100%;
}

.personal__layout[data-layout="compact"] .personal__card {
	align-items: center;
	display: flex;
	flex-direction: row;
	gap: 1.25rem;
	inline-size: auto;
	min-inline-size: 0;
	width: 100%;
}

@container (min-width: 40rem) {
	.personal__layout[data-layout="compact"] .personal__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (min-width: 64rem) {
	.personal__layout[data-layout="compact"] .personal__grid {
		column-gap: 80px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.personal__layout[data-layout="compact"] .personal__media,
.personal__layout[data-layout="compact"] .personal__media-placeholder {
	aspect-ratio: 1;
	background-color: #fff;
	background-image: none;
	background-size: cover;
	block-size: var(--personal-compact-photo);
	border-radius: 50%;
	flex: 0 0 var(--personal-compact-photo);
	inline-size: var(--personal-compact-photo);
	min-block-size: 0;
	overflow: clip;
}

.personal__layout[data-layout="compact"] .personal__media .media,
.personal__layout[data-layout="compact"] .personal__media .media img {
	aspect-ratio: 1;
	block-size: 100%;
	border-radius: 50%;
	inline-size: 100%;
	object-fit: cover;
	object-position: center top;
}

.personal__layout[data-layout="compact"] .personal__media-overlay {
	display: none;
}

.personal__layout[data-layout="compact"] .personal__copy {
	display: grid;
	gap: 0.75rem;
	min-inline-size: 0;
}

.personal__layout[data-layout="compact"] .personal__identity {
	padding-block: 0;
}

.personal__layout[data-layout="compact"] .personal__name {
	font-family: var(--font-family-body);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
	text-transform: none;
}

.personal__layout[data-layout="compact"] .personal__name.heading {
	font-family: var(--font-family-body);
	text-transform: none;
}

.personal__layout[data-layout="compact"] .personal__role {
	font-size: 16px;
	line-height: 1.4;
	opacity: 1;
	text-transform: none;
}

.personal__layout[data-layout="compact"] .personal__contact {
	align-items: center;
	display: flex;
	flex-direction: row;
	gap: 0.75rem;
}

.personal__layout[data-layout="compact"] .personal__email,
.personal__layout[data-layout="compact"] .personal__phone {
	align-items: center;
	color: var(--text-body);
	display: inline-flex;
	justify-content: center;
	line-height: 0;
	opacity: 1;
}

.personal__layout[data-layout="compact"] .personal__email svg,
.personal__layout[data-layout="compact"] .personal__phone svg {
	block-size: 1.125rem;
	display: block;
	inline-size: 1.125rem;
}

.personal__layout[data-layout="compact"] a.personal__email:hover,
.personal__layout[data-layout="compact"] a.personal__phone:hover,
.personal__layout[data-layout="compact"] a.personal__email:focus-visible,
.personal__layout[data-layout="compact"] a.personal__phone:focus-visible {
	opacity: 0.7;
}

body:not(.wp-admin) .personal__layout[data-layout="compact"] a.personal__email,
body:not(.wp-admin) .personal__layout[data-layout="compact"] a.personal__phone {
	color: var(--text-body);
}

/* -------------------------------------------------------------------------- */
/* Contact — intro above a wide map                                           */
/* -------------------------------------------------------------------------- */

.enskilt-contact .section__inner {
	container-type: inline-size;
}

.enskilt-contact__layout {
	display: grid;
	gap: 2.5rem;
}

.enskilt-contact__intro {
	display: grid;
	gap: 1.25rem;
	max-inline-size: 45.7rem;
}

.enskilt-contact__heading,
.enskilt-contact__heading.type-heading {
	font-size: 29px;
	margin: 0;
	max-inline-size: none;
}

.enskilt-contact__body {
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
}

.enskilt-contact__body > * {
	margin-block: 0 1em;
}

.enskilt-contact__body > *:last-child {
	margin-block-end: 0;
}

.enskilt-contact__row {
	align-items: stretch;
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.25rem);
	grid-template-columns: 1fr;
}

.enskilt-contact__map {
	aspect-ratio: 16 / 9;
	isolation: isolate;
	min-block-size: 0;
	overflow: clip;
	position: relative;
	width: 100%;
}

.enskilt-contact__map .text-image__media,
.enskilt-contact__map .text-image__map {
	block-size: 100%;
	inline-size: 100%;
	inset: 0;
	position: absolute;
}

.enskilt-contact__details {
	display: grid;
	gap: 2.5rem;
}

.enskilt-contact__meta {
	display: grid;
	gap: 1.35rem;
}

.enskilt-contact__item {
	display: grid;
	gap: 0.15rem;
	margin: 0;
}

.enskilt-contact__label {
	font-family: var(--font-family-heading);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
}

.enskilt-contact__value {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
}

.enskilt-contact__value a {
	color: inherit;
	text-decoration: none;
}

.enskilt-contact__value a:hover,
.enskilt-contact__value a:focus-visible {
	text-decoration: underline;
}

@media (max-width: 1439px) {
	.enskilt-contact__details {
		align-items: flex-start;
		display: flex;
		flex-wrap: wrap;
		gap: 1.75rem 2.5rem;
	}

	.enskilt-contact__meta {
		display: flex;
		flex: 1 1 auto;
		flex-wrap: wrap;
		gap: 1.75rem 2.5rem;
	}

	.enskilt-contact__item {
		flex: 1 1 14rem;
		min-inline-size: 12rem;
	}

	.enskilt-contact__actions {
		flex: 1 1 auto;
	}
}

@media (max-width: 768px) {
	.enskilt-contact__map {
		aspect-ratio: 4 / 3;
	}
}

@media (min-width: 1440px) {
	.enskilt-contact__row {
		align-items: center;
		grid-template-columns: minmax(0, 1.35fr) minmax(16.5rem, 28.875rem);
	}
}