/* ===== Alasivujen rakenne =====
   Etusivun mockup antaa paletin, fontit ja komponentit (nappulat, .text-link, haitari); nama
   saannot lisaavat vain sen mita alasivut tarvitsevat: sivun oma otsikkolohko ja yksi luettava
   tekstipalsta. Mitaan etusivun saantoa ei toisteta tassa. */

/* Otsikkolohko on kaksi palstaa: nimike, otsikko ja ingressi vasemmalle, ajanvarausnappula
   oikeaan reunaan otsikon riville. Nappula ankkuroidaan gridin riviin 2 = otsikon rivi, joten
   markupia ei tarvitse muuttaa eika ingressin pituus liikuta sita. */
.page-hero{padding:clamp(2.75rem,6vw,5rem) clamp(1.5rem,7vw,7rem) clamp(1.75rem,3.5vw,2.75rem);
  border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(1.5rem,4vw,3rem)}
.page-hero > *{grid-column:1}
/* Nappula ylareunaan nimikkeen tasalle. Se venyttaisi nimikkeen rivin, jos se olisi vain
   rivilla 1 — nappula on korkeampi kuin yksi tekstirivi — joten se varaa rivit 1-2 ja
   kohdistuu niiden ylareunaan. Nain otsikko ei liiku alaspain. */
.page-hero > .button{grid-column:2;grid-row:1 / span 2;justify-self:end;align-self:start}
/* Otsikolla ei ole alamarginaalia: se kuuluu gridin riville, ei otsikkoon. Muuten nappulan
   pystykeskitys laskettaisiin otsikon + marginaalin korkeudesta ja nappula istuisi puolen
   marginaalin verran liian alhaalla — juuri se sai sen nayttamaan vinolta. */
/* Ei omaa max-widthia: mitta on gridin palsta, joten otsikko rivittyy vasta kun tila loppuu
   — 28ch pakotti pitkat otsikot kahdelle riville vaikka tilaa oli. text-wrap:balance jakaa
   rivit tasan silloin kun rivinvaihto on valttamaton. */
.page-hero h1{font-family:var(--display);font-weight:400;letter-spacing:-.03em;line-height:1.02;
  margin:0;font-size:clamp(1.85rem,3.8vw,3.1rem);text-wrap:balance}
.page-hero .page-lead{max-width:56ch;margin:1.4rem 0 0;font-size:clamp(.92rem,1.15vw,1.02rem);
  line-height:1.7;color:#5c554f}

.prose{padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,7vw,7rem) clamp(3rem,6vw,5.5rem);max-width:82ch}
.prose h2{font-family:var(--display);font-weight:400;letter-spacing:-.025em;line-height:1.08;
  font-size:clamp(1.4rem,2.5vw,2.1rem);margin:clamp(2.25rem,4vw,3rem) 0 .9rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--display);font-weight:500;font-size:clamp(1.1rem,1.7vw,1.35rem);
  line-height:1.15;margin:1.9rem 0 .6rem}
