/*
 * Partneripäivät 2027 — projektin tyylit. Pääteema lataa tämän tiedoston
 * pääbundlen jälkeen.
 *
 * Värit on poimittu mallikuvasta (docs/PS Hallituspartnerit - partneripaivat 2027.png).
 * Kontrastit: kulta navylla 6,9:1, tumma teksti kullalla 5,5:1.
 * Valkoista tekstiä ei käytetä kultaisella pohjalla (2,9:1).
 */

:root {
	/* Brändivärit */
	--louhos-primary: #c09100;
	--louhos-primary-rgb: 192, 145, 0;
	--louhos-primary-dark: #a67d00; /* hover: tumma teksti säilyy luettavana (5,3:1) */
	--louhos-accent: #c09100;

	/* Kulta ei läpäise kontrastia tekstinä valkoisella → tummennettu linkkiväri */
	--louhos-link-color: #8a6800;

	/* Neutraalit */
	--louhos-headings: #00081c;
	--louhos-body-color: #25231a;
	--louhos-grey: #f4f4f1;
	--louhos-border: #d6d2c4;
	--louhos-border-rgb: 214, 210, 196;

	/* Tummat pinnat */
	--louhos-dark-1: #00030f;
	--louhos-dark-1-rgb: 0, 3, 15;
	--louhos-dark-2: #00081c;
	--louhos-dark-2-rgb: 0, 8, 28;

	/* Mitat: mallissa ei pyöristyksiä */
	--louhos-header-height: 80px;
	--louhos-radius: 0;
	--louhos-radius-lg: 0;

	/* Typografia */
	--louhos-font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

	/* Projektin omat tokenit */
	--pp-font-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
	--pp-container: 1320px; /* sisällön maksimileveys (sama kuin Bootstrapin container-xxl) */
	--pp-gutter: clamp(1rem, 4vw, 3rem); /* sisennys säiliön sisällä */
	--pp-line: 4px; /* kultainen viistoviiva kuvien reunassa */
	--pp-brand-navy: #01092b; /* Hallituspartnereiden brändin sininen (footer) */
}

/* ---------------------------------------------------------------------------
 * Typografia: otsikot Bebas Neuella
 * ------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.site-footer__heading {
	font-family: var(--pp-font-display);
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Painikkeet: pääteeman .btn-primary-taustaväri on käännetty kiinteäksi
 * (ei seuraa --louhos-primary-tokenia), joten väri ja kulmat asetetaan tässä.
 * ------------------------------------------------------------------------- */
.btn {
	--bs-btn-border-radius: 0;
}

.btn-primary {
	--bs-btn-bg: var(--louhos-primary);
	--bs-btn-border-color: var(--louhos-primary);
	--bs-btn-hover-bg: var(--louhos-primary-dark);
	--bs-btn-hover-border-color: var(--louhos-primary-dark);
	--bs-btn-active-bg: var(--louhos-primary-dark);
	--bs-btn-active-border-color: var(--louhos-primary-dark);
	--bs-btn-disabled-bg: var(--louhos-primary);
	--bs-btn-disabled-border-color: var(--louhos-primary);
	--bs-btn-focus-shadow-rgb: var(--louhos-primary-rgb);
}

/* Lyhyillä sivuilla (esim. 404) footer pysyy alareunassa */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1 0 auto;
}

/* ---------------------------------------------------------------------------
 * Rajattu leveys: osio on enintään --pp-container levyinen ja keskitetty,
 * mutta sen taustaväri jatkuu reunasta reunaan (border-image-ulostulo).
 * ------------------------------------------------------------------------- */
.pp-hero,
.pp-pillars {
	max-width: var(--pp-container);
	margin-inline: auto;
	border-image: conic-gradient(var(--pp-bleed) 0 0) fill 0 // 0 100vmax;
}

/* ---------------------------------------------------------------------------
 * Header: pelkkä logo, sama navy kuin herossa
 * ------------------------------------------------------------------------- */
.pp-header {
	background: var(--louhos-dark-2);
}

