/* Klinika Elit — mobile / tablet overrides. Loaded after each page's own <style>.
   Desktop (>960px) is untouched except for hiding the mobile-only menu elements. */

.m-burger, .m-menu{display:none;}

/* ---------------- tablet & down ---------------- */
@media (max-width:960px){
  nav{padding:12px 18px;}
  .logo-mark{height:24px;}
  .nav-right{gap:12px;}
  .nav-right .btn{display:none;}
  .lang-switch{font-size:13px;}

  .m-burger{
    position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:44px; height:44px; margin-right:-8px; border:none; background:transparent; cursor:pointer; padding:0;
    -webkit-tap-highlight-color:transparent;
  }
  .m-burger span{display:block; width:24px; height:2.5px; border-radius:2px; background:var(--navy); transition:transform .3s cubic-bezier(.16,.8,.3,1), opacity .2s ease;}
  .m-burger::before, .m-burger::after{content:""; position:absolute; left:50%; top:50%; width:22px; height:2.5px; margin:-1.25px 0 0 -11px; border-radius:2px; background:var(--navy); opacity:0; transition:transform .3s cubic-bezier(.16,.8,.3,1), opacity .2s ease;}
  body.m-open .m-burger span{opacity:0; transform:scale(0);}
  body.m-open .m-burger::before{opacity:1; transform:rotate(45deg);}
  body.m-open .m-burger::after{opacity:1; transform:rotate(-45deg);}
  nav .lang-switch{display:none;}
  .m-menu .m-lang{display:flex; margin-top:26px; font-size:15px; font-weight:600;}

  .m-menu{
    display:block; position:fixed; inset:0; z-index:38; background:var(--warm);
    padding:84px 22px 32px; overflow-y:auto; -webkit-overflow-scrolling:touch;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .3s ease, transform .35s cubic-bezier(.16,.8,.3,1), visibility .3s;
  }
  body.m-open .m-menu{opacity:1; visibility:visible; transform:none;}
  body.m-open{overflow:hidden;}
  body.m-open header{transform:none !important; background:var(--warm);}

  .m-menu a.m-link, .m-menu .m-sub-toggle{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    font-family:var(--font-display); font-weight:400; font-size:26px; line-height:1.2; color:var(--navy);
    padding:18px 0; border:none; border-bottom:1px solid var(--border); background:none; text-align:left; cursor:pointer;
  }
  .m-menu a.m-link.current, .m-menu .m-sub-toggle.current{color:var(--teal);}
  .m-sub-toggle svg{width:18px; height:18px; transition:transform .3s ease; flex:0 0 auto;}
  .m-sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
  .m-sub{display:none; padding:6px 0 10px 16px; border-bottom:1px solid var(--border);}
  .m-sub.open{display:block;}
  .m-sub a{display:block; font-size:18px; font-weight:600; color:var(--navy); padding:12px 0;}
  .m-sub a.current{color:var(--teal);}
  .m-menu .m-cta{display:flex; margin-top:28px; width:100%; padding:16px 26px; font-size:16px;}

  /* a little less dramatic vertical rhythm */
  .why-journey{padding:56px 0 64px;}
  .wj-grid{gap:44px;}
  .num-list{margin-left:0; left:0; padding-left:44px;}
  .num-item .n{font-size:30px;}
  .num-item p, .wj-text .section-head p{font-size:16.5px;}
  .services-sec{padding:48px 0 56px;}
  .team-sec{padding:60px 0;}
  .news{padding:60px 0;}
  .res-grid{margin-top:36px;}
  .section-head{margin-bottom:36px;}
  .section-head p{font-size:17px;}

  /* subpages */
  .page-hero{padding:56px 0 36px;}
  .split-section{padding:44px 0;}
  .split-grid{gap:32px;}
  .about-chapter{margin-top:44px;}
  .peek-section{margin-top:0; padding:44px 0 56px;}
}

