/* Taidereitti — vierivä palsta kartan päällä (js/taidereitti.js).

   Omat tiedostot eikä index.html:n sisään, koska pienoismalli on jo pitkä ja
   tarina on oma kerroksensa: sen voi ottaa pois yhdellä rivillä. Tokenit ovat
   samat literaalit kuin index.html:ssä — sivu ei lataa designsysteemiä. */

.taide-avaa{position:fixed;z-index:4;
  top:calc(10px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));
  display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;
  background:var(--sheet);border:1px solid var(--rule);border-radius:10px;
  box-shadow:0 10px 26px -14px rgba(35,25,15,.5);
  font:600 15px/1 var(--sans);color:var(--ink);text-decoration:none}
/* display:inline-flex ohittaisi [hidden]:n oletuksen display:none */
.taide-avaa[hidden],.taide-sulje[hidden]{display:none}
.taide-avaa .pallo{width:10px;height:10px;border-radius:50%;background:#67564a;flex:none}
.taide-avaa small{font-weight:500;color:var(--ink-3);font-size:13px}

/* Palsta on ainoa vierivä elementti: body pysyy overflow:hidden, jotta kartta
   ei liiku vieritettäessä. overscroll-behavior estää vierityksen karkaamisen
   sivulle, kun palsta loppuu. */
#tarina{position:fixed;z-index:3;top:0;right:0;height:100%;
  width:min(430px,100%);overflow-y:auto;overscroll-behavior:contain;
  padding:14vh 16px 60vh;scrollbar-width:thin}
#tarina[hidden]{display:none}

.luku{min-height:58vh;display:flex;align-items:center}
.teoskortti{width:100%;background:var(--sheet);border:1px solid var(--rule);
  border-radius:12px;padding:16px 18px;box-shadow:0 14px 34px -18px rgba(35,25,15,.55)}
.teoskortti img{display:block;width:100%;height:auto;border-radius:8px;
  margin:0 0 12px;background:var(--ground)}
.teoskortti h2{font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.2;
  letter-spacing:-.015em;margin:0}
.teoskortti h3{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.25;
  letter-spacing:-.015em;margin:0}
.teoskortti .meta{margin:5px 0 0;font-size:13.5px;color:var(--ink-2)}
.teoskortti p{margin:10px 0 0;font-size:14.5px}
.teoskortti details{margin-top:8px}
.teoskortti summary{cursor:pointer;font-size:13.5px;color:var(--kuusi);
  min-height:24px;padding:6px 0}
.teoskortti .lahde{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--rule);
  font-size:12px;color:var(--ink-3);display:flex;gap:10px;flex-wrap:wrap;
  align-items:center;justify-content:space-between}
.teoskortti .lahde a{color:var(--kuusi)}
.teoskortti .tarkkuus{margin-top:8px;padding:8px 10px;background:var(--ground);
  border-radius:8px;font-size:12.5px;color:var(--ink-2)}

/* Aluekortti erottuu teoskortista: se on lukuotsikko, ei teos. Tumma pohja
   vaatii omat sävyt myös lähteelle ja taitokselle, muuten ne katoavat. */