.prose h4{font-family:var(--ui);font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone);margin:1.8rem 0 .5rem}
.prose p{font-size:.95rem;margin:0 0 1.05rem;max-width:70ch}
.prose a{color:var(--wine);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;text-decoration-color:#613d4266}
.prose a:hover,.prose a:focus-visible{text-decoration-color:currentColor}

/* Luettelot: sama ohut viiva merkkina kuin haitarin hintalistoissa, ei pallo. */
.prose-list{list-style:none;margin:0 0 1.35rem;padding:0}
.prose-list li{position:relative;padding-left:1.25rem;margin-bottom:.45rem;font-size:.95rem;max-width:68ch}
.prose-list li::before{content:"";position:absolute;left:0;top:.68em;width:.45rem;height:1px;
  background:var(--wine)}

@media (max-width:900px){
  .prose{max-width:none}
}

/* Kapealla naytolla nappula ei mahdu otsikon viereen: se palaa omaksi rivikseen. */
@media (max-width:760px){
  .page-hero{grid-template-columns:1fr}
  .page-hero > .button{grid-column:1;grid-row:auto;justify-self:start;margin-top:.5rem}
}

/* ===== Ennen ja jalkeen -galleriat =====
   Live-sivut merkitsevat koko leveyden kuvan Bootstrapin col-12:lla; se sailyi merkintana, joten
   leveat kuvat ovat leveita ja loput kahden palstan ruudukossa — puhelimessa yhdessa. */
/* Kuvat sivulla pienempina kuin ennen: palsta on kapeampi kuin sivu, joten pari mahtuu
   rinnakkain ilman etta kumpikaan kasvaa yli luettavan koon. Taysikoko avautuu klikkaamalla. */
.gallery{padding:clamp(2rem,4.5vw,3.5rem) clamp(1.5rem,7vw,7rem) clamp(3rem,6vw,5.5rem);
  max-width:58rem}
.gallery figure{margin:0 0 clamp(1.4rem,3vw,2.25rem)}
.gallery img{width:100%;height:auto;display:block;background:var(--paper-deep)}
.gallery figcaption{margin-top:.65rem;font-family:var(--ui);font-size:.68rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--stone);max-width:60ch}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.5vw,2rem)}
@media (max-width:700px){
  .gallery-grid{grid-template-columns:1fr}
}

/* ===== Yhteydenotto =====
   Kaksi palstaa: lomake ja yhteystiedot. Kentat ovat designin omat — ohut viiva, ei laatikkoa,
   sama kirjainvali kuin muissa pienissa nimikkeissa. */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);
  padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,7vw,7rem) clamp(3rem,6vw,5.5rem);align-items:start}
.contact-grid h2{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.9rem);
  letter-spacing:-.02em;margin:0 0 1rem}
.contact-grid p{font-size:.95rem;margin:0 0 1rem;max-width:52ch}
.contact-grid a{color:var(--wine);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;text-decoration-color:#613d4266}
.contact-grid a:hover{text-decoration-color:currentColor}

.field{display:block;margin-bottom:1.5rem}
.field > span{display:block;margin-bottom:.45rem;font-family:var(--ui);font-size:.63rem;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.field input,.field textarea{width:100%;box-sizing:border-box;font:inherit;font-size:.95rem;
  color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);
  padding:.55rem 0;border-radius:0}
.field textarea{resize:vertical;min-height:8rem}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--wine)}
.field-error{display:block;margin-top:.4rem;font-size:.75rem;color:#a12a12}
.form-note{margin:1.25rem 0 0;font-size:.8rem;color:#5c554f}
.form-note[hidden]{display:none}
.form-sent{border-top:1px solid var(--line);padding-top:1.25rem;font-size:.95rem}

.map-embed{border:1px solid var(--line);width:100%;aspect-ratio:4/3;display:block}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
}

/* ===== Hinnasto =====
   Rivi kerrallaan, ei taulukkoa: nimi vasemmalle, kesto ja hinta oikealle, ohut viiva valiin.
   Nimi linkittaa etusivun samaan hoitoon, jonka haitari avaa kohdistetun lohkon itse. */
.price-list{padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,7vw,7rem) clamp(3rem,6vw,5.5rem);max-width:70rem}
.price-list h2{font-family:var(--ui);font-size:.6rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stone);margin:clamp(2.25rem,4vw,3rem) 0 .35rem}
.price-list h2:first-child{margin-top:0}
.price-rows{list-style:none;margin:0;padding:0}
.price-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
  border-top:1px solid var(--line);padding:.85rem 0}
.price-rows li:last-child{border-bottom:1px solid var(--line)}
.price-name{font-family:var(--display);font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.15}
.price-name a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.price-name a:hover,.price-name a:focus-visible{color:var(--wine);border-bottom-color:currentColor}
.price-meta{flex:0 0 auto;text-align:right;font-family:var(--ui);font-size:.63rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--stone);line-height:1.9}
.price-meta i{font-style:normal;color:var(--ink);margin-left:.85rem}
.price-sub .price-name{padding-left:clamp(.75rem,2vw,1.5rem);font-size:clamp(1.05rem,1.4vw,1.28rem)}

