@import "@{parenturl}/less/mixins.less";
@import "@{themeurl}/less/vars.less";

h2 {
	color:#4b4b4b;
	display:block;
	.font(Lato, 800, 36px);
	letter-spacing:.1em;
	.max({ font-size:24px; });
	text-transform:uppercase;
}

.hero {
	font-size:72px;
	font-size:~"clamp(24px, 4vw, 64px)";
	textarea {
		height: 40px;
	}
	.hero-overlay {
		display:grid;
		align-items:end;
		grid-gap:100px;
		height:100%;
		padding:25px 25px (1920vw / 155vw);
		.min({ grid-template-columns:3fr 2fr; });
		.npoo {
			.max({ display:none !important; });
		}
	}
	.copy {
		h2 {
			text-shadow:0 3px 6px fade(#454545, 50);
			border-bottom:0;
			color:#fff;
			.font(Lato, 800, .75em, 1.05);
			padding-bottom:0;
			padding-left:0;
			max-width:960px;
			margin-bottom:20px;
			text-align:left;
			text-transform:uppercase;
			b {
				display:block;
				.font(Courgette, 400, 2em);
				text-transform:none;
			}
		}
		p {
			color:#fff;
			font-size:~"max(.44em, 18px)";
			line-height:1.2;
			max-width:750px;
			margin-bottom:20px;
		}
		.button {
			display:inline-block;
			margin-bottom:20px;
			.max({ display:none !important; });
		}
		.play {
			display:block;
			.max({ width: 45px; });
		}
	}

	&:after {
		content:' ';
		display:block;
		position:absolute;
		z-index:10;
		left:-1px;
		bottom:-1px;
		width:~"calc(100vw - -2px)";
		height:(1920vw / 175vw);
		background-image:url('/wp-content/uploads/2021/12/hero-overlay.svg');
		background-size:100% auto;
		background-position:bottom center;
		background-repeat:no-repeat;
	}

	& {
		video {
			max-height:900px;
			.transition(max-height);
		}
		.hero-overlay {
			opacity:1;
			pointer-events:auto;
			.transition(opacity);
		}
	}
	&.played {
		video {
			max-height:56.25vw;
		}
		.hero-overlay {
			opacity:0;
			pointer-events:none;
		}
	}
	@media (max-width:1280px) {
		.npoo {
			> div {
				padding:25px;
			}
		}
	}
	@media (max-width:1280px) {
		.npoo {
			font-size:16px;
		}
	}
}

#welcome {
	margin-top:2vw;
	margin-bottom:7vw;
	.grid {
		align-items:center;
		justify-items:center;
	}
	h1 {
		color:#4b4b4b;
		display:block;
		.font(Lato, 800, 36px);
		letter-spacing:.1em;
		margin-bottom:25px;
		.max({ font-size:24px; });
		text-transform:uppercase;
	}
	.button {
		display:inline-block;
	}
	.svc {
		width:100%;
		height:auto;
		display:block;
		line-height:0;
		img {
			width:100%;
		}
	}
	.dcmo_npoo {
		max-height: 547px;
		width: 98%;
		textarea {
			height: 25px;
		}
		@media (min-width: 769px) {
			display: none;
		}
	}
}

