/* Studio Virta: kuvapaneelit, usein kysytyt, sitaattinauha ja mobiilipalkki. */

/* ---------------------------------------------------------------- kuvapaneelit
   Paneelit ovat tummia ja kuvioituja, jotta sivu ei ole tyhjän valkoinen
   ennen kuin asiakkaan omat kuvat ovat paikoillaan. */
.slot{
  background:#14171A;
  border:1px solid #262A2F;
}
.slot::before{
  content:"";position:absolute;inset:0;opacity:1;background-image:none;
}
.slot .cap{
  color:#A7A29A;
  background:linear-gradient(to top,rgba(20,23,26,.96) 38%,rgba(20,23,26,0));
  padding:18px 20px;
}
.slot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(0,0,0,.55);
}

/* tolppa: vinot raidat kuin parturin tolpassa */
.kuva-tolppa::before{
  background-image:repeating-linear-gradient(24deg,
    rgba(140,47,57,.62) 0 34px, transparent 34px 74px);
}
/* kampa: pystyviivat eri korkeuksilla */
.kuva-kampa::before{
  background-image:
    repeating-linear-gradient(90deg, rgba(239,237,232,.16) 0 2px, transparent 2px 19px),
    linear-gradient(to bottom, transparent 0 42%, rgba(140,47,57,.5) 42% 46%, transparent 46%);
}
/* kaaret: samankeskiset renkaat */
.kuva-kaari::before{
  background-image:repeating-radial-gradient(circle at 50% 72%,
    transparent 0 40px, rgba(239,237,232,.11) 40px 42px);
}
/* kartta: katuverkko ja sijaintipiste */
.kuva-kartta::before{
  background-image:
    repeating-linear-gradient(0deg, rgba(239,237,232,.09) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(239,237,232,.09) 0 1px, transparent 1px 46px),
    radial-gradient(circle at 50% 50%, rgba(168,64,74,.95) 0 7px, transparent 8px),
    radial-gradient(circle at 50% 50%, rgba(168,64,74,.28) 0 22px, transparent 23px);
}

/* ---------------------------------------------------------------- sitaattinauha */
.sitaatti{
  background:var(--claret);color:#fff;
  padding:clamp(52px,7vw,86px) 0;
}
.sitaatti blockquote{
  margin:0;font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:300;
  font-size:clamp(23px,3.4vw,40px);line-height:1.25;letter-spacing:-.01em;max-width:24ch;
}
.sitaatti .kuka{
  margin-top:26px;font-family:Archivo,sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);
}

/* ---------------------------------------------------------------- usein kysytyt */
.kysytyt{border-top:1px solid var(--line)}
.kysytyt details{border-bottom:1px solid var(--line)}
.kysytyt summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(17px,2vw,21px);
  letter-spacing:-.02em;
}
.kysytyt summary::-webkit-details-marker{display:none}
.kysytyt summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  margin-top:-7px;border-right:2px solid var(--claret);border-bottom:2px solid var(--claret);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.kysytyt details[open] summary::after{transform:rotate(-135deg)}
.kysytyt summary:hover{color:var(--claret)}
.kysytyt .vastaus{padding:0 0 26px;color:var(--ink-soft);max-width:68ch}
.kysytyt .vastaus p{margin:0 0 12px}
.kysytyt .vastaus p:last-child{margin:0}

/* ---------------------------------------------------------------- lupaus */
.lupaus{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--ink-soft);max-width:62ch;
}
.lupaus b{font-family:Archivo,sans-serif;letter-spacing:-.01em;color:var(--ink);font-weight:700}

/* ---------------------------------------------------------------- mobiilipalkki */
.mobiilicta{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  background:rgba(17,18,20,.97);backdrop-filter:blur(10px);
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  gap:10px;align-items:center;justify-content:space-between;
  border-top:1px solid #2A2E33;
  transform:translateY(105%);transition:transform .35s var(--ease);
}
.mobiilicta.nakyy{transform:none}
.mobiilicta .teksti{color:var(--bone);font-size:13px;line-height:1.3;min-width:0}
.mobiilicta .teksti b{display:block;font-family:Archivo,sans-serif;font-size:14.5px;letter-spacing:-.01em}
.mobiilicta .teksti span{color:var(--grey-2);font-size:12px}
.mobiilicta .napit{display:flex;gap:8px;flex:0 0 auto}
.mobiilicta a{
  font-family:Archivo,sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;padding:11px 14px;white-space:nowrap;
}
.mobiilicta a.soita{border:1px solid rgba(247,246,243,.4);color:var(--bone)}
.mobiilicta a.varaa{background:var(--claret);color:#fff}
@media(max-width:820px){
  .mobiilicta{display:flex}
  body{padding-bottom:0}
  footer{padding-bottom:96px}
}

/* ---------------------------------------------------------------- pikkusäädöt */
#meista{background:var(--paper-2)}
.ohjeet{
  margin-top:14px;font-size:14px;color:var(--grey);
}
.ohjeet a{color:var(--claret);text-decoration:underline;text-underline-offset:3px}
.ohjeet a:hover{color:var(--ink)}
footer .linkit{display:flex;gap:16px;flex-wrap:wrap}
footer .linkit a{color:var(--grey-2);text-decoration:none}
footer .linkit a:hover{color:var(--bone)}

/* hero-paneelit samaan korkeuteen, ettei viereen jää tyhjää */
.hero-media{align-items:stretch}
.hero-media .slot{aspect-ratio:auto;min-height:clamp(230px,29vw,430px)}
@media(max-width:820px){.hero-media .slot{min-height:210px}}