/* Mostbet FI — itsekkyydenmuistomerkki.fi — spesifikaatiolomake-ulkoasu */

:root{
  /* virallisen brändin tokenit */
  --sini-tumma:#003266;
  --sini:#094B95;
  --sini-vaalea:#428CDC;
  --sini-vaalea2:#509AEA;
  --oranssi:#FA4D00;
  --oranssi-2:#FA5E00;
  --kulta:#FFBA00;
  --harmaa-vaalea:#DDE4EC;
  --harmaa:#E8ECF1;
  --tumma:#02101F;

  /* lisäsävyt */
  --valkoinen:#FFFFFF;
  --teksti:#0F2033;
  --teksti-vaimea:#526379;
  --viiva:#D7E0EA;
  --viiva-tumma:#C4D0DD;

  /* asteikko */
  --valli-1:4px; --valli-2:8px; --valli-3:12px; --valli-4:16px;
  --valli-6:24px; --valli-8:32px; --valli-12:48px; --valli-16:64px;

  /* kerrokset */
  --z-pudotus:100; --z-kiinnitetty:200; --z-ylapeite:900;

  --fontti: 'Roboto', Arial, sans-serif;
  --fontti-numero: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  margin:0;
  font-family:var(--fontti);
  color:var(--teksti);
  background:var(--valkoinen);
  line-height:1.6;
  font-size:16px;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--fontti); font-weight:700; color:var(--sini-tumma); line-height:1.25; margin:0 0 var(--valli-4); }
h1{ font-size:clamp(1.75rem, 4vw + 1rem, 2.75rem); }
h2{ font-size:clamp(1.25rem, 1.6vw + 1rem, 1.5rem); }
h3{ font-size:1.05rem; color:var(--sini); }
p{ margin:0 0 var(--valli-4); }
ul{ margin:0 0 var(--valli-4); padding-left:1.2em; }
li{ margin-bottom:var(--valli-2); }

:focus-visible{ outline:3px solid var(--sini-vaalea); outline-offset:2px; }

.ohita{
  position:absolute; left:-999px; top:0;
  background:var(--sini-tumma); color:#fff; padding:12px 20px;
  z-index:1100; border-radius:0 0 8px 0;
}
.ohita:focus{ left:0; }

.kehys{ max-width:1080px; margin-inline:auto; padding-inline:var(--valli-4); }

@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:auto; } /* varsinainen sulava vieritys hoidetaan JS:llä (respektoi reduced-motion) */
}

/* ---------- painikkeet ---------- */
.nappula{
  display:inline-block;
  border-radius:50px;
  color:#fff;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.02em;
  text-decoration:none;
  background:linear-gradient(0deg, var(--oranssi), var(--oranssi-2));
  box-shadow:0 10px 30px rgba(250,65,0,.35);
  border:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.nappula:hover, .nappula:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(250,65,0,.45);
}
.nappula--iso{ font-size:18px; padding:14px 32px; }
.nappula--keski{ font-size:16px; padding:11px 26px; margin-top:var(--valli-2); }
.nappula--pieni{ font-size:14px; padding:8px 20px; }

/* ---------- ylätunniste (kansi) ---------- */
.kansi{
  background:var(--sini-tumma);
  padding-block:var(--valli-3);
}
.kansi-rivi{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--valli-4);
}
.merkki{ display:inline-flex; line-height:0; }
.merkki img{ width:150px; height:auto; }

