/* Profile header on phone: the counters move up beside the avatar, Instagram-style.
   Selectors carry both profile classes (0,3,0) because the live docroot app.css has no
   .mtv-profile--premium layout rules at all, while the local copy has several more
   specific ones — the header must resolve identically in either cascade. */

/* The counters are plain text at every width; only the follower count is a tap target,
   and the premium layer otherwise right-aligns and bolds any link in this row. */
.mtv-profile.mtv-profile--premium .mtv-profile__stats a.mtv-profile__stat {
  margin-left: 0;
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.mtv-profile.mtv-profile--premium .mtv-profile__stats a.mtv-profile__stat:hover { color: inherit; }

@media (max-width: 760px) {
  .mtv-profile.mtv-profile--premium .mtv-profile__head {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 0;
    align-items: start;
    padding: 0 18px 20px;
  }
  .mtv-profile.mtv-profile--premium .mtv-profile__head > .mtv-avatar {
    width: 92px;
    height: 92px;
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-top: -46px;
  }
  /* Let the name, counters and handle become grid items of the head. */
  .mtv-profile.mtv-profile--premium .mtv-profile__id { display: contents; }
  .mtv-profile.mtv-profile--premium .mtv-profile__id h1 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 7px;
    margin: 0;
    font-size: 21px;
    line-height: 1.15;
  }
  .mtv-profile.mtv-profile--premium .mtv-profile__stats {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 10px;
    margin: 5px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 12.5px;
    line-height: 1.35;
    color: #526b7f;
  }
  .mtv-profile.mtv-profile--premium .mtv-profile__stats strong { font-size: 13.5px; color: var(--mtv-navy); }
  .mtv-profile.mtv-profile--premium .mtv-profile__stats a { margin-left: 0; }
  .mtv-profile.mtv-profile--premium .mtv-profile__stat { white-space: nowrap; }
  /* Instagram: the follower count is the tap target, so the duplicate text link goes. */
  .mtv-profile.mtv-profile--premium .mtv-profile__statlink { display: none; }
  /* The unserved premium layer makes every stats link inline-flex, which eats the
     space between the number and its word. */
  .mtv-profile.mtv-profile--premium .mtv-profile__stat--link { display: inline; color: inherit; text-decoration: none; }
  .mtv-profile.mtv-profile--premium .mtv-profile__handle-row {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 10px 0 0;
    gap: 6px 8px;
  }
  .mtv-profile.mtv-profile--premium .mtv-profile__handle { margin: 0; font-size: 13px; }
  .mtv-profile.mtv-profile--premium .mtv-profile__roles,
  .mtv-profile.mtv-profile--premium .mtv-profile__bio,
  .mtv-profile.mtv-profile--premium .mtv-profile__skills,
  .mtv-profile.mtv-profile--premium .mtv-profile__meta,
  .mtv-profile.mtv-profile--premium .mtv-profile__actions { grid-column: 1 / -1; }
  .mtv-profile.mtv-profile--premium .mtv-profile__roles { margin: 10px 0 0; }
  .mtv-profile.mtv-profile--premium .mtv-profile__bio { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
  .mtv-profile.mtv-profile--premium .mtv-profile__skills,
  .mtv-profile.mtv-profile--premium .mtv-profile__meta { margin: 6px 0 0; font-size: 13px; }
  .mtv-profile.mtv-profile--premium .mtv-profile__actions { padding-top: 14px; }
}

/* At 320 the counters only stay on one Instagram line with a narrower avatar. */
@media (max-width: 360px) {
  .mtv-profile.mtv-profile--premium .mtv-profile__head {
    grid-template-columns: 68px minmax(0, 1fr);
    column-gap: 12px;
    padding: 0 14px 18px;
  }
  .mtv-profile.mtv-profile--premium .mtv-profile__head > .mtv-avatar {
    width: 68px;
    height: 68px;
    margin-top: -34px;
  }
  .mtv-profile.mtv-profile--premium .mtv-profile__id h1 { font-size: 19px; }
  .mtv-profile.mtv-profile--premium .mtv-profile__stats { gap: 3px 7px; font-size: 11.5px; }
  .mtv-profile.mtv-profile--premium .mtv-profile__stats strong { font-size: 12.5px; }
}