.radp {
  box-sizing: border-box;
  height: 70vh;
  max-height: 70vh;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 18px;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.radp-col {
  background: #F5F8F9;
  border-radius: 40px;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow children to scroll */
  min-width: 0;       /* critical for grid items to shrink instead of expanding the grid */
  max-width: 100%;
  overflow: inherit;
}

.radp-col-header {
  background-color: #4B6269;
  border-radius: 1024px;
  margin-bottom: 12px;
  padding: 6px 8px;
  width: fit-content;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.radp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

/* items */
.radp-item {
  background: #EBF2F4;
  border-radius: 28px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  white-space: nowrap;
  margin-bottom: 0;
}
.radp-item:hover { 
  background: #e6ecec; 
}
.radp-item.is-active {
  background: #CADFE5;
}

.radp-item .radp-item-count {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 1024px;
  border: 1px solid #4B6269;
  color: #4B6269;
  background-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Smooth color transition for titles on hover/active */
.radp-item .radp-item-title {
  text-wrap-mode: wrap;
  transition: color .2s ease, text-shadow .2s ease;
}

.radp-item.is-active .radp-item-count {
  border: 0;
  background-color: #263336;
  color: #FFF;
}

.radp-item.is-active .radp-item-title {
  font-weight: 600;
  color: #111;
}

/* solutions panel */
.radp-col--solutions .radp-solutions {
  /* overflow: auto; */
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.radp-solution {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: center;
  gap: 24px;
  background: #CADFE5;
  border-radius: 32px;
  padding: 24px 32px;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  width: 100%;
  min-width: 0;
}

.radp-solution .radp-solution-thumb {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  object-fit: cover;
  background: #c7d7d7;
}

.radp-solution-title {
  margin-bottom: 4px;
  transition: color .2s ease, text-shadow .2s ease;
}
.radp-solution-excerpt {
  transition: color .2s ease, opacity .2s ease;
}

.radp-solution-cta .radp-btn {
  display: inline-block;
  background: #2c3e3e;
  color: #fff;
  border-radius: 22px;
  padding: 10px 16px;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.radp-solution-cta .radp-btn:hover { background: #3C474A; }
.radp-solution-cta .radp-btn:active { background: #515C5E; }
.radp-solution-cta .radp-btn:focus { 
  background: #263336; 
  box-shadow: 0px 0px 0px 2px #ABABAB40;
}

.radp-empty {
  color: #657;
  opacity: .8;
  padding: 20px 8px;
  transition: color .2s ease, opacity .2s ease;
}

/* Scrollbars (nice-looking) */
.radp-list::-webkit-scrollbar,
.radp-col--solutions .radp-solutions::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.radp-list::-webkit-scrollbar-thumb,
.radp-col--solutions .radp-solutions::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.12);
  border-radius: 8px;
}

.radp-list,
.radp-col--solutions .radp-solutions,
.radp-col {
  scrollbar-width: none;    /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}
.radp-list::-webkit-scrollbar,
.radp-col--solutions .radp-solutions::-webkit-scrollbar,
.radp-col::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

@media (max-width: 1200px) {
  .radp-solution {
    gap: 12px;
  }
}

/* Responsive: tablet/mobile */
@media (max-width: 1024px) {
  .radp {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    height: auto; /* outer container can auto; inner scrollers enforce 95vh feel via fixed heights where requested */
    gap: 16px;
    max-height: unset;
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .radp-col.radp-col--problems,
  .radp-col.radp-col--areas,
  .radp-col.radp-col--solutions {
    max-width: 100%;
    min-width: 0;
  }

  /* New: scrolling viewport for lists */
  .radp-list-viewport {
    margin-left: -32px;    /* bleed into column horizontal padding */
    margin-right: -32px;
    padding-left: 32px;    /* keep visual padding */
    padding-right: 32px;
    overflow-x: auto;      /* horizontal scroll lives here */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  .radp-col--problems .radp-list,
  .radp-col--areas .radp-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    overflow: visible;     /* allow items to bleed inside viewport */
    width: max-content;    /* size to content so viewport can scroll */
    height: 100%;
  }

  /* prevent items from shrinking so they overflow horizontally */
  .radp-col--problems .radp-item,
  .radp-col--areas .radp-item {
    flex: 0 0 auto;
  }

  /* Hide scrollbars on the viewport */
  .radp-list-viewport {
    scrollbar-width: none;    /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
  }
  .radp-list-viewport::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  .radp-item {
    padding: 24px;
  }

  .radp-col--solutions .radp-solutions {
    max-height: none;
  }
  .radp-col.radp-col--problems,
  .radp-col.radp-col--areas {
    height: 156px;
    min-height: 156px;
    max-height: 156px;
    overflow: hidden;
  }

  /* Hide scrollbars on tablet/mobile */
  .radp-col--problems .radp-list,
  .radp-col--areas .radp-list,
  .radp-col--solutions .radp-solutions {
    scrollbar-width: none;    /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
  }
  .radp-col--problems .radp-list::-webkit-scrollbar,
  .radp-col--areas .radp-list::-webkit-scrollbar,
  .radp-col--solutions .radp-solutions::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }
  .radp-col {
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .radp-solution {
    grid-template-columns: 64px 1fr;
  }
  .radp-solution-cta { grid-column: 1 / -1; }
  .radp-btn { width: 100%; text-align: center; }
  .radp-col {
    padding: 24px 16px;
  }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .radp *,
  .radp *::before,
  .radp *::after {
    transition: none !important;
    animation: none !important;
  }
}