/* About intro (O nama, "Ko smo mi"): warm section, large serif statement, labelled blocks on the left,
   tall photo bleeding to the right screen edge with a brown slogan plate over its corner. Mobile-first. */

.iw-aintro {
	background: var(--iw-color-surface);
	overflow: hidden;
}

.iw-aintro__inner {
	display: grid;
	gap: var(--iw-space-12);
	max-width: var(--iw-container);
	margin: 0 auto;
	padding: var(--iw-space-16) var(--iw-gutter);
}

/* Statement */
.iw-aintro__header {
	display: grid;
	gap: var(--iw-space-4);
}

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

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

.iw-aintro__title {
	max-width: 22ch;
	margin: 0;
	color: var(--iw-color-brown);
	font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3.25rem);
	line-height: var(--iw-leading-tight);
	letter-spacing: -0.015em;
}

/* Labelled blocks */
.iw-aintro__blocks {
	display: grid;
	align-content: start;
}

.iw-aintro__block {
	display: grid;
	justify-items: start;
	gap: var(--iw-space-3);
	padding: var(--iw-space-8) 0;
	border-top: 1px solid var(--iw-color-line);
}

.iw-aintro__block:first-child {
	padding-top: var(--iw-space-6);
}

/* The last block ends on the same line as the photo next to it */
.iw-aintro__block:last-child {
	padding-bottom: 0;
}

.iw-aintro__label {
	margin: 0;
	font-size: var(--iw-text-h4);
}

.iw-aintro__text {
	max-width: 32rem;
	margin: 0;
	color: var(--iw-color-ink-soft);
	font-size: var(--iw-text-lg);
}

/* Scoped so Elementor's ".elementor a" rules do not win */
.iw-aintro .iw-aintro__link {
	padding: var(--iw-space-1) 0;
	color: var(--iw-color-brown);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--iw-color-brown) 45%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 8px;
	transition: text-decoration-color 0.15s ease;
}

.iw-aintro .iw-aintro__link:hover {
	color: var(--iw-color-brown);
	text-decoration-color: var(--iw-color-brown);
}

/* Photo with the slogan plate (a div, not a figure: Elementor zeroes figure margins, and the photo needs a
   negative margin to reach the screen edge) */
.iw-aintro__visual {
	position: relative;
	margin: 0;
}

.iw-aintro__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin: 0 calc(var(--iw-gutter) * -1);
	background: var(--iw-color-line);
}

.iw-aintro__media picture,
.iw-aintro__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.iw-aintro__media img {
	object-fit: cover;
}

.iw-aintro__quote {
	position: relative;
	z-index: 1;
	max-width: 22rem;
	margin: calc(var(--iw-space-12) * -1) 0 0;
	padding: var(--iw-space-6) var(--iw-space-8);
	background: var(--iw-color-brown);
	box-shadow: var(--iw-shadow-md);
}

.iw-aintro__quote p {
	margin: 0;
	color: var(--iw-color-on-ink);
	font-family: var(--iw-font-heading);
	font-size: var(--iw-text-h3);
	line-height: var(--iw-leading-tight);
}

.iw-aintro__quote span {
	display: block;
	color: var(--iw-color-taupe-light);
}

/* Reveal (script.js adds is-armed to the section and is-in to the header, each block and the photo).
   The photo is uncovered by a cover in the section colour that slides away (never a clip-path on the
   watched element, see CLAUDE.md), then the slogan plate rises. */
@media (prefers-reduced-motion: no-preference) {
	.iw-aintro.is-armed .iw-aintro__header > *,
	.iw-aintro.is-armed .iw-aintro__block > *,
	.iw-aintro.is-armed .iw-aintro__quote {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.iw-aintro.is-armed .iw-aintro__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--iw-color-surface);
		transform-origin: left center;
		transition: transform 1.1s cubic-bezier(0.7, 0, 0.2, 1);
	}

	.iw-aintro.is-armed .iw-aintro__media img {
		transform: scale(1.1);
		transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.iw-aintro.is-armed .iw-aintro__header.is-in > *,
	.iw-aintro.is-armed .iw-aintro__block.is-in > *,
	.iw-aintro.is-armed .iw-aintro__visual.is-in .iw-aintro__quote {
		opacity: 1;
		transform: none;
	}

	.iw-aintro.is-armed .iw-aintro__visual.is-in .iw-aintro__media::after {
		transform: scaleX(0);
	}

	.iw-aintro.is-armed .iw-aintro__visual.is-in .iw-aintro__media img {
		transform: none;
	}

	.iw-aintro__header.is-in > :nth-child(2) { transition-delay: 0.12s; }
	.iw-aintro__block.is-in > :nth-child(2) { transition-delay: 0.1s; }
	.iw-aintro__block.is-in > :nth-child(3) { transition-delay: 0.2s; }
	.iw-aintro__visual.is-in .iw-aintro__quote { transition-delay: 0.8s; }
}

@media (min-width: 768px) {
	.iw-aintro__media {
		margin: 0;
	}

	.iw-aintro__quote {
		margin-left: var(--iw-space-8);
	}
}

@media (min-width: 1024px) {
	.iw-aintro__inner {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--iw-space-16) var(--iw-space-8);
		padding: var(--iw-space-24) var(--iw-gutter);
	}

	.iw-aintro__header {
		grid-column: 1 / span 10;
	}

	.iw-aintro__blocks {
		grid-column: 1 / span 5;
		grid-row: 2;
	}

	/* Photo runs from column 7 to the right screen edge; the plate hangs over its bottom left corner */
	.iw-aintro__visual {
		grid-column: 7 / -1;
		grid-row: 2;
		min-height: 440px;
		margin-right: calc(-1 * max(var(--iw-gutter), calc((100vw - var(--iw-container)) / 2 + var(--iw-gutter))));
		padding-bottom: 0;
	}

	/* Out of the flow, so the natural image height never stretches the row: the text column sets it */
	.iw-aintro__media {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
	}

	.iw-aintro__quote {
		position: absolute;
		left: calc(var(--iw-space-16) * -1);
		bottom: var(--iw-space-12);
		width: 27rem;
		max-width: none;
		margin: 0;
	}
}