/**
 * /prajs/ and home #prices — readable multi-column tariff table on narrow viewports.
 * Horizontal swipe only inside `.prices-table-scroll__viewport`.
 */

.prices-table-scroll__hint {
  display: none;
}

.prices-table-scroll__viewport {
  max-width: 100%;
}

@media all and (max-width: 967px) {
  .prices-table-scroll {
    position: relative;
    max-width: 100%;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .prices-table-scroll__hint {
    display: block;
    margin: 0 0 10px;
    font-family: var(--second-family);
    font-size: 13px;
    line-height: 130%;
    color: #929fa2;
  }

  .prices-table-scroll__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    padding-inline: max(16px, env(safe-area-inset-left, 0px));
    scroll-padding-inline: max(16px, env(safe-area-inset-left, 0px));
  }

  .prices-table-scroll__viewport::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .prices-table-scroll .prices-table.four {
    min-width: 560px;
    width: max-content;
    max-width: none;
  }

  .prices-table-scroll .prices-table.four .prices-table__tr {
    font-size: 16px;
    line-height: 140%;
    grid-template-columns: min(40vw, 150px) repeat(3, minmax(108px, 1fr));
    width: max-content;
    min-width: 100%;
    align-items: stretch;
  }

  .prices-table-scroll .prices-table.four .prices-table__td {
    padding: 14px 12px 10px;
    position: relative;
    z-index: 0;
    background-color: #fff;
  }

  .prices-table-scroll .prices-table.four .prices-table__tr:first-child .prices-table__td {
    padding: 12px;
    background-color: #eef1f1;
  }

  .prices-table-scroll .prices-table.four .prices-table__tr:hover .prices-table__td {
    background-color: #eef1f1;
  }

  .prices-table-scroll .prices-table.four .prices-table__td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    max-width: min(40vw, 150px);
    width: min(40vw, 150px);
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    background-color: #fff;
    box-shadow: 4px 0 10px -6px rgba(44, 44, 44, 0.18);
  }

  .prices-table-scroll .prices-table.four .prices-table__tr:first-child .prices-table__td:first-child,
  .prices-table-scroll .prices-table.four .prices-table__tr:hover .prices-table__td:first-child {
    background-color: #eef1f1;
    z-index: 3;
  }

  .prices-table-scroll .prices-table.half {
    min-width: 0;
    width: 100%;
  }

  .prices-table-scroll .prices-table.half .prices-table__tr {
    font-size: 16px;
    line-height: 140%;
    grid-template-columns: min(40vw, 150px) minmax(88px, 1fr);
    width: 100%;
  }

  .prices-table-scroll .prices-table.half .prices-table__td:first-child {
    max-width: min(40vw, 150px);
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}