/*
Theme Name: Loviisan Asunnot
Theme URI: https://github.com/digitahti-kaitsu/Loviisan_Asunnot_2026
Author: Digitahti
Author URI: https://digitahti.fi
Description: Loviisan Asunnot Oy:n / Lovisa Bostäder Ab:n oma teema. Kevyt klassinen teema lohkosisällöillä: asuntohaku suodattimineen, kohde-sisältötyyppi, vikailmoitus ja kaksikielisyys (Polylang Pro). Suunniteltu WCAG 2.1 AA -tasolle.
Version: 0.7.2
Requires at least: 6.9
Tested up to: 7.0
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: loviisan-asunnot
Tags: custom-colors, custom-menu, translation-ready, accessibility-ready, block-styles, wide-blocks
*/

/* =============================================================================
   1. DESIGN-TOKENIT
   Väripaletti on poimittu nykysivustolta prototyypin v2 mukaisesti.
   HUOM. "-ink"-tokenit ovat sama sävy TEKSTIKÄYTTÖÖN: brändisininen #48BADF
   antaa valkoista vasten vain 2,24:1, joten se ei kelpaa tekstiksi eikä
   fokusrenkaaksi. Ks. README.md → Saavutettavuus.
   ========================================================================== */
:root {
	/* Brändisininen */
	--blue:        #48BADF;  /* pinnat: hero, yläreunaviivat, aktiivinen tila   */
	--blue-dark:   #2F9DC4;  /* hover-pinnat, isot elementit                    */
	--blue-ink:    #1A6F8E;  /* TEKSTI ja linkki vaalealla: 5,66:1 / 5,02:1     */
	--pale:        #E0F5FA;  /* vaaleat taustat, footer                          */

	/* Neutraalit */
	--dark:        #444444;  /* leipäteksti valkoisella: 9,74:1                  */
	--grey-ink:    #6B6B6B;  /* aputeksti: 5,33:1 (proton #777 jäi 4,48:1)      */
	--bg:          #FFFFFF;
	--line:        #DDE6EA;  /* koristereunat: kortit, erottimet                 */
	--line-input:  #748C96;  /* KONTROLLIEN reunat (kentät, chipit): 3,54:1     */

	/* Vapaana-tilan merkkejä ei ole: asuntoja ei listata vapaana-tiedon mukaan.
	   Jos tilamerkinnät otetaan myöhemmin käyttöön, saavutettavat sävyt ovat
	   valmiina README.md:n luvussa 4. */

	/* Typografia */
	--font: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', -apple-system,
	        BlinkMacSystemFont, Roboto, Arial, sans-serif;

	/* Mitat */
	--content:     1140px;
	--hdr-h:       76px;
	--bottomnav-h: 76px;

	/* Fokus — oma token, jotta tummat osiot voivat ylikirjoittaa sen */
	--focus: var(--blue-ink);
}

/* Tummalla brändipinnalla fokusrengas ei erotu → vaihdetaan valkoiseksi */
.osio-sininen,
.has-blue-background-color {
	--focus: #FFFFFF;
}

/* =============================================================================
   2. PERUSTA
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

html { scroll-behavior: smooth; }

body {
	background: var(--bg);
	color: var(--dark);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--blue-ink); }
a:hover { color: var(--dark); }

/* Muotokieli on suorakulmainen — ei kulmapyöristystä.
   Ainoa poikkeus on mobiilin keskipainike (.nav-cta .disc). */

/* =============================================================================
   3. SAAVUTETTAVUUS
   ========================================================================== */
:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* Ohita-linkki: näkyy vasta kun se saa fokuksen */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--bg);
	color: var(--blue-ink);
	font-weight: 700;
	padding: 14px 20px;
	border: 2px solid var(--blue-ink);
	text-decoration: none;
}
.skip-link:focus {
	left: 8px;
	top: 8px;
}

/* Vain ruudunlukijalle */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: static !important;
	width: auto; height: auto;
	clip-path: none;
	white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* =============================================================================
   4. PAINIKKEET
   Kosketusalue vähintään 48 x 48 px (CLAUDE.md, WCAG 2.5.5).
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 22px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	border: none;
	border-radius: 0;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}

