/* Parcel Eligibility list rows. Prefixed `eligibility-` because this ships in watermarkBundle,
   which loads app-wide.

   Parcel, Acres, Water Account, Reason, Base, Transitional. Minimums are sized to fit the col-lg-8
   list column at the xl container width, below which the rows stack. */
.eligibility-grid {
  --eligibility-cols: minmax(7.5rem, 1.2fr) 4rem minmax(6.5rem, 1fr) minmax(8rem, 1.1fr) minmax(6rem, 0.9fr) minmax(6.5rem, 0.9fr);
}

.eligibility-grid__head,
.eligibility-grid__row {
  display: grid;
  grid-template-columns: var(--eligibility-cols);
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.875rem 1rem;
}

.eligibility-grid__head {
  padding-top: 0.625rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.eligibility-grid__row {
  border-top: 1px solid var(--bs-border-color-translucent);
}

.eligibility-grid__row:first-child {
  border-top: 0;
}

/* Both values fall between the available fs- and ls- steps. */
.eligibility-grid__label {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.eligibility-grid__cell--end {
  text-align: right;
}

@media (max-width: 1199.98px) {
  .eligibility-grid__head {
    display: none;
  }

  .eligibility-grid__row {
    grid-template-columns: 1fr;
    row-gap: 0.625rem;
  }

  .eligibility-grid__cell--end {
    text-align: left;
  }

  /* The header is gone at this width, so each cell states its own label. */
  .eligibility-grid__cell[data-label] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 0.75rem;
  }

  .eligibility-grid__cell[data-label]::before {
    content: attr(data-label);
    flex: 0 0 100%;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
  }
}