/*
Theme Name: Elinvoimainen Organisaatio
Theme URI: https://elinvoimainen-organisaatio.fi
Description: Child theme Twenty Twenty-Five -teemalle. Elinvoimainen Organisaatio -valmennuspalveluiden markkinointisivusto. Kadence Blocks -yhteensopiva, Gutenberg-editoitava.
Author: Kanava.to / Tomi Lindroos
Author URI: https://kanava.to
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elinvoimainen-organisaatio
Tags: block-patterns, custom-colors, custom-logo, full-site-editing, one-column, translation-ready
*/

/*
 * Pääasialliset tyylit on määritelty theme.json-tiedostossa.
 * Tämä tiedosto sisältää tarkennukset joita theme.json ei pysty kuvaamaan:
 * - Korttien epäsymmetriset pyöristykset (pyöristämätön alavasen kulma)
 * - Scroll-animaatiot ja hover-efektit
 * - Nappien hover-tilat
 */

/* ------------------------------------------------
   1. Napit — rounded pill -tyyli designin mukaan
-------------------------------------------------*/
.wp-block-button.is-style-eo-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	border-radius: 30px;
	padding: 0.5rem 1.75rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.4;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-button.is-style-eo-outline .wp-block-button__link:hover,
.wp-block-button.is-style-eo-outline .wp-block-button__link:focus {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

/* ------------------------------------------------
   2. Palvelukortti — pyöristys paitsi alavasen
-------------------------------------------------*/
.eo-service-card {
	border-radius: 20px 20px 20px 0;
	padding: 2rem 2rem 2.5rem;
	min-height: 267px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 1rem;
}

.eo-service-card h3 {
	font-size: 24px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.eo-service-card p {
	color: var(--wp--preset--color--primary);
	font-size: 16px;
	line-height: 1.375;
	margin: 0;
	flex-grow: 1;
}

.eo-service-card--yritykset  { background: var(--wp--preset--color--card-blue); }
.eo-service-card--julkiset   { background: var(--wp--preset--color--card-mint); }
.eo-service-card--tiimit     { background: var(--wp--preset--color--card-pink); }

/* ------------------------------------------------
   3. Henkilökortti — koko kuva, päälle tekstit valk.
-------------------------------------------------*/
.eo-henkilo-card {
	position: relative;
	aspect-ratio: 383 / 544;
	overflow: hidden;
	border-radius: 8px;
}

.eo-henkilo-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.eo-henkilo-card__meta {
	position: absolute;
	left: 1.5rem;
	bottom: 1.5rem;
	color: #fff;
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ------------------------------------------------
   4. Konsepti-ruudukko — 6 osaamisaluetta 2x3
-------------------------------------------------*/
.eo-konsepti-grid h3 {
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.5rem;
	line-height: 1.1;
}

.eo-konsepti-grid p {
	font-size: 16px;
	line-height: 1.375;
	color: #000;
	margin: 0;
}

/* ------------------------------------------------
   5. Header / navigaatio
-------------------------------------------------*/
.wp-block-navigation__container {
	gap: 2rem;
}

.wp-block-navigation .wp-block-navigation-item__label {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.02em;
}

/* Etusivulla: header läpinäkyvä, ei vie hero-tilaa → kuva näkyy navin takana */
body.eo-front-page .eo-site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	background: transparent;
}

body.eo-front-page main {
	padding-top: 0;
	margin-top: 0;
}

/* ------------------------------------------------
   6. Footer — "DRIVE - DIRECTION - DARE"
-------------------------------------------------*/
.eo-footer-tagline {
	font-size: clamp(28px, 5vw, 48px);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--primary);
	text-align: center;
}

.eo-footer-changing {
	font-size: clamp(20px, 3vw, 32px);
	font-weight: 700;
	text-align: center;
	color: var(--wp--preset--color--primary);
}

/* ------------------------------------------------
   7. Hero-osio — taustakuva ja rullaus
-------------------------------------------------*/
.eo-hero {
	position: relative;
	overflow: hidden;
	min-height: min(90vh, 900px);

	/* Yläreunassa tilaa navin alle (nav on absolute, ei vie layout-tilaa) */
	padding-top: clamp(140px, 18vh, 180px);
	padding-bottom: clamp(5rem, 12vh, 8rem);
	/* Vasen padding Figma-suhteessa: ~17 % viewportista (kuten Figma:
	   heading left = 263/1512 ≈ 17,4 %). Clamp estää liian suuren arvon
	   jättiläisnäytöillä. Oikea padding 0 → kuva ulottuu viewportin oikeaan reunaan. */
	padding-left: clamp(2rem, 17vw, 400px);
	padding-right: 0;

	display: flex;
	align-items: center;
}

/* Image-block renderöi figure-wrapperin + imgin; molemmat pitää säätää */
.eo-hero__bg {
	position: absolute;
	top: 0;
	right: 0;    /* flush oikeaan reunaan — ei overflow, ei rajausta */
	bottom: 0;
	left: auto;  /* oikean reunan ankkurointi — left lasketaan widthistä */
	/* Iso leveys jotta kuvan luonnollinen koko pääsee esiin ilman pakotettua venytystä.
	   Koska käytämme object-fit: contain, ylijäävä osa figurea näyttää läpinäkyvän
	   valkoisen taustan, ei venytä tai rajaa kuvaa. */
	width: clamp(720px, 78vw, 1900px);
	margin: 0 !important;
	opacity: 0.6;
	pointer-events: none;
	z-index: 0;
}

.eo-hero__bg img {
	width: 100%;
	height: 100%;
	/* contain → koko kuva näkyy, pallot reunoilla säilyvät kokonaisina */
	object-fit: contain;
	/* top right → kuva pakotetaan oikeaan yläkulmaan figuren sisällä, kuten Figmassa */
	object-position: top right;
	display: block;
}

.eo-hero__content {
	position: relative;
	z-index: 1;
	/* Figma: heading 851 + hieman väljää → 920 */
	max-width: 920px;
	width: 100%;
}

/* Pakota jokainen lapsi vasemmalle — ohita mahdolliset constrained/auto-margin */
.eo-hero__content > * {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

.eo-hero h1 {
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--primary);
	margin: 0 0 1.5rem;
	/* Figma: 851 */
	max-width: 860px;
}

.eo-hero__lead {
	font-size: clamp(18px, 2.2vw, 20px);
	line-height: 1.4;
	color: var(--wp--preset--color--primary);
	/* Figma: 548 */
	max-width: 560px;
	margin: 0 0 2rem;
}

/* ------------------------------------------------
   8. Scroll-animaatio
-------------------------------------------------*/
.eo-fade-in {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.eo-fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ------------------------------------------------
   8b. Sisältöalueen sääntö — muut osiot kuin hero
   17 % vasemmalla + 17 % oikealla → content area 66 % keskellä
-------------------------------------------------*/
.eo-section {
	padding-left: clamp(2rem, 17vw, 400px);
	padding-right: clamp(2rem, 17vw, 400px);
}

.eo-section > h1,
.eo-section > h2,
.eo-section > h3 {
	max-width: 900px;
}

/* ------------------------------------------------
   9. Responsiivisuus
-------------------------------------------------*/

/* Tablet & mobiili: pakota hampurilaisvalikko käyttöön ≤1024px */
@media (max-width: 1024px) {
	/* Piilota vaakasuuntainen navilinkkilista */
	.eo-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	/* Näytä burger-nappi */
	.eo-site-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
		padding: 0.5rem;
	}
	/* Burger-ikonin väri */
	.eo-site-header .wp-block-navigation__responsive-container-open svg,
	.eo-site-header .wp-block-navigation__responsive-container-close svg {
		fill: var(--wp--preset--color--primary);
	}
	/* Overlay-valikon tyylit kun auki */
	.wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--white);
		padding: 2rem;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		font-size: 20px;
	}
}