/* ---------- hero / esittely ---------- */
.esittely{
  background:linear-gradient(180deg, var(--sini-tumma) 0%, var(--sini) 100%);
  color:#fff;
  padding-block:var(--valli-12) var(--valli-8);
}
.esittely h1{ color:#fff; }
.esittely p{ color:#E9F0F8; max-width:64ch; }

/* ---------- yleiskatsaus (esitaulukko) ---------- */
.tieto-rivi--ilman-numeroa{
  background:var(--harmaa);
  padding-block:var(--valli-8);
}

/* ---------- hakemisto (allekkainen ei-kiinnitetty osoitepaneeli) ---------- */
.hakemisto{
  padding-block:var(--valli-6);
  border-bottom:1px solid var(--viiva);
}
.hakemisto .paneeli-otsikko{ margin-bottom:var(--valli-3); }
.hakemisto-ruudukko{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
.hakemisto-rivi{
  display:flex;
  align-items:baseline;
  gap:var(--valli-3);
  padding-block:10px;
  border-top:1px solid var(--viiva);
}
.hakemisto-rivi:last-child{ border-bottom:1px solid var(--viiva); }
.hakemisto-nro{
  font-family:var(--fontti-numero);
  font-variant-numeric:tabular-nums;
  color:var(--sini-vaalea);
  font-weight:700;
  min-width:2.2ch;
}
.hakemisto-linkki{
  text-decoration:none;
  color:var(--sini-tumma);
  font-weight:500;
  border-bottom:1px solid transparent;
}
.hakemisto-linkki:hover, .hakemisto-linkki:focus-visible{
  border-bottom-color:var(--sini-vaalea);
}
@media (min-width:40em){
  .hakemisto-ruudukko{ grid-template-columns:1fr 1fr; column-gap:var(--valli-8); }
}

/* ---------- paneelin otsikko (widgeteille, ei h2/h3) ---------- */
.paneeli-otsikko{
  font-family:var(--fontti-numero);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--teksti-vaimea);
}

/* ---------- spesifikaatiolistan runko ---------- */
.tieto-luettelo{ counter-reset:osio; }

.tieto-rivi{
  border-top:1px solid var(--viiva);
  padding-block:var(--valli-8);
}
.tieto-rivi:not(.tieto-rivi--ilman-numeroa){
  counter-increment:osio;
}
.tieto-ruudukko{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--valli-3) var(--valli-8);
}
@media (min-width:40em){
  .tieto-ruudukko{ grid-template-columns:minmax(140px,220px) 1fr; }
}

.tieto-tunniste{ position:relative; }
.tieto-rivi:not(.tieto-rivi--ilman-numeroa) .tieto-tunniste::before{
  content: counter(osio, decimal-leading-zero);
  display:block;
  font-family:var(--fontti-numero);
  font-variant-numeric:tabular-nums;
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--sini-vaalea);
  margin-bottom:var(--valli-2);
}
.tieto-tunniste h2{ margin:0; }
.tieto-sisalto h3{ margin-top:var(--valli-4); }

/* ---------- taulukot (hiusviiva-rivit, ei kortteja) ---------- */
.taulukko-viiva{
  overflow-x:auto;
  margin-block:var(--valli-4);
  -webkit-overflow-scrolling:touch;
}
.taulukko-viiva table{
  width:100%;
  min-width:420px;
  border-collapse:collapse;
  font-size:.95rem;
}
.taulukko-viiva th, .taulukko-viiva td{
  text-align:left;
  padding:10px 14px;
  border-bottom:1px solid var(--viiva);
  vertical-align:top;
}
.taulukko-viiva th{
  font-family:var(--fontti-numero);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--teksti-vaimea);
  border-bottom:2px solid var(--viiva-tumma);
}
.taulukko-viiva td:first-child{ font-weight:500; color:var(--sini-tumma); white-space:nowrap; }
.taulukko-viiva td{ font-variant-numeric:tabular-nums; }

/* ---------- bonuskortti ---------- */
.bonuskortti{ margin-block:var(--valli-6); }
.bonuskortti-ruudukko{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(150px,100%), 1fr));
  gap:1px;
  background:var(--viiva);
  border:1px solid var(--viiva);
  margin-top:var(--valli-3);
}
.bonuskortti-rivi{
  background:var(--valkoinen);
  padding:var(--valli-4);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.bonuskortti-arvo{
  font-family:var(--fontti-numero);
  font-variant-numeric:tabular-nums;
  font-size:1.5rem;
  font-weight:700;
  color:var(--sini-tumma);
}
.bonuskortti-nimike{ font-size:.82rem; color:var(--teksti-vaimea); }

/* ---------- pelityypit (chipit) ---------- */
.pelityypit{
  display:flex;
  flex-wrap:wrap;
  gap:var(--valli-2);
  margin-block:var(--valli-4);
}
.pelityypit-nimike{
  border:1px solid var(--viiva-tumma);
  border-radius:50px;
  padding:6px 16px;
  font-size:.85rem;
  color:var(--sini-tumma);
  font-weight:500;
}

/* ---------- pelinäytteet (hover-play) ---------- */
.pelinaytteet{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(150px,100%), 1fr));
  gap:var(--valli-3);
  margin-block:var(--valli-4);
}
.pelinaytteet-kortti{
  position:relative;
  display:block;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:290/350;
}
.pelinaytteet-kortti img{
  width:100%; height:100%; object-fit:cover;
}
.pelinaytteet-toisto{
  position:absolute; inset:auto 0 0 0;
  background:linear-gradient(0deg, rgba(2,16,31,.85), transparent);
  color:#fff;
  font-size:.85rem;
  font-weight:700;
  padding:20px 12px 10px;
  text-align:center;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
}
.pelinaytteet-kortti:hover .pelinaytteet-toisto,
.pelinaytteet-kortti:focus-visible .pelinaytteet-toisto{
  opacity:1;
  transform:translateY(0);
}

