/*
	MOTUS Fizjoterapia i Rehabilitacja — custom.css
	Ładowany PO main.css. Nie edytuj main.css.
*/

/* ---------- Zmienne / paleta ---------- */

:root {
	--petrol: #123832;
	--cream: #F7F5F0;
	--green: #2F8F6F;
	--amber: #F2B134;
	--text: #22241F;
	--text-light: #F7F5F0;
	--chevron: 6vw;
}

/* ---------- Typografia ---------- */

body, input, select, textarea {
	font-family: 'Work Sans', sans-serif;
	color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
}

a {
	color: var(--green);
}

strong, b {
	color: var(--text);
}

/* ---------- Sticky nav ---------- */

#mt-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background: rgba(18, 56, 50, 0.94);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

	#mt-nav .mt-nav-inner {
		max-width: 1400px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.9em 2em;
	}

	#mt-nav .mt-nav-logo {
		font-family: 'Manrope', sans-serif;
		font-weight: 800;
		font-size: 1.25em;
		letter-spacing: 0.1em;
		color: #ffffff;
		text-transform: uppercase;
		text-decoration: none;
		border-bottom: none;
	}

		#mt-nav .mt-nav-logo:hover {
			color: var(--amber);
		}

	#mt-nav .mt-nav-links {
		display: flex;
		align-items: center;
		gap: 1.75em;
		list-style: none;
		margin: 0;
		padding: 0;
	}

		#mt-nav .mt-nav-links a {
			color: rgba(247, 245, 240, 0.85);
			text-decoration: none;
			border-bottom: none;
			font-size: 0.82em;
			font-weight: 700;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			transition: color 0.2s ease-in-out;
		}

			#mt-nav .mt-nav-links a:hover {
				color: var(--amber);
			}

		#mt-nav .mt-nav-links li.mt-nav-cta a {
			background: var(--amber);
			color: var(--petrol);
			padding: 0.65em 1.25em;
			border-radius: 4px;
		}

			#mt-nav .mt-nav-links li.mt-nav-cta a:hover {
				background: #ffffff;
				color: var(--petrol);
			}

	#mt-nav .mt-nav-toggle {
		display: none;
		background: none;
		border: 0;
		color: #ffffff;
		font-size: 1.4em;
		cursor: pointer;
	}

	@media screen and (max-width: 840px) {

		#mt-nav .mt-nav-toggle {
			display: block;
		}

		#mt-nav .mt-nav-links {
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			flex-direction: column;
			align-items: flex-start;
			gap: 0;
			background: var(--petrol);
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease-in-out;
		}

			#mt-nav .mt-nav-links li {
				width: 100%;
				padding: 0;
			}

			#mt-nav .mt-nav-links a {
				display: block;
				padding: 1em 2em;
				width: 100%;
			}

			#mt-nav .mt-nav-links li.mt-nav-cta {
				padding: 1em 2em;
			}

			#mt-nav .mt-nav-links li.mt-nav-cta a {
				display: inline-block;
			}

		#mt-nav.is-open .mt-nav-links {
			max-height: 28em;
		}

	}

body {
	padding-top: 4.2em;
}

/* ---------- Hero (#header) ---------- */

#header {
	z-index: 2;
	background-color: var(--petrol);
	background-image:
		linear-gradient(180deg, rgba(18, 56, 50, 0.6), rgba(18, 56, 50, 0.88)),
		url("../images/hero-tlo.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: scroll;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chevron)), 50% 100%, 0 calc(100% - var(--chevron)));
	padding: 9em 0 calc(4em + var(--chevron)) 0;
}

	#header:before,
	#header:after {
		display: none;
	}

	#header .logo {
		background: var(--amber);
		color: var(--petrol);
	}

	#header a {
		color: rgba(255, 255, 255, 0.85);
	}

		#header a:hover {
			color: var(--amber);
		}

	#header .actions.special {
		margin-top: 2.25em;
	}

	#header .button {
		background: var(--amber);
		color: var(--petrol);
	}

		#header .button:hover {
			background: #ffffff;
			color: var(--petrol);
		}

	#header .mt-missing-badge {
		position: absolute;
		top: 1.25em;
		left: 50%;
		transform: translateX(-50%);
		display: none;
		align-items: center;
		gap: 0.5em;
		background: rgba(0, 0, 0, 0.45);
		color: rgba(255, 255, 255, 0.85);
		font-size: 0.7em;
		letter-spacing: 0.05em;
		padding: 0.5em 1em;
		border-radius: 100px;
		z-index: 2;
	}

	#header.mt-hero-missing .mt-missing-badge {
		display: inline-flex;
	}

