/* ============================================================
   Saalisgalleria — sivukohtaiset tyylit
   Mobile-first: kortit, lomake-sheet, FAB, lightbox.
   ============================================================ */

.sg-page{padding-top:clamp(28px,5vw,64px);}
/* hidden-attribuutin pitää voittaa myös .btn:n display-sääntö */
.sg-page [hidden], .sg-fab[hidden]{display:none !important;}
/* Mobiilissa ilmoitusnappina toimii kelluva FAB — yläosan nappi vain isoilla näytöillä */
.sg-cta-row{display:none;margin-top:20px;}
@media(min-width:900px){.sg-cta-row{display:block;}}

/* ---------- Suodattimet ---------- */
/* Ryhmiä 1–2 (laji + viehe); viehe ilmestyy kun galleriassa on
   vähintään kahta viehetyyppiä, samoin kuin lajisuodatin. */
.sg-filters{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}
.sg-fgroup{display:flex;gap:8px;align-items:center;overflow-x:auto;padding-bottom:4px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.sg-fgroup::-webkit-scrollbar{display:none;}
.sg-flabel{flex:none;font-size:12.5px;font-weight:600;color:var(--ink-faint);min-width:44px;}
.sg-filters button{flex:none;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);
  font-family:var(--sans);font-size:13px;font-weight:600;padding:8px 14px;border-radius:20px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;}
.sg-filters button:hover{border-color:var(--accent);color:var(--accent-deep);}
.sg-filters button.active{background:var(--accent);border-color:var(--accent);color:var(--on-river);}

/* ---------- Galleriaruudukko ---------- */
.sg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media(min-width:680px){.sg-grid{grid-template-columns:repeat(3,1fr);gap:14px;}}
@media(min-width:1000px){.sg-grid{grid-template-columns:repeat(4,1fr);gap:16px;}}

.sg-card{position:relative;border:none;padding:0;cursor:pointer;border-radius:var(--radius-lg);
  overflow:hidden;background:var(--paper-3);aspect-ratio:4/5;text-align:left;font-family:inherit;
  box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s;display:block;width:100%;}
.sg-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.sg-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.sg-card .grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,oklch(0.2 0.04 240 / .78) 100%);}
.sg-card .info{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;color:oklch(0.99 0.005 230);}
.sg-card .sp{font-family:var(--serif);font-size:15.5px;font-weight:600;line-height:1.2;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.sg-card .sp .cr{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--pine);color:var(--on-river);padding:2px 6px;border-radius:10px;}
.sg-card .meta{font-size:11.5px;opacity:.85;margin-top:2px;}
@media(min-width:680px){
  .sg-card .sp{font-size:17px;}
  .sg-card .info{padding:12px 14px;}
  .sg-card .meta{font-size:12.5px;}
}

.sg-empty{text-align:center;padding:44px 0;color:var(--ink-soft);}
.sg-more-row{display:flex;justify-content:center;margin-top:26px;}

/* ---------- Kelluva ilmoitusnappi ---------- */
.sg-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:35;
  display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
  background:var(--accent);color:var(--on-river);font-family:var(--sans);font-weight:600;font-size:14.5px;
  padding:14px 20px;border-radius:32px;box-shadow:var(--shadow-lg);
  transition:transform .15s,filter .15s;}
.sg-fab:hover{filter:brightness(1.06);}
.sg-fab:active{transform:scale(.97);}
.sg-fab .plus{font-size:19px;font-weight:700;line-height:1;}
body.menu-open .sg-fab{display:none;}
@media(min-width:900px){.sg-fab{display:none;}}

/* ---------- Lomake-sheet ---------- */
/* Mobiilissa pohjasta nouseva sheet, isolla näytöllä keskitetty modaali */
.modal.sg-sheet{width:100%;max-width:none;left:0;top:auto;bottom:0;transform:translateY(8%);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:93dvh;
  padding-bottom:env(safe-area-inset-bottom);}