/* Ensisijainen painike: valkoinen teksti tarvitsee tumman sinisen pinnan.
   #48BADF antaisi vain 2,24:1. */
.btn-primary {
	background: var(--blue-ink);
	color: #FFFFFF;
}
.btn-primary:hover,
.btn-primary:focus-visible { background: #145A75; color: #FFFFFF; }

.btn-secondary {
	background: #FFFFFF;
	color: var(--blue-ink);
	border: 2px solid var(--blue-ink);
}
.btn-secondary:hover,
.btn-secondary:focus-visible { background: var(--pale); color: var(--blue-ink); }

.btn-ghost {
	background: #FFFFFF;
	color: var(--dark);
	border: 1px solid var(--line-input);
	font-weight: 600;
}
.btn-ghost:hover,
.btn-ghost:focus-visible { background: var(--pale); color: var(--dark); }

.btn-block { width: 100%; }

/* =============================================================================
   5. YLÄTUNNISTE JA PÄÄVALIKKO (≥ 1024 px)
   ========================================================================== */
.site-header {
	background: #fff;
	border-bottom: 4px solid var(--blue);
	padding: 0 32px;
	min-height: var(--hdr-h);
	display: flex;
	align-items: center;
	gap: 28px;
	position: sticky;
	top: 0;
	z-index: 50;
}

.site-brand {
	display: block;
	flex-shrink: 0;
	font-weight: 700;
	font-size: 19px;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--blue-ink);
	text-decoration: none;
}
.site-brand span {
	display: block;
	font-weight: 400;
	font-size: 10px;
	letter-spacing: 1.2px;
	color: var(--grey-ink);
	text-transform: uppercase;
}

.main-nav { flex: 1; }
.main-nav ul {
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-nav a {
	display: block;
	padding: 12px 14px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .3px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--dark);
	border-bottom: 3px solid transparent;
}
.main-nav a:hover { background: var(--pale); color: var(--dark); }
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-ancestor > a,
.main-nav .current_page_ancestor > a {
	color: var(--blue-ink);
	border-bottom-color: var(--blue);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	flex-shrink: 0;
}

/* Kielivalitsin: tekstilinkit, ei lippukuvia */
.lang-switcher ul {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
}
.lang-switcher a {
	display: inline-block;
	padding: 8px 10px;
	text-decoration: none;
	color: var(--blue-ink);
	font-weight: 600;
}
.lang-switcher [aria-current="true"] {
	color: var(--dark);
	font-weight: 700;
	text-decoration: none;
}
.lang-switcher .sep { color: var(--grey-ink); }

/* =============================================================================
   6. SISÄLTÖALUE
   ========================================================================== */
.site-main {
	max-width: var(--content);
	margin: 0 auto;
	padding: 32px;
}

.page-title { font-size: 30px; line-height: 1.2; margin-bottom: 6px; }
.page-sub { color: var(--grey-ink); font-size: 14px; margin-bottom: 20px; }

/* =============================================================================
   7. ALATUNNISTE
   ========================================================================== */
.site-footer {
	background: var(--pale);
	color: var(--dark);
	margin-top: 48px;
	padding: 36px 32px;
	border-top: 4px solid var(--blue);
	font-size: 14px;
	line-height: 1.8;
}
.footer-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	max-width: var(--content);
	margin: 0 auto;
}
.footer-cols h2 {
	color: var(--blue-ink);
	font-size: 14px;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: var(--blue-ink); text-decoration: underline; }
.site-footer a:hover { color: var(--dark); }
.site-footer .copy {
	max-width: var(--content);
	margin: 26px auto 0;
	font-size: 12px;
	color: var(--grey-ink);
}

/* =============================================================================
   8. MOBIILIN ALANAVIGAATIO JA PANEELIT
   Näkyvät vain ≤ 600 px. Ei hampurilaisvalikkoa ainoana navigaationa.
   ========================================================================== */
.bottom-nav {
	display: none;
	position: fixed;
	inset: auto 0 0 0;
	height: var(--bottomnav-h);
	background: #fff;
	border-top: 3px solid var(--blue);
	z-index: 60;
	padding-bottom: env(safe-area-inset-bottom, 6px);
}
.bottom-nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
/* min-width: 0 kumoaa flex-kohteen oletuksen (auto), joka estäisi kohtaa
   kutistumasta tekstiään kapeammaksi. Ilman tätä pisin nimike
   ("Vikailmoitus") työntää viidennen kohdan ulos ruudulta kapeimmilla
   puhelimilla (320 px). */
