/**
 * Website Design: Hero
 */

.ld-wd-hero {
	position: relative;
	background: var(--ld-cream);
	padding: clamp(78px, 8vw, 118px) 0 clamp(82px, 8vw, 120px);
}

.ld-wd-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(480px, 1.05fr);
	gap: clamp(55px, 7vw, 110px);
	align-items: center;
}

.ld-wd-hero__content {
	position: relative;
	z-index: 2;
}

.ld-wd-hero__title {
	max-width: 790px;
	margin: 0;
	color: var(--ld-ink);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(56px, 5.6vw, 88px);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 0.94;
	text-wrap: balance;
}

.ld-wd-hero__title span {
	display: block;
	margin-top: 8px;
	color: var(--ld-gold-dark);
	font-style: italic;
	font-weight: 500;
}

.ld-wd-hero__lead {
	max-width: 620px;
	margin: 32px 0 0;
	color: var(--ld-gray);
	font-family: Inter, sans-serif;
	font-size: 17px;
	line-height: 1.78;
}

.ld-wd-hero__personal {
	max-width: 590px;
	margin: 20px 0 0;
	color: var(--ld-charcoal);
	font-family: Inter, sans-serif;
	font-size: 14px;
	line-height: 1.7;
}

.ld-wd-hero__personal strong {
	color: var(--ld-ink);
}

.ld-wd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	align-items: center;
	margin-top: 34px;
}

/* ---------------------------------------------------------
   Website showcase
--------------------------------------------------------- */

.ld-wd-hero__visual {
	position: relative;
	min-height: 560px;
	isolation: isolate;
}

.ld-wd-hero__screen {
	position: absolute;
	margin: 0;
	transform-origin: center;
	transition:
		transform 300ms ease,
		filter 300ms ease;
}

.ld-wd-hero__screen img {
	display: block;
	width: 100%;
	background: var(--ld-white);
	border: 7px solid var(--ld-white);
	box-shadow: 0 30px 70px rgba(23, 23, 23, 0.17);
	user-select: none;
	-webkit-user-drag: none;
	transition:
		box-shadow 300ms ease;
}

.ld-wd-hero__screen--primary {
	top: 96px;
	left: 0;
	z-index: 2;
	width: 82%;
	transform: rotate(-1.7deg);
}

.ld-wd-hero__screen--secondary {
	top: 0;
	right: 0;
	z-index: 1;
	width: 72%;
	transform: rotate(3deg);
}

.ld-wd-hero__tag {
	position: absolute;
	top: -14px;
	left: 16px;
	z-index: 3;
	padding: 7px 10px;
	background: var(--ld-ink);
	color: var(--ld-white);
	font-family: Inter, sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1;
	text-transform: uppercase;
	transition:
		background-color 250ms ease,
		color 250ms ease;
}

/* ---------------------------------------------------------
   Desktop interaction
--------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

	.ld-wd-hero__screen {
		cursor: pointer;
	}

	.ld-wd-hero__screen--primary:hover,
	.ld-wd-hero__screen--primary:focus-visible {
		z-index: 20;
		transform:
			rotate(-0.25deg)
			translateY(-10px)
			scale(1.025);
	}

	.ld-wd-hero__screen--secondary:hover,
	.ld-wd-hero__screen--secondary:focus-visible {
		z-index: 20;
		transform:
			rotate(0.35deg)
			translateY(-10px)
			scale(1.035);
	}

	.ld-wd-hero__screen:hover img,
	.ld-wd-hero__screen:focus-visible img {
		box-shadow: 0 38px 85px rgba(23, 23, 23, 0.23);
	}

	.ld-wd-hero__screen:hover .ld-wd-hero__tag,
	.ld-wd-hero__screen:focus-visible .ld-wd-hero__tag {
		background: var(--ld-gold);
		color: var(--ld-ink);
	}

	.ld-wd-hero__screen:focus-visible {
		outline: 2px solid var(--ld-gold);
		outline-offset: 7px;
	}
}

/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */

@media (max-width: 980px) {

	.ld-wd-hero__inner {
		grid-template-columns: 1fr;
	}

	.ld-wd-hero__content {
		max-width: 780px;
	}

	.ld-wd-hero__visual {
		width: min(100%, 720px);
		min-height: 550px;
		margin-inline: auto;
	}

	/*
	 * Touch interaction.
	 */
	.ld-wd-hero__screen {
		cursor: pointer;
		touch-action: manipulation;
	}

	.ld-wd-hero__screen:focus-visible {
		outline: 2px solid var(--ld-gold);
		outline-offset: 6px;
	}

	.ld-wd-hero__screen.is-active {
		z-index: 30;
	}

	.ld-wd-hero__screen.is-active img {
		box-shadow: 0 38px 85px rgba(23, 23, 23, 0.24);
	}

	.ld-wd-hero__screen.is-active .ld-wd-hero__tag {
		background: var(--ld-gold);
		color: var(--ld-ink);
	}

	.ld-wd-hero__screen--primary.is-active {
		transform:
			rotate(-0.2deg)
			translateY(-7px)
			scale(1.025);
	}

	.ld-wd-hero__screen--secondary.is-active {
		transform:
			rotate(0.25deg)
			translateY(-7px)
			scale(1.035);
	}
}

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width: 640px) {

	.ld-wd-hero {
		padding: 54px 0 68px;
	}

	.ld-wd-hero__title {
		font-size: clamp(46px, 13vw, 62px);
		line-height: 0.97;
	}

	.ld-wd-hero__lead {
		margin-top: 26px;
		font-size: 16px;
		line-height: 1.7;
	}

	.ld-wd-hero__actions {
		gap: 18px;
		margin-top: 28px;
	}

	.ld-wd-hero__visual {
		min-height: 370px;
		margin-top: 10px;
	}

	.ld-wd-hero__screen--primary {
		top: 90px;
		width: 84%;
	}

	.ld-wd-hero__screen--secondary {
		width: 76%;
	}

	.ld-wd-hero__screen img {
		border-width: 5px;
	}

	/*
	 * Keep mobile movement restrained so the screenshots
	 * stay comfortably inside the viewport.
	 */
	.ld-wd-hero__screen--primary.is-active {
		transform:
			rotate(-0.15deg)
			translate(4px, -5px)
			scale(1.02);
	}

	.ld-wd-hero__screen--secondary.is-active {
		transform:
			rotate(0.2deg)
			translate(-4px, 2px)
			scale(1.025);
	}
}

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.ld-wd-hero__screen,
	.ld-wd-hero__screen img,
	.ld-wd-hero__tag {
		transition: none;
	}
}