/* The contact form and social panel remain in normal flow. Keep the social
   panel's entrance tied to scroll while contact actions stay near the form. */
@media (min-width: 1025px) {
  .kontakt-page .sl-section--booking {
    height: auto;
    min-height: 0;
    align-content: start;
    padding-top: calc(var(--nav-top, 20px) + var(--nav-h, 62px) + clamp(14px, 2vh, 24px));
    padding-bottom: clamp(12px, 2vh, 18px);
    background-color: #fff;
  }

  /* A fieldset legend sits outside its grid gap; give this textarea real space. */
  .kontakt-page #fPlan {
    margin-top: clamp(12px, 1.8vh, 18px);
  }

  .kontakt-page .sl-section--social {
    height: auto;
    min-height: 0;
    display: block;
    padding-top: clamp(56px, 9vh, 100px);
    padding-bottom: clamp(48px, 7vh, 84px);
  }

  /* Keep the form and social sections on one white surface, then let the
     final section reach the footer's real dark base without a divider. */
  .kontakt-page main { background: #fff; }
  .sluzby-page.kontakt-page .sl-section--social {
    background-color: #0b0d10;
    background-image: linear-gradient(to bottom,
      #fff 0%,
      #fff calc(100% - clamp(128px, 18vh, 200px)),
      #0b0d10 100%) !important;
  }
  .kontakt-page > .site-footer.ca-footer {
    margin-top: -1px;
    border-top: 0;
  }
}

.kontakt-page .social-card--tiktok .social-logo-svg--desktop { display: none; }

/* The contact social panel uses the shared data-panel scroll progress on
   desktop, just like Services. Keep the existing mobile SVG untouched. */
@media (min-width: 1025px) {
  /* Avoid a fully open first paint before the shared scroll controller boots. */
  .sl-js.sl-pending .kontakt-page .sl-social-panel { --sl-pp: 0; }
  .kontakt-page .social-card--tiktok .social-logo-svg--mobile { display: none; }
  .kontakt-page .social-card--tiktok .social-logo-svg--desktop { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .kontakt-page .sl-social-panel { animation: none; clip-path: none; }
}

/* Native iOS date controls have a larger intrinsic minimum than text inputs.
   Constrain the control itself, not just the card which contains it. */
.kontakt-page .bw-row > *,
.kontakt-page .bw-step,
.kontakt-page .sl-input {
  min-inline-size: 0;
  max-inline-size: 100%;
}
.kontakt-page .sl-input {
  inline-size: 100%;
  box-sizing: border-box;
}
.kontakt-page input[type="date"] {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
}
.kontakt-page input[type="date"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}
.kontakt-page input[type="date"]::-webkit-datetime-edit {
  min-width: 0;
  padding: 0;
}

.kontakt-page .bw-toggle {
  justify-self: start;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  background: none;
  border-radius: 0;
}
.kontakt-page .bw-toggle-btn {
  min-height: 42px;
  padding: 10px 20px;
  border: 1px solid rgba(8, 11, 13, .16);
  background: #fff;
  color: var(--sl-ink);
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.kontakt-page .bw-toggle-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sl-ink);
  box-shadow: 0 5px 16px rgba(0, 255, 0, .16);
}
.kontakt-page .bw-toggle-btn:focus-visible {
  outline: 2px solid var(--sl-ink);
  outline-offset: 3px;
}
@media (max-width: 1024px) {
  .kontakt-page .sl-input { font-size: 16px; }
}

/* Contact on phones should end when its content ends, not after an extra
   viewport-tall social stage. Fade that short closing space into the footer.
   A dark document canvas also covers iOS rubber-band overscroll below it. */
@media (max-width: 767px) {
  html:has(> body.kontakt-page),
  body.kontakt-page {
    background-color: #0b0d10;
  }

  .kontakt-page main { background: #fff; }

  .sluzby-page.kontakt-page .sl-section--social {
    height: auto;
    min-height: 0;
    padding-top: clamp(28px, 5svh, 44px);
    padding-bottom: clamp(64px, 9svh, 84px);
    background: linear-gradient(to bottom,
      #fff 0%,
      #fff calc(100% - 104px),
      #0b0d10 100%) !important;
  }

  .kontakt-page .site-footer.ca-footer {
    margin-top: 0;
    border-top: 0;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
    background: #0b0d10;
  }
}

/* On very short desktop windows the shared booking layout moves the direct
   contact actions beside the heading. Contact now has normal page flow, so
   keep those actions beneath the wizard where they cannot run off the edge. */
@media (min-width: 1025px) and (max-height: 540px) {
  .kontakt-page .sl-section--booking .bw-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }

  .kontakt-page .sl-section--booking .bw-direct {
    display: grid;
    width: min(100%, 980px);
    max-width: none;
    margin: 0 auto;
    gap: 4px;
  }

  .kontakt-page .sl-section--booking .bw-direct-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    width: 100%;
  }

  .kontakt-page .sl-section--booking .bw-direct-btn { width: auto; }
}