.bottom-nav li { flex: 1; min-width: 0; }
.bottom-nav .nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 100%;
	height: 100%;
	padding: 0 2px;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--grey-ink);
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}
.bottom-nav .nav-item .ic { font-size: 21px; line-height: 1; }
.bottom-nav .nav-item[aria-current] {
	color: var(--blue-ink);
	box-shadow: inset 0 3px 0 var(--blue);
}

/* Keskipainike — ainoa pyöreä elementti koko sivustolla */
.bottom-nav .nav-cta-item { flex: 1.2; }
.bottom-nav .nav-cta {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: none;
	border: none;
	text-decoration: none;
	cursor: pointer;
}
.bottom-nav .nav-cta .disc {
	position: absolute;
	top: -22px;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--blue-ink);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 10px;
	border: 4px solid #fff;
	box-shadow: 0 6px 16px rgba(26, 111, 142, .45);
}
.bottom-nav .nav-cta .disc .ic { font-size: 20px; }
.bottom-nav .nav-cta .lbl {
	position: absolute;
	bottom: 10px;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--blue-ink);
}

/* Alhaalta nouseva paneeli (valikko, suodattimet) */
.scrim {
	position: fixed;
	inset: 0;
	background: rgba(20, 50, 60, .45);
	z-index: 70;
	display: none;
}
.scrim.is-open { display: block; }

.sheet {
	position: fixed;
	inset: auto 0 0 0;
	background: #fff;
	border-top: 3px solid var(--blue);
	z-index: 80;
	transform: translateY(105%);
	transition: transform .28s ease;
	max-height: 78dvh;
	overflow-y: auto;
	padding: 10px 18px 26px;
}
.sheet.is-open { transform: translateY(0); }
.sheet .grab {
	width: 44px;
	height: 4px;
	background: var(--line-input);
	margin: 6px auto 14px;
}
.sheet h2 { font-size: 17px; text-transform: uppercase; margin-bottom: 12px; }
.sheet .menu ul { list-style: none; margin: 0; padding: 0; }
.sheet .menu a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 48px;
	padding: 15px 4px;
	border-bottom: 1px solid var(--line);
	font-size: 15px;
	font-weight: 600;
	color: var(--dark);
	text-decoration: none;
}
.sheet .menu a small { color: var(--grey-ink); font-weight: 400; }

/* =============================================================================
   9. MURTOKOHDAT
   ≥1024 työpöytä · 601–1023 tabletti · ≤600 mobiili
   ========================================================================== */
@media (max-width: 1023px) {
	.site-header { padding: 0 20px; gap: 14px; }
	.main-nav a { padding: 12px 9px; font-size: 14px; }
	.header-actions .btn { display: none; }
	.site-main { padding: 20px; }
}

@media (max-width: 600px) {
	body { padding-bottom: calc(var(--bottomnav-h) + 10px); }
	.site-header { min-height: 56px; padding: 0 14px; }
	.site-brand { font-size: 15px; }
	.main-nav { display: none; }
	.site-main { padding: 16px; }
	.page-title { font-size: 22px; }
	.btn { min-height: 52px; }
	.bottom-nav { display: block; }
	.site-footer { padding: 28px 18px 20px; }
	.footer-cols { grid-template-columns: 1fr; gap: 18px; }
}

/* Kapeimmat puhelimet (esim. iPhone SE, 320 px): viisi kohtaa mahtuu vain
   pienemmällä nimikkeellä. Kosketusalue säilyy koko palkin korkuisena (76 px)
   ja vähintään 48 px leveänä, koska palkki jaetaan viiteen osaan. */
@media (max-width: 360px) {
	.bottom-nav .nav-item { font-size: 9.5px; }
	.bottom-nav .nav-item .ic { font-size: 19px; }
	.bottom-nav .nav-cta .lbl { font-size: 9.5px; }
}

