@charset "UTF-8";
/* ==========================================================================
   La-Sorila — app.css
   Yksi tiedosto, ei build-vaihetta.

   00 — Fontit
   01 — Tokenit
   02 — Reset ja perusasetukset
   03 — Typografia
   04 — Layout ja grid
   05 — Header ja navigaatio
   06 — Hero
   07 — Keikat
   08 — Menu
   09 — Varaus ja yhteystiedot
   10 — Footer
   11 — Apuluokat

   SÄÄNTÖ: väriarvo kirjoitetaan vain osioon 01. Jos joudut kirjoittamaan
   värin muualle, tokeni puuttuu — lisää se, älä kirjoita arvoa paikalleen.

   Katkaisukohdat: 37.5rem (600px), 40rem (640px), 60rem (960px).
   Mobiili ensin; kaksi max-width-poikkeusta on merkitty erikseen.
   ========================================================================== */


/* ==========================================================================
   00 — Fontit
   Itse hostattuina, subsetoitu latin + latin-ext (ä ö å).
   Muuttujafontti: yksi tiedosto kattaa koko leikkausvälin.

   Tarvittavat tiedostot kansioon assets/fonts/:
     fraunces.woff2          Fraunces variable, roman
     fraunces-italic.woff2   Fraunces variable, kursiivi  (esiladataan)
     karla.woff2             Karla variable, roman
   ========================================================================== */

@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-italic.woff2") format("woff2");
	font-weight: 300 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Karla";
	src: url("../fonts/karla.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}


/* ==========================================================================
   01 — Tokenit

   Siirretty tiedostoon assets/css/tokens.css. Se ladataan tämän
   riippuvuutena, ja erikseen myös editoriin ja hallintapaneeliin.
   Perustelu on tokens.css:n alussa.

   SÄÄNTÖ ennallaan: väriarvo kirjoitetaan vain tokens.css:ään.
   ========================================================================== */


/* ==========================================================================
   02 — Reset ja perusasetukset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--paperi);
	color: var(--teksti);
	font-family: var(--f-leipa);
	font-size: var(--k-m);
	font-weight: 400;
	line-height: var(--rivi-leipa);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Kauden vaihto Customizerin esikatselussa ei nykäise. */
	transition: background-color var(--siirtyma), color var(--siirtyma);
}

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

ul[class],
ol[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

a:where(:not([class])) {
	text-decoration-color: var(--viiva);
	transition: text-decoration-color var(--siirtyma);
}

a:where(:not([class])):hover {
	text-decoration-color: currentColor;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--aksentti);
	outline-offset: 3px;
	border-radius: var(--pyoristys-s);
}

::selection {
	background-color: var(--lohko-syva);
	color: var(--teksti);
}

/* Ankkurilinkit eivät jää ylälaitaan kiinni. */
[id] {
	scroll-margin-top: var(--pysty-s);
}

hr {
	margin-block: var(--pysty-s);
	border: 0;
	border-top: 1px solid var(--viiva);
}

@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;
	}
}

/* Talvikuvien sävytys. Testaa ensin ilman: jos kuvat on valotettu oikein
   lampunvalossa, tätä ei tarvita. Ota käyttöön vasta oikeilla kuvilla.

:root[data-season="talvi"] img {
	filter: brightness(0.94) saturate(0.96);
}
*/


/* ==========================================================================
   03 — Typografia
   Fraunces on muuttujafontti: SOFT pyöristää päätteitä, WONK vapauttaa
   a- ja g-kirjaimen muodon. Molemmat maltillisesti — ne tekevät
   otsikoista käsin piirretyn oloisia ilman käsialakliseetä.
   ========================================================================== */

h1, h2, h3, h4,
.otsikko {
	font-family: var(--f-otsikko);
	font-weight: 400;
	line-height: var(--rivi-otsikko);
	font-optical-sizing: auto;
	font-variation-settings: "SOFT" 40, "WONK" 1;
	text-wrap: balance;
}

h1,
.otsikko--xl {
	font-size: var(--k-xl);
	font-style: italic;
	letter-spacing: -0.015em;
}

h2,
.otsikko--l {
	font-size: var(--k-l);
	font-style: italic;
}

h3,
.otsikko--m {
	font-size: var(--k-ml);
	letter-spacing: 0.005em;
}

h4 {
	font-size: var(--k-m);
}

/* Sivun sisältöalue. Ero .leipa-luokkaan on olennainen: täällä
   rajataan vain tekstielementit, ei kääre. Silloin lomakkeet, kuvat
   ja upotukset saavat koko sisältöleveyden, mutta luettava teksti
   pysyy 58 merkissä.

   Tätä tarvitaan erityisesti varauslomakkeeseen: se on leveä
   kaksipalstainen komponentti, joka puristuisi .leipa-kääreessä
   puoleen. */
/* Sivun teksti on pitkää luettavaa, ei komponenttien saatetekstiä:
   isompi koko ja väljempi riviväli. Rivinpituus 64 merkkiä — hieman yli
   leipätekstin mitan, koska isompi koko kestää pidemmän rivin. */
.sisalto {
	font-size: var(--k-ml);
	line-height: 1.7;
}

.sisalto > * + * {
	margin-top: var(--pysty-s);
}

/* Tekstipalsta keskitetään. Kuvat ja lohkot jäävät koko leveyteen,
   jolloin ero palstan ja kuvan välillä on tarkoituksellinen eikä
   näytä siltä että teksti on jäänyt vasempaan reunaan. */
.sisalto > p,
.sisalto > ul,
.sisalto > ol,
.sisalto > h2,
.sisalto > h3,
.sisalto > h4,
.sisalto > blockquote {
	max-width: 64ch;
	margin-inline: auto;
}

.sisalto > p + p,
.sisalto > ul,
.sisalto > ol {
	margin-top: 1.15em;
}

/* Leipätekstipalsta. Rivinpituus rajataan täällä, ei p-elementissä,
   jotta komponenttien tekstit eivät kapene vahingossa. */
.leipa {
	max-width: var(--mitta);
}

.leipa > * + * {
	margin-top: 1.15em;
}

.leipa a {
	text-decoration-color: var(--viiva);
}

em,
i {
	font-style: italic;
}

strong,
b {
	font-weight: 600;
}

small,
.pieni {
	font-size: var(--k-s);
	line-height: 1.6;
}

/* Numerot pysyvät sarakkeissa: kellonajat, hinnat, päivämäärät. */
time,
.numerot {
	font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   04 — Layout ja grid
   ========================================================================== */

.rajaus {
	width: 100%;
	max-width: var(--sisalto);
	margin-inline: auto;
	padding-inline: var(--reuna);
	/* Kääreen oma leveys muuttujana, jotta reunan yli menevät elementit
	   voivat laskea siirtymänsä siitä eivätkä oleta --sisalto-arvoa.
	   Ks. .pari--kuvapaino > .kuvapari. */
	--kaare: var(--sisalto);
}

/* Välileveys: leveämpi kuin muut osiot, kapeampi kuin otsikkorivi.
   Käytössä vain tunnelmaosiossa. Täysi --leve teki osiosta niin leveän,
   että se irtosi muusta sivusta sen sijaan että olisi poikkeama siitä. */
.rajaus--leveahko {
	max-width: var(--leveahko);
	--kaare: var(--leveahko);
}

.rajaus--leve {
	max-width: var(--leve);
	--kaare: var(--leve);
}

.osio {
	padding-block: var(--pysty-l);
	/* clip, ei hidden: ei luo vierityskonttia, joten sticky-elementit
	   osiossa toimivat. Estää vaakavierityksen reunan yli menevistä
	   elementeistä. */
	overflow-x: clip;
}

.osio--tiivis {
	padding-block: var(--pysty-m);
}

.osio--lohko {
	background-color: var(--lohko);
	transition: background-color var(--siirtyma);
}

.osio--syva {
	background-color: var(--lohko-syva);
	transition: background-color var(--siirtyma);
}

/* Peräkkäiset samanväriset osiot eivät saa kaksinkertaista väliä. */
.osio--lohko + .osio--lohko,
.osio--syva + .osio--syva {
	padding-top: 0;
}

.pinota > * + * {
	margin-top: var(--pysty-s);
}

.osion-otsikko {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-bottom: var(--pysty-s);
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--viiva);
}

