/*
 * Ehitusinfo lehe kaks kujundatud sektsiooni: seotud ettevotete rida ja
 * muuja kaart. Lehe pohitekst nende vahel on tavaline sisu ja seda see fail
 * ei puuduta.
 *
 * Mobile-first ja isoleeritud, nagu timeline.css - siin ei ole uhtegi reeglit,
 * mida mujal tagasi kirjutama peaks. Teema ise on desktop-first.
 *
 * Moodud on Figma failist (frame "seotud ettevoted info", 1440 lai):
 * sisuveerg 966 px, kaart 966x380, foto 360x341, FISK-i mark 130x345.
 * Mobiilivaadet kujundusfailis EI OLE - alla 768 px on see siin tehtud
 * lahendus, mitte kujundaja oma. Vt docs/ehitusinfo.md.
 */

.tr-ei {
	--tr-ei-fg: #2a6760;          /* sildid, nimed, pealkirjad */
	--tr-ei-card-bg: #5a8a87;     /* muuja kaardi taust */
	--tr-ei-card-fg: #ffffff;
	--tr-ei-max: 966px;           /* sisuveeru laius kujundusest */
	--tr-ei-gap: 23px;            /* kaardi tekstiplokkide vahe */

	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/*
 * Sisukonteiner.
 *
 * Teema stiliseerib lehesisu ainult .page-template-default all (style.css
 * read ~974, ~2342, ~2358, ~2713). Oma mall saab teise body-klassi ja kaotaks
 * kogu selle - seetottu on need kolm reeglit siin ule korratud. Nii jaab
 * style.css puutumata, nagu timeline.css-i puhulgi.
 *
 * Kui style.css-i vastavad read kunagi muutuvad, tuleb need siin kaasa muuta.
 */
.page-template-template-ehitusinfo .entry-content {
	max-width: 1000px;
	margin: 150px auto 100px !important;
	width: 100%;
	padding: 0 5%;
}

.page-template-template-ehitusinfo h1 {
	color: var(--tr-ei-fg);
	font-size: 60px !important;
	text-shadow: 0 0 0 #00000029;
}

.page-template-template-ehitusinfo h2 {
	font-size: 35px;
}

/*
 * Sektsioonid taidavad sama konteineri, mis lehetekst - nii on osapoolte rida,
 * kaart ja tekst uhel joonel. Kujunduses on koik kolm x=237 juures.
 */
.tr-ei__inner {
	max-width: var(--tr-ei-max);
	margin: 0 auto;
}

/* ------------------------------------------------------------------
 * 1. Seotud ettevotted
 * ------------------------------------------------------------------ */

.tr-ei-parties {
	padding: clamp(28px, 4vw, 40px) 0;
}

.tr-ei-parties__list {
	display: grid;
	/*
	 * auto-fit, mitte fikseeritud viis veergu: telefonis tuleb kaks, tahvlis
	 * kolm, lauaarvutis viis. Kui kunagi lisandub kuues osapool, ei ole vaja
	 * siia puutuda - ainult ACF-i valju ja TISKREAED_EHITUSINFO_PARTIES.
	 *
	 * Kujunduses olid veerud ebauhtlaselt paigutatud (vahed 166/234/171/150 px)
	 * ja "Arhitektuuriburoo Panda" jooksis oma kastist valja. Siin on uhtlane
	 * grid - teadlik parandus, mitte piksel-tapne koopia.
	 */
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(20px, 3vw, 28px) 19px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tr-ei-parties__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.tr-ei-parties__role {
	margin: 0;
	color: var(--tr-ei-fg);
	font-size: 14px;
	font-weight: 400;
	line-height: 19px;
	/* Suurtahed on stiil, mitte sisu - haldusesse kirjutatakse tavaliselt. */
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tr-ei-parties__name {
	margin: 0;
	color: var(--tr-ei-fg);
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	overflow-wrap: break-word;
}

/* ------------------------------------------------------------------
 * 2. Muuja kaart
 * ------------------------------------------------------------------ */

.tr-ei-seller {
	padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 88px);
}

.tr-ei-seller__heading {
	margin: 0 0 clamp(20px, 3vw, 34px);
	color: var(--tr-ei-fg);
	font-size: clamp(26px, 3.4vw, 35px);
	font-weight: 600;
	line-height: 1.37;
	letter-spacing: -0.03em;
}

.tr-ei-seller__card {
	position: relative;
	overflow: hidden;
	background: var(--tr-ei-card-bg);
	color: var(--tr-ei-card-fg);
	/* Kujunduses on nurgad teravad. */
	border-radius: 0;
}

.tr-ei-seller__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--tr-ei-gap);
	padding: clamp(32px, 5vw, 80px) clamp(24px, 5vw, 86px) clamp(28px, 4vw, 68px);
}

.tr-ei-seller__title {
	margin: 0;
	max-width: 407px;
	font-size: clamp(20px, 2.4vw, 25px);
	font-weight: 600;
	line-height: 1.36;
}

.tr-ei-seller__text {
	max-width: 463px;
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
}

/* Sisu tuleb wpautop'i kaudu, seega loigud on <p> - klient voib neid mitu teha. */
.tr-ei-seller__text > p {
	margin: 0 0 0.8em;
}

.tr-ei-seller__text > p:last-child {
	margin-bottom: 0;
}

.tr-ei-seller__cite {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	font-style: normal;
	line-height: 18px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.tr-ei-seller__cite-role::before {
	content: ' ';
}

/*
 * Foto ja FISK-i mark.
 *
 * Telefonis: foto voolab tekstiploki alla, mark on peidus. Mark on puhtalt
 * dekoratiivne ja vaiksel ekraanil foto peal ainult mura.
 */
.tr-ei-seller__figure {
	position: relative;
	z-index: 1;
	display: block;
	margin: 0;
	text-align: right;
}

.tr-ei-seller__photo {
	display: block;
	width: 100%;
	max-width: 360px;
	height: auto;
	margin-left: auto;
	/* Nagu kujunduses: foto on kaardi alaservaga tasa. */
	vertical-align: bottom;
}

.tr-ei-seller__mark {
	display: none;
}

@media (min-width: 768px) {
	.tr-ei-seller__card {
		/* Kujunduse korgus 380 px sisuveeru laiusel 966 px. */
		min-height: 380px;
	}

	.tr-ei-seller__body {
		/* Ruum fotole paremal, et pikk tekst selle taha ei jookseks. */
		padding-right: 44%;
	}

	/*
	 * Foto ja mark on positsioneeritud KAARDI, mitte umbrise suhtes - nii
	 * jaavad Figma protsendid paika igal laiusel. Kaart on kujunduses 966 px:
	 *   foto  360 px lai, parem serv 70 px servast  -> 37.27% / 7.25%
	 *   mark  130 px lai, parem serv 20 px servast  -> 13.46% / 2.07%
	 */
	.tr-ei-seller__figure {
		position: absolute;
		inset: 0;
		text-align: initial;
	}

	.tr-ei-seller__photo {
		position: absolute;
		right: 7.25%;
		bottom: 0;
		width: 37.27%;
		max-width: 360px;
		margin-left: 0;
	}

	.tr-ei-seller__mark {
		/* Figma: mark on foto PEAL, mitte taga. */
		position: absolute;
		top: 20px;
		right: 2.07%;
		display: block;
		width: 13.46%;
		max-width: 130px;
		height: auto;
		color: var(--tr-ei-card-fg);
	}

	.tr-ei-seller__mark svg {
		display: block;
		width: 100%;
		height: auto;
		fill: currentColor;
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* Praegu animatsioone ei ole - koht olemas, kui neid kunagi tuleb. */
}