/* Etusivu 2026-10: iso satunnainen kuva + kuvalinkit */
html { background:#1c1c1c; }
body { max-width:1100px; margin:24px auto; background:#fff; box-shadow:0 0 30px rgba(0,0,0,.5);
  color:#222; font:16px/1.6 Arial, Helvetica, sans-serif; -webkit-text-size-adjust:100%; }
a { color:#2f5d50; font-weight:bold; }
a:hover { color:#4f8f7c; }
.kuva { position:relative; overflow:hidden; background:#333; }
.kuva img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.kuva .paikka { position:absolute; left:0; right:0; bottom:0; padding:14px 8px 5px; font-size:11px; line-height:1.3;
  letter-spacing:.06em; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.55)); }

#hero { position:relative; aspect-ratio:16 / 7; }
#hero .kuva { position:absolute; inset:0; }
#hero .paikka { text-align:right; padding-right:14px; }
#hero .otsikko { position:absolute; left:0; top:0; padding:26px 30px 40px 30px; color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.6); background:linear-gradient(135deg, rgba(0,0,0,.5), transparent 70%); }
#hero h1 { margin:0; font-size:30px; font-weight:normal; letter-spacing:.12em; line-height:1.2; }
#hero .tagline { font-size:12px; letter-spacing:.3em; }
#hero a.sisaan { display:inline-block; margin-top:16px; color:#fff; font-size:15px; text-decoration:none;
  border:1px solid rgba(255,255,255,.75); padding:6px 14px; background:rgba(0,0,0,.25); }
#hero a.sisaan:hover { background:rgba(0,0,0,.5); }

#valikko { background:#000; color:#ccc; font-size:13px; line-height:1.4; letter-spacing:.05em; padding:7px 24px;
  display:flex; flex-wrap:wrap; gap:4px 18px; }
#valikko a { color:#e8e8e8; font-weight:normal; text-decoration:none; }
#valikko a:hover { color:#fff; text-decoration:underline; }
#valikko a.paa { font-weight:bold; }

#kortit { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; padding:22px 24px 26px; background:#f2f1ed; }
.kortti { background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12); text-decoration:none; display:flex; flex-direction:column; }
.kortti .kuva { aspect-ratio:3 / 2; }
.kortti .paikka { opacity:0; transition:opacity .3s; }
.kortti:hover .paikka, .kortti:focus .paikka { opacity:1; }
.kortti:hover img { transform:scale(1.04); }
.kortti b { display:block; padding:9px 12px 0; color:#2f5d50; font-size:15px; }
.kortti small { display:block; padding:0 12px 11px; color:#666; font-size:12.5px; line-height:1.4; font-weight:normal; }
.kortti:focus-visible { outline:2px solid #2f5d50; outline-offset:2px; }

#ala { font-size:12px; color:#777; padding:10px 24px; border-top:1px solid #e4e2da; display:flex; flex-wrap:wrap; gap:4px 16px; justify-content:space-between; }
#ala a { font-weight:normal; }

@media (max-width:820px) {
  body { margin:0; box-shadow:none; }
  #hero { aspect-ratio:4 / 3; }
  #hero h1 { font-size:22px; }
  #hero .otsikko { padding:20px 18px 30px; }
  #valikko { padding:8px 16px; }
  #kortit { grid-template-columns:repeat(2, minmax(0,1fr)); padding:16px; gap:12px; }
  #ala { padding:10px 16px; }
}
@media (prefers-reduced-motion: reduce) { .kuva img { transition:none; } .kortti:hover img { transform:none; } }