/* Osion otsikko on nimilappu, ei otsikko. Kun jokainen väliotsikko oli
   iso kursiivi, kursiivi lakkasi olemasta ele ja muuttui tapetiksi —
   ja neljä samanlaista otsikkoriviä peräkkäin teki sivusta listan
   laatikoita. Pystyyn ja pienemmäksi, jolloin kursiivi vapautuu
   takaisin sille mikä on ainutkertaista: hero, esiintyjien nimet,
   teosten nimet. */
.osion-otsikko h2 {
	/* Koko pysyy ennallaan (--k-l), vain ääni vaihtuu kursiivista
	   pystyyn. --k-ml olisi väärä porras: se on leipätekstin kokoinen
	   rivi- ja korttiporras, jolloin otsikko jäisi annosnimiä
	   pienemmäksi eikä lukisi enää otsikkona lainkaan. */
	font-style: normal;
	letter-spacing: 0.01em;
}

/* Ohjelma on sivun ainoa osio jolla on oma otsikkonsa: live-musiikki
   on se mitä naapurikahviloilla ei ole, ja se ansaitsee heron jälkeen
   sivun toisen huipun. Ei viivaa, ei oikealle karannutta linkkiä —
   pelkkä otsikko ja sen alla illat. */
.ohjelma-osio__otsikko {
	margin-bottom: var(--pysty-s);
	font-size: var(--k-xl);
	font-style: italic;
	letter-spacing: -0.01em;
}

/* Linkki arkistoon listan alla: siinä kohtaa lukija on jo nähnyt
   tulevat illat ja voi haluta lisää. Otsikon vieressä se olisi
   tarjous ennen kuin on mitään tarjottavaa. */
.ohjelma-osio__kaikki {
	margin-top: var(--pysty-s);
	font-size: var(--k-s);
}

.ohjelma-osio__kaikki a {
	text-decoration: none;
	border-bottom: 1px solid var(--viiva);
	transition: border-color var(--siirtyma);
}

.ohjelma-osio__kaikki a:hover {
	border-bottom-color: var(--aksentti);
}

.pari {
	display: grid;
	gap: var(--vali);
}

/* Kaksi kuvaa rinnakkain: iso pystykuva vasemmalla, pienempi vaakakuva
   oikealla porrastettuna alemmas. Eri muodot tekevät parista sommitelman eikä
   taulukkoa. */
.kuvapari {
	display: grid;
	/* Vaakakuva saa hieman enemmän leveyttä kuin pystykuva. Syy on
	   kuvasuhteissa: 4:5 pystykuva on samalla leveydellä kaksi kertaa
	   korkeampi kuin 3:2 vaaka, joten yhtä leveinä pysty hallitsee
	   paria. Leveyksien kääntäminen tasaa niiden painoarvon. */
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(0.75rem, 2vw, 1.25rem);
	align-items: start;
}

.kuvapari figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--pyoristys);
}

.kuvapari img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Muoto annetaan kuvalle itselleen, ei vain figurelle: figuren
   aspect-ratio antaa periksi, jos kuva on eri muotoinen, ja laatikko
   kasvaa kuvan mukaan. Nyt kuva rajataan aina paikkansa muotoon,
   olipa ladattu kuva minkä muotoinen tahansa. */
.kuvapari figure:nth-child(1) img {
	aspect-ratio: 4 / 5;
}

.kuvapari figure:nth-child(2) img {
	aspect-ratio: 3 / 2;
}

/* Porrastus: vaakakuva laskeutuu hieman pystykuvan yläreunasta.
   Arvo on mitoitettu suhteessa viereiseen tekstiin, ei vain kuvapariin.

   Kolme yläreunaa muodostavat laskevan portaikon vasemmalta oikealle,
   joka päättyy otsikkoon: pystykuva 0, vaakakuva ~32, otsikko ~67.
   Katse seuraa portaikkoa kuvista tekstiin.

   Älä kasvata arvoa. Kokeiltiin myös selvästi suurempaa porrastusta,
   jolloin vaakakuva laskeutui otsikon alapuolelle — portaikko katkesi
   ja katse joutui palaamaan ylös otsikkoon. Suurempi porrastus avaa
   kuvaparia mutta rikkoo osion lukusuunnan.

   Liian pieni arvo on yhtä paha toiseen suuntaan: noin 13 pikselin
   kohdalla vaakakuvan yläreuna osuu lähelle otsikkoa, ja
   lähes-kohdistus lukee aina virheenä eikä valintana. */
