/*
 * The card and modal content are designed entirely in Elementor.
 * These styles only provide dialog behavior and optional utility classes.
 */

.ept-kadra-card {
	position: relative;
}

/*
 * Elementor emits its own `display` rule for these containers with the same
 * weight as ours, and in the editor its stylesheet is injected last. Only
 * `!important` keeps the outcome independent of load order; the dialog rule is
 * more specific, so the content still shows once JavaScript moves it there.
 */
.ept-kadra-card .ept-kadra-modal-content,
.ept-kadra-card .ept-kadra-modal-trigger {
	display: none !important;
}

.ept-kadra-card .ept-kadra-modal__dialog .ept-kadra-modal-content {
	display: flex !important;
}

/* The trigger only exists to open the dialog, so it stays live on the page. */
body:not(.elementor-editor-active) .ept-kadra-card .ept-kadra-modal-trigger {
	display: block !important;
}

body.ept-kadra-modal-open {
	overflow: hidden;
}

.ept-kadra-modal__dialog {
	/* 726px of content plus its 32px inner gutters, so the surface hugs the design. */
	width: min(790px, calc(100% - 32px));
	max-width: none;
	max-height: calc(100dvh - 64px);
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: 0;
	background: var(--ept-color-surface, #f2f2f2);
	color: var(--ept-color-text, #211e1f);
	box-shadow: 0 24px 64px rgb(0 0 0 / 24%);
}

.ept-kadra-modal__dialog::backdrop {
	background: rgb(12 12 12 / 82%);
	backdrop-filter: blur(2px);
}

/* The portrait sits at the top of its column, cropped to the widget height. */
.ept-kadra-modal-layout {
	align-items: start;
	align-content: start;
}

.ept-kadra-modal-photo,
.ept-kadra-modal-photo > .elementor-widget-container,
.ept-kadra-modal-photo figure,
.ept-kadra-modal-photo a {
	display: block;
}

.ept-kadra-modal-photo img {
	width: 100%;
	object-fit: cover;
}

/*
 * Optional class for the Elementor Button widget when the whole card should
 * be clickable. Add both classes to that widget:
 * ept-kadra-modal-trigger ept-kadra-modal-trigger--card
 */
body:not(.elementor-editor-active) .ept-kadra-card .ept-kadra-modal-trigger--card {
	position: absolute;
	z-index: 5;
	inset: 0;
}

body:not(.elementor-editor-active) .ept-kadra-card .ept-kadra-modal-trigger--card,
body:not(.elementor-editor-active) .ept-kadra-card .ept-kadra-modal-trigger--card > .elementor-widget-container,
body:not(.elementor-editor-active) .ept-kadra-card .ept-kadra-modal-trigger--card .elementor-button-wrapper,
body:not(.elementor-editor-active) .ept-kadra-card .ept-kadra-modal-trigger--card .elementor-button {
	width: 100%;
	height: 100%;
}

body:not(.elementor-editor-active) .ept-kadra-card .ept-kadra-modal-trigger--card .elementor-button {
	display: block;
	padding: 0;
	border: 0;
	background: transparent;
	color: transparent;
	font-size: 0;
}

/*
 * Globalny hover buttonów (i hover .button-primary z Elementora) maluje ten
 * overlay na teal. Ma zostać przezroczysty — karta ma własny hover.
 */
body:not(.elementor-editor-active) .ept-kadra-card .ept-kadra-modal-trigger--card .elementor-button:is(:hover, :focus-visible, :active) {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border-color: transparent !important;
	color: transparent !important;
	box-shadow: none !important;
}

body:not(.elementor-editor-active) .ept-kadra-card .ept-kadra-modal-trigger--card .elementor-button:focus-visible {
	outline: 3px solid var(--ept-color-accent, #19cbe1);
	outline-offset: 3px;
}

/*
 * A close button is created only when the Elementor modal contains no widget
 * with the class ept-kadra-modal-close.
 */
.ept-kadra-modal__dialog button.ept-kadra-modal-close--fallback {
	position: absolute;
	z-index: 10;
	top: 16px;
	right: 16px;
	display: grid;
	width: 44px;
	height: 44px;
	padding: 0;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: var(--ept-color-ink, #211e1f);
	color: var(--ept-color-white, #fff);
	font: inherit;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}

.ept-kadra-modal__dialog button.ept-kadra-modal-close--fallback:hover,
.ept-kadra-modal__dialog button.ept-kadra-modal-close--fallback:focus-visible {
	background: var(--ept-color-accent-hover, #007a8c);
}

.ept-kadra-modal__dialog button.ept-kadra-modal-close--fallback:focus-visible {
	outline: 3px solid var(--ept-color-accent, #19cbe1);
	outline-offset: 3px;
}

.ept-kadra-modal-content .elementor-widget-theme-post-content,
.ept-kadra-modal-content .elementor-widget-theme-post-content p {
	font-size: 14px;
	line-height: 24px;
}

/*
 * Side by side, the biography is the single scroll surface: the dialog itself
 * never scrolls, so a short window cannot leave two nested scrollbars fighting
 * each other. Both the portrait and the bio shrink with the viewport so the
 * whole dialog always fits.
 */
@media (min-width: 768px) {
	.ept-kadra-modal__dialog {
		overflow: hidden;
	}

	.ept-kadra-modal-photo img {
		max-height: calc(100dvh - 128px);
	}

	.ept-kadra-modal-content .ept-kadra-modal-description .elementor-widget-container {
		overflow-y: auto;
		max-height: min(300px, calc(100dvh - 220px));
		padding-right: 12px;
		scrollbar-width: thin;
	}

	.ept-kadra-modal-content .ept-kadra-modal-description .elementor-widget-container::-webkit-scrollbar {
		width: 6px;
	}

	.ept-kadra-modal-content .ept-kadra-modal-description .elementor-widget-container::-webkit-scrollbar-thumb {
		border-radius: 3px;
		background: rgb(33 30 31 / 28%);
	}
}

@media (max-width: 767px) {
	.ept-kadra-modal__dialog {
		width: 100%;
		height: 100dvh;
		max-height: 100dvh;
		margin: 0;
	}

	.ept-kadra-modal__dialog button.ept-kadra-modal-close--fallback {
		top: 8px;
		right: 8px;
	}

	/*
	 * Stacked, the portrait spans the same width as the text below it and keeps
	 * its own proportions, so nothing is cropped and the edges line up.
	 * Elementor's desktop height would otherwise cascade down to this breakpoint.
	 */
	.ept-kadra-modal-content .ept-kadra-modal-photo img {
		height: auto !important;
	}

	/* the fullscreen dialog is the only scroll surface here */
	.ept-kadra-modal__dialog .ept-kadra-modal-description .elementor-widget-container {
		max-height: none;
		overflow-y: visible;
		padding-right: 0;
	}
}