/* Fotografická mřížka s otočením karet; bez externích knihoven. */
.motion-heading{padding-top:65px;padding-bottom:45px;text-align:center}.motion-heading .eyebrow{color:#547767;margin-bottom:12px}.motion-heading h2{font-size:32px;letter-spacing:-.8px}.motion-heading>p:last-child{color:var(--muted);margin-top:18px;font-size:14px}.motion-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--navy)}.motion-card{position:relative;min-width:0;height:clamp(300px,27vw,420px);perspective:1400px}.motion-card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .72s cubic-bezier(.5,.12,.46,.88)}.motion-card.is-flipped .motion-card-inner{transform:rotateY(180deg)}.motion-front,.motion-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}.motion-front{background:#294353;transform:rotateY(0deg)}.motion-photo{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;display:block;filter:saturate(.65);transition:transform 1s ease}.motion-shade{position:absolute;inset:0;background:linear-gradient(180deg,#1e34465c,#1e34468c 40%,#1e3446b8)}.motion-open{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:23px;padding:36px 26px;background:transparent;color:white;border:0;cursor:pointer;text-align:center}.motion-open .motion-title{font-size:19px;text-transform:uppercase;font-weight:400;letter-spacing:1px;line-height:1.65;max-width:260px;text-wrap:balance;pointer-events:none}.motion-number{font-size:11px;letter-spacing:3px;opacity:.7;pointer-events:none}.motion-hint{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#e0eee8;pointer-events:none}.motion-hint>span{margin-left:9px;font-size:16px}.motion-back{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px 28px;background:#386652;color:white;transform:rotateY(180deg)}.motion-card:nth-child(2n) .motion-back{background:#2d4f5f}.motion-back-number{font-size:50px;line-height:1;font-weight:700;color:#b7e1ca40;margin-bottom:18px}.motion-back h3{font-size:20px;line-height:1.4;color:white;font-weight:700}.motion-back p{font-size:13px;line-height:1.8;color:#e1efe9;margin:17px 0 23px;max-width:280px}.motion-back a{display:inline-flex;gap:20px;align-items:center;padding:10px 14px;border:1px solid #c2dfd08c;font-size:11px;color:white}.motion-back a:hover{background:#fff;color:#284f3e}.motion-close{position:absolute;top:10px;right:12px;width:34px;height:34px;background:transparent;border:1px solid #ffffff50;color:white;font-size:23px;line-height:1;cursor:pointer}.motion-open:focus-visible{outline:3px solid #e9d196;outline-offset:-6px}.motion-close:focus-visible,.motion-back a:focus-visible{outline-color:#ffe6a9}.motion-front{transition:visibility 0s .36s}.motion-back{visibility:hidden;transition:visibility 0s .36s}.motion-card.is-flipped .motion-front{visibility:hidden}.motion-card.is-flipped .motion-back{visibility:visible}.motion-card.is-flipped .motion-photo{transform:scale(1.06)}
@media(min-width:1500px){.motion-card{height:390px}}
@media(max-width:1000px){.motion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.motion-card{height:330px}.motion-heading h2{font-size:28px}}
@media(max-width:540px){.motion-heading{padding-top:40px;padding-bottom:30px}.motion-heading h2{font-size:25px}.motion-card{height:300px}.motion-open{padding:20px 12px;gap:20px}.motion-open .motion-title{font-size:14px;letter-spacing:.6px}.motion-hint{font-size:8px;letter-spacing:.6px}.motion-back{padding:34px 12px 18px}.motion-back-number{font-size:32px;margin-bottom:12px}.motion-back h3{font-size:15px}.motion-back p{font-size:11px;margin:10px 0 14px;line-height:1.7}.motion-back a{font-size:10px;padding:8px;gap:8px}.motion-close{width:27px;height:27px;font-size:20px;top:6px;right:6px}.motion-grid{gap:1px}.motion-heading>p:last-child{font-size:12px}}
@media(prefers-reduced-motion:reduce){.motion-card-inner,.motion-front,.motion-back,.motion-photo{transition:none!important}.motion-card-inner{transform:none!important}.motion-back{transform:none}.motion-card.is-flipped .motion-front{visibility:hidden}.motion-card.is-flipped .motion-back{visibility:visible}}
.motion-front{visibility:visible;transition:visibility 0s}.motion-card.is-flipped .motion-front{transition-delay:.36s}.motion-card.is-flipped .motion-back{transition-delay:0s}
.motion-photo{transform:scale(1.8);transform-origin:var(--photo-x,50%) var(--photo-y,50%)}.motion-card.is-flipped .motion-photo{transform:scale(1.9)}
/* Jeden fotografický podklad: každá dlaždice zobrazuje sousední část téže scény. */
.motion-anchor{display:block;scroll-margin-top:25px}.motion-front{background-image:url('/images/pracovni-stul.webp');background-repeat:no-repeat;background-size:var(--scene-width,400%) var(--scene-height,200%);background-position:var(--scene-x,0px) var(--scene-y,0px)}.motion-card{height:clamp(370px,29vw,440px)}.motion-back{padding:32px 25px 24px}.motion-back-number{font-size:30px;margin-bottom:12px}.motion-back h3{font-size:19px}.motion-back p{font-size:12px;line-height:1.65;margin:8px 0;max-width:300px}.motion-back .motion-detail-lead{font-weight:700;color:#fff;margin-top:15px}.motion-points{font-size:11px;text-align:left;line-height:1.65;color:#dcebe4;margin:9px 0 18px;padding-left:17px;max-width:290px}.motion-back a{margin-top:0}.motion-grid{gap:0}
@media(min-width:1500px){.motion-card{height:420px}}
@media(max-width:1000px){.motion-card{height:370px}}
@media(max-width:540px){.motion-grid{grid-template-columns:1fr}.motion-card{height:355px}.motion-front{background-size:var(--scene-width,100%) var(--scene-height,800%)}.motion-open .motion-title{font-size:19px;max-width:290px}.motion-hint{font-size:10px}.motion-back{padding:30px 26px 23px}.motion-back h3{font-size:20px}.motion-back p{font-size:13px}.motion-points{font-size:12px}.motion-back a{font-size:11px;padding:10px 14px}.motion-back-number{font-size:28px;margin-bottom:8px}}
.motion-shade{background:#1e34467d}.motion-card{height:420px}@media(max-width:1000px){.motion-card{height:390px}}@media(max-width:540px){.motion-card{height:355px}.motion-front{background-size:cover;background-position:center}}
/* Mobil: kompaktní rozbalovací karty místo 3D dlaždic. */
@media(max-width:760px){
.motion-grid{display:grid;grid-template-columns:1fr;gap:12px;padding:0 18px 35px;background:white}.motion-card{height:auto;perspective:none;border:1px solid #dce5e5;border-radius:6px;overflow:hidden;background:#fff}.motion-card-inner,.motion-card.is-flipped .motion-card-inner{height:auto;transform:none!important;transition:none}.motion-front,.motion-card.is-flipped .motion-front{position:relative;inset:auto;height:112px;visibility:visible!important;transform:none;transition:none;background:none}.motion-shade{left:0;right:auto;width:95px;background:linear-gradient(#24445538,#24445538),url('/images/pracovni-stul.webp') center/cover}.motion-open{height:112px;display:grid;grid-template-columns:1fr 26px;grid-template-rows:auto auto;gap:4px 12px;text-align:left;align-content:center;align-items:center;padding:18px 15px 18px 113px;color:var(--ink)}.motion-open .motion-title{grid-column:1;grid-row:1;font-size:15px;font-weight:700;line-height:1.45;text-transform:none;letter-spacing:0;max-width:none}.motion-number{display:none}.motion-hint{grid-column:1;grid-row:2;font-size:9px;letter-spacing:.3px;color:#55736a;text-transform:none}.motion-hint>span{display:none}.motion-open:after{content:'+';grid-column:2;grid-row:1/3;align-self:center;justify-self:center;font-size:24px;line-height:1;color:#397a60}.motion-open[aria-expanded=true]:after{content:'−'}.motion-card.is-flipped{border-color:#83bfa5}.motion-card:nth-child(2n) .motion-shade{background-position:right center}.motion-card:nth-child(3n) .motion-shade{background-position:left center}.motion-back,.motion-card:nth-child(2n) .motion-back{display:none;position:relative;inset:auto;transform:none!important;transition:none;visibility:visible;background:#f3f8f5;color:var(--ink);padding:21px 22px 24px;text-align:left;align-items:flex-start;overflow:visible}.motion-card.is-flipped .motion-back{display:flex}.motion-back h3,.motion-back-number,.motion-back .motion-close{display:none}.motion-back p,.motion-back .motion-detail-lead{color:var(--ink);font-size:13px;max-width:none;line-height:1.75;margin:0 0 10px}.motion-points{font-size:12px;color:#52685e;max-width:none;margin:3px 0 18px}.motion-back a{font-size:11px;background:#366c55;border-color:#366c55;color:white;padding:11px 15px}.motion-back a:hover{background:#254c3c;color:white}.motion-open:focus-visible{outline-color:#4b9474}.motion-heading{padding-top:40px;padding-bottom:28px}}
/* Plynulá návaznost tmavého úvodu na fotografickou mřížku. */
@media(min-width:761px){
.motion-services{background:var(--navy)}
.motion-heading{padding-top:30px;padding-bottom:32px}
.motion-heading h2{color:#fff}
.motion-heading>p:last-child{color:#c4d5dc;margin-top:12px}
.motion-card:nth-child(-n+4) .motion-shade{background:linear-gradient(180deg,#293f50 0,#293f507d 95px,#293f507d 100%)}
}
@media(min-width:761px) and (max-width:1000px){.motion-card:nth-child(n+3) .motion-shade{background:#1e34467d}}
/* Čistá hrana mezi nadpisem a fotografií bez prolínání. */
@media(min-width:761px){.motion-card:nth-child(-n+4) .motion-shade{background:#1e34467d}}
/* Jemné odlišení pruhu s nadpisem služeb od úvodu. */
@media(min-width:761px){.motion-services{background:#344b5c}}

/* Vlastní tematické ilustrace mobilních služeb. */
@media(max-width:760px){
.motion-card .motion-shade{background-color:#eef2f0;background-repeat:no-repeat;background-size:cover;background-position:center!important}
.motion-card[data-service="kampane"] .motion-shade{background-image:url('/images/sluzby/kampane.webp')}
.motion-card[data-service="weby"] .motion-shade{background-image:url('/images/sluzby/weby.webp')}
.motion-card[data-service="mereni"] .motion-shade{background-image:url('/images/sluzby/mereni.webp')}
.motion-card[data-service="hosting"] .motion-shade{background-image:url('/images/sluzby/hosting.webp')}
.motion-card[data-service="email"] .motion-shade{background-image:url('/images/sluzby/email.webp')}
.motion-card[data-service="obsah"] .motion-shade{background-image:url('/images/sluzby/obsah.webp')}
.motion-card[data-service="seo"] .motion-shade{background-image:url('/images/sluzby/seo.webp')}
.motion-card[data-service="ai"] .motion-shade{background-image:url('/images/sluzby/ai.webp')}
}