/* A performer's own public profile page (performers/show.html.erb) —
   same "main column + sidebar of cards" shape shows.css/
   performance_groups.css already use, reusing .sidebar-card from
   dashboard.css and .pg-header/.pg-header__identity/.pg-avatar from
   performance_groups.css directly rather than redefining them. Only
   what's actually new to this page (the header's action row and social
   icon row, the two-column grid, and the Ensembles/Performances rows'
   own layout) gets its own rules here. */
.performer-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.performer-header {
  margin-bottom: 1.5rem;
}

.performer-header__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

/* button_to renders a block-level <form> (see catalog.css's own
   .follow-icon-form comment) -- the non-compact Follow button here
   needs the same inline treatment to sit in this flex row. */
.performer-header__actions form {
  display: inline-block;
}

/* .contact_actions' own wrapper (.inline-links) is a full-width stacked
   list everywhere else it's used (auth flows) -- unwrapping it here via
   `display: contents` lets its Message/Hire links become direct items
   of this flex row instead, without touching the shared partial itself. */
.performer-header__actions .inline-links {
  display: contents;
}

.performer-header__actions .primary-button,
.performer-header__actions .secondary-link {
  width: auto;
  padding: 0.65rem 1.25rem;
}

.performer-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.performer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--secondary-text);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.performer-social-icon:hover {
  background: var(--primary);
  color: #ffffff;
}

.performer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.performer-main,
.performer-aside {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

@media (max-width: 960px) {
  .performer-shell {
    padding: 1.25rem;
  }

  .performer-layout {
    grid-template-columns: 1fr;
  }
}

.performer-glance-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.performer-glance-facts li {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}

.performer-glance-facts li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.performer-group-rows,
.performer-show-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.performer-group-row,
.performer-show-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}

.performer-group-row:last-child,
.performer-show-row:last-child {
  border-bottom: none;
}

.pg-avatar.performer-group-row__avatar,
.performer-group-row__avatar.pg-avatar--placeholder {
  width: 40px;
  height: 40px;
  font-size: 1.05rem;
  flex: 0 0 auto;
}

.performer-group-row__body,
.performer-show-row__body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.performer-group-row__body a,
.performer-show-row__title a {
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
}

.performer-group-row__body a:hover,
.performer-show-row__title a:hover {
  color: var(--primary);
}

.performer-show-row__title {
  margin: 0;
}

.performer-group-row__chevron,
.performer-show-row__chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 1.3rem;
}

.performer-show-row__date {
  flex: 0 0 48px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  line-height: 1.3;
}

.performer-show-row__date strong {
  display: block;
  font-size: 1.1rem;
  color: var(--text);
}