/* Kuvat tekstipalstassa: koko palstan levyisia, sama vaimea pohja kuin gallerioissa jotta
   latautuva kuva ei valahda valkoisena paperin paalla. */
.prose figure{margin:1.4rem 0 1.8rem}
.prose figure img{width:100%;height:auto;display:block;background:var(--paper-deep)}
.prose figcaption{margin-top:.6rem;font-family:var(--ui);font-size:.68rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--stone)}

/* ===== Minusta: teksti ja pätevyydet rinnakkain =====
   Live-sivulla sertifikaatit olivat Bootstrapin karusellissa: kuusi kuvaa yhden takana ja
   JavaScript joka pyoritti niita. Oikeassa palstassa ne ovat kaikki nakyvissa ilman skriptia,
   ja kuvatekstit ovat samat diplomien nimet jotka olivat karusellin alla. */
.about-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem);
  padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,7vw,7rem) clamp(3rem,6vw,5.5rem);align-items:start}
.about-grid .prose{padding:0;max-width:none}
.certificates{border-top:1px solid var(--ink);padding-top:1.25rem}
.certificates figure{margin:0 0 1.75rem}
.certificates img{width:100%;height:auto;display:block;background:var(--paper-deep);
  border:1px solid var(--line)}
.certificates figcaption{margin-top:.55rem;font-size:.78rem;line-height:1.5;color:#5c554f}

@media (max-width:900px){
  .about-grid{grid-template-columns:1fr}
}

/* ===== Upotettu Phorest-kauppa =====
   Eri originin iframe ei kerro sisaltonsa korkeutta, joten kehysta ei voi sovittaa siihen:
   se on korkea ja vierittaa itse. Alla varalinkki, koska upotus voi olla estetty selaimen
   evastesuojauksissa. */
.embed-section{padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,7vw,7rem) clamp(3rem,6vw,5.5rem)}
.embed-frame{width:100%;height:min(1100px,140vh);border:1px solid var(--line);display:block;
  background:var(--white)}
.embed-fallback{margin:1rem 0 0;font-size:.82rem;color:#5c554f}
.embed-fallback a{color:var(--wine)}

/* ===== Teksti ja kuva rinnakkain =====
   .split on pari: teksti ja kuva. .split-reverse kaantaa jarjestyksen, jolloin sivu vuorottelee
   eika pinoa kaikkea samaan reunaan. Puhelimessa kuva tulee aina tekstin ylle, myos kaannetyssa
   parissa, jotta lukujarjestys pysyy samana kuin naytolla. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);
  padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,7vw,7rem);align-items:center}
.split + .split{padding-top:0}
.split-text > h2{font-family:var(--display);font-weight:400;letter-spacing:-.025em;line-height:1.08;
  font-size:clamp(1.4rem,2.5vw,2.1rem);margin:0 0 1rem}
.split-text > p{font-size:.95rem;margin:0 0 1.05rem;max-width:60ch}
.split-text > p:last-child{margin-bottom:0}
.split-media{margin:0}
.split-media img{width:100%;height:auto;display:block;background:var(--paper-deep)}
.split-reverse .split-media{order:-1}

@media (max-width:900px){
  .split{grid-template-columns:1fr;padding-bottom:0}
  .split + .split{padding-top:clamp(2rem,5vw,3rem)}
  .split .split-media{order:-1}
}

/* ===== Patevyydet =====
   Kuusi diplomia pienina ruudukossa, klikkaus avaa taysikokoisena (lightbox.js). Karuselli
   oli tassa vaara muoto: patevyydet ovat lista, joka luetaan kerralla, eika rataa jota
   selataan. object-fit:contain, koska nama ovat asiakirjoja — rajaus leikkaisi tekstin. */
.cert-section{padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,7vw,7rem) clamp(3rem,6vw,5.5rem);
  border-top:1px solid var(--line)}
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));
  gap:clamp(1.25rem,3vw,2.25rem);margin-top:1.5rem}
