/*
Theme Name: Ortopedija Buco Redizajn
Template: online-pharmacy
Version: 1.1.10
Text Domain: ortopedija-buco-child
*/
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@600;700&family=Source+Sans+3:wght@400;500;600;700;800&display=swap");
:root{--ink:#142a43;--blue:#185a9e;--navy:#0c2848;--line:#d9e7f5}*{box-sizing:border-box}body{margin:0;background:#f3f8fd;color:var(--ink);font:16px/1.65 "Source Sans 3",Arial,sans-serif}a{color:#16548f}img,video{display:block;max-width:100%}h1,h2,h3{font-family:Lora,Georgia,serif;font-weight:600;line-height:1.1;margin:0 0 .48em;letter-spacing:-.025em}h1{font-size:clamp(44px,8vw,100px)}h2{font-size:clamp(30px,4vw,52px)}h3{font-size:clamp(20px,2.5vw,29px)}p{max-width:75ch}header{background:#fff;border-bottom:1px solid var(--line)}.bar,.wrap{width:min(92%,1320px);margin:auto}.bar{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:76px}.logo{display:flex;align-items:center;gap:10px;font-weight:800;text-decoration:none;color:var(--navy)}.logo img{width:55px;max-height:48px;object-fit:contain}.nav{display:flex;gap:22px}.nav a{text-decoration:none;font-weight:650}.nav a[aria-current]{text-decoration:underline;text-underline-offset:6px}.toggle{display:none}.hero{background:linear-gradient(130deg,#0b2544,#175c9d);color:white}.hero .wrap{padding:clamp(35px,7vw,95px) 0}.hero p{letter-spacing:.15em;font-size:.8rem;text-transform:uppercase;color:#b6d9ff}.hero-photo{width:100%;height:auto}.wrap{padding-block:clamp(28px,5vw,72px)}.intro{padding-top:36px}.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px}.tile{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(16px,2.6vw,35px);overflow:hidden}.tile img{width:100%;aspect-ratio:4/3;object-fit:contain;margin-bottom:14px}.section+.section{border-top:1px solid var(--line)}.section .tile:only-child{max-width:900px}.btn{display:inline-flex;align-items:center;min-height:44px;padding:10px 17px;border-radius:8px;background:var(--blue);color:#fff;text-decoration:none;font-weight:700}.btn:hover{background:#0d3b69}.videos{background:#0c2848;color:#fff}.video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.video-grid figure{margin:0;min-width:0;transform:skewX(-3deg);overflow:hidden;border:1px solid #ffffff38;border-radius:12px;background:#071c32;box-shadow:0 12px 25px #0004}.video-grid video{width:100%;aspect-ratio:16/10;object-fit:contain;transform:skewX(3deg)}.photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}.photo-grid img{width:100%;height:200px;object-fit:contain;background:white;border-radius:12px}.legal{max-width:850px}.legal h2,.legal h3{margin-top:1.2em}footer{background:#0a2542;color:#e3f0ff}footer a{color:#d5eaff}footer .row{grid-template-columns:repeat(3,1fr)}footer ul{list-style:none;padding:0}footer small{display:block;border-top:1px solid #ffffff35;margin-top:22px;padding-top:16px}a:focus-visible,button:focus-visible{outline:3px solid #4f9ce1;outline-offset:4px}@media(max-width:760px){.bar{flex-wrap:wrap;padding-block:9px}.js .toggle{display:block;min-width:44px;min-height:44px;background:#eef6ff;border:0;color:#12395e;font-size:25px}.nav{flex-basis:100%;flex-direction:column;gap:0}.nav a{padding:8px 0}.js .toggle[aria-expanded=false]+.nav{display:none}.video-grid,footer .row{grid-template-columns:1fr}.video-grid{padding-inline:8px}.video-grid figure{transform:skewX(-2deg)}.video-grid video{transform:skewX(2deg)}}

.overline{font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#2264a1}
.feature-band .tile{border-radius:28px;background:linear-gradient(145deg,#fff,#eaf5ff);box-shadow:0 14px 36px #0d345b0c}
.feature-icon,.quality-strip span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#dbeeff;color:#174f87;font-size:1.35rem;margin-bottom:14px}
.showcase{background:radial-gradient(ellipse at 50% 40%,#235682,#091f39 75%);color:white;text-align:center;overflow:hidden}
.showcase .overline{color:#b5d8ff;margin-inline:auto}
.cover-stage{position:relative;isolation:isolate;perspective:1000px;height:clamp(250px,45vw,490px);max-width:960px;margin:auto;touch-action:pan-y}
.cover-stage figure{position:absolute;inset:5% 22% 12%;display:grid;place-items:center;margin:0;border-radius:28px;background:#fff;box-shadow:0 28px 48px #000b;overflow:hidden;opacity:0;transform:scale(.65);transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .45s}
.cover-stage img{width:100%;height:100%;min-height:0;object-fit:contain}
.cover-stage [data-offset="0"]{opacity:1;z-index:2;transform:none}
.cover-stage [data-offset="-1"]{opacity:.72;transform:translateX(-55%) rotateY(29deg) scale(.82)}
.cover-stage [data-offset="1"]{opacity:.72;transform:translateX(55%) rotateY(-29deg) scale(.82)}
.cover-controls{display:flex;align-items:center;justify-content:center;gap:20px;font-variant-numeric:tabular-nums}
.cover-controls button{border:1px solid #ffffff70;border-radius:50%;width:46px;height:46px;background:#f3f9ff;color:#153e68;font:700 26px system-ui;cursor:pointer}
.stories>p:not(.overline){margin-bottom:30px}
.fade-story{position:relative;isolation:isolate;overflow:hidden;min-height:280px;display:grid;align-items:center;margin-top:18px;border-radius:30px;background:#e4f0fb}
.fade-story img{position:absolute;inset:0 0 0 auto;width:65%;height:100%;object-fit:cover;mask-image:linear-gradient(to right,transparent,#000 42%)}
.fade-story:nth-of-type(2) img{object-fit:contain;background:white}
.fade-story div{width:48%;padding:clamp(24px,5vw,64px);z-index:1}
.quality-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.quality-strip>div{display:flex;align-items:center;gap:10px;border-radius:24px;background:#0c2848;color:white;padding:16px;font-weight:700}
.quality-strip span{flex:none;margin:0}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,5vw,72px);align-items:center}
.contact-copy dl{margin:24px 0}.contact-copy dt{font-weight:800;margin-top:14px}.contact-copy dd{margin:0;overflow-wrap:anywhere}
.contact-photos img{border-radius:28px;margin-bottom:12px}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap}.btn.secondary{background:#dbeeff;color:#153e68}
@media(max-width:700px){.cover-stage figure{inset:6% 15% 13%;border-radius:18px}.cover-stage [data-offset="-1"]{transform:translateX(-35%) rotateY(28deg) scale(.82)}.cover-stage [data-offset="1"]{transform:translateX(35%) rotateY(-28deg) scale(.82)}.fade-story img{position:static;width:100%;height:230px;mask-image:linear-gradient(#000 58%,transparent)}.fade-story div{width:100%;margin-top:-18px}.quality-strip,.contact-layout{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.cover-stage figure{transition:none}}

.home-opening{background:linear-gradient(180deg,#0b2544 32%,#18558a 66%,#d5e9f9 90%,#f3f8fd);overflow:hidden}
/* The wave stays below the photograph. */
.hero-photo-frame{background:#0b2544}
.hero-photo-frame::after{
  content:"";
  display:block;
  height:clamp(28px,5vw,76px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='blue' x2='0' y2='1'%3E%3Cstop stop-color='%23438bc1'/%3E%3Cstop offset='1' stop-color='%230b2544'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23blue)' d='M0 0H1200V24C980 5 840 76 600 60S220 8 0 54Z'/%3E%3C/svg%3E") center center/cover no-repeat;
}
.home-opening .hero{position:relative;background:none}
.home-opening .hero .wrap{padding-block:clamp(24px,5vw,72px) clamp(28px,4vw,60px)}
.home-opening .hero .btn{background:#fff;color:#123d67}
.home-intro{position:relative;padding-top:0}
.home-intro .row{display:block}
.home-intro .tile{max-width:100%;border-radius:32px;background:linear-gradient(135deg,#fff,#eef7ff);padding:clamp(24px,5vw,68px);border-color:#ffffffaf;box-shadow:0 20px 55px #0b254423}
.about-hero{background:radial-gradient(ellipse at 85% 10%,#286da7,transparent 60%),#0b2746}
.about-intro,.about-story{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,6vw,84px);align-items:center}
.about-milestone{display:grid;align-content:center;justify-items:start;padding:clamp(24px,5vw,60px);border-radius:32px;background:radial-gradient(ellipse at 80% 0%,#d4ebff,#ebf6ff);color:#164d7e}
.about-milestone strong{font-size:clamp(64px,12vw,146px);line-height:1;letter-spacing:-.08em}
.about-story{border-top:1px solid var(--line)}
.about-photo{border-radius:32px;overflow:hidden;background:linear-gradient(#dbeaf7,#f3f8fd)}
.about-photo img{width:100%;max-height:660px;object-fit:contain;mask-image:linear-gradient(#000 85%,transparent)}
.about-founder{display:flex;align-items:flex-start;gap:clamp(14px,4vw,42px);padding:clamp(20px,5vw,54px);border-radius:32px;background:linear-gradient(125deg,#e0effc,#fff)}
.about-icon{flex:none;width:64px;height:64px;border-radius:50%;background:#cce6fc;display:grid;place-items:center}
.about-icon img{width:34px;mix-blend-mode:multiply}


.about-cta{background:linear-gradient(135deg,#0a2542,#185a9e);color:white}
.about-cta .btn{background:white;color:#123d67}
@media(max-width:720px){.about-intro,.about-story{grid-template-columns:1fr}.about-story .about-photo{order:1}}

.service-nav{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:0}
.service-nav a{padding:7px 13px;border-radius:24px;background:#deecf9;text-decoration:none}
.service-gallery+.service-gallery{border-top:1px solid var(--line)}
.service-carousel{display:flex;gap:16px;overflow:auto;scroll-snap-type:x mandatory;padding:12px 9% 30px;scroll-padding-inline:9%;perspective:900px}
.service-carousel figure{flex:0 0 45%;margin:0;scroll-snap-align:start;background:#fff;border-radius:18px;box-shadow:0 12px 24px #0003;overflow:hidden;transition:transform .3s,opacity .3s}
.service-carousel img,.service-grid img{width:100%;aspect-ratio:4/3;object-fit:contain;background:white}
.service-controls{display:flex;justify-content:center;align-items:center;gap:16px;margin:8px 0 20px}
.service-controls button{width:44px;height:44px;border:1px solid #adc8e1;border-radius:50%;background:#fff;color:#173d62;font-size:25px;cursor:pointer}
.service-full summary{width:fit-content;background:#185a9e;color:white;padding:10px 16px;border-radius:9px;cursor:pointer}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.service-gallery video{width:min(100%,640px);margin-top:22px;border-radius:16px}
@media(min-width:701px){.js .service-carousel figure:nth-child(n+5){display:none}}
@media(max-width:700px){.service-full{display:none}.service-carousel{padding-inline:12%;scroll-padding-inline:12%;padding-right:12%}.service-carousel figure{flex-basis:100%;scroll-snap-align:center}.js .service-carousel figure:not(.current){transform:rotateY(-19deg) scale(.88);opacity:.68}}
@media(prefers-reduced-motion:reduce){.service-carousel figure{transition:none}}
@media(min-width:701px){.service-carousel{padding-inline:22.5%;scroll-padding-inline:22.5%}.service-carousel figure{flex-basis:100%;scroll-snap-align:center}}

.service-gallery h2{
  margin-bottom:0;
  padding:clamp(14px,2.5vw,25px);
  border-radius:16px 16px 0 0;
  background:linear-gradient(108deg,#102f50,#235c8c);
  color:#fff;
  font-size:clamp(1.45rem,3vw,2.2rem);
}
.service-carousel{background:linear-gradient(#d9e9f7,transparent 34%)}
.service-full summary{
  margin-inline:auto;
  min-height:44px;
  padding-inline:22px;
  transition:background-color .2s;
}
.service-full summary:hover{background:#103f69}
@media(prefers-reduced-motion:no-preference){
  .service-full[open] .service-grid{
    animation:service-gallery-expand .42s cubic-bezier(.2,.7,.2,1) both;
    transform-origin:top center;
  }
}
@keyframes service-gallery-expand{
  from{opacity:0;transform:translateY(-8px) scaleY(.96);clip-path:inset(0 0 100% 0)}
  to{opacity:1;transform:none;clip-path:inset(0)}
}

@media(min-width:701px){.js .service-video-gallery .service-carousel figure:nth-child(n+5){display:block}}
.service-video-gallery .service-carousel video{width:100%;margin:0;border-radius:0;aspect-ratio:16/9;object-fit:contain;background:#102337}

.logo img{width:68px;max-height:59px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .logo:hover img{animation:buco-logo-spin .42s ease-out}
}
@keyframes buco-logo-spin{to{transform:rotate(360deg)}}

.home-intro .tile{position:relative;isolation:isolate;min-height:390px;padding-right:42%}
.intro-photo{position:absolute;inset:0 0 0 auto;width:43%;z-index:-1;background:url('media/park.webp') center center/cover no-repeat;mask-image:linear-gradient(to right,transparent,#000 26%)}
.intro-photo svg{width:100%;height:100%;display:block}
.feature-icon{width:70px;height:70px;background:linear-gradient(145deg,#fff,#d6ebfc 62%,#a8cdec);box-shadow:inset 0 2px 3px #fff,0 7px 13px #1b518b33}
.feature-icon svg{width:45px;height:45px;fill:#b2d6f0;stroke:#215c91;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(1px 2px 1px #2b649345)}
.feature-icon text{fill:#164775;stroke:none;font:800 14px system-ui}
@media(max-width:700px){.home-intro .tile{padding-right:clamp(24px,5vw,68px);padding-top:300px}.intro-photo{inset:0 0 auto;width:100%;height:280px;mask-image:linear-gradient(#000 80%,transparent)}}

.intro-photo,.intro-photo svg{animation:none;transition:none}

.intro-photo::before{content:"";position:absolute;left:37%;right:40%;bottom:7.4%;height:2%;background:#15201c60;border-radius:50%;filter:blur(4px)}
.intro-photo svg{position:relative}
@media(max-width:700px){.intro-photo{background-position:center bottom}.intro-photo::before{bottom:7.4%}}

.ortho-photo{position:absolute;inset:0 0 0 auto;width:65%;margin:0;background:url('media/park.webp') center 67%/cover no-repeat;mask-image:linear-gradient(to right,transparent,#000 42%)}
.ortho-photo svg{position:absolute;right:19%;top:0;height:100%;width:32%;filter:drop-shadow(1px 3px 2px #18292255)}
@media(max-width:700px){.ortho-photo{position:relative;width:100%;height:250px;mask-image:linear-gradient(#000 82%,transparent)}.ortho-photo svg{right:34%}}

.ortho-photo{background-image:url('media/dvoriste.webp');background-position:center 75%}
body:has(>header .bar){background:linear-gradient(#102c49 82px,#f3f8fd 82px)}
body>header:has(.bar){background:transparent;border:0;position:relative;z-index:5}
.bar .nav{gap:0}
.bar .nav a{color:white;font-weight:500;text-decoration:none;padding:5px 15px;transition:background-color .18s,color .18s}
.bar .nav a[aria-current]{font-weight:800;text-decoration:none}
.bar .nav a:hover{background:#ffffff20;color:#c7e5ff}
@media(min-width:761px){.bar .nav a+a{border-inline-start:1px solid #ffffff55}}
@media(max-width:760px){
  .js .bar .toggle{background:transparent;color:white;border:0;border-radius:0;box-shadow:none;padding:0}
  .bar .nav{background:#102c49;padding:8px 0}
}

@media(min-width:761px){
  .bar{display:grid;grid-template-columns:1fr auto 1fr}
  .bar .logo{justify-self:start}
  .bar .nav{grid-column:2}
}
@media(max-width:760px){.bar .nav{align-items:center;text-align:center}}

body:has(>header .bar){position:relative;background:#f3f8fd}
body>header:has(.bar){position:absolute;inset:0 0 auto;background:transparent}
main>.hero>.wrap{padding-top:calc(76px + clamp(28px,5vw,72px))}
.hero-photo-frame::before{
  content:"";position:absolute;inset:0 0 auto;height:min(130px,100%);
  background:linear-gradient(#091e36c9,transparent);pointer-events:none
}