.luku.alue .teoskortti{background:var(--ink);border-color:var(--ink);color:var(--sheet)}
.luku.alue h2{color:var(--sheet)}
.luku.alue .meta{color:#c9d2cb}
.luku.alue .lahde{color:#9aa8a0;border-top-color:#33403a}
.luku.alue summary{color:#a8d0bd}

/* ---------- ohjain ja vihje ----------
   Kertovat että sivu vierii ja missä kohtaa reittiä ollaan. Napit ovat
   vaihtoehto vieritykselle, eivät sen korvaaja. */
.reitti-ohjain{position:fixed;z-index:5;
  bottom:calc(12px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:4px;padding:4px;
  background:var(--sheet);border:1px solid var(--rule);border-radius:24px;
  box-shadow:0 10px 26px -12px rgba(35,25,15,.6)}
.reitti-ohjain[hidden]{display:none}
.reitti-ohjain button{appearance:none;cursor:pointer;width:46px;height:46px;
  border:0;border-radius:50%;background:var(--ink);color:var(--sheet);
  font:400 22px/1 var(--sans)}
.reitti-ohjain button:disabled{opacity:.3;cursor:default}
/* yksi rivi: kaksirivinen laskuri kasvattaisi palkin korkeutta ja söisi
   kartan alalaidan. Pitkä aluenimi katkeaa kolmeen pisteeseen. */
.reitti-ohjain .laskuri{min-width:8em;max-width:12em;text-align:center;padding:0 8px;
  font:600 13px/1 var(--sans);color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.reitti-vihje{position:fixed;z-index:5;
  bottom:calc(70px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  padding:7px 14px;border-radius:16px;white-space:nowrap;
  background:rgba(21,26,23,.86);color:#fbfcfa;font:600 13px/1 var(--sans);
  animation:vihjeSaapuu 5s ease-in-out 1.2s both}
.reitti-vihje[hidden]{display:none}
@keyframes vihjeSaapuu{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.reitti-vihje{animation:none}}

/* Työpöydällä palsta on oikeassa laidassa, joten ohjain kuuluu sen alle
   eikä kartan keskelle. */
@media (min-width:721px){
  .reitti-ohjain,.reitti-vihje{left:auto;transform:none;
    right:calc((min(430px,100vw) - 253px) / 2)}
}

.taide-sulje{position:fixed;z-index:5;
  top:calc(10px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));
  min-height:46px;min-width:46px;padding:0 16px;cursor:pointer;
  background:var(--sheet);border:1px solid var(--rule);border-radius:10px;
  box-shadow:0 10px 26px -14px rgba(35,25,15,.5);
  font:600 15px/1 var(--sans);color:var(--ink-2)}

/* Puhelin: pystyvierivä palsta koko ruudun päällä ei toiminut — sisäkkäinen
   vieritys (kortti kortin sisällä) takkusi ja kartta jäi koskemattomaksi
   palstan taakse. Reitti on siksi vaakasuuntainen korttipakka alalaidassa:
   kartta jää näkyviin ja kosketeltavaksi yläpuolelle, kortti pyyhkäistään
   sivulle kuin sovelluksessa. Kortin sisällä vieritys on pystyyn ja pakka
   vaakaan, joten eleet eivät riitele. */
@media (max-width:720px){
  /* mandatory eikä proximity: pakka on karuselli, kortti ei saa jäädä
     puoliväliin. Slaidi on 88 % ja säiliössä 6 % reunapehmuste, jotta
     ensimmäinen ja viimeinen kortti keskittyvät ja naapuri pilkottaa —
     pilkotus kertoo ilman vihjettä, että pakkaa voi selata. */
  #tarina{top:auto;bottom:calc(74px + env(safe-area-inset-bottom));
    left:0;width:100%;height:auto;padding:0 6%;
    display:flex;align-items:flex-end;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    scrollbar-width:none}
  .luku{flex:0 0 88%;min-height:0;padding:0 6px;scroll-snap-align:center;
    align-items:flex-end}
  /* overscroll vain pystyyn: contain molemmilla akseleilla söisi vaaka-
     pyyhkäisyn — kortti ei vieri vaakaan, joten ele jäisi siihen eikä
     ketjuuntuisi pakkaan, ja kortti peittää pakasta lähes kaiken. */
  .teoskortti{background:rgba(251,252,250,.96);backdrop-filter:blur(3px);
    max-height:38vh;overflow-y:auto;overscroll-behavior-y:contain;padding:14px}
  .teoskortti img{max-height:18vh;object-fit:cover}
  .teoskortti h2{font-size:21px}
  .teoskortti h3{font-size:19px}
  .luku.alue .teoskortti{background:rgba(21,26,23,.95)}
  /* pilkotus on vihje; tekstivihje puhuisi vierityksestä jota ei ole */
  .reitti-vihje{display:none}
  /* Isometrian säätimet ovat puhelimessa alalaidassa (z-index 900) — reitin
     auki ollessa ne olisivat ohjaimen ja pakan päällä ja veisivät
     napautukset. Reitin ajaksi pois; nipistyszoomaus toimii yhä.

     Myös kartan lähderivi: se osui ohjaimen laskurin päälle. Reitin oma
     lähde ("Kuva ja teksti © vuores.fi") on jokaisen teoskortin alalaidassa,
     ja kartan lähde palaa näkyviin heti kun reitti suljetaan. */
  body.taide-auki .iso-tyokalut,body.taide-auki .iso-kytkimet,
  body.taide-auki .iso-lahdenappi,body.taide-auki .iso-krediitti{display:none}
}
@media (prefers-reduced-motion:reduce){
  #tarina{scroll-behavior:auto}
}