/* =============================================================
   PRESS — Editorial placements strip
   Slim confidence signal between About and Playlists.
   Not a full section — minimal padding, no heading.
   Depends on: tokens.css, global.css
   ============================================================= */


/* -----------------------------------------------------------
   .press — slim strip wrapper
----------------------------------------------------------- */
.press {
  background-color: var(--color-abyss);
  padding: var(--space-10) 0;
  border-top: 0.5px solid var(--color-slate);
  border-bottom: 0.5px solid var(--color-slate);
}


/* -----------------------------------------------------------
   .press__inner — horizontal flex row:
   label | placements | qualifier
----------------------------------------------------------- */
.press__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}


/* -----------------------------------------------------------
   .press__label — "Featured on"
----------------------------------------------------------- */
.press__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-signal);
  white-space: nowrap;
  flex-shrink: 0;
}


/* -----------------------------------------------------------
   .press__placements — scrollable row of placement items
----------------------------------------------------------- */
.press__placements {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  flex: 1;
}


/* -----------------------------------------------------------
   .press__item — single placement: platform + name
----------------------------------------------------------- */
.press__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.press__platform {
  display: flex;
  align-items: center;
  gap: 5px;
}

.press__platform-icon {
  display: block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background-color: var(--color-signal);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.press__platform-icon--spotify {
  mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/spotify.svg');
  -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/spotify.svg');
}

.press__platform-icon--apple {
  mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/applemusic.svg');
  -webkit-mask-image: url('https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/applemusic.svg');
}

.press__platform-name {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-signal);
}

.press__placement-name {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--color-mist);
  letter-spacing: 0.04em;
  white-space: nowrap;
}


/* -----------------------------------------------------------
   .press__divider — vertical hairline between items
----------------------------------------------------------- */
.press__divider {
  width: 0.5px;
  height: 28px;
  background-color: var(--color-slate);
  flex-shrink: 0;
}


/* -----------------------------------------------------------
   .press__qualifier — "across releases · as an artist"
   Right-aligned, muted, italic
----------------------------------------------------------- */
.press__qualifier {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 300;
  font-style: italic;
  color: var(--color-signal);
  opacity: 0.6;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}


/* -----------------------------------------------------------
   RESPONSIVE — mobile: stack vertically, hide dividers
----------------------------------------------------------- */
@media (max-width: 768px) {
  .press__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .press__qualifier {
    margin-left: 0;
  }

  .press__divider {
    display: none;
  }
}