/* ===================== MOBIILI (≤980px) ===================== */
@media (max-width:980px){

  /* LOGOJEN MOBIILIMITAT */
  :root{
    --nyrkki-h: 56px;
    --nyrkki-w: auto;
    --headerlogo-h: 40px;
    --headerlogo-w: 180px;

    --brand-gap: 10px;
    --containerW: 880px;
    --headerH: 68px;
  }

  /* Vieritys vain #app:iin; body lukossa */
  body{overflow:hidden;overscroll-behavior:none;}

  main#app{
    position:relative;width:100%;height:100svh;
    overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    scroll-snap-type:y mandatory;
  }

  /* Jokainen osio yhden näytön korkuinen */
  section.panel{
    position:relative;inset:auto;opacity:1;display:block;isolation:auto;
    min-height:100svh;
    padding-top:var(--headerH);
    padding-bottom:12px;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  .panel .overlay{background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.75))}
  #hero .overlay{display:none !important;}
  .content{position:relative;z-index:2;padding:0 16px}
  .container{max-width:var(--containerW);padding:0 16px}

  /* Header: burger */
  .menu{display:inline-flex;align-items:center;justify-content:center}
  .site-header .nav{
    display:none;flex-direction:column;position:absolute;top:var(--headerH);left:0;right:0;
    background:#0b0c0f;padding:10px;border-bottom:1px solid rgba(255,255,255,.1)
  }
  .site-header .nav.open{display:flex}
  .site-header .nav a{padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.08)}

  /* Hero-teksti näkyviin mobiilissa */
  .hero-content{
    display:block; position:absolute;
    left:16px; right:16px; bottom:18px; padding:0;
    text-shadow:0 2px 14px rgba(0,0,0,.55);
  }
  .hero-title{
    font-size:var(--hero-title-size, clamp(26px,7.6vw,38px));
    line-height:var(--hero-title-lh, 1.08);
    margin:0 0 10px;
    text-transform:uppercase;letter-spacing:.01em;font-weight:800;
  }
  .hero-lead{
    font-size:var(--hero-lead-size, 16px);
    line-height:var(--hero-lead-lh, 1.5);
    margin:6px 0 0;max-width:46ch;color:#e8ecf3;
  }
  .button.primary{display:block;width:100%;text-align:center;font-weight:700;border-radius:14px;padding:14px 18px}

  h2{font-size:30px;margin:0 0 14px}
  .grid.two{grid-template-columns:1fr;gap:14px}
  .cards.three{grid-template-columns:1fr}
  .card,.box{border-radius:18px;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.25)}

  /* Työnhakijalle: tiiviimpi kortti & pienempi mittakaava */
  #hakijoille .apply-card{
    transform:scale(.95);transform-origin:top center;
    max-width:680px;margin:0 auto;padding:12px;gap:12px;
  }
  #hakijoille h2{font-size:clamp(22px,5.5vw,28px);margin-bottom:8px}
  #hakijoille .apply-benefits{font-size:14.5px;margin:6px 0 10px}
  #hakijoille .field label{font-size:13px;opacity:.9}
  #hakijoille .field input,#hakijoille .field select,#hakijoille .field textarea{
    height:42px;padding:10px 12px;font-size:16px;line-height:1.1;
  }
  #hakijoille .field textarea{height:auto;min-height:86px}
  #hakijoille .dropzone{padding:12px}
  #hakijoille .dz-title{margin-bottom:2px}
  #hakijoille .button.primary{padding:12px 16px}

  /* Ensure logo offsets also apply on mobile */
  .site-header .brand{ display:flex; align-items:center; gap: var(--brand-gap); }
  .site-header .brand img.nyrkki{
    height: var(--nyrkki-h); width: var(--nyrkki-w);
    transform: translate(var(--nyrkki-offset-x,0), var(--nyrkki-offset-y,0));
  }
  .site-header .brand img.headerlogo, .site-header .brand img.teksti{
    height: var(--headerlogo-h); width: var(--headerlogo-w);
    transform: translate(var(--headerlogo-offset-x,0), var(--headerlogo-offset-y,0));
  }
}