/* ---------- Ogólne sekcje (#main) ---------- */

#main {
	background: var(--cream);
	margin-top: calc(-1 * var(--chevron));
	padding-top: calc(6em + var(--chevron));
}

	#main header.major,
	#main footer.major {
		background: var(--cream);
	}

	#main:before {
		background: rgba(34, 36, 31, 0.1);
	}

.mt-section {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2em;
}

.mt-section-head p {
	max-width: 46em;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Proces (feature rows) ---------- */

.box.alt.mt-process .feature .content h3 {
	color: var(--text);
}

.box.alt.mt-process .feature:before {
	background: var(--green);
}

.box.alt.mt-process .image.icon:before {
	font-size: 4.5em;
	color: var(--cream);
	background: var(--petrol);
	border-radius: 50%;
	box-shadow: 0 8px 20px rgba(11, 33, 29, 0.35);
}

.feature .mt-media-frame {
	height: 100%;
}

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

#main footer.major .button {
	background: none;
	box-shadow: inset 0 0 0 1px var(--green);
	color: var(--green);
}

	#main footer.major .button:hover {
		background: var(--green);
		color: #ffffff;
	}

/* ---------- Usługi ---------- */

.mt-services {
	padding: 5em 0;
}

.mt-service-card {
	background: #ffffff;
	border-radius: 8px;
	padding: 2.5em 2em;
	text-align: center;
	height: 100%;
	box-shadow: 0 10px 30px rgba(18, 56, 50, 0.06);
}

.mt-service-card .mt-icon-circle {
	margin: 0 auto 1em auto;
}

.mt-service-card h3 {
	font-size: 1em;
	margin-bottom: 0.6em;
}

.mt-service-card p {
	font-size: 0.85em;
	margin-bottom: 0;
	color: rgba(34, 36, 31, 0.75);
}

.mt-icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5em;
	height: 2.5em;
	border-radius: 100%;
	background: var(--petrol);
	color: var(--amber);
	font-size: 1.5em;
}

/* ---------- Zespół / O nas ---------- */

.mt-team {
	padding: 1em 0 5em 0;
}

.mt-team-card {
	background: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(18, 56, 50, 0.06);
	height: 100%;
}

.mt-team-card .mt-media-frame {
	aspect-ratio: 4 / 3;
}

.mt-team-card .mt-team-body {
	padding: 1.75em 2em 2em 2em;
}

.mt-team-card h3 {
	margin-bottom: 0.15em;
	font-size: 1.05em;
}

.mt-team-card .mt-team-role {
	display: block;
	color: var(--green);
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 1em;
}

.mt-team-card p {
	font-size: 0.9em;
	text-align: left;
	color: rgba(34, 36, 31, 0.8);
}

/* ---------- Wideo ---------- */

.mt-video {
	padding: 1em 0 5em 0;
}

.mt-video-card {
	background: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(18, 56, 50, 0.06);
	height: 100%;
}

.mt-video-card .mt-media-frame {
	aspect-ratio: 16 / 9;
}

.mt-media-frame--embed {
	background: var(--petrol);
}

	.mt-media-frame--embed iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
		display: block;
	}

.mt-video-card h3 {
	font-size: 0.95em;
	padding: 1.25em 1.25em 1.5em 1.25em;
	margin: 0;
}

/* ---------- Media fallback (zdjęcia i wideo) ---------- */