.kuvapari figure:nth-child(2) {
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.ruudukko {
	display: grid;
	gap: var(--vali);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

@media (min-width: 60rem) {
	.pari {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
	}

	/* Toimituksellinen epäsymmetria: kuva saa selvästi enemmän tilaa.
	   Kuvapari on sivun ainoa kohta, jossa kuvat ovat rinnakkain —
	   liian kapeana ne lukevat pikkukuvina eivätkä kuvina.

	   Teksti keskitetään pystysuunnassa: se on kuvia lyhyempi, ja
	   ylälaitaan sidottuna oikeaan alalaitaan jäisi iso tyhjä. */
	.pari--kuvapaino {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		align-items: center;
	}

	.pari--kaanteinen > :first-child {
		order: 2;
	}

	/* Kuvapari yli sisältöreunan vasemmalle, mutta ei kiinni ruudun
	   laitaan: reunapehmuste jää jäljelle, jolloin ele lukee
	   tarkoituksellisena eikä vahingossa levinneenä.

	   Siirtymä on tarkalleen se matka, joka jää sisältöalueen ja
	   .rajaus-laatikon ulkoreunan väliin — ei arvattu luku, joten
	   vaakavieritystä ei synny millään ruudun leveydellä. */
	.pari--kuvapaino > .kuvapari {
		/* Puolet reunan ylityksestä: ele näkyy, mutta kuvat eivät
		   karkaa yhtä kauas sisällöstä. */
		margin-left: calc( -1 * ( 100vw - min( var(--kaare, var(--sisalto)), 100vw ) ) / 4 );
	}
}


/* ==========================================================================
   05 — Header ja navigaatio
   Ei burger-valikkoa. Kolme–viisi linkkiä mahtuu riville, ja mobiilissa
   ne kääriytyvät tunnuksen alle. Vähemmän JS:ää, vähemmän rikkoutuvaa.
   ========================================================================== */

/* Tiedote otsikkorivillä. Aksenttiviiva riittää erotukseksi: väri ei
   yllä kontrastiin syvimmällä sinisellä, ja äänekäs banneri olisi
   sivuston huutavin elementti. */
.otsa-tiedote {
	padding-bottom: 2px;
	border-bottom: 1px solid var(--aksentti);
}

/* Etusivun laatikko: sama kieli kuin muissa huomautuksissa.

   Väli tehdään kääreen pehmusteella eikä laatikon marginaalilla:
   hero-osiolla ei ole omaa pehmustetta, jolloin marginaali karkaisi
   osion ulkopuolelle ja väliin jäisi kaistale body-taustaa. */
.tiedote-alue {
	padding-block: var(--pysty-s);
}

/* Kaksi luokkaa valitsimessa: .huomio on tiedostossa myöhempänä ja
   voittaisi samalla painolla, jolloin koko jäisi 13 pikseliin.

   Viiva siirretään vasemmalta alle ja teksti keskitetään: symmetrinen
   muoto lukee ilmoituksena, kun taas vasen viiva lukee huomautuksena
   jonkin toisen asian yhteydessä. Muut .huomio-elementit pitävät
   vasemman viivan. */
.huomio.tiedote-laatikko {
	margin: 0 auto;
	padding-left: 0;
	padding-bottom: 0.85rem;
	border-left: 0;
	border-bottom: 2px solid var(--aksentti);
	font-size: var(--k-ml);
	line-height: 1.6;
	text-align: center;
	text-wrap: balance;
}

.ohita {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
}

.ohita:focus {
	left: 0.5rem;
	top: 0.5rem;
	padding: 0.6rem 1rem;
	background-color: var(--paperi);
	border: 1px solid var(--viiva);
}

/* Palkin korkeus on vakio: logon koon säätäminen ei saa työntää
   otsikkoriviä auki. Kevyt pehmuste, ja korkeus tulee sisällön
   vähimmäiskorkeudesta — logo kasvaa sen sisällä. */
.paaotsa {
	padding-block: clamp(0.5rem, 1.5vw, 0.85rem);
	background-color: var(--lohko-syva);
	transition: background-color var(--siirtyma);
}

.paaotsa__sisalto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	min-height: var(--otsa-korkeus);
}

/* Logo. Korkeus rajataan, leveys seuraa — merkki voi olla pyöreä tai
   vaakasuuntainen, eikä sitä tiedetä etukäteen. */
.custom-logo-link {
	display: inline-block;
	line-height: 0;
}

.custom-logo {
	width: auto;
	/* Oletus 52 px, säädettävissä Customizerissa. */
	height: var(--logo-korkeus, 52px);
	max-height: 18vw;
	transition: opacity var(--siirtyma);
}

/* Talvella tunnus himmenee: vaalea merkki tummaa pohjaa vasten on
   muuten sivun kirkkain kohta ja vie katseen ennen otsikkoa. Näin
   logosta ei tarvitse tehdä omaa talviversiota. Säädin on
   Customizerissa kohdassa Sivuston identiteetti. */
:root[data-season="talvi"] .custom-logo {
	opacity: var(--logo-talvi, 0.75);
}

/* Täysi kirkkaus osoittimen alla ja näppäimistöllä: tunnus on linkki
   etusivulle, eikä himmennys saa tehdä siitä passiivisen näköistä. */
.custom-logo-link:hover .custom-logo,
.custom-logo-link:focus-visible .custom-logo {
	opacity: 1;
}

.tunnus {
	font-family: var(--f-otsikko);
	font-style: italic;
	font-size: var(--k-ml);
	letter-spacing: 0.01em;
	text-decoration: none;
}

.paanavi ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.75rem;
}

/* Navigaatio seriffillä: sivuston luonne on Frauncesissa, eikä
   otsikkorivi osallistunut siihen lainkaan pienellä groteskilla.
   Roman eikä kursiivi — kursiivi on varattu otsikoille. */
.paanavi a {
	display: inline-block;
	padding-block: 0.2rem;
	font-family: var(--f-otsikko);
	font-size: var(--k-ml);
	letter-spacing: 0.005em;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--siirtyma);
}

.paanavi a:hover,
.paanavi .current-menu-item > a,
.paanavi .current_page_item > a {
	border-bottom-color: var(--aksentti);
}

/* Aukioloaika otsikkorivillä — tärkein yksittäinen tieto kahvilan sivulla.
   Väri on --teksti eikä --hiljainen: otsikkorivi on --lohko-syva, jolla
   hiljainen jää kesäpaletissa arvoon 3.8:1. Ks. tokenien käyttösäännöt. */
.otsa-aukiolo {
	font-size: var(--k-s);
	color: var(--teksti);
}

/* Poikkeus mobiiliin: navi omalle riville koko leveydeltä. */
@media (max-width: 39.99rem) {
	.paanavi {
		flex-basis: 100%;
	}

	/* Navi omalla rivillään: vähimmäiskorkeus koskee vain ylintä riviä. */
	.paaotsa__sisalto {
		min-height: 0;
		row-gap: 0.75rem;
	}

	.tunnus,
	.custom-logo-link {
		min-height: var(--otsa-korkeus);
		display: inline-flex;
		align-items: center;
	}
}


/* ==========================================================================
   06 — Hero
   Kuva ja teksti rinnakkain, kuva 4:5 pystyssä. Otsikko on sivun ainoa
   iso ele; kaikki muu pysyy hiljaisena.
   ========================================================================== */

.hero {
	display: grid;
	gap: var(--vali);
	padding-block: var(--pysty-m) var(--pysty-l);
}

.hero__kuva {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--pyoristys);
}

.hero__kuva img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2; /* sama syy kuin kuvaparissa */
	object-fit: cover;
}

/* Kuvateksti kuvan päällä, vain jos kuvassa on tilaa (esim. sininen hetki). */
.hero__kuvateksti {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1rem var(--reuna);
	background-image: linear-gradient(to top, var(--peite), transparent);
	color: var(--paperi);
	font-size: var(--k-xs);
}

.hero__otsikko {
	font-size: var(--k-xl);
	font-style: italic;
	margin-bottom: 0.55em;
}

.hero__ingressi {
	max-width: 40ch;
	font-size: var(--k-ml);
	line-height: 1.65;
}

/* Seuraava tapahtuma: viiva erottaa sen ingressistä, päivä kantaa
   aksenttivärin kuten ohjelmalistassa. */
.hero__seuraava {
	display: grid;
	gap: 0.15rem;
	margin-top: var(--pysty-s);
	padding-top: 0.9rem;
	border-top: 1px solid var(--viiva);
}

.hero__seuraava__otsikko {
	font-size: var(--k-xs);
	color: var(--hiljainen);
}

.hero__seuraava a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.75rem;
	text-decoration: none;
}

.hero__seuraava__pvm {
	color: var(--aksentti-teksti);
	font-size: var(--k-s);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.hero__seuraava__nimi {
	font-family: var(--f-otsikko);
	font-style: italic;
	font-size: var(--k-ml);
	border-bottom: 1px solid transparent;
	transition: border-color var(--siirtyma);
}

.hero__seuraava a:hover .hero__seuraava__nimi {
	border-bottom-color: var(--aksentti);
}

/* Toissijainen toiminto tekstilinkkinä: kaksi samanlaista painiketta
   kilpailisi keskenään eikä kertoisi mihin katse viedään. */
.hero__linkki {
	align-self: center;
	font-size: var(--k-s);
	text-decoration: none;
	border-bottom: 1px solid var(--viiva);
	transition: border-color var(--siirtyma);
}

.hero__linkki:hover {
	border-bottom-color: var(--aksentti);
}

/* Painikerivi. Ei hero-kohtainen: sama rivi on varausosiossa ja
   tapahtumasivulla. Väli molemmin puolin, koska perässä voi olla
   huomautus tai muuta sisältöä. */
.toiminnot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	margin-block: var(--pysty-s);
}

/* Viimeisenä elementtinä alaväli on turha. */
.toiminnot:last-child {
	margin-bottom: 0;
}

@media (min-width: 60rem) {
	.hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
		align-items: center;
		gap: clamp(2.5rem, 6vw, 5rem);
	}

	.hero__kuva,
	.hero__kuva img {
		aspect-ratio: 4 / 5;
	}
}


