/* Kalastussivusto: majatalon style.css + nämä lisäykset */

/* Yläkuva: tumma järvi, teksti vasemmalla ja piirroskohtaus oikealla */
.khero { position: relative; overflow: clip; background: var(--deep); color: var(--on-deep); padding: calc(var(--head) + clamp(40px, 7vw, 90px)) 0 56px; }
.khero .aurora { opacity: .7; }
.khero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.khero h1 { font-size: clamp(2.5rem, 6.4vw, 5.6rem); line-height: .95; letter-spacing: -.045em; margin: 0 0 22px; text-wrap: balance; }
.khero .lead { font-size: clamp(1.08rem, 1.9vw, 1.35rem); max-width: 40ch; margin: 0 0 28px; color: color-mix(in srgb, var(--on-deep) 88%, transparent); }
.khero .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.khero-art .icescene { box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.kdock { position: relative; z-index: 2; list-style: none; margin: clamp(36px, 6vw, 70px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid color-mix(in srgb, var(--on-deep) 18%, transparent); }
.kdock li { padding: 22px 18px 26px 0; display: flex; flex-direction: column; gap: 4px; }
.kdock b { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.03em; line-height: 1; }
.kdock span { font-size: .95rem; color: color-mix(in srgb, var(--on-deep) 75%, transparent); }
@media (max-width: 900px) { .khero-grid { grid-template-columns: 1fr; } .kdock { grid-template-columns: repeat(2, 1fr); } }

/* Lyhyesti-laatikko: tekoälyhaut ja nopeat lukijat */
.kshort { position: relative; margin: clamp(-34px, -3vw, -24px) 0 0; z-index: 3; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 26px; box-shadow: 0 24px 50px -30px rgba(5,16,24,.45); display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: baseline; }
.kshort-l { font-family: var(--display); font-weight: 800; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bob); }
.kshort p { margin: 0; font-size: 1.05rem; }
@media (max-width: 700px) { .kshort { grid-template-columns: 1fr; } }
.khead + .wrap .kshort { margin-top: -28px; }

/* Tarjoukset */
/* Näkyvissä on yksi kortti kerrallaan (vuodenajan mukaan), joten se saa koko leveyden. */
.koffers { display: grid; grid-template-columns: 1fr; gap: 18px; }
.koffer { position: relative; display: grid; grid-template-columns: 180px 1fr; gap: 32px; align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.koffer.k-ice { background: linear-gradient(160deg, #0f3147, #0a2333); color: #eaf4f8; border-color: transparent; }
.koffer.k-summer { background: radial-gradient(120% 90% at 18% 22%, #b9c99c 0%, transparent 60%), linear-gradient(160deg, #a9bb8c, #8ea275); color: #10241a; border-color: transparent; }
/* Kesäkoho suolammen värisellä taustalla: renkaat ja siima valkoisina, jotta ne erottuvat */
.k-summer .bobber .ripples ellipse { stroke: rgba(255,255,255,.9); stroke-width: 2; }
.k-summer .bobber line { stroke: #f4f7ee; opacity: 1; }
.k-summer .btn.ghost { color: #10241a; border-color: #10241a; }
/* Tumma tila: kortin teksti ei saa periä vaaleaa tekstiväriä vaalealle taustalle */
@media (prefers-color-scheme: dark) {
  .koffer.k-summer { background: radial-gradient(120% 90% at 18% 22%, #3a5233 0%, transparent 60%), linear-gradient(160deg, #2e4529, #1c2f1b); color: #eaf4e4; }
  .k-summer .btn.ghost { color: #eaf4e4; border-color: #eaf4e4; }
}
.koffer-art { width: 180px; }
@media (min-width: 900px) { .koffer .checks { grid-template-columns: 1fr 1fr; column-gap: 28px; } }

.koffer h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 10px 0 8px; }
.koffer h4 { margin: 16px 0 6px; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; opacity: .75; }
.koffer p { margin: 0; }
.chip-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--bob); color: var(--on-bob); font-weight: 700; font-size: .85rem; }
.checks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.checks li { padding-left: 28px; position: relative; }
.checks li::before { content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; border-radius: 50%; background: var(--bob); -webkit-mask: radial-gradient(circle at 50% 50%, #000 0 4px, transparent 5px), linear-gradient(#000, #000); mask: none; box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--bob) 35%, transparent); }
.k-ice .btn.ghost { color: #eaf4f8; border-color: #eaf4f8; }
@media (max-width: 560px) { .koffer { grid-template-columns: 1fr; } .koffer-art { width: 110px; } }

/* Vaiheet */
.ksteps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.ksteps li { padding: 26px; border-radius: var(--r); background: color-mix(in srgb, var(--on-deep) 7%, transparent); border: 1px solid color-mix(in srgb, var(--on-deep) 14%, transparent); }
.ksteps .n { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--bob); color: var(--on-bob); font-family: var(--display); font-weight: 800; font-size: 1.2rem; margin-bottom: 14px; }
.ksteps b { display: block; font-size: 1.2rem; margin-bottom: 6px; }
.ksteps p { margin: 0; color: color-mix(in srgb, var(--on-deep) 80%, transparent); }
@media (max-width: 800px) { .ksteps { grid-template-columns: 1fr; } }

/* Majoitus */
.kstay { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 5vw, 60px); align-items: center; }
.kstay-pic { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--bg2); }
.kpoints { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpoints li { padding: 14px; border-radius: 16px; background: var(--bg2); display: flex; flex-direction: column; }
.kpoints b { font-family: var(--display); font-size: 1.25rem; }
.kpoints span { color: var(--muted); font-size: .92rem; }
@media (max-width: 800px) { .kstay { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .kpoints { grid-template-columns: 1fr; } }

/* Taulukot */
.ktable-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); margin-bottom: 18px; }
.ktable { width: 100%; border-collapse: collapse; font-size: .98rem; }
.ktable th, .ktable td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ktable thead th { background: var(--deep); color: var(--on-deep); font-weight: 600; }
.ktable tbody tr:last-child > * { border-bottom: 0; }
.ktable .src { font-size: .85rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  .ktable thead { display: none; }
  .ktable tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .ktable th, .ktable td { display: block; padding: 2px 0; border: 0; }
}

/* Luvat */
.kpermit { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(26px, 5vw, 60px); align-items: center; }
.kpermit-art { background: var(--deep); border-radius: var(--r); padding: clamp(18px, 3vw, 30px); }
@media (max-width: 800px) { .kpermit { grid-template-columns: 1fr; } .kpermit-art { max-width: 320px; } }
.kfee { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.kfee div { padding: 18px; border-radius: 16px; background: var(--bg2); display: flex; flex-direction: column; gap: 4px; }
.kfee b { font-family: var(--display); font-size: 2rem; letter-spacing: -.03em; }
@media (max-width: 520px) { .kfee { grid-template-columns: 1fr; } }

/* Emäntä */
.khost { display: grid; grid-template-columns: 220px 1fr; gap: 30px; align-items: center; }
.khost-pic { width: 220px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--bg2); }
.khost-pic img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .khost { grid-template-columns: 1fr; } .khost-pic { width: 160px; } }

/* Retkisivu */
.ktrip { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(26px, 5vw, 60px); align-items: start; }
.ktrip h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 10px; }
.ktrip h2:not(:first-child) { margin-top: 28px; }
.ksonar { background: var(--deep); border-radius: var(--r); padding: 26px 16px; }
@media (max-width: 860px) { .ktrip { grid-template-columns: 1fr; } }
.kfacts { margin: 18px 0 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.kfacts div { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.kfacts div:last-child { border-bottom: 0; }
.kfacts dt { font-weight: 700; }
.kfacts dd { margin: 0; }
.khead .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.klakes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 26px; }
.klakes article { padding: 22px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.klakes h2 { margin: 0 0 4px; font-size: 1.5rem; }
.klakes .src { font-size: .9rem; color: var(--muted); }
@media (max-width: 700px) { .klakes { grid-template-columns: 1fr; } }

/* Lomake */
.kform-sec { background: var(--bg2); }
.kform-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(26px, 5vw, 60px); align-items: start; }
.kform-grid h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin: 0 0 12px; }
.kform { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 3vw, 30px); box-shadow: 0 30px 60px -40px rgba(5,16,24,.5); }
.ktrips { border: 0; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ktrips legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
@media (max-width: 560px) { .ktrips { grid-template-columns: 1fr; } }
.kform .chk { margin-bottom: 10px; align-items: center; }
.kform .chk input { width: 20px; height: 20px; accent-color: var(--bob); }
.kform .knights select { display: block; width: 120px; margin-top: 4px; padding: 10px 12px; font: inherit; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; }
.kform .knights[hidden], .kform .kguide[hidden] { display: none; }
.kform .btn { width: 100%; justify-content: center; margin-top: 6px; }
.kdate-msg { min-height: 1.2em; margin: -6px 0 10px; font-weight: 600; color: #b3261e; }
.kform-msg { min-height: 1.4em; margin: 12px 0 0; font-weight: 600; }
.kform-msg.ok { color: #1b6b3a; }
.kform-msg.err { color: #b3261e; }
.kform.sent > :not(.kform-msg) { opacity: .35; pointer-events: none; }
.kcall .btn { font-size: 1.1rem; }
.muted { color: var(--muted); }
@media (max-width: 860px) { .kform-grid { grid-template-columns: 1fr; } }

/* Lähteet */
.ksources { padding: 40px 0 60px; }
.ksources h2 { font-size: 1.1rem; margin: 0 0 8px; }
.ksources ul { margin: 0 0 8px; padding-left: 20px; }

/* Kielivalinta */
.klangs { display: flex; gap: 2px; }
.klangs a, .klangs-m a { padding: 6px 8px; border-radius: 8px; font-weight: 700; font-size: .85rem; text-decoration: none; opacity: .7; }
.klangs a[aria-current], .klangs-m a[aria-current] { opacity: 1; box-shadow: inset 0 -2px 0 var(--bob); border-radius: 0; }
.klangs-m { display: none; }
@media (max-width: 1060px) {
  .klangs { display: none; }
  .nav.open .klangs-m { display: flex; gap: 12px; margin-top: 18px; }
  .nav.open .klangs-m a { font-size: 1.05rem; }
}

/* Venäjää puhuva yhteyshenkilö */
.kru { margin: 10px 0 0; font-weight: 600; }
.kru a, .kcall a, a[href^="tel:"] { white-space: nowrap; }
.site-footer .kru { font-weight: 400; }

/* Järvet: vene järven rannalla taulukon vieressä */
.klakes-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px 60px; align-items: center; margin-bottom: clamp(28px, 4vw, 48px); }
.klakes-head h2 { margin: 0 0 10px; }
.klakes-head p { margin: 0; color: var(--muted); font-size: 1.1rem; }
.klakes-boat .illo { border-radius: var(--r); box-shadow: 0 30px 60px -40px rgba(5,16,24,.5); }
/* Kesän järvikuva: pyöristetty kortti, kevyt varjo ja hidas liuku, jotta kuva elää kuten muutkin kohtaukset. */
.klakes-photo { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); box-shadow: 0 40px 70px -40px rgba(5,16,24,.6); background: #2a6fa8; }
.klakes-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 60% 55%; animation: klakesDrift 26s ease-in-out infinite alternate; }
.klakes-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(5,16,24,.18) 100%); pointer-events: none; }
@keyframes klakesDrift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-2.5%, -1.5%); } }
@media (prefers-reduced-motion: reduce) { .klakes-photo img { animation: none; } }
@media (max-width: 800px) { .klakes-head { grid-template-columns: 1fr; } }

/* Päivävalitsin ja kalenteri-ikkuna */
.kdate-f { margin-bottom: 14px; }
.kdate-l { display: block; font-weight: 600; }
.kdate { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 4px; padding: 12px 14px; font: inherit; font-weight: 400; color: var(--muted); text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.kdate.has { color: var(--ink); font-weight: 600; }
.kdate:hover, .kdate:focus-visible { border-color: var(--bob); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bob) 22%, transparent); }
.kdate-i { width: 20px; height: 20px; flex: none; color: var(--bob); }
dialog.kcal-dlg { border: 0; padding: 0; width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; background: var(--surface); color: var(--ink); border-radius: var(--r); box-shadow: 0 40px 90px -30px rgba(4, 12, 18, .6); }
dialog.kcal-dlg::backdrop { background: rgba(4, 12, 18, .55); backdrop-filter: blur(3px); }
.kcal-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px 4px; font-family: var(--display); font-size: 1.2rem; }
.kcal-x { border: 1px solid var(--line); background: var(--bg); color: inherit; font: inherit; font-size: .9rem; font-weight: 600; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.kcal-dlg .bkcal { border: 0; }
.kcal-dlg .cal-nav button:disabled { opacity: .3; cursor: default; }
@media (max-width: 640px) {
  dialog.kcal-dlg { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; }
}

/* Tuulastus: oma yökortti, iso kuvitus */
.koffer.k-tuulastus { grid-template-columns: minmax(260px, 46%) 1fr; background: radial-gradient(90% 120% at 12% 50%, #1a3245 0%, transparent 62%), linear-gradient(160deg, #0b1724, #070f18); color: #eef3f6; border-color: transparent; }
.k-tuulastus .koffer-art { width: 100%; border-radius: calc(var(--r) - 6px); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.75); }
.k-tuulastus .koffer-art .illo { background: #07111b; }
.k-tuulastus p { color: rgba(238,243,246,.85); }
@media (max-width: 860px) { .koffer.k-tuulastus { grid-template-columns: 1fr; } }
.k-tuulastus .actions { margin-top: 22px; }

/* Kuvat: galleria talvi ja kesä erikseen, nykyinen vuodenaika ensin */
.kgal { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); }
html[data-season="kesa"] .kgal-t { order: 2; }
.kgal-sec h2 { margin: 0 0 18px; }
.kgal-sec h2 + .gallery { margin-bottom: 8px; }
.kgal-sec .gallery + h2 { margin-top: 40px; }
.kgal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.kgal-tabs a { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); font-weight: 700; text-decoration: none; }
[id="talvi"], [id="kesa"], [id="tuulastus"] { scroll-margin-top: 90px; }
.kphotos { padding-top: 0; }
.kphotos h2 { margin: 0; }
.k-thumbs { margin: 18px 0 0; }
.k-thumbs a { background: rgba(255,255,255,.06); }