.pp-header__inner {
	display: flex;
	align-items: center;
	max-width: var(--pp-container);
	min-height: var(--louhos-header-height);
	margin-inline: auto;
	padding: 0.75rem var(--pp-gutter);
}

.pp-header .site-brand__img {
	height: clamp(2.75rem, 4vw, 3.5rem);
	width: auto;
}

/* ---------------------------------------------------------------------------
 * Hero: otsikko vasemmalla, valokartta keskellä, viisto sivukuva oikealla
 * ------------------------------------------------------------------------- */
.pp-hero {
	--pp-bleed: var(--louhos-dark-2);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 45%;
	background: var(--louhos-dark-2);
}

/* Mobiili: teksti tasaisella pohjalla, alla kuvarivi (kartta + viisto silta)
   samassa sommitelmassa kuin mallissa. */
.pp-hero__bg {
	position: relative;
	grid-column: 1 / -1;
	grid-row: 2;
	width: 80%;
	height: clamp(15rem, 62vw, 24rem);
}

/* Pohjoismaat näkyviin sillan vasemmalle puolelle */
.pp-hero__bg img {
	object-position: 85% 40%;
}

.pp-hero__bg img,
.pp-hero__side img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pp-hero__content {
	position: relative;
	z-index: 1;
	grid-column: 1 / -1;
	grid-row: 1;
	padding: clamp(2.5rem, 5vw, 5rem) var(--pp-gutter);
}

