/* Tiny House (home page): dark full-width feature. Photo of the whole house, text over its dark side, materials
   on the dark band below. The link covers the whole section. Mobile-first. */

.iw-tiny {
	--iw-tiny-drift: 56px; /* photo parallax travel, see script.js */
	position: relative;
	background: var(--iw-color-espresso);
	color: var(--iw-color-on-ink);
}

/* Photo */
.iw-tiny__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--iw-color-brown);
}

.iw-tiny__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.iw-tiny__media img {
	display: block;
	width: 100%;
	height: calc(100% + var(--iw-tiny-drift));
	object-fit: cover;
	object-position: 88% center; /* the lit terrace stays in frame */
	transform: translate3d(0, var(--iw-shift, calc(var(--iw-tiny-drift) / -2)), 0);
	transition: filter 0.4s ease;
	will-change: transform;
}

/* Text */
.iw-tiny__content {
	display: grid;
	justify-items: start;
	gap: var(--iw-space-4);
	padding: var(--iw-space-12) var(--iw-gutter) var(--iw-space-8);
}

.iw-tiny__kicker {
	display: flex;
	align-items: center;
	gap: var(--iw-space-4);
	margin: 0;
	color: var(--iw-color-taupe-light);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.iw-tiny__kicker::before {
	content: "";
	flex: none;
	width: 40px;
	height: 2px;
	background: var(--iw-color-primary);
}

.iw-tiny__title {
	margin: 0;
	color: var(--iw-color-on-ink);
	font-size: var(--iw-text-h1);
	line-height: var(--iw-leading-tight);
}

.iw-tiny__title-accent {
	display: block;
	color: var(--iw-color-taupe);
}

.iw-tiny__intro {
	max-width: 34rem;
	margin: 0;
	color: rgb(255 255 255 / 80%);
	font-size: var(--iw-text-lg);
}

/* Scoped so Elementor's ".elementor a" rule does not remove the underline. The ::after stretches the link over
   the whole section, so there is one real link and a click anywhere follows it. */
.iw-tiny .iw-tiny__link {
	margin-top: var(--iw-space-2);
	padding: var(--iw-space-1) 0;
	color: var(--iw-color-on-ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgb(255 255 255 / 55%);
	text-decoration-thickness: 1px;
	text-underline-offset: 8px;
	transition: text-decoration-color 0.15s ease;
}

.iw-tiny .iw-tiny__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

@media (hover: hover) {
	.iw-tiny:hover .iw-tiny__link {
		text-decoration-color: var(--iw-color-primary);
	}

	.iw-tiny:hover .iw-tiny__media img {
		filter: brightness(1.08);
	}
}

/* Materials */
.iw-tiny__facts {
	display: grid;
	max-width: var(--iw-container);
	margin: 0 auto;
	padding: 0 var(--iw-gutter) var(--iw-space-12);
	list-style: none;
}

.iw-tiny__facts li {
	display: grid;
	gap: var(--iw-space-1);
	padding: var(--iw-space-4) 0;
	border-top: 1px solid rgb(255 255 255 / 18%);
}

.iw-tiny__fact-value {
	color: var(--iw-color-on-ink);
	font-family: var(--iw-font-heading);
	font-size: var(--iw-text-h4);
	line-height: var(--iw-leading-tight);
}

.iw-tiny__fact-label {
	color: rgb(255 255 255 / 70%);
	font-size: var(--iw-text-sm);
}

/* Reveal (script.js adds is-armed to the section and is-in to the photo, the text and the materials as they come
   into view). A cover in the section colour shrinks off the photo; the image itself only drifts. */
@media (prefers-reduced-motion: no-preference) {
	.iw-tiny.is-armed .iw-tiny__content > *,
	.iw-tiny.is-armed .iw-tiny__facts li {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.iw-tiny.is-armed .iw-tiny__media::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: var(--iw-color-espresso);
		transform-origin: right center;
		transition: transform 1.3s cubic-bezier(0.7, 0, 0.2, 1);
	}

	.iw-tiny.is-armed .iw-tiny__content.is-in > *,
	.iw-tiny.is-armed .iw-tiny__facts.is-in li {
		opacity: 1;
		transform: none;
	}

	.iw-tiny.is-armed .iw-tiny__media.is-in::after {
		transform: scaleX(0);
	}

	.iw-tiny__content.is-in > :nth-child(2) { transition-delay: 0.1s; }
	.iw-tiny__content.is-in > :nth-child(3) { transition-delay: 0.2s; }
	.iw-tiny__content.is-in > :nth-child(4) { transition-delay: 0.3s; }
	.iw-tiny__facts.is-in li:nth-child(2) { transition-delay: 0.15s; }
	.iw-tiny__facts.is-in li:nth-child(3) { transition-delay: 0.3s; }
}

@media (min-width: 768px) {
	.iw-tiny__facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--iw-space-8);
	}
}

/* The photo fills the stage; a veil darkens its left side for the text and melts its bottom into the band.
   Photo and text share one grid cell and neither the stage nor the text is positioned: the stretched link must
   measure against the section, so the photo goes behind the text with z-index inside the isolated section. */
@media (min-width: 1024px) {
	.iw-tiny {
		--iw-tiny-edge: max(var(--iw-gutter), calc((100vw - var(--iw-container)) / 2 + var(--iw-gutter)));
		isolation: isolate;
	}

	.iw-tiny__stage {
		display: grid;
		align-items: center;
		min-height: clamp(600px, 52vw, 860px);
	}

	.iw-tiny__media {
		z-index: -1;
		grid-area: 1 / 1;
		align-self: stretch;
		aspect-ratio: auto;
	}

	.iw-tiny__media img {
		position: absolute;
		inset: 0;
		object-position: center 23%; /* the whole roof stays in frame on wide screens, also with the parallax drift */
	}

	.iw-tiny__media::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background:
			linear-gradient(to top, var(--iw-color-espresso) 0%, rgb(28 22 18 / 0%) 26%),
			linear-gradient(to right, rgb(28 22 18 / 96%) 0%, rgb(28 22 18 / 88%) 36%, rgb(28 22 18 / 0%) 64%);
		pointer-events: none;
	}

	.iw-tiny__content {
		grid-area: 1 / 1;
		max-width: calc(var(--iw-tiny-edge) + 36rem);
		padding: var(--iw-space-16) var(--iw-space-8) var(--iw-space-16) var(--iw-tiny-edge);
	}

	.iw-tiny__facts {
		padding-bottom: var(--iw-space-16);
	}
}