/* Small-phone fixes (checked at 320 / 375 / 390 / 414 px). */

/* The long e-mail address must be able to wrap, otherwise it sets the min-content width of the
   contact grid and the whole page scrolls sideways on 320px screens. */
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* The 2x2 audience tabs in "Funkcje" are too narrow for "Dla wykonawców" below ~360px:
   stack them in one column there. */
@media (max-width: 359px) {
  [data-tablist] { grid-template-columns: minmax(0, 1fr); }
}

/* List check icons must not shrink when the text next to them wraps to two lines. */
li.flex > span.grid.rounded-full { flex-shrink: 0; }

/* Package comparison table. On desktop it is unchanged. On phones it used to keep a 46rem
   min-width inside a horizontal scroller, so only the "Podstawowa" column was visible and the
   table read as "almost nothing included". Below md all four packages fit: short column names,
   icon-only cells (the legend above explains the icons), text kept for screen readers. */
.pkg-short { display: none; }
@media (max-width: 767px) {
  table.compare-table { min-width: 0; table-layout: fixed; }
  table.compare-table thead th:first-child { width: 40%; }
  table.compare-table th,
  table.compare-table td { padding: 0.75rem 0.125rem; }
  table.compare-table tbody th,
  table.compare-table thead th:first-child { padding-left: 1rem; padding-right: 0.5rem; font-size: 14px; line-height: 1.35; }
  table.compare-table thead th:not(:first-child) { font-size: 13px; line-height: 1.2; }
  table.compare-table td .h-7 { width: 1.5rem; height: 1.5rem; }
  table.compare-table td .text-xs,
  table.compare-table .pkg-full {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  table.compare-table .pkg-short { display: inline; }
}