/**
 * Mahmoudi Group — project modal and shortcode modules.
 *
 * Loaded where projects or a theme shortcode are rendered.
 */

/* ==========================================================================
   Project modal
   ========================================================================== */

.mg-modal {
	position: fixed;
	inset: 0;
	z-index: 160;
	display: grid;
	place-items: center;
	padding: var(--mg-space-3);
}

.mg-modal[hidden] {
	display: none;
}

.mg-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(10, 8, 9, 0.7);
	backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity 0.3s var(--mg-ease);
}

.mg-modal.is-open .mg-modal__scrim {
	opacity: 1;
}

.mg-modal__dialog {
	position: relative;
	width: min(100%, 980px);
	max-height: min(92svh, 900px);
	background: var(--mg-bg);
	border-radius: calc(var(--mg-radius) * 1.6);
	overflow: hidden;
	box-shadow: var(--mg-shadow-lg);
	opacity: 0;
	transform: translateY(24px) scale(0.98);
	transition: opacity 0.32s var(--mg-ease), transform 0.32s var(--mg-ease);
	display: flex;
	flex-direction: column;
}

.mg-modal.is-open .mg-modal__dialog {
	opacity: 1;
	transform: none;
}

.mg-modal__close {
	position: absolute;
	top: 1rem;
	inset-inline-end: 1rem;
	z-index: 3;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(10, 8, 9, 0.6);
	backdrop-filter: blur(8px);
	color: #fff;
	transition: background-color 0.2s var(--mg-ease);
}

.mg-modal__close:hover {
	background: var(--mg-primary);
}

.mg-modal__scroll {
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.mg-modal__hero {
	position: relative;
	background: var(--mg-surface-2);
}

.mg-modal__hero > img,
.mg-modal__hero > video {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.mg-modal__body {
	padding: var(--mg-space-4);
	display: grid;
	gap: var(--mg-space-2);
}

@media (max-width: 599px) {
	.mg-modal {
		padding: 0;
	}

	.mg-modal__dialog {
		max-height: 100svh;
		height: 100svh;
		border-radius: 0;
		width: 100%;
	}

	.mg-modal__body {
		padding: var(--mg-space-3);
	}
}

.mg-modal__location {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--mg-accent);
	margin-bottom: 0.3rem;
}

.mg-modal__head h2 {
	font-size: var(--mg-step-2);
}

.mg-modal__text {
	color: var(--mg-muted);
	line-height: 1.9;
}

.mg-modal__subtitle {
	font-size: var(--mg-step-0);
	margin-top: var(--mg-space-3);
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--mg-accent);
	display: inline-block;
}

.mg-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: var(--mg-space-2);
}

.mg-project-video-wrap {
	position: relative;
	width: 100%;
	margin-top: var(--mg-space-2);
	border-radius: var(--mg-radius);
	overflow: hidden;
	background: #0e0d0d;
}

.mg-project-video,
.mg-project-video-embed iframe,
.mg-project-video-embed video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	background: #0e0d0d;
}

.mg-project-video-embed > * {
	margin: 0 !important;
}

.mg-project-video-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: var(--mg-space-3);
	width: 100%;
}

.mg-project-video-item {
	margin: 0;
	overflow: hidden;
	border-radius: var(--mg-radius);
	background: #0e0d0d;
}

.mg-project-video-item figcaption {
	padding: .7rem 1rem;
	color: #fff;
	font-size: var(--mg-step--1);
}

/* Click-to-load video facade.
   A YouTube or Aparat iframe pulls in roughly a megabyte of player code before
   the visitor has shown any interest, so PHP prints a poster and a play button
   instead and the real iframe is built on the first click. */
.mg-video-facade {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--mg-radius);
	background: linear-gradient(135deg, #241016, #0e0d0d);
	cursor: pointer;
}