.cert-grid figure{margin:0}
.cert-grid img{width:100%;height:9rem;object-fit:contain;object-position:top;display:block;
  border:1px solid var(--line);background:var(--paper-deep);padding:.4rem}
.cert-grid figcaption{margin-top:.6rem;font-size:.72rem;line-height:1.45;color:#5c554f}

/* ===== Teksti ja kuva rinnakkain =====
   .split on pari: teksti ja kuva. .split-reverse kaantaa jarjestyksen, jolloin sivu vuorottelee
   eika pinoa kaikkea samaan reunaan. Puhelimessa kuva tulee aina tekstin ylle, myos kaannetyssa
   parissa, jotta lukujarjestys pysyy samana kuin naytolla. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);
  padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,7vw,7rem);align-items:center}
.split + .split{padding-top:0}
.split-text > h2{font-family:var(--display);font-weight:400;letter-spacing:-.025em;line-height:1.08;
  font-size:clamp(1.4rem,2.5vw,2.1rem);margin:0 0 1rem}
.split-text > p{font-size:.95rem;margin:0 0 1.05rem;max-width:60ch}
.split-text > p:last-child{margin-bottom:0}
.split-media{margin:0}
.split-media img{width:100%;height:auto;display:block;background:var(--paper-deep)}
.split-reverse .split-media{order:-1}

@media (max-width:900px){
  .split{grid-template-columns:1fr;padding-bottom:0}
  .split + .split{padding-top:clamp(2rem,5vw,3rem)}
  .split .split-media{order:-1}
}

/* ===== Sertifikaattikaruselli =====
   Rata on scroll-snap, ei kirjasto: yksi kuva kerrallaan, kosketuksella pyyhkaisy ja ilman
   JavaScriptia yha selattava. Nuolet ja pikkukuvat vain vierittavat rataa. */
.cert-section{padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,7vw,7rem) clamp(3rem,6vw,5.5rem);
  border-top:1px solid var(--line)}
.cert-carousel{margin-top:1.5rem}
.cert-track{display:flex;gap:clamp(1rem,2.5vw,2rem);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding-bottom:.5rem}
.cert-track::-webkit-scrollbar{display:none}
.cert-slide{flex:0 0 min(100%,34rem);scroll-snap-align:start;margin:0}
.cert-slide img{width:100%;height:auto;display:block;border:1px solid var(--line);
  background:var(--paper-deep)}
.cert-slide figcaption{margin-top:.7rem;font-size:.82rem;line-height:1.5;color:#5c554f;max-width:52ch}
.cert-controls{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.5rem);margin-top:1.5rem}
.cert-arrow{flex:0 0 auto;width:2.4rem;height:2.4rem;border:1px solid var(--ink);background:transparent;
  color:var(--ink);font:inherit;font-size:.9rem;cursor:pointer;border-radius:50%;line-height:1}
.cert-arrow:hover{background:var(--ink);color:var(--white)}
.cert-thumbs{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none}
.cert-thumbs::-webkit-scrollbar{display:none}
.cert-thumb{flex:0 0 auto;width:3.4rem;height:2.6rem;padding:0;border:1px solid var(--line);
  background:var(--paper-deep);cursor:pointer;overflow:hidden;opacity:.55;transition:opacity .2s}
.cert-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cert-thumb:hover,.cert-thumb:focus-visible{opacity:1}
.cert-thumb.is-current{opacity:1;border-color:var(--wine)}

/* ===== Taysikokoinen kuva =====
   Kuva on aina linkki tiedostoonsa, joten ilman JavaScriptia klikkaus avaa sen selaimessa.
   lightbox.js korvaa sen tallä paallekkaisnaytolla; zoom-in-kursori kertoo etta kuvaa voi
   suurentaa jo ennen klikkausta. */
.zoom{display:block;cursor:zoom-in}
.zoom img{transition:opacity .2s}
.zoom:hover img{opacity:.88}

.lightbox{position:fixed;inset:0;z-index:2147482000;background:#1f1816f2;
  display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem)}