/* Alanavigaatio piilotetaan tulostuksesta */
@media print {
	.bottom-nav, .scrim, .sheet, .skip-link { display: none !important; }
}


/* =============================================================================
   10. KARTAT
   Leaflet on itse hostattu (assets/vendor/leaflet). Muotokieli on sama kuin
   muualla: suorakulmainen, sininen yläreunaviiva.
   ========================================================================== */
.lovas-kartta { margin: 24px 0; }

.lovas-kartta__canvas {
	height: var(--kartta-korkeus, 480px);
	width: 100%;
	border: 1px solid var(--line);
	border-top: 3px solid var(--blue);
	background: var(--pale);
}

/* Leafletin oletusfontti on selaimen oma — yhtenäistetään teeman kanssa. */
.lovas-kartta__canvas.leaflet-container { font-family: var(--font); }

/* Fokusrengas näkyviin myös kartan sisällä (merkit, zoom-painikkeet). */
.lovas-kartta__canvas .leaflet-marker-icon:focus-visible,
.lovas-kartta__canvas .leaflet-control-zoom a:focus-visible {
	outline: 2px solid var(--blue-ink);
	outline-offset: 2px;
}

.lovas-kartta__canvas .leaflet-control-zoom a {
	color: var(--blue-ink);
	font-weight: 700;
}

.lovas-kartta__popup { display: block; max-width: 240px; }
.lovas-kartta__popup img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 8px;
}
.lovas-kartta__popup-nimi {
	display: block;
	font-weight: 700;
	font-size: 15px;
	color: var(--blue-ink);
	text-decoration: underline;
}
.lovas-kartta__popup-osoite,
.lovas-kartta__popup-vuokra {
	display: block;
	font-size: 13px;
	color: var(--grey-ink);
	margin-top: 2px;
}
.lovas-kartta__popup-vuokra { color: var(--dark); font-weight: 700; }

/* Tekstivastine: sama tieto listana näppäimistön ja ruudunlukijan käyttäjälle. */
.lovas-kartta__lista { margin-top: 12px; font-size: 14px; }
.lovas-kartta__lista summary {
	cursor: pointer;
	padding: 12px 4px;
	min-height: 48px;
	display: flex;
	align-items: center;
	font-weight: 700;
	color: var(--blue-ink);
}
.lovas-kartta__lista ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}
.lovas-kartta__lista li {
	border: 1px solid var(--line);
	border-top: 3px solid var(--blue);
	padding: 12px;
}
.lovas-kartta__lista img { display: none; } /* listassa riittää teksti */

.lovas-kartta__tyhja {
	border: 1px solid var(--line-input);
	background: var(--pale);
	padding: 16px;
	font-size: 14px;
}

@media (max-width: 600px) {
	.lovas-kartta__canvas { height: min(var(--kartta-korkeus, 480px), 320px); }
	.lovas-kartta__lista ul { grid-template-columns: 1fr; }
}


/* =============================================================================
   11. OSIOT, VÄLILEHDET JA KARUSELLI
   ========================================================================== */
.lovas-osio { margin: 40px 0; }

.lovas-osio__otsake {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 14px;
}
.lovas-osio__otsikko {
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: .4px;
}
.lovas-osio__linkki {
	font-size: 14px;
	font-weight: 700;
	color: var(--blue-ink);
	white-space: nowrap;
}
.lovas-osio__kuvaus {
	color: var(--grey-ink);
	font-size: 14px;
	margin-bottom: 14px;
}

/* --- Välilehdet ---------------------------------------------------------- */
/* Painikkeet näkyvät vasta kun JavaScript on kytkenyt ne toimiviksi. Ilman
   skriptiä molemmat paneelit näkyvät allekkain, eikä kävijälle näytetä
   painikkeita jotka eivät tee mitään. */
.lovas-valilehdet__rivi { display: none; }
.lovas-valilehdet.on .lovas-valilehdet__rivi {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 18px;
}
.lovas-valilehdet__napit { display: flex; gap: 0; }

.lovas-valilehdet__nappi {
	min-height: 48px;
	padding: 0 20px;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	color: var(--grey-ink);
	cursor: pointer;
}
.lovas-valilehdet__nappi:hover { background: var(--pale); color: var(--dark); }
.lovas-valilehdet__nappi[aria-selected="true"] {
	color: var(--blue-ink);
	border-bottom-color: var(--blue);
}