.mg-video-facade__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.mg-video-facade__play {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 4.6rem;
	height: 4.6rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;
	background: rgba(var(--mg-primary-rgb), .92);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
	cursor: pointer;
	transition: transform .25s var(--mg-ease), background .25s ease;
}

.mg-video-facade__play svg { width: 2.1rem; height: 2.1rem; }
.mg-video-facade:hover .mg-video-facade__play { transform: translate(-50%, -50%) scale(1.08); }
.mg-video-facade.is-loading .mg-video-facade__play { opacity: .5; }

.mg-video-facade iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mg-video-facade__play { transition: none; }
	.mg-video-facade:hover .mg-video-facade__play { transform: translate(-50%, -50%); }
}

/* PDF reader */

.mg-pdf-modal__dialog {
	width: min(96vw, 1180px);
	height: min(92svh, 920px);
	max-height: 92svh;
}

.mg-pdf-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mg-space-3);
	padding: var(--mg-space-3) 5rem var(--mg-space-3) var(--mg-space-3);
	border-bottom: 1px solid var(--mg-line);
	background: var(--mg-bg);
}

[dir="rtl"] .mg-pdf-modal__head {
	padding-inline: var(--mg-space-3) 5rem;
}

.mg-pdf-modal__eyebrow {
	display: block;
	margin-bottom: .15rem;
	font-size: .7rem;
	font-weight: 900;
	letter-spacing: .14em;
	color: var(--mg-accent);
}

.mg-pdf-modal__head h2 {
	font-size: var(--mg-step-1);
	line-height: 1.35;
}

.mg-pdf-modal__download[hidden] {
	display: none;
}

.mg-pdf-modal__viewer {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: #303030;
}

.mg-pdf-modal__toolbar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	min-height: 48px;
	padding: .45rem 1rem;
	background: #252525;
	color: #fff;
}

.mg-pdf-modal__toolbar button {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 1.25rem;
}

.mg-pdf-modal__toolbar button:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.mg-pdf-modal__canvas-wrap {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 1rem;
	display: grid;
	place-items: start center;
}

.mg-pdf-modal__canvas-wrap canvas {
	display: block;
	max-width: none;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
	background: #fff;
}

.mg-pdf-modal__status {
	align-self: center;
	margin: auto;
	padding: 1rem 1.35rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, .45);
	color: #fff;
}

.mg-pdf-modal__fallback {
	margin: auto;
	padding: var(--mg-space-4);
	text-align: center;
	color: #fff;
}

.mg-pdf-modal__fallback[hidden] {
	display: none;
}

.mg-pdf-modal__fallback p {
	margin-bottom: var(--mg-space-2);
}

.mg-pdf-modal__fallback .mg-button {
	border-color: rgba(255, 255, 255, .6);
	color: #fff;
}

.mg-pdf-modal__fallback .mg-button:hover {
	border-color: #fff;
	color: #fff;
}

.mg-pdf-modal__canvas-wrap canvas[hidden] {
	display: none;
}

.mg-pdf-modal__viewer,
.mg-pdf-modal__canvas-wrap {
	width: 100%;
}

@media (max-width: 599px) {
	.mg-pdf-modal__head {
		align-items: flex-start;
		padding-block: 1rem;
		padding-inline: 1rem 4.25rem;
	}

	.mg-pdf-modal__download {
		width: auto;
		min-width: 44px;
		padding-inline: .8rem;
	}

	.mg-pdf-modal__download span {
		display: none;
	}

	.mg-pdf-modal__canvas-wrap {
		padding: .55rem;
	}
}

/* Gallery */

.mg-gallery {
	position: relative;
}

.mg-gallery__track {
	position: relative;
	aspect-ratio: 16 / 9;
}

.mg-gallery__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.45s var(--mg-ease);
}

.mg-gallery__slide.is-active {
	opacity: 1;
}

.mg-gallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mg-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(10, 8, 9, 0.55);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	transition: background-color 0.2s var(--mg-ease);
}