/* ==========================================================================
   07 — Ohjelma
   Sisältötyyppi on 'ohjelma', laji tulee taksonomiasta 'ohjelma-laji'
   (Keikka, Karaoke, …). Nostettu seuraava tapahtuma + rivilista
   aikajärjestyksessä. Päivämäärä kantaa aksenttivärin.

   Rivin rakenne:
   <li class="ohjelma-rivi">
     <span class="ohjelma-rivi__pvm">Pe 12.6.</span>
     <a class="ohjelma-rivi__nimi" href="…">Esiintyjä</a>
     <span class="ohjelma-rivi__klo">21.00</span>
     <span class="ohjelma-rivi__lisa">
       <span class="ohjelma-rivi__laji">Keikka</span>
       Duo, jazzstandardeja · vapaa pääsy
     </span>
   </li>
   ========================================================================== */

.ohjelma-kortti {
	display: grid;
	gap: var(--vali);
	align-items: center;
}

.ohjelma-kortti__kuva {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--pyoristys);
}

.ohjelma-kortti__kuva img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ohjelma-kortti__pvm {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--aksentti-teksti);
	font-size: var(--k-s);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.ohjelma-kortti__nimi {
	font-size: var(--k-l);
	font-style: italic;
}

.ohjelma-kortti__nimi a {
	text-decoration: none;
}

.ohjelma-kortti__nimi a:hover {
	text-decoration: underline;
	text-decoration-color: var(--aksentti);
}

.ohjelma-kortti__kuvaus {
	margin-top: 0.75rem;
	max-width: 46ch;
}

.ohjelma-lista {
	margin-top: var(--pysty-m);
	border-top: 1px solid var(--viiva);
}

.ohjelma-rivi {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.2rem 1.5rem;
	padding-block: 1.05rem;
	border-bottom: 1px solid var(--viiva);
}