#experiences {
	background-color:#E5E1E6;
	margin:0;
	.max({ .padding-sides(15px); });
	> div {	
		.padding-ends(3vw);
		max-width:1600px;
	}
	h2 {
		margin-bottom:50px;
		text-align:center;
	}
	#patients {
		display:grid;
		grid-gap:45px;
		.max({ grid-gap:15px; });
		grid-template-columns:auto 1fr auto;
		.slick-list {
			grid-column:2;
		}
		.slick-track {
			display: grid;
			grid-auto-flow: column;
		}
		.patient {
			display: grid;
			grid-template-rows: 420px 1fr;
		}
	}
	.slick-arrow {
		align-self:center;
		color:#7E7E7E;
		background-color:currentcolor;
		font-size:28px;
		.max({ font-size: 15px; });
		height:2em;
		width:1em;
		display:block;
		overflow:hidden;
		&.slick-prev { .clip(@arrow_left); }
		&.slick-next { .clip(@arrow_right); }
	}
	.patient {
		margin:0 5px;
		background-color:@purple-light;
		.su-lightbox {
			.grid-one();
			position:relative;
			line-height:0;
		}
		img {
			min-height:420px;
			width:100%;
			object-fit:cover;
			object-position:center;
		}
		svg {
			align-self:center;
			justify-self:center;
			cursor:pointer;
			.max({ width:50px; height:50px; });
			filter: drop-shadow(0 3px 12px fade(#000, 50));
			-webkit-filter: drop-shadow(0 3px 12px fade(#000, 50));
		}
		blockquote {
			align-self:center;
			color:#fff;
			line-height:1.25;
			padding:25px;
			.max({ padding:15px 25px; });
			position:relative;
			text-align:center;
			&:before {
				content:' ';
				position:absolute;
				top:20px;
				left:10px;
				display:inline-block;
				background-image:url('/wp-content/uploads/2021/11/quote.svg');
				background-size:contain;
				background-repeat:no-repeat;
				background-position:center;
				width:38px;
				height:40px;
			}
		}
	}
}

#services {
	.margin-ends(7vw);
	.max-width(1700px);
	.padding-sides(25px);
	display:grid;
	grid-gap:15px;

	@media (min-width:769px) {
		grid-template-columns:1fr 1fr;
		grid-template-rows:repeat(4, 1fr);
		.service {
			grid-column:1;
			grid-row:1 / span 4;
		}
	}

	.cosmetic {
		background-image:url('/wp-content/uploads/2021/12/cosmetic.jpg');
	}
	label.cosmetic {
		background-position:center 40%;
	}
	.family {
		background-image:url('/wp-content/uploads/2021/12/family.jpg');
	}
	label.family {
		background-position:center 40%;
	}
	.implant {
		background-image:url('/wp-content/uploads/2021/12/implant.jpg');
	}
	label.implant {
		background-position:center 45%;
	}
	.invisalign {
		background-image:url('/wp-content/uploads/2021/12/invisalign.jpg');
	}
	label.invisalign {
		background-position:center 30%;
	}
	.sedation {
		background-image:url('/wp-content/uploads/2021/12/sedation.jpg');
	}

	.service {
		background-color:@purple;
		box-shadow:inset 0 0 0 2000px fade(@purple, 83);
	}

	.selector {
		grid-column:2;
		width:100%;
		height:100%;
	}
	label {
		color:@purple;
		cursor:pointer;
		.user-select(none);
		display:block;
		box-shadow:inset 0 0 0 2000px fade(#fff, 70);
	}
	input {
		display:none;
	}

	.service, label {
		padding:75px 50px;
		background-position:center;
		background-size:cover;
		background-repeat:no-repeat;
	}

	h2, label {
		.font(Lato, 800, 32px);
		letter-spacing:.1em;
		text-align:center;
		text-transform:uppercase;
	}
	.service {
		.vertAlign;
		h2 {
			color:#fff;
		}
		.copy {
			p {
				color:#fff;
			}
		}
		.learn-more {
			color:#fff;
			display:block;
			.font(Lato, 800, 18px);
			.margin-sides(auto);
			text-transform:uppercase;
			width:fit-content;
			&:after { content:' >>'; }
		}
	}

	.service {
		opacity:0;
		pointer-events:none;
		.transition();
	}
	input:checked {
		+ label { display:none; }
		+ label + .service {
			opacity:1;
			pointer-events:auto;
		}
	}

	@media (max-width:768px) {
		input, label { display:none; }
		.service {
			opacity:1;
			pointer-events:auto;
		}
	}

}


.services-options .entry-content ul li{margin-left:0em;}

.services-img:hover {
    filter: brightness(0.5);
}

#love {
	background-color:#E5E1E6;
	margin:0;
	> div {	
		.padding-ends(3vw);
		max-width:1280px;
	}
	h2 {
		margin-bottom:50px;
		text-align:center;
	}
	p {
		text-align:center;
	}
	.button {
		margin-top:50px;
	}
}

#docs {
	.margin-ends(5vw);

	h2 {
		margin-bottom:50px;
		text-align:center;
	}

	.doc {
		background-color:#B9A9BF;
		margin-top:60px;
		padding:0 50px 50px;
		display:grid;
		grid-template-rows:auto auto 1fr auto;
		p {
			margin-bottom: 10px;
		}
	}

	img {
		border-radius:50%;
		display:block;
		.max-width(420px);
		margin-top:-50px; 
		aspect-ratio: 1/1;
		object-fit:cover;
		object-position:center;
	}
	.doc:nth-of-type(1) {
		img {
			object-position: 50% 2%;
		}
	}
	h3 {
		color:#292929;
		font-size:30px;
		text-align:center;
	}

	p {
		color:#292929;
		line-height:1.5;
		text-align:center;
	}

	.read-more {
		color:#292929;
		display:block;
		margin:auto;
		width:fit-content;
		.font(Source Sans Pro, 700, 24px);
		text-align:center;
		text-transform:uppercase;
		&:after {
			content:' >>';
		}
	}
}