.mg-gallery__nav:hover {
	background: var(--mg-primary);
}

.mg-gallery__nav--prev {
	inset-inline-start: 1rem;
}

.mg-gallery__nav--next {
	inset-inline-end: 1rem;
}

/* Specifications */

.mg-specs {
	display: grid;
	gap: 1px;
	background: var(--mg-line);
	border: 1px solid var(--mg-line);
	border-radius: var(--mg-radius);
	overflow: hidden;
	margin: 0;
}

@media (min-width: 560px) {
	.mg-specs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mg-specs--stacked {
		grid-template-columns: minmax(0, 1fr);
	}
}

.mg-specs > div {
	background: var(--mg-bg);
	padding: 0.7rem 1rem;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

.mg-specs dt {
	font-size: 0.76rem;
	color: var(--mg-faint);
	flex-shrink: 0;
}

.mg-specs dd {
	margin: 0;
	font-size: var(--mg-step--1);
	font-weight: 700;
	text-align: end;
}

/* Checklist */

.mg-checklist {
	display: grid;
	gap: 0.55rem;
}

@media (min-width: 560px) {
	.mg-checklist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mg-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-size: var(--mg-step--1);
	line-height: 1.7;
	color: var(--mg-muted);
}

.mg-checklist .mg-icon {
	color: var(--mg-accent);
	margin-top: 0.35rem;
}

/* Progress */

.mg-progress {
	display: grid;
	gap: 0.4rem;
}

.mg-progress__label {
	display: flex;
	justify-content: space-between;
	font-size: var(--mg-step--1);
	color: var(--mg-muted);
}

.mg-progress__label strong {
	color: var(--mg-primary);
}

.mg-progress__track {
	height: 7px;
	border-radius: 99px;
	background: var(--mg-surface-2);
	overflow: hidden;
}

.mg-progress__track span {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--mg-primary), var(--mg-accent));
	transition: width 0.8s var(--mg-ease);
}

/* Before / after comparison */

.mg-compare {
	position: relative;
	border-radius: var(--mg-radius);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--mg-surface-2);
}

.mg-compare img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mg-compare__after,
.mg-compare__before {
	position: absolute;
	inset: 0;
}

.mg-compare__before {
	clip-path: inset(0 var(--mg-compare-clip, 50%) 0 0);
}

[dir="rtl"] .mg-compare__before {
	clip-path: inset(0 0 0 var(--mg-compare-clip, 50%));
}

.mg-compare input[type="range"] {
	position: absolute;
	inset-inline: 0;
	bottom: 1rem;
	width: calc(100% - 2rem);
	margin-inline: 1rem;
	accent-color: var(--mg-accent);
}

/* ==========================================================================
   Shortcode modules
   ========================================================================== */

.mg-module {
	padding: var(--mg-space-4);
	background: var(--mg-bg);
	border: 1px solid var(--mg-line);
	border-radius: calc(var(--mg-radius) * 1.4);
	box-shadow: var(--mg-shadow-sm);
	max-width: 760px;
	margin-inline: auto;
}

.mg-module__title {
	font-size: var(--mg-step-1);
	margin-bottom: var(--mg-space-1);
}

.mg-module__lead {
	color: var(--mg-muted);
	font-size: var(--mg-step--1);
	margin-bottom: var(--mg-space-3);
}

.mg-module__row {
	display: grid;
	gap: var(--mg-space-2);
	margin-bottom: var(--mg-space-2);
}

@media (min-width: 640px) {
	.mg-module__row {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}
}

.mg-module__note {
	margin-top: var(--mg-space-3);
	padding-top: var(--mg-space-2);
	border-top: 1px solid var(--mg-line);
}

.mg-calculator__result,
.mg-tracking__result {
	margin-top: var(--mg-space-3);
	padding: var(--mg-space-3);
	border-radius: var(--mg-radius);
	background: var(--mg-surface);
	border: 1px solid var(--mg-line);
}