.mt-media-frame {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	background: var(--petrol);
}

	.mt-media-frame img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
	}

	.mt-media-frame.is-loaded img {
		opacity: 1;
	}

	.mt-media-frame .mt-fallback {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.6em;
		text-align: center;
		padding: 1em;
		background: linear-gradient(160deg, var(--petrol), #0b211d);
		color: rgba(247, 245, 240, 0.85);
	}

	.mt-media-frame.is-loaded .mt-fallback {
		display: none;
	}

	.mt-media-frame .mt-fallback .mt-icon-circle {
		background: rgba(247, 245, 240, 0.12);
		color: var(--amber);
	}

	.mt-media-frame .mt-fallback span.mt-fallback-text {
		font-size: 0.72em;
		letter-spacing: 0.04em;
		max-width: 14em;
	}

	.mt-media-frame .mt-fallback.mt-fallback--compact {
		background: linear-gradient(160deg, rgba(18, 56, 50, 0.55), rgba(11, 33, 29, 0.75));
	}

	.mt-media-frame .mt-fallback--compact span.mt-fallback-text {
		align-self: flex-end;
		font-size: 0.65em;
		background: rgba(11, 33, 29, 0.6);
		padding: 0.4em 0.75em;
		border-radius: 4px;
		margin: 0.75em;
	}

/* ---------- Opinie ---------- */

.mt-testimonials {
	padding: 1em 0 5em 0;
}

.mt-testimonial-card {
	background: #ffffff;
	border-radius: 8px;
	padding: 2.25em 2em;
	height: 100%;
	box-shadow: 0 10px 30px rgba(18, 56, 50, 0.06);
}

.mt-testimonial-card .icon {
	color: var(--amber);
	font-size: 1.4em;
	display: block;
	margin-bottom: 0.5em;
}

.mt-testimonial-card blockquote {
	border: 0;
	margin: 0 0 1.25em 0;
	padding: 0;
	font-size: 0.95em;
	font-style: normal;
	line-height: 1.7em;
	color: var(--text);
}

.mt-testimonial-card cite {
	font-style: normal;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--green);
}

/* ---------- Kontakt / Stopka (#footer) ---------- */

#footer {
	background-color: var(--green);
	background-image: none;
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * var(--chevron));
	padding: calc(4em + var(--chevron)) 0 5em 0;
	clip-path: polygon(0 var(--chevron), 50% 0, 100% var(--chevron), 100% 100%, 0 100%);
}

	#footer:before {
		display: none;
	}

	#footer a {
		color: #ffffff;
	}

	#footer input[type="submit"] {
		background: var(--amber);
		color: var(--petrol);
	}

		#footer input[type="submit"]:hover {
			background: #ffffff;
			color: var(--petrol);
		}

	#footer .mt-company-info {
		margin: 2em auto 0 auto;
		max-width: 34em;
		text-align: center;
		color: rgba(255, 255, 255, 0.9);
		font-size: 0.95em;
		line-height: 1.9em;
	}

		#footer .mt-company-info strong {
			color: #ffffff;
		}

	#footer .mt-contact-actions {
		margin: 2em 0 1em 0;
	}

	#footer .mt-contact-actions .button:not(.alt) {
		background: var(--amber);
		color: var(--petrol);
	}

		#footer .mt-contact-actions .button:not(.alt):hover {
			background: #ffffff;
			color: var(--petrol);
		}

	#footer .mt-contact-actions .button.alt {
		background: none;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
		color: #ffffff;
	}

		#footer .mt-contact-actions .button.alt:hover {
			background: rgba(255, 255, 255, 0.15);
			color: #ffffff;
		}

	#footer .icons a {
		background: rgba(255, 255, 255, 0.12);
		border-radius: 100%;
	}

		#footer .icons a:hover {
			background: var(--amber);
			color: var(--petrol);
		}

	#footer .copyright a {
		color: rgba(255, 255, 255, 0.9);
	}

	#footer .copyright .mt-credit {
		color: rgba(255, 255, 255, 0.75);
	}

/* ---------- Utility ---------- */

.mt-uppercase-eyebrow {
	display: block;
	color: var(--green);
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: 0.75em;
	text-align: center;
}

#header .mt-uppercase-eyebrow {
	color: var(--amber);
}

#jak-pracujemy,
#uslugi,
#o-nas,
#wideo,
#opinie,
#kontakt {
	scroll-margin-top: 5.5em;
}

@media screen and (max-width: 736px) {
	#header {
		padding: 7em 1.25em calc(3em + var(--chevron)) 1.25em;
	}
}