/* =========================================================
   MOBILNO — velja samo za zaslone do 860px širine.
   Tukaj urejajte mobilni meni, velikost pisave v sliderju
   in vse mobilno-specifične nastavitve.
   ========================================================= */
@media (max-width: 860px){

  /* ---------- SECTIONS ---------- */
  section{padding:64px 0}

  /* ---------- HEADER ---------- */
  .header{
    padding:12px 0;background:#fbf8f2;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
  }
  .header.scrolled{padding:10px 0}
  .logo img{height:64px}
  .header.scrolled .logo img{height:52px}
  .menu-btn{display:inline-flex}

  /* ---------- NAV (drsni panel z desne) ---------- */
  .nav{
    position:fixed;top:0;right:0;bottom:0;
    width:min(86vw,340px);
    background:var(--bg);
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:calc(var(--header-h) + 12px) 0 32px;
    border-left:1px solid var(--border);
    box-shadow:-20px 0 40px rgba(0,0,0,.08);
    transform:translateX(100%);
    transition:transform .3s var(--ease);
    overflow-y:auto;z-index:50;font-size:16px;
  }
  .nav.open{transform:translateX(0)}
  .nav a{
    padding:16px 28px;border-bottom:1px solid var(--border);
    opacity:1;color:var(--fg);
  }
  .nav a:hover,.nav a.active{background:rgba(203,211,191,.25);color:var(--sage)}
  .nav a.active::after{display:none}

  /* ---------- HERO / SLIDESHOW ---------- */
  .arrow{display:none !important}
  .hero{min-height:520px;height:88vh}
  .dots{bottom:24px}

  /* Velikost pisave v sliderju – uredi po želji */
  .hero h1{font-size:34px;line-height:1.15}
  .hero p{margin-top:18px;font-size:15px}
  .hero-inner .eyebrow{font-size:11px;margin-bottom:16px}
  .hero .cta{margin-top:28px}
  .hero .cta .btn{padding:12px 22px;font-size:14px}

  /* ---------- VALUES ---------- */
  .values{grid-template-columns:1fr;gap:28px}

  /* ---------- ABOUT (home) ---------- */
  .about-grid{grid-template-columns:1fr;gap:28px}
  .about-grid .vase{display:none}

  /* ---------- SERVICES ---------- */
  .services-grid{grid-template-columns:repeat(2,1fr)}

  /* ---------- FAQ ---------- */
  .faq-grid{grid-template-columns:1fr;gap:24px}

  /* ---------- SERVICES PAGE ---------- */
  .svc-row{grid-template-columns:1fr;gap:24px;margin-bottom:56px}
  .svc-row.alt > img{order:0}

  /* ---------- ABOUT PAGE ---------- */
  .about-page{grid-template-columns:1fr;gap:32px}
  .info-grid{grid-template-columns:1fr}

  /* ---------- CONTACT ---------- */
  .contact-grid{grid-template-columns:1fr;gap:32px}
  form.contact{padding:24px}
}

/* ---------- še manjši zasloni ---------- */
@media (max-width: 640px){
  .page-header{padding:calc(var(--header-h) + 40px) 0 40px}
  .footer-grid{padding:48px 0;gap:28px}
  .footer-cta .btn{width:100%;min-width:0;max-width:320px}
  .footer-bar{flex-direction:column;gap:6px}
}

@media (max-width: 520px){
  section{padding:48px 0}
  .services-grid{grid-template-columns:1fr;gap:18px}
  .hero h1{font-size:30px}
  .hero p{font-size:14px}
}