/* ============ TOUR DE PRODUCT (VMS Touchpoints tabs) ============ */
.tdp-section { padding: 60px 5%; }
.tdp-heading { text-align: center; font-size: 32px; margin-bottom: 40px; }
.tdp-heading-accent { color: var(--sharry-pink, #f0047f); }

.tdp-tabs { max-width: 1100px; margin: 0 auto; }

/* Tile menu */
.tdp-tabs-menu {
  display: flex; justify-content: center; align-items: stretch;
  gap: 32px; flex-wrap: wrap;
  background: transparent; margin-bottom: 28px; /* room for the neck */
}
.tdp-tab {
  background: #fff; border: 1px solid #edf1f7; border-radius: 14px;
  box-shadow: 0 6px 18px rgba(20, 33, 61, .06);
  padding: 0; width: 104px; height: 104px; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; color: #12253a; position: relative;
  transition: box-shadow .2s ease, transform .1s ease, color .2s ease;
}
/* spacer vlozeny v Designeru mezi ikonu a text - mezeru ridi flex gap */
.tdp-tab .spacer-xsmall { display: none; }
.tdp-tab:hover { box-shadow: 0 10px 24px rgba(20, 33, 61, .12); }
.tdp-tab:active { transform: scale(.97); }
.tdp-tab.w--current { color: var(--sharry-pink, #f0047f); background: #fff; z-index: 1; }
/* "neck" connecting the active tile to the opened panel — one smooth SVG shape:
   straight stem flaring into the panel with concave curves, as in the design */
.tdp-tab.w--current::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 29px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 29' preserveAspectRatio='none'%3E%3Cpath d='M16 0 H64 V13 Q64 29 80 29 H0 Q16 29 16 13 Z' fill='%23e9f3fc'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
/* hidden default tab = initial "closed" state of the section */
.tdp-tab-empty { display: none !important; }
.tdp-tab-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.tdp-tab-icon svg { max-width: 100%; max-height: 100%; display: block; }
.tdp-tab-label { font-size: 14px; font-weight: 400; line-height: 1.2; }

/* Panel */
.tdp-content { overflow: visible; }
.tdp-pane-inner {
  background: #e9f3fc; border-radius: 20px;
  padding: 40px 5% 48px; text-align: center;
}
.tdp-pane-title { font-size: 26px; margin: 0 0 12px; }
.tdp-pane-text { max-width: 720px; margin: 0 auto 28px; font-size: 15px; line-height: 1.6; opacity: .85; }
.tdp-pane-inner .image-full { max-width: 860px; margin: 0 auto; }

@keyframes tdpFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
  .tdp-section { padding: 40px 5%; }
  .tdp-heading { font-size: 24px; margin-bottom: 24px; }
  .tdp-tabs-menu { gap: 10px; }
  .tdp-tab { width: calc(25% - 8px); min-width: 78px; height: auto; aspect-ratio: 1 / 1; padding: 8px 4px; gap: 6px; }
  .tdp-tab-icon { width: 32px; height: 32px; }
  .tdp-tab-label { font-size: 12px; }
  /* tiles wrap into rows on mobile — the neck would cross the row below */
  .tdp-tab.w--current::after { display: none; }
  .tdp-tabs-menu { margin-bottom: 16px; }
  .tdp-pane-inner { padding: 28px 16px 32px; }
  .tdp-pane-title { font-size: 20px; }
}