/* Paneeli on fokusoitava (WAI-ARIA), mutta fokusrengas ei saa jäädä
   piiloon sisällön alle. */
.lovas-valilehdet__paneeli:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 4px;
}
/* Ilman skriptiä paneelit erottuvat toisistaan välillä. */
.lovas-valilehdet:not(.on) .lovas-valilehdet__paneeli + .lovas-valilehdet__paneeli { margin-top: 28px; }

/* Kartta tarvitsee JavaScriptin. Ilman sitä paneeli olisi tyhjä laatikko, joten
   se jätetään kokonaan pois — korttilistaus toimii ilman skriptiä sellaisenaan. */
.lovas-valilehdet:not(.on) .lovas-valilehdet__paneeli--kartta { display: none; }

/* --- Karuselli ----------------------------------------------------------- */
.lovas-karuselli { position: relative; }

.lovas-karuselli__raita {
	display: flex;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0 0 12px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* Kapea mutta näkyvä vierityspalkki: se kertoo että listaa voi vierittää. */
	scrollbar-width: thin;
	scrollbar-color: var(--line-input) var(--pale);
}
.lovas-karuselli__raita:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.lovas-karuselli__kohta {
	flex: 0 0 300px;
	scroll-snap-align: start;
}

/* Vierityspainikkeet ovat välilehtirivin oikeassa laidassa. Korttien päällä
   ne peittäisivät sisältöä ja valuisivat kapealla näytöllä ulos ruudulta. */
.lovas-karuselli__ohjaimet { display: flex; gap: 8px; padding-bottom: 8px; }
.lovas-karuselli__ohjaimet[hidden] { display: none; }

.lovas-karuselli__nappi {
	display: flex;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--line-input);
	color: var(--blue-ink);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}
.lovas-karuselli__nappi:hover:not(:disabled) { background: var(--pale); }
.lovas-karuselli__nappi:disabled { opacity: .35; cursor: default; }
.lovas-karuselli.ei-vieritysta .lovas-karuselli__nappi { display: none; }

/* Varapaikka: jos karusellia käytetään ilman välilehtiä, painikkeet asettuvat
   korttien päälle. */
.lovas-karuselli--paalla .lovas-karuselli__nappi {
	position: absolute;
	top: calc(50% - 30px);
	transform: translateY(-50%);
	z-index: 2;
}
.lovas-karuselli--paalla .lovas-karuselli__nappi--edellinen { left: -14px; }
.lovas-karuselli--paalla .lovas-karuselli__nappi--seuraava { right: -14px; }

/* --- Kohdekortti --------------------------------------------------------- */
.lovas-kortti { height: 100%; background: #fff; }

.lovas-kortti__linkki {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--line);
	text-decoration: none;
	color: var(--dark);
}
.lovas-kortti__linkki:hover { box-shadow: 0 6px 18px rgba(26, 111, 142, .18); }
.lovas-kortti__linkki:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.lovas-kortti__kuva {
	display: block;
	height: 170px;
	background: var(--pale);
	overflow: hidden;
}
.lovas-kortti__kuva img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lovas-kortti__runko {
	display: block;
	padding: 14px;
	border-top: 3px solid var(--blue);
	flex: 1;
}
.lovas-kortti__nimi {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--blue-ink);
}
.lovas-kortti__tyyppi {
	display: block;
	font-size: 13px;
	color: var(--grey-ink);
	margin: 2px 0 8px;
}
.lovas-kortti__meta { display: block; font-size: 13px; }

@media (max-width: 600px) {
	.lovas-osio__otsake { flex-direction: column; gap: 4px; }
	.lovas-karuselli__kohta { flex-basis: min(78vw, 300px); }
	/* Mobiilissa sormella pyyhkäisy on luontevin tapa: painikkeet veisivät
	   vain tilaa kapealta näytöltä. */
	.lovas-karuselli__ohjaimet { display: none; }
	.lovas-valilehdet__napit { flex: 1; }
	.lovas-valilehdet__nappi { flex: 1; padding: 0 12px; }
}