.mg-calculator__result[hidden],
.mg-tracking__result[hidden] {
	display: none;
}

.mg-calculator__figure {
	font-size: var(--mg-step-2);
	font-weight: 900;
	color: var(--mg-primary);
	line-height: 1.3;
}

.mg-calculator__range {
	font-size: var(--mg-step--1);
	color: var(--mg-muted);
	margin-top: 0.35rem;
}

.mg-calculator__disclaimer {
	font-size: 0.76rem;
	color: var(--mg-faint);
	margin-top: var(--mg-space-2);
	line-height: 1.7;
}

.mg-tracking__result dl {
	display: grid;
	gap: 0.5rem;
	margin: 0;
}

.mg-tracking__result dl > div {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--mg-line);
}

.mg-tracking__result dl > div:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.mg-tracking__result dt {
	font-size: var(--mg-step--1);
	color: var(--mg-muted);
}

.mg-tracking__result dd {
	margin: 0;
	font-weight: 700;
	font-size: var(--mg-step--1);
}

.mg-tracking__result.is-error {
	background: rgba(192, 57, 43, 0.08);
	border-color: rgba(192, 57, 43, 0.3);
	color: #c0392b;
	font-size: var(--mg-step--1);
}

/* ==========================================================================
   Single project page
   ========================================================================== */

.mg-project-single__hero {
	position: relative;
	min-height: min(60svh, 560px);
	display: flex;
	align-items: flex-end;
	padding-block: var(--mg-space-5);
	padding-top: calc(var(--mg-header-h) + 3rem);
	isolation: isolate;
	overflow: hidden;
}

.mg-project-single__hero > img,
.mg-project-single__hero > video {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mg-project-single__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(10, 8, 9, 0.9), rgba(10, 8, 9, 0.35));
}

.mg-project-single__intro {
	color: #fff;
}

.mg-project-single__intro h1 {
	font-size: var(--mg-step-3);
	color: #fff;
}

.mg-project-single__location {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--mg-accent);
	font-weight: 600;
	font-size: var(--mg-step--1);
	margin-bottom: 0.4rem;
}

.mg-project-single__gallery figure {
	border-radius: var(--mg-radius);
	overflow: hidden;
	background: var(--mg-surface);
}

.mg-project-single__gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.5s var(--mg-ease);
}

.mg-project-single__gallery figure:hover img {
	transform: scale(1.05);
}

.mg-spec-card {
	position: sticky;
	top: calc(var(--mg-header-h) + 1rem);
}

.mg-spec-card__links {
	display: grid;
	gap: 0.4rem;
	margin-top: var(--mg-space-2);
}

.mg-spec-card__cta {
	width: 100%;
	margin-top: var(--mg-space-3);
}

.mg-related {
	background: var(--mg-surface);
	margin-top: var(--mg-space-5);
}


/* ==========================================================================
   Stepped cost estimator
   ========================================================================== */

.mg-calc__progress {
	margin-bottom: var(--mg-space-3);
}

.mg-calc__bar {
	height: 5px;
	border-radius: 99px;
	background: var(--mg-surface-2);
	overflow: hidden;
}

.mg-calc__bar span {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--mg-primary), var(--mg-accent));
	transition: width 0.45s var(--mg-ease);
}

.mg-calc__count {
	margin-top: 0.5rem;
	font-size: 0.78rem;
	color: var(--mg-faint);
}

.mg-calc__count strong {
	color: var(--mg-link);
}

/* Steps are stacked in one grid cell so the panel keeps the height of the
   tallest question and never jumps as the visitor moves between them. */
.mg-calc__steps {
	display: grid;
}

.mg-calc__step {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.3s var(--mg-ease), transform 0.3s var(--mg-ease), visibility 0.3s;
}

.mg-calc__step.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.mg-calc__question {
	font-size: var(--mg-step-1);
	margin-bottom: var(--mg-space-3);
	outline: none;
}

