/* ============ Musin — Music Artists landing ============
   Loaded on top of content.css: the shell (nav, sections, stacking cards,
   footer) is shared with the Content Creators landing and only the pieces that
   differ for artists are redefined here. */

/* ============ Hero: campaign results inside the example screen ============
   The card lives inside .main-phone__screen, so the screen's own rounded
   corners clip it and it reads as part of the UI rather than a card floating
   over the phone. That screen is 338px wide inside a .74-scaled phone, so
   everything here is sized in that space — divide by .74 for on-screen pixels
   (e.g. 26px here renders at ~19px). */
.hero-mockup {
  /* .main-phone is 400px wide at scale(.74) → 296x584px on screen */
  width: min(296px, 100%);
  height: 584px;
}

.main-phone { top: 0; }

.campaign-card {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  /* the card is anchored to the foot of the screen, so its spacing sets how far
     up the video it reaches */
  padding: 16px 24px 20px;
  /* top corners are the card's own; the bottom pair follows the screen's */
  border-radius: 34px 34px 40px 40px;
  background: rgba(32, 32, 34, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Cover + title/artist, centred at the top of the card so the block sits
   straight above the figures below it */
.campaign-card__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 16px;
}

.campaign-card__cover {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 11px;
}

.campaign-card__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
  color: var(--text-primary);
}

.campaign-card__artist {
  font-size: 14px;
  line-height: 19px;
  color: var(--text-dim);
}

/* Posts / Views / Engagements / Cost, label right of centre, value left of it */
.campaign-card__rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  column-gap: 26px;
  row-gap: 11px;
}

.campaign-row__label,
.campaign-row__value {
  font-size: 19px;
  font-weight: 700;
  line-height: 22px;
  white-space: nowrap;
}

.campaign-row__label {
  text-align: right;
  font-weight: 600;
  color: var(--text-dim);
}

.campaign-row__value {
  color: var(--text-primary);
  /* the digits tween on every clip change — keep the column steady */
  font-variant-numeric: tabular-nums;
}

/* Views on the left, Engagements a little lower on the right of the example
   screen. Offsets are in the phone's own (unscaled) 400px space. */
.notif--views { top: 150px; left: -62px; }
.notif--engagements { top: 268px; right: -62px; }
.notif--engagements .notif__icon { background: #d8a608; }
.notif--engagements .notif__icon img { width: 20px; height: 20px; }

/* ============ Select content creators ============
   Same layout as "Choose music you like", but the cards hold a round creator
   photo, the platform they post on, their handle and follower count (#3). */
.creator-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px 16px 22px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card-2);
  text-align: center;
  flex: 0 0 auto;
  width: 196px;
}

/* Circle frame instead of the square track cover (#3) */
.creator-chip__photo {
  width: 152px;
  height: 152px;
  border-radius: 50%;
  background-color: var(--bg-card);
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
}

.creator-chip__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}

/* Small platform glyph, drawn as a mask so it always matches the text colour.
   The mask URLs live here rather than in a custom property because a url()
   passed through var() resolves against this file, not the page. */
.creator-chip__platform {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background-color: var(--text-primary);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.creator-chip__platform--instagram { -webkit-mask-image: url("../img/social/s08-instagram.svg"); mask-image: url("../img/social/s08-instagram.svg"); }
.creator-chip__platform--tiktok { -webkit-mask-image: url("../img/social/s10-tiktok.svg"); mask-image: url("../img/social/s10-tiktok.svg"); }
.creator-chip__platform--youtube { -webkit-mask-image: url("../img/social/s09-youtube.svg"); mask-image: url("../img/social/s09-youtube.svg"); }

.creator-chip__followers {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-dim);
}

/* ============ Build engagement around your music ============
   Campaign cards on the same coverflow the Content landing uses for its clips.
   They advance on a timer, so the scroller takes no pointer input. */
.campaigns .create__scroller { cursor: default; touch-action: auto; }
.campaigns .create__scroller.no-anim .campaign-tile { transition: none; }

/* Positioned by the wheel, exactly like .video-card */
.campaign-tile {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(190px, 56vw, 260px);
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 26px;
  overflow: hidden;
  background: var(--bg-card-2);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.55s ease, opacity 0.55s ease;
  backface-visibility: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  will-change: transform, filter, opacity;
}

.campaign-tile__cover {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background-color: var(--bg-card);
  background-size: cover;
  background-position: center;
}

/* The text fills the space under the cover, evenly divided between the track,
   its figures and the headline number */
.campaign-tile__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-top: 4px;
}

.campaign-tile__track { text-align: center; }

.campaign-tile__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 23px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.campaign-tile__artist {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Label left, figure right, so the numbers line up down the card. Posts,
   Views and Engagements are three equal rows — none is emphasised over
   the others. */
.campaign-tile__stats { display: flex; flex-direction: column; gap: 4px; }

.campaign-tile__stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.campaign-tile__stats > div:last-child { border-bottom: none; }

.campaign-tile__stats dt {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-dim);
}

.campaign-tile__stats dd {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ============ Pay only for results (#5) ============
   Same four stacking cards as the Content landing, different glyphs. */
.pay-card:nth-child(1) .pay-card__icon::before { -webkit-mask-image: url("../img/icons/music-note.svg"); mask-image: url("../img/icons/music-note.svg"); }
.pay-card:nth-child(2) .pay-card__icon::before { -webkit-mask-image: url("../img/icons/pay-profile.svg"); mask-image: url("../img/icons/pay-profile.svg"); }
.pay-card:nth-child(3) .pay-card__icon::before { -webkit-mask-image: url("../img/icons/pay-check.svg"); mask-image: url("../img/icons/pay-check.svg"); }
.pay-card:nth-child(4) .pay-card__icon::before { -webkit-mask-image: url("../img/icons/pay-dollar.svg"); mask-image: url("../img/icons/pay-dollar.svg"); }

/* The footer is identical on every page — its rules live in content.css. */

/* ============ Responsive ============ */
@media (max-width: 600px) {
  /* .main-phone drops to scale(.72) here → 288x568px on screen. The campaign
     card lives inside the screen, so it scales with the phone and needs no
     rules of its own. */
  .hero-mockup { width: min(288px, 100%); height: 568px; }

  .notif--views { top: 150px; left: -46px; }
  .notif--engagements { top: 268px; right: -46px; }

  .creator-chip { width: 168px; gap: 16px; padding: 16px 12px 18px; }
  .creator-chip__photo { width: 132px; height: 132px; }
  .creator-chip__name { font-size: 15px; }
}