/* ---------------- phones ---------------- */
@media (max-width:700px){
  .wrap{padding:0 18px;}
  body{font-size:16px;}

  h1{font-size:clamp(34px, 10vw, 44px);}
  h2{font-size:clamp(27px, 7.4vw, 33px);}
  .page-hero h1{font-size:clamp(28px, 8vw, 34px);}
  .page-hero p.lead, .split-text p, .intro-copy p{font-size:17px;}
  .hero p.sub{font-size:19px; min-height:0;}

  /* hero */
  .hero{padding:44px 0 36px;}
  .hero-content{transform:none; padding:0 4px;}
  .hero-ctas{flex-direction:row !important; flex-wrap:nowrap !important; justify-content:center; align-items:center; gap:8px !important; margin-top:26px;}
  .hero-ctas .btn{width:auto !important; flex:0 1 auto; padding:12px 16px !important; font-size:14.5px !important; white-space:nowrap; min-width:0;}

  /* homepage sections */
  .service-grid{grid-template-columns:1fr; gap:14px;}
  .service-card{min-height:0; padding:24px 22px 18px;}
  .service-badge{font-size:24px; min-height:0; margin-top:4px;}
  .service-card p, .service-bio-banner p{font-size:16px;}
  .service-bio-banner{padding:22px; gap:16px; flex-direction:column; align-items:flex-start;}
  .service-bio-banner h3{font-size:24px;}
  .service-bio-banner .service-more{align-self:flex-end;}

  .peek-section{padding:36px 0 44px;}
  .peek-head-wrap{margin-bottom:26px;}
  .peek-outline{border-radius:16px; padding:2px;}
  .peek{border-radius:14px;}
  .play-btn{width:64px; height:64px;}

  .team-grid{gap:16px 12px;}
  .team-card h4{font-size:16px;}
  .team-card p{font-size:13.5px;}

  .res-grid{grid-template-columns:1fr; gap:34px;}

  /* footer */
  .footer-wave-decor{margin-bottom:-8%;}
  footer{padding:90px 0 56px;}
  .footer-top-card h3{font-size:26px; margin-bottom:30px;}
  .footer-contact-card, .footer-location-card, .contact-card{padding:26px 22px; border-radius:18px;}
  .footer-contact-card h4, .footer-location-card h4{font-size:23px;}
  .footer-links-grid{flex-direction:column; gap:30px;}
  .footer-col-usluge{left:0;}
  .social-icons{margin-left:-6px;}
  .social-icons-lg svg, .social-icons-lg img{width:44px; height:44px;}
  .footer-logo-col{height:auto; width:min(100%, 320px); margin:10px 0 6px;}
  .map-pic{min-height:0; aspect-ratio:3/2; flex:0 0 auto;}
  .insurance-strip .strip-label{text-align:left;}
  .insurance-strip .logo-track{justify-content:flex-start;}
  .insurance-logo{width:130px; height:56px; margin:0 8px;}
  .insurance-logo img{max-width:120px; max-height:44px;}

  /* subpages */
  .team-full-grid, .service-grid-light{grid-template-columns:1fr;}
  .dept-group{margin-bottom:44px;}
  .feature-row{gap:12px;}
  .acc-trigger h4{font-size:16px; padding-right:8px;}
  .cta-row{flex-direction:row !important; flex-wrap:nowrap !important; justify-content:center; align-items:center; gap:8px !important;}
  .cta-row .btn{width:auto !important; flex:0 1 auto; padding:12px 16px !important; font-size:14.5px !important; white-space:nowrap; min-width:0;}
  .contact-grid{gap:18px;}
  .about-chapter{margin-top:36px;}
}

/* ---------------- small phones ---------------- */
@media (max-width:380px){
  .wrap{padding:0 14px;}
  .m-menu a.m-link, .m-menu .m-sub-toggle{font-size:23px;}
  .team-grid{grid-template-columns:1fr;}
}

@media (max-width:700px){ .wrap.breadcrumb{padding-left:18px; padding-right:18px;} .page-hero h1.kicker{font-size:13px !important;} }
@media (max-width:380px){ .wrap.breadcrumb{padding-left:14px; padding-right:14px;} }

@media (max-width:700px){
  .page-hero.page-hero-c{padding:36px 0 28px !important;}
  .page-hero.page-hero-c h1.hc-title{font-size:clamp(34px,10.5vw,46px);}
  .page-hero.page-hero-c p.lead{margin-top:20px;}
  .page-hero-c::before, .page-hero-c::after{width:320px; height:320px;}
}

@media (max-width:700px){ .page-hero.page-hero-c{min-height:0; padding:56px 0 64px !important;} }

@media (max-width:700px){
  .split-section, .intro-copy, .legal-sec, .page-hero-c + section{padding-top:80px !important; padding-bottom:80px !important;}
  .about-chapter{margin-top:80px;}
  .story-sec{padding-bottom:80px !important;}
}

/* ---------- homepage hero on phones: clips scattered below the text, drifting up on scroll ---------- */
@media (max-width:900px){
  .hero{display:flex !important; flex-direction:column; padding:44px 0 0 !important; min-height:0 !important; overflow:hidden;}
  .hero .wrap{order:1; width:100%;}
  .hero-bg{display:block !important; order:2; position:relative !important; inset:auto !important; height:560px; margin-top:30px;}
  .hero-video-strip{position:absolute !important; inset:0; display:block !important; padding:0;}
  .hero-video-strip .hero-img-shell{position:absolute; border-radius:16px;}
  /* 3 rows x 2 clips, each row runs edge to edge of the screen, 10px gap only between the two clips */
  .hero-bg{height:490px !important;}
  .hero-img-shell.tr, .hero-img-shell.tr2, .hero-img-shell.le, .hero-img-shell.bt, .hero-img-shell.ns, .hero-img-shell.sq14{height:150px !important;}
  .hero-video-strip .hero-img-shell.tr, .hero-video-strip .hero-img-shell.le, .hero-video-strip .hero-img-shell.ns{border-radius:0 16px 16px 0 !important;}
  .hero-video-strip .hero-img-shell.tr2, .hero-video-strip .hero-img-shell.bt, .hero-video-strip .hero-img-shell.sq14{border-radius:16px 0 0 16px !important;}
  .hero-img-shell.tr{left:0; right:auto; top:0; width:calc(58% - 5px) !important;}
  .hero-img-shell.tr2{left:calc(58% + 5px); right:auto; top:0; width:calc(42% - 5px) !important;}
  .hero-img-shell.le{left:0; right:auto; top:160px; width:calc(42% - 5px) !important;}
  .hero-img-shell.bt{left:calc(42% + 5px); right:auto; top:160px; width:calc(58% - 5px) !important;}
  .hero-img-shell.ns{left:0; right:auto; top:320px; width:calc(50% - 5px) !important;}
  .hero-img-shell.sq14{left:calc(50% + 5px); right:auto; top:320px; width:calc(50% - 5px) !important;}
}