.ohjelma-rivi__pvm {
	color: var(--aksentti-teksti);
	font-size: var(--k-s);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ohjelma-rivi__nimi {
	font-family: var(--f-otsikko);
	font-style: italic;
	font-size: var(--k-ml);
	text-decoration: none;
}

.ohjelma-rivi__nimi:hover {
	text-decoration: underline;
	text-decoration-color: var(--aksentti);
}

.ohjelma-rivi__klo {
	font-size: var(--k-s);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ohjelma-rivi__lisa {
	grid-column: 2 / -1;
	font-size: var(--k-s);
	line-height: 1.5;
}

.ohjelma-rivi__lisa,
.ohjelma-rivi__klo {
	color: var(--hiljainen);
}

/* Laji erottaa karaokeillan keikasta ilman että se kirjoitetaan
   otsikkoon. Tulee taksonomiatermistä, ei käsin. */
.ohjelma-rivi__laji {
	margin-right: 0.5rem;
	color: var(--aksentti-teksti);
	font-size: var(--k-xs);
	letter-spacing: 0.06em;
	white-space: nowrap;
}

/* Otsikko ja mahdollinen korvaava tapahtuma samassa solussa. */
.ohjelma-rivi__otsikko {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.6rem;
	min-width: 0;
}

.ohjelma-rivi__tilalle {
	font-size: var(--k-s);
	color: var(--hiljainen);
	text-decoration-color: var(--viiva);
}

.ohjelma-rivi__tilalle:hover {
	color: var(--aksentti-teksti);
}

/* Peruttu tapahtuma jää sivulle — ihmisiä on jo tulossa.
   Sama vaimennus kuin loppuneella menu-rivillä. */
.ohjelma-rivi--peruttu .ohjelma-rivi__nimi,
.ohjelma-rivi--peruttu .ohjelma-rivi__pvm {
	color: var(--hiljainen);
}

.ohjelma-rivi--peruttu .ohjelma-rivi__nimi {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.ohjelma-peruttu {
	grid-column: 1 / -1;
	font-size: var(--k-xs);
	font-style: italic;
	color: var(--hiljainen);
}

/* Esiintyjän linkit. Tekstilinkkeinä, ei ikoneina — sama päätös kuin
   alatunnisteessa: ikonisetti on iso lataus muutamalle linkille. */
.ohjelma-linkit {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 1.5rem;
	margin-top: var(--pysty-s);
	font-size: var(--k-s);
}

.ohjelma-linkit a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	/* Kosketuskohde riittävän korkea myös pienellä tekstillä. */
	min-height: 2.75rem;
	text-decoration: none;
	border-bottom: 1px solid var(--viiva);
	transition: border-color var(--siirtyma);
}

/* Kuvake seuraa tekstin väriä ja kokoa. Ei omaa väriä: brändilogot
   olisivat sivun äänekkäimmät elementit ja veisivät katseen
   esiintyjän nimeltä. */
.ikoni {
	flex: 0 0 auto;
	width: 1.35em;
	height: 1.35em;
	color: var(--hiljainen);
}

.ohjelma-linkit a:hover .ikoni {
	color: var(--aksentti-teksti);
}

.ohjelma-linkit a:hover {
	border-bottom-color: var(--aksentti);
}

/* Kuukausiotsikon jälkeen lista alkaa heti — muuten väli kaksinkertaistuu. */
.ohjelma-kuukausi + .ohjelma-lista {
	margin-top: 0;
	border-top: 0;
}

.ohjelma-kortti--peruttu .ohjelma-kortti__nimi a {
	color: var(--hiljainen);
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* Kuukausiotsikot arkistossa. Paikallaan heti alusta, vaikka
   kuukausia olisi kaksi — sama periaate kuin menun ankkureissa. */
.ohjelma-kuukausi {
	margin-top: var(--pysty-m);
	padding-bottom: 0.5rem;
	font-size: var(--k-ml);
	font-style: italic;
	border-bottom: 1px solid var(--viiva);
}

.ohjelma-kuukausi:first-child {
	margin-top: 0;
}

/* Mennyt tai tyhjä lista: lupaus, ei puute. */
.ohjelma-tyhja {
	padding-block: var(--pysty-s);
	font-style: italic;
}

/* Poikkeus mobiiliin: päivä omalle rivilleen. */
@media (max-width: 39.99rem) {
	.ohjelma-rivi {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.ohjelma-rivi__pvm {
		grid-column: 1 / -1;
	}

	.ohjelma-rivi__lisa {
		grid-column: 1 / -1;
	}
}

@media (min-width: 40rem) {
	.ohjelma-kortti {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	}
}


/* ==========================================================================
   08 — Menu
   Nimi vasemmalle, hinta oikealle, välissä pisteviiva. Alle 600 px
   pisteviiva pois ja hinta nimen alle — se hajoaa kun nimi rivittyy.

   Rivin rakenne:
   <li class="menu-rivi">
     <span class="menu-rivi__nimi">
       Korvapuusti<span class="menu-rivi__merkinnat">L</span>
     </span>
     <span class="menu-rivi__hinta">4,80</span>
     <span class="menu-rivi__kuvaus">Kardemummaa ja raakasokeria.</span>
   </li>
   ========================================================================== */

.menu-ankkurit {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
	padding-block: 0.85rem;
	background-color: var(--paperi);
	border-bottom: 1px solid var(--viiva);
	font-size: var(--k-s);
}

.menu-ankkurit a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.menu-ankkurit a:hover {
	border-bottom-color: var(--aksentti);
}

.menu-osio {
	scroll-margin-top: 4.5rem; /* tarttuvan ankkuririvin verran */
	padding-block: var(--pysty-s);
}

.menu-osio__otsikko {
	margin-bottom: var(--pysty-s);
	font-size: var(--k-l);
	font-style: italic;
}

.menu-rivi {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.15rem 1rem;
	padding-block: 0.85rem;
	border-bottom: 1px solid var(--viiva);
}

.menu-rivi__nimi {
	display: flex;
	align-items: baseline;
	font-family: var(--f-otsikko);
	font-size: var(--k-ml);
}

/* Pisteviiva täyttää nimen ja hinnan välin. */
.menu-rivi__nimi::after {
	content: "";
	flex: 1 1 2rem;
	margin-inline: 0.6rem;
	border-bottom: 1px dotted var(--viiva);
	translate: 0 -0.3em;
}

.menu-rivi__merkinnat {
	margin-left: 0.5rem;
	color: var(--aksentti-teksti);
	font-family: var(--f-leipa);
	font-size: var(--k-xs);
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.menu-rivi__hinta {
	font-family: var(--f-otsikko);
	font-size: var(--k-ml);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Ainesosat ovat ruokalistan luetuinta tekstiä: niiden perusteella
   valitaan annos, ja allergiaa tai ruokavaliota noudattava lukee ne
   tarkasti. Siksi oma porras eikä --k-s, joka on tarkoitettu
   selitteille ja saateteksteille. */
.menu-rivi__kuvaus {
	display: block;
	grid-column: 1 / -1;
	max-width: var(--mitta);
	margin-top: 0.25rem;
	color: var(--hiljainen);
	font-size: var(--k-m);
	line-height: 1.6;
}

/* Kaksi eri asiaa, kaksi eri esitystapaa:

   Luettelo  = vaihtoehtoja, joista valitaan yksi. Ladotaan samalle
               riville pistein eroteltuina, jolloin ne lukevat valintana
               eivätkä erillisinä tuotteina.
   Kappale   = lisätieto koko tuotteesta. Oma rivinsä luettelon alla.

   Ero tulee editorin semantiikasta: omistaja kirjoittaa vaihtoehdot
   luettelolohkona ja lisätiedon tavallisena kappaleena. */

.menu-rivi__kuvaus ul,
.menu-rivi__kuvaus ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu-rivi__kuvaus li {
	display: inline;
}

.menu-rivi__kuvaus li + li::before {
	/* Sama väri kuin teksti: --viiva on viivoille ja katoaa tekstin
	   seasta. Väljyys erottaa vaihtoehdot toisistaan. */
	content: "·";
	margin-inline: 0.5em;
	color: currentColor;
}

.menu-rivi__kuvaus p {
	margin: 0;
}

.menu-rivi__kuvaus > * + * {
	margin-top: 0.3rem;
}

/* Sivun otsikkokuva. Matala kaistale: se on ilmettä, ei sisältöä,
   eikä saa työntää listaa ruudun alapuolelle. */
.sivu-kuva {
	margin: 0 0 var(--pysty-s);
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--pyoristys);
}

.sivu-kuva img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 40rem) {
	.sivu-kuva {
		aspect-ratio: 21 / 9;
	}
}

/* Tunnelmaosion teksti. Kääre on leveä, mutta luettava rivi ei saa
   levetä sen mukana — palsta rajataan 58 merkkiin ja ylimääräinen
   leveys menee kuville. Ilman tätä rivinpituus karkaisi yli 70
   merkin leveällä ruudulla. */
.tunnelma-teksti {
	max-width: var(--mitta);
}

/* Otsikon ja leipätekstin väli. Customizerin sisältö tulee muodossa
   <h2> + <div class="leipa">, eli otsikko ja kääre ovat sisaruksia —
   .leipa > * + * väljentää vain kääreen sisällä olevia kappaleita
   eikä yllä niiden väliin. Ilman tätä sääntöä väli on tasan nolla.

   Suhde on sama kuin herossa (0.55em), joten väli kasvaa otsikon koon
   mukana eikä ole erillinen pikseliluku. */
.tunnelma-teksti > h2,
.tunnelma-teksti > h3 {
	margin-bottom: 0.55em;
}

/* Kuvituskuva annoksesta. Rajattu kapeaksi: ruokalista on lista, ei
   galleria — kuva on aksentti, ei rivin pääsisältö. */
.menu-rivi__kuva {
	display: block;
	grid-column: 1 / -1;
	width: clamp(11rem, 34%, 17rem);
	margin-top: 0.75rem;
	overflow: hidden;
	border-radius: var(--pyoristys);
}

.menu-rivi__kuva img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.menu-rivi--loppunut .menu-rivi__nimi,
.menu-rivi--loppunut .menu-rivi__hinta {
	color: var(--hiljainen);
}

.menu-rivi__loppu {
	grid-column: 1 / -1;
	font-size: var(--k-xs);
	font-style: italic;
	color: var(--hiljainen);
}

/* Listan loppuhuomautus: lapsiannokset tms. Erottuu selitteestä
   kokonsa ja aksenttiviivan avulla — se on tarjous, ei sanasto. */
.menu-huomautus {
	max-width: var(--mitta);
	margin-top: var(--pysty-s);
	padding-left: 0.9rem;
	border-left: 2px solid var(--aksentti);
	font-size: var(--k-m);
	line-height: 1.6;
}

/* Selite ei ole leipätekstiä vaan sanasto: se saa olla leveämpi kuin
   58 merkin mitta, jotta pareja mahtuu riville useampi. */
.menu-selite {
	margin-top: var(--pysty-s);
	max-width: 78ch;
	font-size: var(--k-s);
	line-height: 1.7;
	color: var(--hiljainen);
}

@media (max-width: 37.5rem) {
	.menu-rivi {
		grid-template-columns: minmax(0, 1fr);
	}

	.menu-rivi__nimi::after {
		display: none;
	}

	.menu-rivi__hinta {
		font-size: var(--k-m);
		color: var(--hiljainen);
	}
}

/* ==========================================================================
   Galleria
   Koko galleriaosio yhtenä pätkänä. Liitä app.css:ään omaksi osiokseen
   (esim. Menun jälkeen). Korvaa KAIKKI aiemmin liitetyt gallerian pätkät.
   ========================================================================== */

/* --- Värit pysyvät oikeina --------------------------------------------- */

/* Talven kuvasuodin tummentaa tunnelmakuvia. Teoksen värit eivät saa
   muuttua: ostaja näkisi väärän teoksen. Luokka + elementti voittaa
   pelkän elementtivalitsimen, joten järjestyksellä ei ole väliä. */
:root[data-season="talvi"] .teos-kuva img {
	filter: none;
}

/* --- Teossivu ----------------------------------------------------------- */

.teos-kuva {
	margin: 0;
}

.teos-kuva__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 85vh;   /* pysty teos mahtuu kerralla näkyviin */
	margin-inline: auto;
}

.teos-lappu__tekija,
.teos-lappu__tiedot {
	color: var(--hiljainen);
	font-size: var(--k-m);
	margin-block: 0 0.5rem;
}

.teos-lappu__tekija a {
	color: inherit;
	text-underline-offset: 0.2em;
}

.teos-lappu__hinta {
	font-size: var(--k-m);
	font-variant-numeric: tabular-nums;
	margin-block: 1rem;
}

.teos-lappu__ohje {
	color: var(--hiljainen);
	font-size: var(--k-s);
}

/* --- Ruudukko ----------------------------------------------------------- */

.teos-ruudukko {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: var(--pysty-s) clamp(1.25rem, 3vw, 2.5rem);
}

/* --- Kortti ------------------------------------------------------------- */

.teos-kortti__linkki {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Kehys on aina saman muotoinen. Teos istuu sen alareunaan
   luonnollisessa kuvasuhteessaan: alalinjat ja laput tasaantuvat. */
.teos-kortti__kuva {
	aspect-ratio: 4 / 5;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.teos-kortti__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	transition: opacity 0.2s ease;
}

.teos-kortti__lappu {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-top: 0.85rem;
	font-size: var(--k-s);
}

.teos-kortti__tekija {
	color: var(--hiljainen);
}

/* Nimelle varataan kahden rivin korkeus, jolloin yksirivinen ja
   kaksirivinen teosnimi vievät saman tilan ja hinnat asettuvat riviin.
   Korkeus tulee tekstistä, ei kortin venyttämisestä — kuvakehys pysyy
   siis koskemattomana kaikilla ruudun leveyksillä. Kolmirivinen nimi
   menee edelleen linjasta; se on harvinaista ja hyväksytty. */
.teos-kortti__nimi {
	font-family: var(--f-otsikko);
	font-style: italic;
	font-size: var(--k-m);
	line-height: 1.35;
	min-height: calc(2 * 1.35em);
	color: var(--teksti);
}

.teos-kortti__vuosi {
	font-style: normal;
	color: var(--hiljainen);
}

.teos-kortti__hinta {
	font-variant-numeric: tabular-nums;
}

.teos-kortti__tila {
	color: var(--aksentti);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: var(--k-xs);
}

/* Myyty teos hiljenee, mutta pysyy luettavana. */
.teos-kortti--myyty .teos-kortti__img {
	opacity: 0.6;
}

/* --- Vuorovaikutus ------------------------------------------------------ */

.teos-kortti__linkki:hover .teos-kortti__nimi {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.teos-kortti__linkki:focus-visible {
	outline: 2px solid var(--teksti);
	outline-offset: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.teos-kortti__img { transition: none; }
}

/* --- Gallerian sivu (archive-teos.php) --------------------------------- */

.galleria-alku {
	margin-bottom: var(--pysty-s);
}

.galleria-alku__yla {
	font-size: var(--k-s);
	margin: 0 0 0.5rem;
}

.galleria-alku__yla a {
	color: var(--hiljainen);
	text-underline-offset: 0.2em;
}

.galleria-alku .leipa {
	max-width: var(--mitta);
}

/* Suodatin: tekstilinkit rivissä, valittu alleviivattu.
   Ei painikkeita — ne kilpailisivat teosten kanssa huomiosta. */
.galleria-suodatin {
	margin-bottom: var(--pysty-s);
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--viiva);
}

.galleria-suodatin ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.galleria-suodatin a {
	color: var(--hiljainen);
	text-decoration: none;
	font-size: var(--k-m);
}

.galleria-suodatin a:hover,
.galleria-suodatin a[aria-current="page"] {
	color: var(--teksti);
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-thickness: 1px;
}

.galleria-tyhja,
.galleria-loppu {
	color: var(--hiljainen);
	max-width: var(--mitta);
}

.galleria-loppu {
	margin-top: var(--pysty-m);
	font-size: var(--k-s);
}

/* --- Etusivun nosto (template-parts/teos-nosto.php) -------------------- */

/* Galleria on sivun hiljaisin osio. Ei otsikkoviivaa eikä oikealle
   karannutta linkkiä: kun jokainen osio aloitti samalla otsikkorivillä,
   sivu luki listana laatikoita. Nyt viiva on enää ruokalistalla,
   jolloin se lukee valintana eikä kaavana.

   Pysty kuten muutkin väliotsikot — tämä h2 ei kulje .osion-otsikko
   -säännön kautta, joten ääni asetetaan tässä. */
.teos-nosto__otsikko {
	margin-bottom: var(--pysty-s);
	font-style: normal;
	letter-spacing: 0.01em;
}

/* Linkki ruudukon alla: lukija on jo nähnyt kolme teosta ja voi
   haluta lisää. Otsikon vieressä se olisi tarjous ennen näkemistä. */
.teos-nosto__kaikki {
	margin-top: var(--pysty-s);
	font-size: var(--k-s);
}

.teos-nosto__kaikki a {
	color: var(--hiljainen);
	text-decoration: none;
	border-bottom: 1px solid var(--viiva);
	transition: color var(--siirtyma), border-color var(--siirtyma);
}

.teos-nosto__kaikki a:hover {
	color: var(--teksti);
	border-bottom-color: var(--aksentti);
}

/* Enintään kolme rinnakkain, vaikka tilaa olisi neljälle:
   nosto pysyy yhtenä rauhallisena rivinä. */
@media (min-width: 52rem) {
	.teos-ruudukko--nosto {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Teokset ja tuotteet erikseen -------------------------------------- */

/* Ryhmien välissä väljä ilma ja ohut viiva: sama erotin kuin
   suodattimen alla, joten sivu pysyy yhtenäisenä. */
.galleria-ryhma + .galleria-ryhma {
	margin-top: var(--pysty-m);
	padding-top: var(--pysty-s);
	border-top: 1px solid var(--viiva);
}

.galleria-ryhma__otsikko {
	font-family: var(--f-otsikko);
	font-style: italic;
	font-weight: normal;
	font-size: var(--k-l);
	margin: 0 0 var(--pysty-s);
}

/* Sarjatuote: kuva neliön muotoisella lohkopohjalla.
   Teokset riippuvat paperilla kuin seinällä, tuotteet ovat hyllyssä.
   Ero näkyy heti, vaikka väliotsikkoa ei lukisi. */
.teos-kortti--sarja .teos-kortti__kuva {
	aspect-ratio: 1 / 1;
	align-items: center;
	padding: 8%;
	background: var(--lohko);
}

/* Tuotteen nimi leipätekstillä, ei kursiivilla:
   kursiivi kuuluu teoksen nimelle kuten museolapussa. */
.teos-kortti--sarja .teos-kortti__nimi {
	font-family: var(--f-leipa);
	font-style: normal;
}

/* Loppunut tuote hiljenee samoin kuin myyty teos. */
.teos-kortti--sarja.teos-kortti--myyty .teos-kortti__img {
	opacity: 0.6;
}

/* ==========================================================================
   09 — Varaus ja yhteystiedot
   Puhelinnumero on iso ja ensimmäisenä: kesäperjantaina se on ainoa
   varmasti toimiva kanava. Varauslomakkeen tyylit ovat tämän osion
   lopussa, kohdistettuna Five Starin omiin luokkiin.
   ========================================================================== */

.varaus {
	display: grid;
	gap: var(--vali);
}

/* Pysty kuten muutkin väliotsikot. Sivun ainoa tietoinen poikkeus on
   tunnelmaosion "Ilta alkaa keittiöstä": se on kerronnallinen otsikko,
   ei osion nimilappu, ja saa siksi pitää kursiivinsa. Poikkeus on
   valittu, ei jäänyt. */
.varaus__otsikko {
	font-style: normal;
	letter-spacing: 0.01em;
}

.varaus__puhelin {
	display: inline-block;
	font-family: var(--f-otsikko);
	font-style: italic;
	font-size: var(--k-l);
	text-decoration: none;
	line-height: 1.2;
}

.varaus__puhelin:hover {
	text-decoration: underline;
	text-decoration-color: var(--aksentti);
}

.aukiolo {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.3rem 1.5rem;
	font-size: var(--k-s);
}

.aukiolo dt {
	font-family: var(--f-otsikko);
	font-style: italic;
	color: var(--teksti);
}

.aukiolo dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

/* Katettu alue on lämmittämätön — tämä huomautus toistuu varaussivulla
   ja vahvistusviestissä. */
.huomio {
	max-width: var(--mitta);
	padding-left: 0.9rem;
	border-left: 2px solid var(--aksentti);
	font-size: var(--k-s);
	line-height: 1.6;
}

/* Varattavat tilat: kausiteksti, sama lähde etusivulla ja
   varaussivulla. */
.varaus-tilat {
	margin-block: var(--pysty-s);
}

/* Poikkeuspäivät varaussivulla. Oma väli molemmin puolin: lyhytkoodi
   ja lomake eivät välttämättä ole suoria sisaruksia, jolloin
   .sisalto-säännön väli ei osu. */
.poikkeukset {
	margin-block: var(--pysty-s);
}

.poikkeukset p {
	margin-bottom: 0.4rem;
}

.poikkeukset__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	font-variant-numeric: tabular-nums;
}

.poikkeukset__lista li + li {
	margin-top: 0.2rem;
}

/* Kaksi ryhmää: suljettu ja poikkeuksellisesti auki. Jälkimmäisen
   saateteksti tarvitsee väliä, jottei se lue edellisen listan jatkona. */
.poikkeukset__lista + .poikkeukset__saate {
	margin-top: 1.25rem;
}

/* Karttalinkki, ei upotettua karttaa: iframe toisi ulkoisen pyynnön ja
   evästeet jokaiselle kävijälle. Linkki ei tuo kumpaakaan. */
.osoite {
	margin-bottom: 0.5rem;
}

/* Kartta latautuu vasta klikkauksesta. Kehys on paikallaan alusta asti,
   jottei sivu hyppää kun kartta ilmestyy. */
.kartta {
	display: grid;
	place-content: center;
	gap: 0.75rem;
	margin-top: var(--pysty-s);
	aspect-ratio: 4 / 3;
	padding: 1rem;
	text-align: center;
	background-color: var(--lohko);
	border: 1px solid var(--viiva);
	border-radius: var(--pyoristys);
	overflow: hidden;
}

.kartta__huomio {
	max-width: 22ch;
	margin-inline: auto;
	font-size: var(--k-xs);
	line-height: 1.5;
}

.kartta[data-ladattu] {
	display: block;
	padding: 0;
}

.kartta iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

@media (min-width: 60rem) {
	.varaus {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(2.5rem, 6vw, 5rem);
	}
}

/* Karttakuva: kuva näkyy heti, painike kuvan alaosassa ja merkki
   keskellä. Kuva tulee omalta palvelimelta (GDPR). */
.kartta--kuva {
	position: relative;
	display: block;
	padding: 0;
}

.kartta__kuva {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kartta__merkki {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Kärki osuu keskipisteeseen, ei merkin keskikohta. */
	transform: translate(-50%, -100%);
	fill: var(--aksentti);
	stroke: var(--teksti);
	stroke-width: 1;
	filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35));
}

.kartta__merkki circle {
	fill: var(--paperi);
}

.kartta__kerros {
	position: absolute;
	inset: auto 0 0;
	display: grid;
	justify-items: center;
	gap: 0.4rem;
	padding: 1.75rem 1rem 1.6rem;
	background: linear-gradient(to top, var(--paperi) 35%, transparent);
}

.kartta--kuva .kartta__huomio {
	max-width: none;
	margin: 0;
}

/* Lähdemerkintä: kartta on vaalea molempina kausina, joten tausta
   on kiinteä eikä seuraa paletin vaihtoa. */
.kartta__lahde {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.1rem 0.4rem;
	font-size: 0.7rem;
	line-height: 1.4;
	color: #333;
	background: rgb(255 255 255 / 0.8);
	border-bottom-left-radius: var(--pyoristys-s);
}

/* Yhteystiedot-sivu (template-yhteystiedot.php). Sama .varaus-ruudukko
   kuin etusivulla; omat säännöt vain otsikoille ja kartan paikalle. */
.yhteys__johdanto {
	margin-bottom: var(--pysty-m);
}

.yhteys h2 {
	margin-bottom: 0.5rem;
	font-size: var(--k-ml);
	font-style: italic;
}

.yhteys__kartta .kartta {
	margin-top: 0;
}

.yhteys__kartta .pieni {
	margin-top: 0.75rem;
}

@media (min-width: 60rem) {
	/* Kartta pysyy näkyvissä, kun vasenta saraketta vieritetään. */
	.yhteys__kartta {
		position: sticky;
		top: var(--pysty-s);
		align-self: start;
	}
}


/* --------------------------------------------------------------------
   Varauslomake: Five Star Restaurant Reservations (restaurant-reservations)

   Liitännäisessä ei ole tyyliasetuksia ilman maksullista versiota, mutta
   sitä ei tarvita: lomake renderöityy palvelimella tavallisena HTML:nä,
   siinä ei ole yhtään inline-tyyliä ja sen omassa CSS:ssä on vain kaksi
   !important-merkintää. Kaikki alla oleva käyttää teeman tokeneita,
   joten lomake vaihtuu myös kauden mukana — mitä mikään pluginin oma
   väriasetus ei tekisi.

   Kalenteri on pickadate, jolla on omat tyylitiedostonsa.
   -------------------------------------------------------------------- */

.rtb-booking-form {
	max-width: 34rem;
}

.rtb-booking-form fieldset {
	margin: 0 0 var(--pysty-s);
	padding: 0;
	border: 0;
}

.rtb-booking-form legend {
	padding: 0;
	margin-bottom: 1rem;
	font-family: var(--f-otsikko);
	font-style: italic;
	font-size: var(--k-l);
	line-height: var(--rivi-otsikko);
	color: var(--teksti);
}

.rtb-booking-form label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: var(--k-s);
	font-weight: 400;
	color: var(--hiljainen);
}

.rtb-booking-form .rtb-text,
.rtb-booking-form .rtb-select,
.rtb-booking-form .rtb-textarea {
	margin-bottom: 1rem;
}

.rtb-booking-form input[type="text"],
.rtb-booking-form input[type="email"],
.rtb-booking-form input[type="tel"],
.rtb-booking-form select,
.rtb-booking-form textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	background-color: var(--paperi);
	color: var(--teksti);
	border: 1px solid var(--viiva);
	border-radius: var(--pyoristys-s);
	font: inherit;
	box-shadow: none;
}

/* Pluginin oma 15em-rajoitus pois: leveyden hoitaa kääre. */
.rtb-booking-form input,
.rtb-booking-form .picker__input {
	max-width: none;
}

.rtb-booking-form input:focus,
.rtb-booking-form select:focus,
.rtb-booking-form textarea:focus {
	border-color: var(--aksentti);
	outline: 2px solid var(--aksentti);
	outline-offset: 1px;
}

.rtb-booking-form textarea {
	min-height: 6rem;
}

/* Painikkeet: sama ääriviivatyyli kuin .painike-luokassa. */
.rtb-form-submit button,
.rtb-find-reservation-button {
	display: inline-block;
	padding: 0.8rem 1.6rem;
	background: transparent;
	color: var(--aksentti-teksti);
	border: 1px solid var(--aksentti);
	border-radius: var(--pyoristys);
	font-family: var(--f-leipa);
	font-size: var(--k-s);
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: border-color var(--siirtyma), color var(--siirtyma);
}

.rtb-form-submit button:hover,
.rtb-find-reservation-button:hover {
	border-color: var(--teksti);
	color: var(--teksti);
}

/* "Näytä tai peruuta varaus" on itse painike, ei kääre. */
.rtb-modification-toggle {
	display: inline-block;
	padding: 0.8rem 1.6rem;
	margin-bottom: var(--pysty-s);
	background: transparent;
	color: var(--teksti);
	border: 1px solid var(--viiva);
	border-radius: var(--pyoristys);
	font-family: var(--f-leipa);
	font-size: var(--k-s);
	cursor: pointer;
	transition: border-color var(--siirtyma), color var(--siirtyma);
}

.rtb-modification-toggle:hover {
	border-color: var(--aksentti);
	color: var(--aksentti-teksti);
}

.rtb-modification-form {
	margin-bottom: var(--pysty-s);
}

/* --- Kalenteri (pickadate) ------------------------------------------ */

.picker--opened .picker__holder {
	background-color: var(--peite);
}

.picker__box {
	padding: 1rem 1rem 0.5rem;
	background-color: var(--paperi);
	border: 1px solid var(--viiva);
	border-bottom: 0;
	border-radius: var(--pyoristys) var(--pyoristys) 0 0;
}

.picker__frame {
	max-width: 26rem;
}

.picker__header {
	margin-bottom: 0.5rem;
}

.picker__month,
.picker__year {
	font-family: var(--f-otsikko);
	font-style: italic;
	color: var(--teksti);
}

.picker__nav--prev,
.picker__nav--next {
	color: var(--teksti);
}

.picker__nav--prev:hover,
.picker__nav--next:hover {
	background-color: var(--lohko);
}

.picker__weekday {
	font-size: var(--k-xs);
	color: var(--hiljainen);
}

.picker__day {
	border-radius: var(--pyoristys-s);
}

.picker__day--infocus:hover,
.picker__day--outfocus:hover {
	background-color: var(--lohko);
	color: var(--teksti);
}

.picker__day--today:before {
	border-top-color: var(--aksentti);
}

.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
	background-color: var(--aksentti);
	color: var(--paperi);
}

.picker__day--disabled,
.picker__day--disabled:hover {
	background: transparent;
	color: var(--hiljainen);
	opacity: 0.45;
}

.picker__footer {
	display: flex;
}

.picker__button--today,
.picker__button--clear,
.picker__button--close {
	flex: 1;
	background: transparent;
	color: var(--teksti);
	border-top: 1px solid var(--viiva);
	font-size: var(--k-s);
}

.picker__button--today:before,
.picker__button--clear:before {
	border-top-color: var(--aksentti);
	background-color: var(--aksentti);
}

.picker__button--close:before {
	color: var(--hiljainen);
}

.picker__footer button:hover {
	background-color: var(--lohko);
	border-color: var(--viiva);
}

/* Aikavalitsimen lista. */
.picker__list-item {
	background-color: var(--paperi);
	border-color: var(--viiva);
	color: var(--teksti);
}

/* Tarkempi valitsin on pakollinen: pickadate värittää korostetun rivin
   säännöllä .picker--focused .picker__list-item--highlighted. */
.picker--focused .picker__list-item--highlighted,
.picker__list-item--highlighted,
.picker__list-item:hover {
	background-color: var(--lohko);
	border-color: var(--viiva);
	color: var(--teksti);
}

.picker--focused .picker__list-item--selected,
.picker__list-item--selected,
.picker__list-item--selected:hover {
	background-color: var(--aksentti);
	border-color: var(--aksentti);
	color: var(--paperi);
}


/* ==========================================================================
   10 — Footer
   ========================================================================== */

.alatunniste {
	position: relative;
	overflow: hidden;
	padding-block: var(--pysty-m);
	background-color: var(--lohko-syva);
	font-size: var(--k-s);
	line-height: 1.7;
	transition: background-color var(--siirtyma);
}

/* Sisältö liljan päälle. */
.alatunniste > .rajaus {
	position: relative;
	z-index: 1;
}

.alatunniste__ruudukko {
	display: grid;
	gap: var(--pysty-s) var(--vali);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.alatunniste h2 {
	margin-bottom: 0.5rem;
	font-size: var(--k-ml);
	font-style: italic;
}

/* Somelinkit alatunnisteessa: kuvake ja nimi, sama kieli kuin
   tapahtumasivun esiintyjälinkeissä. */
.some-linkit {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
}

.some-linkit a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	border-bottom: 1px solid var(--viiva);
	transition: border-color var(--siirtyma);
}

.some-linkit a:hover {
	border-bottom-color: var(--aksentti);
}

.alavalikko ul {
	display: grid;
	gap: 0.3rem;
}

.alatunniste__pohja {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-top: var(--pysty-m);
	padding-top: 1rem;
	border-top: 1px solid var(--viiva);
	font-size: var(--k-xs);
}


/* ==========================================================================
   11 — Apuluokat
   ========================================================================== */

/* Painike: ääriviiva, ei täyttöä. Yksi tyyli, kaksi painotusta. */
.painike {
	display: inline-block;
	padding: 0.8rem 1.6rem;
	font-family: var(--f-leipa);
	font-size: var(--k-s);
	letter-spacing: 0.02em;
	color: var(--teksti);
	background-color: transparent;
	border: 1px solid var(--viiva);
	border-radius: var(--pyoristys);
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--siirtyma), color var(--siirtyma);
}

