/* =========================================================
   MFTZF - Certificate / Verification
   ========================================================= */

.mft-certificate {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .75fr);
	align-items: start;
	gap: clamp(1.25rem, 3vw, 2rem);
}


/* ---------------------------------------------------------
   Content
   --------------------------------------------------------- */

.mft-certificate__content {
	min-inline-size: 0;
}

.mft-certificate__header {
	margin-block-end: 1.5rem;
}

.mft-certificate__eyebrow {
	display: inline-flex;
	align-items: center;
	min-block-size: 2rem;
	margin-block-end: .75rem;
	padding-inline: .75rem;

	border-radius: 999px;
	background: var(--skin-color-brand-soft, #f6f0f8);
	color: var(--skin-color-brand, var(--DPurple));

	font-size: .8rem;
	font-weight: 700;
	line-height: 2rem;
}

.mft-certificate__title {
	max-inline-size: 50rem;
	margin: 0;

	color: var(--skin-color-text, #221c26);
	font: inherit;
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	font-weight: 850;
	line-height: 1.7;
}

.mft-certificate__lead {
	max-inline-size: 55rem;
	margin: .85rem 0 0;

	color: var(--skin-color-text-soft, #706a75);
	font-size: clamp(.9rem, 1.2vw, 1rem);
	line-height: 2;
}

.mft-certificate__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;

	color: var(--skin-color-text, #221c26);
	font-size: .95rem;
	line-height: 2.15;
}

.mft-certificate__body p {
	margin: 0;
}


/* ---------------------------------------------------------
   Notice
   --------------------------------------------------------- */

.mft-certificate__notice {
	position: relative;
	margin-block-start: .25rem;
	padding: 1rem 1.125rem;

	background: var(--skin-color-surface-muted, #f8f7f9);
	border: 1px solid var(--skin-color-border, #e5e1e8);
	border-inline-start: 3px solid var(--skin-color-brand, var(--DPurple));
	border-radius: var(--skin-radius-md, .75rem);

	color: var(--skin-color-text-soft, #625c66);
	font-size: .875rem;
	line-height: 2;
}

.mft-certificate__notice strong {
	color: var(--skin-color-text, #221c26);
}


/* ---------------------------------------------------------
   Aside
   --------------------------------------------------------- */

.mft-certificate__aside {
	position: sticky;
	inset-block-start: 1.5rem;
}

.mft-certificate__card {
	overflow: hidden;
	background: var(--skin-color-surface, #fff);
	border: 1px solid var(--skin-color-border, #e5e1e8);
	border-radius: var(--skin-radius-lg, 1rem);
	box-shadow: var(--skin-shadow-sm, 0 8px 28px rgba(22, 15, 30, .07));
}

.mft-certificate__card-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	inline-size: 3.25rem;
	block-size: 3.25rem;
	margin: 1.25rem 1.25rem 0;

	border-radius: var(--skin-radius-md, .75rem);
	background: var(--skin-color-brand-soft, #f6f0f8);
	color: var(--skin-color-brand, var(--DPurple));
}

.mft-certificate__card-icon svg {
	inline-size: 1.55rem;
	block-size: 1.55rem;
}

.mft-certificate__card-content {
	padding: 1rem 1.25rem 1.25rem;
}

.mft-certificate__card-title {
	margin: 0;

	color: var(--skin-color-text, #221c26);
	font: inherit;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.8;
}

.mft-certificate__card-text {
	margin: .55rem 0 0;

	color: var(--skin-color-text-soft, #706a75);
	font-size: .85rem;
	line-height: 1.95;
}


/* ---------------------------------------------------------
   Feature list
   --------------------------------------------------------- */

.mft-certificate__features {
	display: flex;
	flex-direction: column;
	gap: .65rem;

	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.mft-certificate__features li {
	position: relative;
	padding-inline-start: 1.25rem;

	color: var(--skin-color-text, #221c26);
	font-size: .85rem;
	line-height: 1.8;
}

.mft-certificate__features li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .72rem;

	inline-size: .45rem;
	block-size: .45rem;

	border-radius: 50%;
	background: var(--skin-color-secondary, var(--Yellow));
}


/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */

.mft-certificate__action {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;

	min-block-size: 2.875rem;
	margin-block-start: 1.25rem;
	padding-inline: 1rem;

	border-radius: var(--skin-radius-md, .75rem);
	background: var(--skin-color-brand, var(--DPurple));
	color: #fff;

	font-weight: 750;
	text-decoration: none;

	box-shadow: var(--skin-shadow-sm, 0 6px 18px rgba(75, 31, 99, .15));

	transition:
		background-color .18s ease,
		transform .18s ease,
		box-shadow .18s ease;
}

.mft-certificate__action svg {
	inline-size: 1rem;
	block-size: 1rem;
}

.mft-certificate__action:hover {
	background: var(--skin-color-brand-strong, var(--DPurple));
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--skin-shadow-md, 0 10px 26px rgba(75, 31, 99, .18));
}

.mft-certificate__action:focus-visible {
	outline: 2px solid var(--skin-focus, var(--skin-color-brand));
	outline-offset: 3px;
}

.mft-certificate__support {
	margin: .9rem 0 0;

	color: var(--skin-color-text-soft, #706a75);
	font-size: .78rem;
	line-height: 1.9;
}


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

@media (max-width: 61.99rem) {

	.mft-certificate {
		grid-template-columns: 1fr;
	}

	.mft-certificate__aside {
		position: static;
	}

	.mft-certificate__card {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: start;
	}

	.mft-certificate__card-icon {
		margin-inline-end: 0;
	}

	.mft-certificate__card-content {
		padding-inline-start: 1rem;
	}
}


@media (max-width: 39.99rem) {

	.mft-certificate {
		gap: 1.25rem;
	}

	.mft-certificate__header {
		margin-block-end: 1.15rem;
	}

	.mft-certificate__title {
		font-size: 1.2rem;
	}

	.mft-certificate__lead,
	.mft-certificate__body {
		font-size: .9rem;
	}

	.mft-certificate__card {
		display: block;
	}

	.mft-certificate__card-icon {
		margin: 1rem 1rem 0;
	}

	.mft-certificate__card-content {
		padding: .9rem 1rem 1rem;
	}

	.mft-certificate__action {
		inline-size: 100%;
	}

	.mft-certificate__notice {
		padding: .9rem 1rem;
	}
}
/* =========================================================
   MFTZF - Certificates Gallery
   ========================================================= */

.mft-certificates {
	margin-block: clamp(2rem, 4vw, 3.5rem);
}

.mft-certificates__header {
	max-inline-size: 52rem;
	margin-block-end: clamp(1.25rem, 2.5vw, 2rem);
}

.mft-certificates__eyebrow {
	display: inline-flex;
	align-items: center;
	min-block-size: 2rem;
	margin-block-end: .7rem;
	padding-inline: .75rem;

	border-radius: 999px;
	background: var(--skin-color-brand-soft, #f6f0f8);
	color: var(--skin-color-brand, var(--DPurple));

	font-size: .8rem;
	font-weight: 700;
}

.mft-certificates__title {
	margin: 0;

	color: var(--skin-color-text, #221c26);
	font: inherit;
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	font-weight: 850;
	line-height: 1.7;
}

.mft-certificates__intro {
	margin: .55rem 0 0;

	color: var(--skin-color-text-soft, #706a75);
	font-size: .9rem;
	line-height: 2;
}


/* =========================================================
   Grid
   ========================================================= */

.mft-certificates__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(.85rem, 2vw, 1.25rem);
}


/* =========================================================
   Certificate card
   ========================================================= */

.mft-certificate-card {
	position: relative;
	min-inline-size: 0;
}

.mft-certificate-card__button {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	padding: 0;

	appearance: none;
	background: var(--skin-color-surface, #fff);
	color: inherit;

	border: 1px solid var(--skin-color-border, #e5e1e8);
	border-radius: var(--skin-radius-lg, 1rem);

	box-shadow: var(--skin-shadow-sm, 0 7px 22px rgba(24, 15, 30, .06));

	text-align: inherit;
	cursor: zoom-in;
	overflow: hidden;

	transition:
		border-color .18s ease,
		box-shadow .18s ease,
		transform .18s ease;
}

.mft-certificate-card__button:hover {
	border-color: color-mix(
		in srgb,
		var(--skin-color-brand, var(--DPurple)) 28%,
		var(--skin-color-border, #e5e1e8)
	);

	box-shadow: var(--skin-shadow-md, 0 12px 30px rgba(24, 15, 30, .1));
	transform: translateY(-2px);
}

.mft-certificate-card__button:focus-visible {
	outline: 2px solid var(--skin-focus, var(--skin-color-brand));
	outline-offset: 3px;
}

.mft-certificate-card__figure {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	margin: 0;
}


/*
 * مهم:
 * تصاویر عمداً crop نمی‌شوند.
 * حتی اگر یکی portrait و دیگری landscape باشد،
 * تصویر کامل در این محدوده دیده می‌شود.
 */
.mft-certificate-card__media {
	display: flex;
	align-items: center;
	justify-content: center;

	min-block-size: 19rem;
	padding: 1rem;

	background:
		linear-gradient(
			180deg,
			var(--skin-color-surface-muted, #faf9fb),
			var(--skin-color-surface, #fff)
		);
}

.mft-certificate-card__image {
	display: block;

	inline-size: 100%;
	block-size: 18rem;

	object-fit: contain;
	object-position: center;

	background: transparent;
}

.mft-certificate-card__caption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;

	min-block-size: 4rem;
	padding: .85rem 1rem;

	border-block-start: 1px solid var(--skin-color-border, #e5e1e8);

	color: var(--skin-color-text, #221c26);
	font-size: .85rem;
	font-weight: 700;
	line-height: 1.8;
}

.mft-certificate-card__zoom {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	inline-size: 2rem;
	block-size: 2rem;

	border-radius: var(--skin-radius-sm, .5rem);
	background: var(--skin-color-brand-soft, #f6f0f8);
	color: var(--skin-color-brand, var(--DPurple));
}

.mft-certificate-card__zoom svg {
	inline-size: 1rem;
	block-size: 1rem;
}


/* =========================================================
   EasyDNN admin actions
   ========================================================= */

.mft-certificate-card .edn_adminActions {
	position: absolute;
	z-index: 5;
	inset-block-start: .5rem;
	inset-inline-start: .5rem;
}


/* =========================================================
   Native Dialog / Viewer
   ========================================================= */

.mft-certificate-viewer {
	inline-size: min(72rem, calc(100vw - 2rem));
	max-inline-size: none;
	max-block-size: calc(100dvh - 2rem);

	margin: auto;
	padding: 0;

	overflow: hidden;

	background: transparent;
	border: 0;
	border-radius: var(--skin-radius-lg, 1rem);

	color: var(--skin-color-text, #221c26);
}

.mft-certificate-viewer::backdrop {
	background: rgba(18, 13, 21, .72);
	backdrop-filter: blur(4px);
}

.mft-certificate-viewer__panel {
	display: flex;
	flex-direction: column;

	max-block-size: calc(100dvh - 2rem);

	background: var(--skin-color-surface, #fff);
	border-radius: var(--skin-radius-lg, 1rem);
	box-shadow: var(--skin-shadow-lg, 0 24px 80px rgba(0, 0, 0, .25));

	overflow: hidden;
}

.mft-certificate-viewer__header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;

	padding: .8rem 1rem;

	background: var(--skin-color-surface, #fff);
	border-block-end: 1px solid var(--skin-color-border, #e5e1e8);
}

.mft-certificate-viewer__title {
	margin: 0;

	font: inherit;
	font-size: .95rem;
	font-weight: 800;
	line-height: 1.7;
}

.mft-certificate-viewer__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	inline-size: 2.5rem;
	block-size: 2.5rem;
	padding: 0;

	appearance: none;
	background: var(--skin-color-surface-muted, #f7f5f8);
	color: var(--skin-color-text, #221c26);

	border: 1px solid var(--skin-color-border, #e5e1e8);
	border-radius: 50%;

	cursor: pointer;
}

.mft-certificate-viewer__close:hover {
	background: var(--skin-color-brand-soft, #f6f0f8);
	color: var(--skin-color-brand, var(--DPurple));
}

.mft-certificate-viewer__close:focus-visible {
	outline: 2px solid var(--skin-focus, var(--skin-color-brand));
	outline-offset: 2px;
}

.mft-certificate-viewer__close svg {
	inline-size: 1.2rem;
	block-size: 1.2rem;
}

.mft-certificate-viewer__body {
	display: flex;
	align-items: center;
	justify-content: center;

	min-block-size: 0;
	padding: clamp(.75rem, 2vw, 1.5rem);

	overflow: auto;
	background: var(--skin-color-surface-muted, #f7f6f8);
}

.mft-certificate-viewer__image {
	display: block;

	max-inline-size: 100%;
	max-block-size: calc(100dvh - 8rem);

	inline-size: auto;
	block-size: auto;

	object-fit: contain;

	background: #fff;
	box-shadow: var(--skin-shadow-sm, 0 6px 24px rgba(0, 0, 0, .08));
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 74.99rem) {

	.mft-certificates__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mft-certificate-card__media {
		min-block-size: 20rem;
	}

	.mft-certificate-card__image {
		block-size: 19rem;
	}
}


@media (max-width: 39.99rem) {

	.mft-certificates {
		margin-block: 2rem;
	}

	.mft-certificates__grid {
		grid-template-columns: 1fr;
		gap: .85rem;
	}

	.mft-certificate-card__media {
		min-block-size: 17rem;
		padding: .75rem;
	}

	.mft-certificate-card__image {
		block-size: 16rem;
	}

	.mft-certificate-card__caption {
		min-block-size: 3.5rem;
		padding: .7rem .85rem;
	}

	.mft-certificate-viewer {
		inline-size: calc(100vw - 1rem);
		max-block-size: calc(100dvh - 1rem);
	}

	.mft-certificate-viewer__panel {
		max-block-size: calc(100dvh - 1rem);
	}

	.mft-certificate-viewer__header {
		padding: .65rem .75rem;
	}

	.mft-certificate-viewer__body {
		padding: .5rem;
	}

	.mft-certificate-viewer__image {
		max-block-size: calc(100dvh - 6rem);
	}
}