/* Desktop: näytä valikko, piilota burger */
@media (min-width: 1025px) {
	.eo-site-header .wp-block-navigation__responsive-container-open {
		display: none !important;
	}
}

/* Tablet-kokoiset muutokset */
@media (max-width: 1024px) {
	/* Hero: pienennä 17vw padding mobiilille */
	.eo-hero {
		padding-left: clamp(1.5rem, 6vw, 2rem);
		padding-right: 0;
	}
	/* Muut osiot: symmetrinen padding mobiililla */
	.eo-section {
		padding-left: clamp(1.5rem, 6vw, 3rem);
		padding-right: clamp(1.5rem, 6vw, 3rem);
	}
}

/* Mobiili (puhelin) */
@media (max-width: 768px) {
	.eo-hero {
		min-height: auto;
		/* Enemmän ilmaa otsikon ja headerin väliin mobiilissa */
		padding-top: clamp(150px, 22vh, 200px);
	}

	.eo-hero__bg {
		inset: 0;
		width: 100%;
		opacity: 0.25;
	}

	.eo-hero__bg img {
		object-fit: cover;
		object-position: right top;
	}

	.eo-hero__content {
		max-width: 100%;
	}

	.eo-hero h1 {
		font-size: clamp(26px, 7vw, 36px);
	}

	.eo-service-card {
		min-height: 241px;
	}

	/* Sivuston header: tiivistä mobiililla, pienennä logo */
	.eo-site-header {
		padding: 0.5rem 1rem;
	}
	.eo-site-header .wp-block-site-logo img,
	.eo-site-header .custom-logo {
		max-width: 70px;
		height: auto;
	}
}