.painike:hover {
	border-color: var(--aksentti);
	color: var(--aksentti-teksti);
}

/* Ensisijainen: talven varauskehotus, ohjelmasivun varaa pöytä. */
.painike--korostettu {
	border-color: var(--aksentti);
	color: var(--aksentti-teksti);
}

.painike--korostettu:hover {
	border-color: var(--teksti);
	color: var(--teksti);
}

.painike--pieni {
	padding: 0.55rem 1.1rem;
}

.hiljainen {
	color: var(--hiljainen);
}

.mitta {
	max-width: var(--mitta);
}

.kuva-taytto {
	overflow: hidden;
	border-radius: var(--pyoristys);
}

.kuva-taytto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------
   Liljakuvitus. Asiakkaan oma elementti, käytössä kahdessa paikassa:
   alatunnisteen kulmassa isona ja tyhjän ohjelmaosion vieressä pienenä.

   Kolmatta esiintymää ei kannata lisätä ilman hyvää syytä — toistuva
   koriste-elementti muuttuu taustakuvioksi ja menettää tehonsa.
   -------------------------------------------------------------------- */

.lilja {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
}

/* Sijainti: jakoviivan yläpuolella, sarakkeiden oikealla puolella.
   Tyhjä tila, jossa kuvitus ei kilpaile tekstin kanssa. Etäisyys
   lasketaan alareunasta: pehmuste + alarivin korkeus. */