.pp-hero__kicker {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--louhos-primary);
	color: var(--louhos-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pp-hero__title {
	margin: 0 0 1.25rem;
	font-size: clamp(3.25rem, 6vw, 6.5rem);
	line-height: 0.95;
	color: #fff;
}

.pp-hero__title-main,
.pp-hero__title-accent {
	display: block;
}

.section--dark .pp-hero__title-accent {
	color: var(--louhos-primary);
}

.pp-hero__subtitle {
	margin: 0;
	font-family: var(--pp-font-display);
	font-size: clamp(1.375rem, 2.2vw, 2.5rem);
	line-height: 1.1;
	color: var(--louhos-primary);
	text-transform: uppercase;
}

.pp-hero__text {
	max-width: 32rem;
	margin-top: 1.25rem;
}

/* Viisto rajaus: kultainen tausta näkyy kuvan reunassa viivana. Lähdekuvan
   vasemmassa yläkulmassa on palanen karttaa, joka jää rajauksen ulkopuolelle. */
.pp-hero__side {
	position: relative;
	grid-column: 2;
	grid-row: 2;
	background: var(--louhos-primary);
	clip-path: polygon(calc(32% - var(--pp-line)) 0, 100% 0, 100% 100%, 0 100%);
}

.pp-hero__side img {
	position: absolute;
	inset: 0;
	clip-path: polygon(32% 0, 100% 0, 100% 100%, var(--pp-line) 100%);
}

@media (min-width: 992px) {
	.pp-hero {
		grid-template-columns: minmax(0, 1fr) 33%;
		min-height: clamp(28rem, 34vw, 32rem);
	}

	/* Kartta mallin tapaan keskellä, häivytys vasemmalle tekstin alle */
	.pp-hero__bg {
		position: absolute;
		grid-column: auto;
		grid-row: auto;
		top: 0;
		bottom: 0;
		left: 36%;
		right: 18%;
		width: auto;
		height: auto;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 25%);
		mask-image: linear-gradient(to right, transparent 0, #000 25%);
	}

	.pp-hero__bg img {
		object-position: center;
	}

	.pp-hero__content {
		grid-column: 1;
		align-self: center;
	}

	.pp-hero__side {
		grid-row: 1;
	}
}

/* ---------------------------------------------------------------------------
 * Kultanauha (Banneri/CTA + lisäluokka pp-banner-gold)
 * ------------------------------------------------------------------------- */
.louhos-banner.pp-banner-gold {
	min-height: 0;
	padding-block: clamp(2.25rem, 4vw, 3.5rem);
	background: var(--louhos-primary);
	color: var(--louhos-body-color);
}

.pp-banner-gold .louhos-banner__content {
	max-width: var(--pp-container);
	padding-inline: var(--pp-gutter);
}

.section--dark.pp-banner-gold .louhos-banner__title {
	max-width: 60rem;
	margin: 0 auto 1.25rem;
	font-size: clamp(1.875rem, 3.2vw, 3.125rem);
	color: var(--louhos-body-color);
}

.pp-banner-gold .louhos-banner__title p {
	margin: 0;
}

.pp-banner-gold .louhos-banner__text {
	max-width: 52rem;
	font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
	line-height: 1.4;
}

.section--dark.pp-banner-gold a:not(.btn) {
	color: var(--louhos-headings);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Teemat: Uudistu · Ennakoi · Toimi (Tarkistuslista-kortin override)
 * ------------------------------------------------------------------------- */
.pp-pillars {
	--pp-bleed: var(--louhos-dark-1);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	background: var(--louhos-dark-1);
}

.pp-pillars__content {
	position: relative;
	z-index: 1;
	padding: clamp(2.5rem, 5vw, 4.5rem) var(--pp-gutter);
}

.pp-pillars__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-pillars__list li {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	font-family: var(--pp-font-display);
	font-size: clamp(2.5rem, 3.6vw, 3.5rem);
	line-height: 1.15;
	color: var(--louhos-primary);
	text-transform: uppercase;
}

.pp-pillars__list li + li {
	margin-top: clamp(0.5rem, 1.2vw, 1.25rem);
}

.pp-pillars__icon {
	flex: 0 0 1.25em;
	font-size: 0.6em;
	text-align: center;
}

/* SVG-ikonit (pp-icon) skaalautuvat rivin fonttikoon mukaan */
.pp-pillars__icon.pp-icon {
	width: 1.25em;
	height: 1.25em;
}

.pp-pillars__media {
	position: relative;
	height: 16rem;
	border-top: var(--pp-line) solid var(--louhos-primary);
}

.pp-pillars__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 992px) {
	.pp-pillars {
		grid-template-columns: 28% minmax(0, 1fr);
		min-height: clamp(24rem, 26vw, 26rem);
	}

	/* Tilaa kultaiselle yhteistyökulmalle, joka nousee osion päälle */
	.pp-pillars__content {
		align-self: center;
		padding-bottom: calc(var(--pp-partners-h) + 1.5rem);
		white-space: nowrap;
	}

	.pp-pillars__media {
		height: auto;
		margin-left: calc(-1 * var(--pp-line));
		border-top: 0;
		background: var(--louhos-primary);
		clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%);
	}

	.pp-pillars__media img {
		position: absolute;
		inset: 0;
		clip-path: polygon(calc(13% + var(--pp-line)) 0, 100% 0, 100% 100%, var(--pp-line) 100%);
	}
}

/* Teemaikonit: SVG maskina, väri tulee currentColorista */
.pp-icon {
	display: inline-block;
	width: 3rem;
	height: 3rem;
	background-color: currentColor;
	-webkit-mask: var(--pp-icon) center / contain no-repeat;
	mask: var(--pp-icon) center / contain no-repeat;
}

.pp-icon--uudistu {
	--pp-icon: url("../icons/uudistu.svg");
}

.pp-icon--ennakoi {
	--pp-icon: url("../icons/ennakoi.svg");
}

.pp-icon--toimi {
	--pp-icon: url("../icons/toimi.svg");
}

/* ---------------------------------------------------------------------------
 * Videokooste (pp-video)
 * ------------------------------------------------------------------------- */
.pp-video {
	padding-block: clamp(3.5rem, 7vw, 6rem);
	background: var(--louhos-dark-1);
}

.pp-video__inner {
	max-width: var(--pp-container);
	margin-inline: auto;
	padding-inline: var(--pp-gutter);
}

.pp-video__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: 2rem;
}

.pp-video__title {
	margin: 0;
	font-size: clamp(2.25rem, 4vw, 3.5rem);
}

