/* ============================================================
   Riaz Developers — Team Roster Widget
   PANELS ONLY — no header. Place native Elementor Heading/Divider
   widgets above this for the eyebrow + pull-line heading.
   3 columns: index, name, role. No department column.
   ============================================================ */

.riaz-roster * ,
.riaz-roster *::before,
.riaz-roster *::after {
  box-sizing: border-box;
}

.riaz-roster {
  font-family: 'Urbanist', sans-serif;
  border-top: 1px solid #F0EDE6;
}

.riaz-roster-row {
  display: grid;
  grid-template-columns: 64px 1.4fr 1fr;
  align-items: center;
  gap: 32px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(240,237,230,0.14);
  transition: background 0.3s ease, padding-left 0.3s ease;
}

.riaz-roster-row:hover {
  background: rgba(240,237,230,0.04);
  padding-left: 16px;
}

.riaz-roster-row.is-lead {
  padding: 40px 0;
  border-bottom-color: #F0EDE6;
}

.riaz-row-num {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(240,237,230,0.4);
}
.riaz-roster-row.is-lead .riaz-row-num {
  color: #C09A45;
}

.riaz-row-name {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
  color: #F0EDE6;
  line-height: 1.2;
  transition: color 0.3s ease;
}
.riaz-roster-row:hover .riaz-row-name {
  color: #C09A45;
}
.riaz-roster-row.is-lead .riaz-row-name {
  font-size: clamp(28px, 2.6vw, 38px);
}

.riaz-row-role {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #A07D30;
  text-align: right;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .riaz-roster-row {
    grid-template-columns: 36px 1fr;
    grid-template-areas:
      "num name"
      ".   role";
    row-gap: 6px;
    padding: 24px 0;
  }
  .riaz-row-num  { grid-area: num; }
  .riaz-row-name { grid-area: name; }
  .riaz-row-role {
    grid-area: role;
    text-align: left;
    color: rgba(240,237,230,0.4);
  }
  .riaz-roster-row.is-lead .riaz-row-name {
    font-size: 26px;
  }
}