.lilja--alatunniste {
	position: absolute;
	right: 0;
	bottom: calc(var(--pysty-m) + 3rem);
	z-index: 0;
	width: var(--lilja-koko, 9.5rem);
	/* Ei koskaan yli kolmannesta ruudun leveydestä, säätimestä huolimatta. */
	max-width: 33vw;
	/* Peilattu: kukka aukeaa sisäänpäin sivulle, ei ulos reunan yli.
	   Varsi jää oikeaan reunaan, jossa rajautuminen ei haittaa. */
	transform: scaleX(-1);
	transform-origin: center;
}

/* Kapealla ruudulla kuvitus on pienempi eikä kilpaile tekstin kanssa. */
@media (max-width: 39.99rem) {
	.lilja--alatunniste {
		width: min( var(--lilja-koko, 9.5rem), 30vw );
		right: 0;
		/* Alarivi voi kääriytyä kahdelle riville kapealla ruudulla. */
		bottom: calc(var(--pysty-m) + 5rem);
	}
}

.lilja--pieni {
	flex: 0 0 auto;
	width: clamp(5rem, 12vw, 7.5rem);
}

.tyhja-lohko {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pysty-s);
	justify-content: space-between;
}

/* Kuvan paikanpitäjä. Käytössä vain siihen asti, kunnes oikeat
   valokuvat ovat kansiossa assets/img/ (vaihe 11). */
.kuva-paikanpitaja {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 12rem;
	background-color: var(--lohko-syva);
	border-radius: var(--pyoristys);
	font-size: var(--k-xs);
	letter-spacing: 0.04em;
	text-align: center;
	padding: 1rem;
}

.vain-ruudunlukijalle {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

[hidden] {
	display: none !important;
}