/* ==========================================================================
   Campaign heroes (spe-*): HTML text + transparent portrait over the
   campaign background. Based on app/elemendid/elemendid.css.
   Desktop positions are % of the box and fonts are cqw, so the layout
   scales with the box width; on mobile text and portrait stack.
   ========================================================================== */
.spe-campaign,
.spe-campaign * { box-sizing: border-box; }

.spe-campaign {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #ef8680 url('../img/campaign-bg.webp') center / cover no-repeat;
	color: #37352f;
}

.spe-inner {
	position: relative;
	width: 100%;
	aspect-ratio: 8 / 3;
	margin: 0 auto;
	container-type: inline-size;
}

.spe-copy {
	position: absolute;
	z-index: 1;
	left: 47.3%;
	top: 15%;
	width: 46.5%;
}

.spe-ribbon {
	position: relative;
	isolation: isolate;
	display: table;
	max-width: 100%;
	margin: 0 0 4.6cqw;
	padding: .025em .24em .16em;
	color: #fff;
	font: italic 800 7.05cqw / 1.05 var(--sp-font-display);
	letter-spacing: -.02em;
	text-transform: uppercase;
	transform: rotate(-2deg);
	transform-origin: left center;
}

.spe-ribbon::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 0 -.22em;
	background: var(--sp-red);
	clip-path: polygon(0 0, 100% 0, 100% 79%, 20% 79%, 0 100%);
}

.spe-ribbon > span { overflow-wrap: anywhere; }

.spe-description {
	margin: 0;
	color: #37352f;
	font: 500 2.7cqw / 1.15 var(--sp-font-display);
	letter-spacing: 0;
	text-wrap: pretty;
}

.spe-button { margin-top: 2.4cqw; }

.spe-portrait {
	position: absolute;
	display: block;
	margin: 0;
	max-width: none;
	height: auto;
	width: 52.1%;
	left: 0;
	top: -7%;
}

/* Home: 16:9, name is the H1, never taller than the screen. */
.spe-home .spe-inner {
	aspect-ratio: 16 / 9;
	width: min(100%, calc((100vh - var(--sp-header-h)) * 16 / 9));
}
@supports (height: 100svh) {
	.spe-home .spe-inner { width: min(100%, calc((100svh - var(--sp-header-h)) * 16 / 9)); }
}
.spe-home .spe-copy { left: 6.3%; top: 17%; width: 46%; }
.spe-home .spe-ribbon {
	font-size: 7.4cqw;
	white-space: nowrap;
	transform: rotate(-6deg);
	padding: .025em .24em .13em;
	margin: 0 0 4.4cqw;
}
.spe-home .spe-ribbon::before { clip-path: polygon(0 0, 100% 0, 100% 80%, 6% 80%, 0 100%); }
.spe-home .spe-description { font-size: 1.95cqw; margin-top: 1.6cqw; max-width: 34em; }
.spe-home .spe-portrait { width: 49.17%; left: 44.5%; top: 8%; }

.spe-name {
	margin: 0;
	color: #37352f;
	font: 500 8.2cqw / .83 var(--sp-font-display);
	text-transform: uppercase;
	letter-spacing: -.025em;
}
.spe-name span,
.spe-name strong { display: block; }
.spe-name strong { font-weight: 800; }

/* Minust / Blogi: portrait left, copy right. */
.spe-minust .spe-copy { width: 38%; }
.spe-blogi .spe-copy { width: 42%; }

/* Hoiame ühendust (front page CTA). */
.spe-uhendus .spe-copy { left: 47.5%; top: 18%; width: 46%; }
.spe-uhendus .spe-ribbon { font-size: 6.9cqw; white-space: nowrap; margin-bottom: 3.2cqw; }
.spe-uhendus .spe-description,
.spe-uhendus .spe-button { margin-left: 2.7cqw; }
.spe-uhendus .spe-portrait { width: 48.33%; left: -5.8%; top: -11%; }

/* Kontakt: copy left, portrait right. */
.spe-kontakt .spe-copy { left: 10.4%; top: 14%; width: 39%; }
.spe-kontakt .spe-portrait { width: 89.6%; left: 43%; top: -16.7%; }

/* Section heading ribbon (e.g. "Viimased blogipostitused"). */
.spe-ribbon--section {
	margin: 0;
	font-size: clamp(30px, 4.4vw, 62px);
	white-space: nowrap;
}

.spe-campaign ::selection { background: var(--sp-red-dark); color: #fff; }

/* Mobile: stack copy and portrait. */
@media (max-width: 720px) {
	.spe-campaign { background-size: cover; background-position: 62% center; }

	.spe-inner,
	.spe-home .spe-inner {
		aspect-ratio: auto;
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 40px var(--sp-pad-x) 0;
	}

	.spe-copy,
	.spe-home .spe-copy,
	.spe-uhendus .spe-copy,
	.spe-kontakt .spe-copy,
	.spe-minust .spe-copy,
	.spe-blogi .spe-copy {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
	}

	.spe-ribbon { font-size: clamp(44px, 13cqw, 82px); margin-bottom: 28px; }
	.spe-home .spe-ribbon { font-size: 10.7cqw; margin: 10px 0 34px; white-space: normal; }
	.spe-name { font-size: 20cqw; line-height: .88; margin-bottom: 16px; }
	.spe-description,
	.spe-home .spe-description { font-size: clamp(20px, 5.6cqw, 32px); line-height: 1.2; margin-top: 0; }
	.spe-button { margin-top: 20px; }

	.spe-portrait,
	.spe-home .spe-portrait,
	.spe-uhendus .spe-portrait,
	.spe-kontakt .spe-portrait {
		position: relative;
		left: auto;
		top: auto;
		align-self: center;
		width: 100%;
		height: 340px;
		object-fit: cover;
		object-position: 50% 8%;
		margin-top: 16px;
	}

	.spe-uhendus .spe-ribbon { font-size: 10.1cqw; white-space: normal; margin-bottom: 28px; }
	.spe-uhendus .spe-description,
	.spe-uhendus .spe-button { margin-left: 0; }
	.spe-uhendus .spe-portrait { object-position: 76% 5%; }
	.spe-minust .spe-portrait,
	.spe-blogi .spe-portrait { object-position: center 10%; }
	.spe-kontakt .spe-portrait { object-position: 30% 10%; }

	.spe-ribbon--section { white-space: normal; }
}