/* Shared phone/tablet polish. Desktop composition is intentionally untouched. */
@media (max-width: 1024px) {
  html, html body {
    background-color: #0b0d10 !important;
  }
  body > main { background-color: #fbfcfb; }
  body > .site-footer.ca-footer,
  .kontakt-page > .site-footer.ca-footer {
    margin: -1px 0 0;
    border-top: 0;
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
    background: #0b0d10;
  }

  /* Halve the two paddings that together separated the belt and About title. */
  #zakladatel { padding-bottom: clamp(28px, 5vh, 65px); }
  #zakladatel .founder-belt { box-shadow: 0 12px 24px rgba(20, 22, 26, .17); }
  #o-mne { padding-top: calc((var(--header-h) + clamp(34px, 6vh, 96px)) / 2); }

  /* Fractional scroll positions must not reveal the white canvas between
     two independently composited gradient layers (notably in iOS WebKit). */
  #o-mne::before { inset: -1px 0; }
  #zakladatel::after { bottom: -1px; }
  #sluzby.svc-mstack { margin-top: -1px; }
  #sluzby.svc-mstack #svcHandoff { top: -1px; }
  #o-mne.is-dark + #sluzby.svc-mstack #svcHandoff { background: #111214; }
  #projekty::before {
    top: -1px;
    background: linear-gradient(180deg, #080b0d 0, #080b0d 2px, rgba(8, 11, 13, .72) 24%, rgba(8, 11, 13, .16) 76%, rgba(8, 11, 13, 0) 100%);
  }
  .spv-showcase {
    background-image: linear-gradient(to bottom, transparent calc(100% - 56px), #fbfcfb 100%), radial-gradient(ellipse at 50% 58%, #fff 36%, #f7f8f6 100%);
  }
  .sp-formats::before {
    top: -1px;
    background: linear-gradient(to bottom, #fbfcfb 0, #fbfcfb 2px, var(--sl-dark) 100%);
  }

  /* The image itself travels; its original header anchor retains its layout
     box, so navigation measurements and scroll-direction logic stay stable. */
  .site-header .logo.mobile-nav img {
    transform-origin: 0 0;
    transition: transform 560ms cubic-bezier(.65, 0, .35, 1);
  }
  .site-header.is-logo-returning .site-header-motion { transform: none !important; }
  .nav-overlay.has-mobile-logo {
    gap: clamp(16px, 2.8svh, 28px);
    padding: max(20px, env(safe-area-inset-top, 0px)) 20px max(24px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    justify-content: safe center;
  }
  .mobile-menu-logo-slot {
    flex: 0 0 auto;
    width: clamp(110px, 30vw, 148px);
    aspect-ratio: 4 / 3;
    pointer-events: none;
  }
  .has-mobile-logo .nav-list { gap: clamp(3px, 1svh, 12px); }
  .has-mobile-logo .nav-list a { padding-block: 7px; }
  .has-mobile-logo .nav-social { flex: 0 0 auto; }
  .has-mobile-logo .nav-cta { flex: 0 0 auto; }
}

@media (max-width: 767px) {
  .sluzby-page[data-page="sluzby"] .sl-section--social {
    height: auto;
    min-height: 0;
    padding-bottom: clamp(64px, 9svh, 84px);
    background: linear-gradient(to bottom, #fff 0%, #fff calc(100% - 104px), #0b0d10 100%) !important;
  }

  .ms-tabs button[aria-selected="true"] {
    border-color: transparent;
    box-shadow: 0 5px 20px #00ef0029;
  }
  .ms-tabs button[aria-selected="true"]::after { display: none; }
  .ms-tab-snake {
    position: absolute;
    inset: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease;
  }
  .ms-tabs [aria-selected="true"] .ms-tab-snake { opacity: 1; }
  .ms-tab-snake rect { fill: none; stroke-linecap: round; }
  .ms-tab-snake-rail { stroke: #103d10; stroke-width: 1; opacity: .25; }
  .ms-tab-snake-glow, .ms-tab-snake-line, .ms-tab-snake-head {
    stroke-dasharray: 23 77;
    animation: mobile-tab-snake 2.8s linear infinite;
    animation-play-state: paused;
  }
  [aria-selected="true"] .ms-tab-snake rect { animation-play-state: running; }
  .ms-tab-snake-glow { stroke: #00ff00; stroke-width: 7; opacity: .55; filter: blur(2.5px); }
  .ms-tab-snake-line { stroke: #00ff00; stroke-width: 3; }
  .ms-tab-snake-head { stroke: #ddffd6; stroke-width: 2; stroke-dasharray: 3 97; }
  .ms-tabs button[data-ms-tab="program"] .ms-tab-snake-glow { stroke: #fff; opacity: .7; }
  .ms-tabs button[data-ms-tab="program"] .ms-tab-snake-line,
  .ms-tabs button[data-ms-tab="program"] .ms-tab-snake-head { stroke: #fff; }
  @keyframes mobile-tab-snake { to { stroke-dashoffset: -100; } }
}

@media (max-width: 1024px) and (max-height: 620px) {
  .nav-overlay.has-mobile-logo { justify-content: flex-start; gap: 12px; }
  .mobile-menu-logo-slot { width: 92px; }
  .has-mobile-logo .nav-list a { font-size: 26px; padding-block: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .logo.mobile-nav img { transition: none; }
  .ms-tab-snake-line { animation: none; stroke-dasharray: none; }
  .ms-tab-snake-head, .ms-tab-snake-glow { display: none; }
}