.mg-choices {
	display: grid;
	gap: 0.6rem;
}

@media (min-width: 620px) {
	.mg-choices {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}

	.mg-choices--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mg-choice {
	display: block;
	cursor: pointer;
}

.mg-choice input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.mg-choice__body {
	display: grid;
	gap: 0.25rem;
	padding: var(--mg-space-3);
	height: 100%;
	border: 1px solid var(--mg-line);
	border-radius: var(--mg-radius);
	background: var(--mg-bg);
	transition: border-color 0.2s var(--mg-ease), background-color 0.2s var(--mg-ease),
		transform 0.2s var(--mg-ease);
}

.mg-choice:hover .mg-choice__body {
	border-color: var(--mg-link);
	transform: translateY(-2px);
}

.mg-choice input:checked + .mg-choice__body {
	border-color: var(--mg-primary);
	background: rgba(var(--mg-primary-rgb), 0.05);
	box-shadow: inset 0 0 0 1px var(--mg-primary);
}

.mg-choice input:focus-visible + .mg-choice__body {
	outline: 2px solid var(--mg-accent);
	outline-offset: 2px;
}

.mg-choice__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(var(--mg-primary-rgb), 0.08);
	color: var(--mg-primary);
	margin-bottom: 0.3rem;
}

.mg-choice__body strong {
	font-size: var(--mg-step-0);
}

.mg-choice__body small {
	font-size: 0.78rem;
	color: var(--mg-muted);
	line-height: 1.7;
}

.mg-choice--check .mg-choice__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.mg-choice--check small {
	color: var(--mg-accent);
	font-weight: 700;
}

/* Area step */

.mg-calc__area {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: var(--mg-space-2);
}

.mg-calc__readout {
	font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
	font-weight: 900;
	line-height: 1;
	color: var(--mg-link);
	letter-spacing: -0.02em;
}

.mg-calc__unit {
	font-size: var(--mg-step--1);
	color: var(--mg-muted);
}

.mg-calc__slider {
	width: 100%;
	accent-color: var(--mg-primary);
	cursor: pointer;
}

.mg-calc__scale {
	display: flex;
	justify-content: space-between;
	font-size: 0.7rem;
	color: var(--mg-faint);
	margin-bottom: var(--mg-space-3);
}

/* Result step */

.mg-calc__result {
	padding: var(--mg-space-3);
	border-radius: var(--mg-radius);
	background: var(--mg-surface);
	border: 1px solid var(--mg-line);
	text-align: center;
	min-height: 110px;
	display: grid;
	align-content: center;
	gap: 0.35rem;
}

.mg-calc__figure {
	font-size: var(--mg-step-2);
	font-weight: 900;
	color: var(--mg-link);
	line-height: 1.3;
}

.mg-calc__band {
	font-size: var(--mg-step--1);
	color: var(--mg-muted);
}

.mg-calc__extras {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem;
	margin-top: 0.4rem;
}

.mg-calc__extras li {
	padding: 0.15rem 0.7rem;
	border-radius: 99px;
	background: rgba(var(--mg-accent-rgb), 0.14);
	color: var(--mg-accent);
	font-size: 0.72rem;
	font-weight: 700;
}

.mg-calc__loading {
	color: var(--mg-faint);
	font-size: var(--mg-step--1);
}

.mg-calc__disclaimer,
.mg-calc__hint {
	font-size: 0.76rem;
	color: var(--mg-faint);
	line-height: 1.8;
	margin-block: var(--mg-space-2);
}

.mg-calc__nav {
	display: flex;
	gap: 0.6rem;
	margin-top: var(--mg-space-3);
	padding-top: var(--mg-space-3);
	border-top: 1px solid var(--mg-line);
}

.mg-calc__nav .mg-button {
	flex: 1;
}

.mg-calc__nav .mg-button[hidden] {
	display: none;
}