.section--dark .pp-video__title span {
	color: var(--louhos-primary);
}

.pp-video__text {
	max-width: 30rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.78);
}

.pp-video__player {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
}

.pp-video__player img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
	transition: opacity 0.3s ease, transform 0.6s ease;
}

.pp-video__player:hover img,
.pp-video__player:focus-visible img {
	opacity: 0.7;
	transform: scale(1.02);
}

.pp-video__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: clamp(4.5rem, 9vw, 6.5rem);
	height: clamp(4.5rem, 9vw, 6.5rem);
	margin: auto;
	border-radius: 50%;
	background: var(--louhos-primary);
	box-shadow: 0 0 0 0.6rem rgba(var(--louhos-primary-rgb), 0.25);
	color: var(--louhos-headings);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.pp-video__play i {
	translate: 8% 0;
}

.pp-video__label {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0.9rem 1.25rem;
	background: var(--louhos-dark-2);
	border-top: var(--pp-line) solid var(--louhos-primary);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
}

/* ---------------------------------------------------------------------------
 * Yhteistyössä (Logoseinä + lisäluokka pp-partners): kultainen viisto kulma
 * ------------------------------------------------------------------------- */
:root {
	--pp-partners-h: clamp(5.5rem, 7.3vw, 6.5rem);
}

.louhos-logos.pp-partners {
	--pp-bleed: var(--louhos-primary);
	padding-block: 0;
	background: var(--louhos-primary);
	border-image: conic-gradient(var(--pp-bleed) 0 0) fill 0 // 0 100vmax;
}

.pp-partners .container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem clamp(1.5rem, 3vw, 3.5rem);
	max-width: none;
	min-height: var(--pp-partners-h);
	margin: 0;
	padding: 1.5rem var(--pp-gutter);
	text-align: center;
}

.pp-partners .louhos-logos__title {
	max-width: 15rem;
	margin: 0;
	font-size: clamp(1.5rem, 2vw, 2.25rem);
	text-align: center;
	color: var(--louhos-body-color);
}

.pp-partners .louhos-logos__grid {
	justify-content: center;
}

.pp-partners .louhos-logos__item img {
	max-height: clamp(3.5rem, 5vw, 5.5rem);
	max-width: 11rem;
}

@media (min-width: 992px) {
	/* Kultainen kulma nousee teemaosion vasempaan alakulmaan säiliön sisällä */
	.louhos-logos.pp-partners {
		position: relative;
		z-index: 2;
		max-width: var(--pp-container);
		margin: calc(-1 * var(--pp-partners-h)) auto 0;
		background: none;
		border-image: none;
	}

	.pp-partners .container {
		flex-direction: row;
		justify-content: flex-start;
		text-align: left;
		width: max-content;
		min-width: 28%;
		height: var(--pp-partners-h);
		padding-block: 0;
		padding-right: calc(var(--pp-gutter) + 0.44 * var(--pp-partners-h));
		background: var(--louhos-primary);
		clip-path: polygon(0 0, 100% 0, calc(100% - 0.44 * var(--pp-partners-h)) 100%, 0 100%);
	}

	.pp-partners .louhos-logos__title {
		text-align: left;
	}

	.pp-partners .louhos-logos__grid {
		justify-content: flex-start;
	}
}

.pp-partners :focus-visible {
	outline-color: var(--louhos-headings);
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------- */
.pp-footer {
	background: var(--pp-brand-navy);
}

.pp-footer .site-footer__inner {
	max-width: var(--pp-container);
	padding-inline: var(--pp-gutter);
}

.pp-footer__logo {
	height: 3.75rem;
	width: auto;
}

.pp-footer__org {
	margin: 1rem 0 0;
}

.pp-footer .site-footer__heading {
	font-size: 1.625rem;
	color: var(--louhos-primary);
}

.pp-footer .site-footer__columns p {
	margin-bottom: 0.5rem;
}

.pp-footer__bottom {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

@media (prefers-reduced-motion: reduce) {
	.pp-video__player img {
		transition: none;
	}
}