/* Campsite entries keep their labels when stacked on a phone. */
.sp-camping-comparison { width: 100%; border-collapse: collapse; text-align: left; }
.sp-camping-comparison caption { text-align: left; font-weight: 700; margin-bottom: 1rem; }
.sp-camping-comparison th,
.sp-camping-comparison td { padding: 1rem; border-bottom: 1px solid #ddd; vertical-align: top; }
.sp-camping-comparison thead { background: #f3f4f6; }
.sp-camping-comparison th[scope="row"] { width: 20%; }
.sp-camping-checked { display: inline-block; margin-top: .5rem; font-size: .875rem; font-weight: normal; }

@media (max-width: 1023px) {
  .sp-camping-comparison,
  .sp-camping-comparison caption,
  .sp-camping-comparison tbody,
  .sp-camping-comparison tr,
  .sp-camping-comparison th,
  .sp-camping-comparison td { display: block; width: auto; }

  .sp-camping-comparison thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .sp-camping-comparison tr { border: 1px solid #ddd; margin-bottom: 1.5rem; }
  .sp-camping-comparison th[scope="row"] { width: auto; background: #f3f4f6; }
  .sp-camping-comparison td:last-child { border-bottom: 0; }
  .sp-camping-comparison td::before { content: attr(data-label); display: block; font-weight: 700; margin-bottom: .5rem; }
}