/* pri_table.css
   -------------
   Styles for both the PRI Stars Table (pri_table) and its PRI Row
   children (pri_row). CSS is intentionally kept in the parent file
   because pri_row is never used standalone.

   Layout: CSS Grid with 3 columns (3fr 2fr 2fr).
   Colours: teal (--ra-accent-2) for Renaissance stars,
            muted (--ra-muted)  for median stars,
            near-transparent for empty star positions.
*/

/* ── Table wrapper ────────────────────────────────────────── */

.pri-table__responsive {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}

.pri-table {
  width: 100%;
}

@media (max-width: 767.98px) {
  .pri-table__responsive {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

  .pri-table {
    min-width: 25.875rem;
  }
}

.pri-table__head,
.pri-table__body {
  display: block;
}

/* ── Shared row grid (header row + data rows) ─────────────── */

.pri-table__header-row,
.pri-row {
  display: grid;
  grid-template-columns: 3fr 2fr 2fr;
  align-items: center;
  border-bottom: 1px solid rgba(15, 43, 70, 0.12);
  padding: 0;
}

/* ── Column headers ───────────────────────────────────────── */

.pri-table__th {
  font-size: 1rem;      /* 16px — allineato al vecchio sito */
  font-weight: 500;
  color: var(--ra-dark, #212529);
  padding: 1.25rem 0.9375rem; /* 20px 15px — match vecchio sito */
  line-height: 1.3;
}

.pri-table__th--module {
  text-align: left;
}

.pri-table__th--ratings {
  text-align: center;
}

/* ── Data row cells ───────────────────────────────────────── */

.pri-row__module {
  font-size: 1rem;      /* 16px */
  font-weight: 300;     /* match vecchio sito: font-weight:300px */
  color: var(--ra-dark, #212529); /* testo normale — NON teal. Teal è solo le stelle. */
  padding: 1.25rem 0.9375rem; /* 20px 15px — match vecchio sito */
  line-height: 1.4;
}

.pri-row__rating {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.25rem 0.9375rem; /* 20px 15px — coerente con module cell */
}

/* ── Stars ────────────────────────────────────────────────── */

.pri-row__stars {
  display: inline-flex;
  gap: 0.05rem;
  font-size: 1rem;
  line-height: 1;
}

.pri-row__stars .bi {
  display: inline-block;
}

/* Renaissance column: teal filled stars */
.pri-row__rating--renaissance .bi {
  color: var(--ra-accent-2);
}

/* Median column: gray filled stars */
.pri-row__rating--median .bi {
  color: var(--ra-muted);
}

/* Empty positions (beyond the rating): near-transparent */
.pri-row__star--empty {
  color: rgba(107, 122, 134, 0.22) !important;
}

/* ── Footnote ─────────────────────────────────────────────── */

.pri-table__footnote {
  width: 90%;
  margin: 0.875rem 5% 0;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--ra-dark, #212529);
}

.pri-table__footnote p {
  margin: 0;
}