/* =============================================================================
   12. ETUSIVUN OSAT: HERO, NOSTOT, PALVELUKORTTI
   Kaikki rakennettu ydinlohkoista, joten CSS kohdistuu lohkoluokkiin.
   ========================================================================== */

/* --- Hero (core/media-text) ---------------------------------------------- */
/* Pinta on --blue-ink eikä --blue: valkoinen teksti kirkkaalla brändisinisellä
   jäisi 2,24:1:een. Tummemmalla sinisellä suhde on 5,66:1. */
.lovas-hero {
	background: var(--blue-ink);
	color: #fff;
	border-radius: 0;
	margin-bottom: 40px;
	--focus: #FFFFFF;
}
.lovas-hero .wp-block-media-text__content { padding: 44px 40px; }
.lovas-hero__otsikko {
	font-size: 34px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-bottom: 12px;
	color: #fff;
}
.lovas-hero__teksti {
	font-size: 16px;
	max-width: 46ch;
	margin-bottom: 22px;
	color: #fff;
}
.lovas-hero .wp-block-media-text__media {
	background: linear-gradient(135deg, #BFE7F4, #8FD3EB);
	min-height: 240px;
}
.lovas-hero .wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lovas-hero__napit { gap: 12px; }

/* Painikkeiden lohkotyylit värillisellä pinnalla */
.wp-block-button.is-style-lovas-valkoinen .wp-block-button__link {
	background: #fff;
	color: var(--blue-ink);
	border-radius: 0;
	font-weight: 700;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
}
.wp-block-button.is-style-lovas-reunus .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 0;
	font-weight: 700;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
}
.wp-block-button.is-style-lovas-reunus .wp-block-button__link:hover {
	background: #fff;
	color: var(--blue-ink);
}

/* --- Nostot (Ajankohtaista, palvelukortti) ------------------------------- */
.lovas-nosto,
.lovas-palvelukortti {
	background: #fff;
	border: 1px solid var(--line);
	border-top: 3px solid var(--blue);
	padding: 20px;
	height: 100%;
}
.lovas-palvelukortti { background: var(--pale); border-color: #BFE1EE; }

.lovas-nosto__otsikko {
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .3px;
	margin-bottom: 10px;
}
.lovas-nosto__linkki {
	display: inline-block;
	margin-top: 12px;
	font-size: 14px;
	font-weight: 700;
	color: var(--blue-ink);
}

.lovas-ajankohtaista__lista { list-style: none; margin: 0; padding: 0; }
.lovas-ajankohtaista__kohta + .lovas-ajankohtaista__kohta {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}
.lovas-ajankohtaista__nimi {
	font-size: 15px;
	font-weight: 700;
	color: var(--blue-ink);
	text-decoration: none;
}
.lovas-ajankohtaista__nimi:hover { text-decoration: underline; }
.lovas-ajankohtaista__tiedot {
	font-size: 13px;
	color: var(--grey-ink);
	margin-top: 2px;
}
.lovas-ajankohtaista__ote::before { content: " · "; }

.lovas-palvelukortti p { font-size: 14px; margin-bottom: 10px; }
.lovas-palvelukortti__paivystys {
	border-top: 1px solid #BFE1EE;
	padding-top: 10px;
}

@media (max-width: 600px) {
	.lovas-hero .wp-block-media-text__content { padding: 22px 18px; }
	.lovas-hero__otsikko { font-size: 22px; }
	.lovas-hero .wp-block-media-text__media { min-height: 140px; }
	.lovas-hero__napit .wp-block-button { width: 100%; }
	.lovas-hero__napit .wp-block-button__link { width: 100%; justify-content: center; }
}


/* --- Ydinlohkon painike ------------------------------------------------- */
/* Ilman tätä ydinlohkon painike jää WordPressin omaan tummaan sävyyn eikä
   noudata teeman muotokieltä. Tarkempien is-style-sääntöjen (0,3,0) alle jäävä
   perussääntö (0,1,0) ei ohita niitä, joten heron painikkeet säilyvät. */
.wp-block-button__link {
	background-color: var(--blue-ink);
	color: #fff;
	border-radius: 0;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 22px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}
.wp-block-button__link:hover { background-color: #145A75; color: #fff; }
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}