.modal-root.open .modal.sg-sheet{transform:translateY(0);}
@media(min-width:680px){
  .modal.sg-sheet{width:min(94vw,560px);left:50%;top:50%;bottom:auto;transform:translate(-50%,-46%);
    border-radius:var(--radius-lg);max-height:90vh;}
  .modal-root.open .modal.sg-sheet{transform:translate(-50%,-50%);}
}

.sg-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.field select, .field textarea, .field input[type=date]{
  width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;
  font-family:inherit;font-size:15px;color:var(--ink);background:var(--paper);}
.field select:focus, .field textarea:focus, .field input[type=date]:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);}
.field textarea{resize:vertical;min-height:72px;}
.field input[type=date]{min-height:46px;-webkit-appearance:none;appearance:none;}

/* Kuvan valinta */
.sg-photo-input{position:relative;border:1.5px dashed var(--line);border-radius:var(--radius-lg);
  background:var(--paper-2);overflow:hidden;transition:border-color .15s;}
.sg-photo-input:hover{border-color:var(--accent);}
.sg-photo-input.has-photo{border-style:solid;}
.sg-photo-input input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2;}
.sg-photo-input.has-photo input[type=file]{pointer-events:none;}
.sg-photo-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:30px 16px;color:var(--ink-soft);font-size:14px;font-weight:500;text-align:center;}
.sg-photo-cta .cam{font-size:28px;}
.sg-photo-preview{position:relative;}
.sg-photo-preview img{width:100%;max-height:280px;object-fit:cover;display:block;}
.sg-photo-clear{position:absolute;right:10px;bottom:10px;z-index:3;border:none;cursor:pointer;
  background:oklch(1 0 0 / .92);backdrop-filter:blur(4px);color:var(--ink);font-family:var(--sans);
  font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:20px;box-shadow:var(--shadow-sm);}

/* Checkboxit */
.sg-check{display:flex;align-items:flex-start;gap:11px;margin-top:16px;cursor:pointer;font-size:13.5px;
  color:var(--ink-soft);line-height:1.5;}
.sg-check input{width:19px;height:19px;margin-top:1px;flex:none;accent-color:var(--accent);cursor:pointer;}

/* Hunajapurkki piiloon (ei display:none, jotta botit täyttävät) */
.sg-hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden;}

.sg-error{margin-top:16px;background:var(--danger-tint);
  border:1px solid color-mix(in oklch,var(--danger),transparent 65%);
  color:var(--danger);border-radius:var(--radius);padding:12px 14px;font-size:13.5px;font-weight:500;}

#sg-form .btn[type=submit]{margin-top:20px;}
#sg-form .btn[disabled]{opacity:.6;cursor:wait;}
#sg-form .fineprint{text-align:center;}

/* Kiitosnäkymä */
.sg-thanks{text-align:center;padding:26px 6px 12px;}
.sg-thanks .fish{font-size:44px;}
.sg-thanks h2,.sg-thanks h3{font-size:23px;margin-top:10px;}
.sg-thanks p{color:var(--ink-soft);font-size:14.5px;margin:10px auto 20px;max-width:34ch;}

/* ---------- Lightbox ---------- */
.modal.sg-view{width:min(96vw,640px);max-height:92dvh;overflow:hidden;display:flex;flex-direction:column;padding:0;}
.sg-view-close{position:absolute;top:12px;right:12px;z-index:4;background:oklch(1 0 0 / .9);backdrop-filter:blur(4px);}
.sg-view-content{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.sg-view-content .photo{background:var(--paper-3);}
.sg-view-content .photo img{width:100%;max-height:60dvh;object-fit:contain;display:block;}
.sg-view-content .d-body{padding:18px 22px 26px;}
.sg-view-content .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.sg-view-content h3{font-size:23px;}
.sg-view-content .cr{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--pine-tint);color:var(--pine-deep);padding:4px 9px;border-radius:12px;}
.sg-view-content .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.sg-view-content .facts span{font-size:12.5px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:20px;padding:5px 12px;}
.sg-view-content .note{font-size:14.5px;color:var(--ink-soft);margin-top:14px;line-height:1.6;}
.sg-view-content .who{font-size:13px;color:var(--ink-faint);margin-top:14px;}