/* video lightbox on phones */
body.vlb-open{overflow:hidden;}
.vlb{position:fixed; inset:0; z-index:9999; background:rgba(0,28,43,.78); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); display:flex; align-items:center; justify-content:center;}
.vlb-stage{width:100%; display:flex; align-items:center; justify-content:center;}
.vlb-slot{width:calc(100vw - 24px); aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.vlb-slot video{width:100%; height:100%; object-fit:contain; display:block;}
.vlb-btn{position:absolute; width:46px; height:46px; border-radius:50%; border:0; background:rgba(255,255,242,.92); color:#002C43; display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;}
.vlb-btn svg{width:22px; height:22px;}
.vlb-close{top:max(14px, env(safe-area-inset-top)); right:14px;}
.vlb-rot{bottom:max(18px, env(safe-area-inset-bottom)); right:14px;}
/* rotated: stage turned 90deg so the video fills the portrait screen sideways */
.vlb.rot .vlb-stage{position:absolute; top:50%; left:50%; width:100vh; height:100vw; transform:translate(-50%,-50%) rotate(90deg);}
.vlb.rot .vlb-slot{width:100%; height:100%; aspect-ratio:auto; border-radius:0; box-shadow:none;}
/* phone already held sideways */
@media (orientation:landscape){
  .vlb .vlb-slot{width:auto; height:calc(100vh - 24px); max-width:calc(100vw - 24px);}
  .vlb.rot .vlb-stage{position:static; width:100%; height:auto; transform:none;}
  .vlb.rot .vlb-slot{width:auto; height:calc(100vh - 24px); aspect-ratio:16/9; border-radius:14px;}
}

@media (max-width:360px){ .hero-ctas .btn{padding:11px 12px !important; font-size:13.5px !important;} }

/* homepage on phones: all text centered except the numbered scroll list */
@media (max-width:900px){
  body.home .section-head, body.home .wj-text,
  body.home .team-sec, body.home .team-card, body.home .team-more, body.home .res-card, body.home .news,
  body.home .peek-section{text-align:center;}
  body.home .service-card, body.home .service-bio-banner{text-align:left;}
  body.home .wj-text .text-link-arrow, body.home .team-more .text-link-arrow, body.home .res-card .text-link-arrow{justify-content:center;}
  body.home .num-list, body.home .num-list *{text-align:left;}
  body.home .num-list .num-item:nth-child(3) h4{max-width:17ch; text-wrap:balance;}
}

@media (max-width:900px){
  body.home .wj-text{display:flex; flex-direction:column; align-items:center;}
  body.home .wj-text .text-link-arrow{display:inline-flex; margin:0 auto;}
}

@media (max-width:900px){ body.home .roster-4 .person, body.home .roster-4 .person *{text-align:left;} }

@media (max-width:900px){ body.home .team-more{align-items:center; text-align:center;} body.home .team-more .text-link-arrow{margin:0 auto;} }

@media (max-width:360px){ .cta-row .btn{padding:11px 12px !important; font-size:13.5px !important;} }

/* O nama on phones: founders' clips start at the screen edges (first from the left, second from the right) like the homepage clips */
@media (max-width:960px){
  .founders{--edge:20px;}
  .founders .founder{max-width:none !important;}
  .founders .founder.f1{width:calc(84% + var(--edge)) !important; margin-left:calc(-1 * var(--edge)) !important; align-self:flex-start;}
  .founders .founder.f1 .founder-media{border-radius:0 18px 18px 0 !important;}
  .founders .founder.f2{width:calc(84% + var(--edge)) !important; margin-right:calc(-1 * var(--edge)) !important; margin-left:0 !important; align-self:flex-end;}
  .founders .founder.f2 .founder-media{border-radius:18px 0 0 18px !important;}
  .founders .founder.f1 figcaption{padding-left:var(--edge);}
  .founders .founder.f2 figcaption{padding-right:var(--edge);}
}
@media (max-width:700px){ .founders{--edge:18px;} }
@media (max-width:380px){ .founders{--edge:14px;} }

/* footer on phones: no Klinika / Usluge link columns (they stay on the web version) */
@media (max-width:900px){ .footer-links-col:not(.footer-col-tight):not(.footer-col-connect){display:none;} }