.lightbox[hidden]{display:none}
.lightbox-figure{margin:0;max-width:min(100%,72rem);max-height:100%;display:flex;
  flex-direction:column;align-items:center;gap:.9rem}
.lightbox-figure img{max-width:100%;max-height:82vh;width:auto;height:auto;display:block;
  background:var(--paper-deep)}
.lightbox-caption{margin:0;font-family:var(--ui);font-size:.72rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:#fffdf9c4;text-align:center;max-width:60ch}
.lightbox-caption[hidden]{display:none}
.lightbox-close{position:absolute;top:clamp(.5rem,2vw,1.5rem);right:clamp(.5rem,2vw,1.5rem);
  width:2.6rem;height:2.6rem;border:1px solid #fffdf966;background:transparent;color:var(--white);
  font-size:1.5rem;line-height:1;cursor:pointer;border-radius:50%}
.lightbox-close:hover{background:var(--white);color:var(--ink)}
body.lightbox-open{overflow:hidden}

/* Pitka teksti kuvan vieressa: kuvapalsta pysyy paikallaan vieritettaessa, jottei sen alle
   jaa metrin mittaista tyhjaa. Puhelimessa sticky pois — siella palstat ovat pinossa. */
.split-tall{align-items:start}
.split-tall .split-media{position:sticky;top:clamp(1rem,3vw,2.5rem)}
.split .prose{padding:0;max-width:none}
@media (max-width:900px){
  .split-tall .split-media{position:static}
}

/* ===== Konekaannosmerkinta (vain preview) =====
   Kappale, otsikko tai listan kohta jossa on data-mt, on konekaannetty eika kenenkaan
   lukema. Merkinta on tarkoituksella nakyva mutta ei rikkova: vasemmassa reunassa viiva ja
   hyvin vaalea sävy, jotta teksti on yha luettavissa siina taitossa johon se tulee.
   Julkaistavasta versiosta attribuutit poistetaan, joten naita saantoja ei voi vahingossa
   nahda oikealla sivustolla. Selitetekstia ei ole: korostus ja laskuri riittavat. */
[data-mt]{position:relative;background:#b4552d0f;box-shadow:-.45rem 0 0 #b4552d0f;
  border-left:2px solid #b4552d66;padding-left:.65rem;margin-left:-.65rem}
[data-mt]::after{content:"MT";position:absolute;top:.1rem;right:-1.6rem;font-family:var(--ui);
  font-size:.5rem;font-weight:600;letter-spacing:.12em;color:#b4552d;opacity:.8}

/* ===== Patevyyskaruselli =====
   Sama rakenne kuin etusivun palautekarusellissa, mutta kortin leveys nayttaa kolme kerralla.
   Leveys on CSS:ssa, joten sama JavaScript ohjaa molempia — se vierittaa kortin kerrallaan
   eika tieda montako niita nakyy. Kapeammalla kaksi, puhelimessa yksi. */
.cert-carousel{margin-top:1.5rem}
.cert-track{display:flex;gap:clamp(1rem,2.5vw,2rem);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding-bottom:.25rem}
.cert-track::-webkit-scrollbar{display:none}
.cert-slide{flex:0 0 calc((100% - 2 * clamp(1rem,2.5vw,2rem)) / 3);scroll-snap-align:start;margin:0}
.cert-slide img{width:100%;height:9rem;object-fit:contain;object-position:top;display:block;
  border:1px solid var(--line);background:var(--paper-deep);padding:.4rem}
.cert-slide figcaption{margin-top:.6rem;font-size:.72rem;line-height:1.45;color:#5c554f}
.cert-dots{display:flex;justify-content:center;gap:.55rem;margin-top:clamp(1.25rem,2.5vw,1.75rem)}
.cert-dots button{width:.5rem;height:.5rem;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--ink);background:transparent;transition:background .2s,transform .2s}
.cert-dots button.is-current{background:var(--ink);transform:scale(1.3)}

@media (max-width:900px){
  .cert-slide{flex:0 0 calc((100% - clamp(1rem,2.5vw,2rem)) / 2)}
}
@media (max-width:600px){
  .cert-slide{flex:0 0 100%}
}