/*
  Mobile results place fix
  Cel: numer/miejsce w wynikach mobilnych ma być idealnie na środku swojego pola.
  Dotyczy: publiczne wyniki, tabela .score-table.responsive-table, komórka td.place.
*/

@media (max-width: 768px) {

  /*
    Główna poprawka.
    W widoku mobilnym aplikacja używa układu kafelkowego/gridowego,
    dlatego td.place musi być osobnym flex-boxem.
  */

  #wyniki .score-table.responsive-table td.place,
  #resultsTabs .score-table.responsive-table td.place,
  .tabs .score-table.responsive-table td.place,
  .card .score-table.responsive-table td.place,
  .score-table.responsive-table td.place {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    vertical-align: middle !important;

    min-height: 100% !important;
    height: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    justify-self: stretch !important;
    align-self: stretch !important;
    place-self: stretch !important;
  }

  /*
    Ukrycie mobilnej etykiety przy numerze/miejscu.
    W Twoim HTML część td.place ma data-label="", część data-label="Kolejność".
    Bez tego pseudo-element ::before potrafi spychać numer w lewo.
  */

  #wyniki .score-table.responsive-table td.place::before,
  #resultsTabs .score-table.responsive-table td.place::before,
  .score-table.responsive-table td.place::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /*
    Jeżeli wcześniejszy CSS przypisuje grid-area: place,
    to zostawiamy grid-area, ale centrowanie wymuszamy wewnątrz pola.
  */

  #wyniki .score-table.responsive-table td.place,
  #resultsTabs .score-table.responsive-table td.place {
    grid-area: place !important;
  }

  /*
    Jeżeli numer jest linkiem/spanem wewnątrz td.place.
  */

  #wyniki .score-table.responsive-table td.place > *,
  #resultsTabs .score-table.responsive-table td.place > *,
  .score-table.responsive-table td.place > * {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}