/* ---------- tarjoaja-logot ---------- */
.tarjoaja-logo-rivi{ margin-block:var(--valli-6); }
.tarjoaja-logo-ruudukko{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--valli-6);
  margin-top:var(--valli-3);
}
.tarjoaja-logo{ height:32px; width:auto; filter:grayscale(100%); opacity:.75; }

/* ---------- maksukentta ---------- */
.maksukentta{ margin-block:var(--valli-6); }
.maksukentta-rivi{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--valli-6);
  margin-top:var(--valli-3);
}

/* ---------- FAQ / kysymyslohkot ---------- */
.kysymyslohko-luettelo{ display:flex; flex-direction:column; gap:0; }
.kysymyslohko{
  border-top:1px solid var(--viiva);
  padding-block:var(--valli-3);
}
.kysymyslohko:last-child{ border-bottom:1px solid var(--viiva); }
.kysymyslohko summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:baseline;
  gap:var(--valli-3);
}
.kysymyslohko summary::-webkit-details-marker{ display:none; }
.kysymyslohko summary h3{ margin:0; color:var(--sini-tumma); }
.kysymyslohko summary::before{
  content:'+';
  font-family:var(--fontti-numero);
  font-weight:700;
  color:var(--sini-vaalea);
  font-size:1.1rem;
  line-height:1;
  flex:0 0 auto;
}
.kysymyslohko[open] summary::before{ content:'–'; }
.kysymyslohko p{ margin-top:var(--valli-3); }

/* ---------- alatunniste (jalki) ---------- */
.jalki{
  background:var(--tumma);
  color:#C8D3DE;
  padding-block:var(--valli-12);
  margin-top:var(--valli-12);
}
.jalki-sisalto{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--valli-3);
}
.merkki--jalki img{ width:150px; filter:brightness(0) invert(1); opacity:.9; }
.jalki-ika{ font-weight:700; color:#fff; }
.jalki-oikeudellinen{ font-size:.85rem; color:#9FB0C0; max-width:70ch; }
.jalki-copy{ font-size:.8rem; color:#7C8EA0; }

/* ---------- takaisin ylös ---------- */
.nappula-ylos{
  position:fixed;
  right:var(--valli-4);
  bottom:var(--valli-4);
  width:46px; height:46px;
  border-radius:50%;
  border:none;
  background:linear-gradient(0deg, var(--oranssi), var(--oranssi-2));
  color:#fff;
  font-size:20px;
  box-shadow:0 8px 24px rgba(250,65,0,.4);
  cursor:pointer;
  z-index:var(--z-kiinnitetty);
}
.nappula-ylos[hidden]{ display:none; }

/* ---------- evästeilmoitus ---------- */
.evasteet{
  position:fixed;
  left:0; right:0; bottom:0;
  background:var(--sini-tumma);
  color:#fff;
  z-index:var(--z-ylapeite);
  box-shadow:0 -6px 24px rgba(2,16,31,.25);
}
.evasteet[hidden]{ display:none; }
.evasteet-sisalto{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--valli-3);
  padding-block:var(--valli-3);
}
.evasteet-sisalto p{ margin:0; font-size:.9rem; max-width:60ch; }

/* ---------- leveämmät ruudut ---------- */
@media (min-width:64em){
  .kehys{ padding-inline:var(--valli-6); }
}