/* =========================================================
   POOL PROMOTION — AIRPLAY CHARTS
   ========================================================= */

/* =========================================================
   PAGE
   ========================================================= */

.charts-page {
  position: relative;

  width: 100%;
  max-width: 1200px;

  margin-left: auto;
  margin-right: auto;

  padding-top: 70px;
  padding-bottom: 120px;
  padding-left: 0;
  padding-right: 0;
}

/* =========================================================
   COMPLETE RANKING
   ========================================================= */

.charts-ranking {
  width: 100%;

  margin: 0;
}

/* =========================================================
   ONE CHART POSITION
   ========================================================= */

.chart-row {
  display: grid;

  column-gap: 30px;

  align-items: start;

  width: 100%;

  padding:
    22px
    0
    25px;

  /*
   * Keine Trennlinien
   */
  border: 0;

  opacity: 0;

  animation:
    chartRowIn
    .8s
    cubic-bezier(.16, 1, .3, 1)
    forwards;
}

/* =========================================================
   STAGGER
   ========================================================= */

.chart-row:nth-child(1) {
  animation-delay: .05s;
}

.chart-row:nth-child(2) {
  animation-delay: .10s;
}

.chart-row:nth-child(3) {
  animation-delay: .15s;
}

.chart-row:nth-child(4) {
  animation-delay: .20s;
}

.chart-row:nth-child(5) {
  animation-delay: .25s;
}

.chart-row:nth-child(6) {
  animation-delay: .30s;
}

.chart-row:nth-child(7) {
  animation-delay: .35s;
}

.chart-row:nth-child(8) {
  animation-delay: .40s;
}

.chart-row:nth-child(9) {
  animation-delay: .45s;
}

.chart-row:nth-child(10) {
  animation-delay: .50s;
}

/* =========================================================
   POSITION
   ========================================================= */

.chart-position {
  margin: 0;
  padding: 0;

  color: var(--berry);

  line-height: .8;

  font-weight: 600;

  letter-spacing: -.05em;
}

/* =========================================================
   ENTRIES
   ========================================================= */

.chart-items {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  grid-auto-flow: row;

  column-gap:
    clamp(35px, 5vw, 90px);

  row-gap: 9px;

  width: 100%;

  align-items: start;
}

/* =========================================================
   SINGLE ENTRY
   ========================================================= */

/*
 * Der Eintrag verhält sich wieder wie
 * normaler Fließtext.
 *
 * Dadurch kann der Songtitel bei Bedarf
 * komplett an den Anfang der nächsten
 * Zeile springen.
 */

.chart-entry {
  display: block;

  min-width: 0;

  margin: 0;
  padding: 0;

  color: #fff;

  font-size: 18px;
  line-height: 1.25;

  font-weight: 400;

  white-space: normal;

  transition:
    opacity .25s ease;
}

/* =========================================================
   ARTIST + DOT
   ========================================================= */

/*
 * Künstler und Punkt sind EINE Einheit.
 *
 * Beispiel:
 *
 * Lost Frequencies ●
 *
 * Zwischen Künstler und Punkt kann
 * niemals umgebrochen werden.
 */

.chart-artist-wrap {
  display: inline-block;

  margin: 0;
  padding: 0;

  white-space: nowrap;
}

/* =========================================================
   ARTIST
   ========================================================= */

.chart-artist {
  display: inline;

  margin: 0;
  padding: 0;

  color: #fff;

  white-space: nowrap;

  overflow: visible;

  text-overflow: clip;
}

/* =========================================================
   SONG
   ========================================================= */

/*
 * Der Songtitel ist eine eigene
 * untrennbare Einheit.
 *
 * PASST:
 *
 * Kamrad ● Feel Alive
 *
 *
 * PASST NICHT:
 *
 * Lost Frequencies ●
 * What Is Love 2016
 *
 *
 * Er beginnt also in Zeile 2 wieder
 * ganz vorne innerhalb seiner Spalte.
 *
 * Keine ...
 */

.chart-song {
  display: inline-block;

  margin: 0;
  padding: 0;

  color: #fff;

  white-space: nowrap;

  overflow: visible;

  text-overflow: clip;

  vertical-align: top;
}

/* =========================================================
   OPTIONAL INFO
   ========================================================= */

.chart-info {
  display: inline-block;

  margin-left: 5px;

  color:
    rgba(255, 255, 255, .55);

  font-size: .85em;

  white-space: nowrap;
}

/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .chart-items:hover
  .chart-entry:not(:hover) {
    opacity: .3;
  }

}

/* =========================================================
   INTRO ANIMATION
   ========================================================= */

@keyframes chartRowIn {

  from {
    opacity: 0;

    transform:
      translate3d(
        0,
        30px,
        0
      );
  }

  to {
    opacity: 1;

    transform:
      translate3d(
        0,
        0,
        0
      );
  }

}

/* =========================================================
   TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1260px) {

  .charts-page {
    width:
      calc(100% - 60px);

    padding-top: 60px;
    padding-bottom: 100px;
  }

}

@media (max-width: 1100px) {

  .chart-row {

    column-gap: 25px;
  }

  .chart-items {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    column-gap: 35px;
  }

  .chart-entry {
    font-size: 18px;
  }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .charts-page {
    width:
      calc(100% - 40px);

    padding-top: 45px;
    padding-bottom: 70px;

    padding-left: 0;
    padding-right: 0;
  }

  .chart-row {

    column-gap: 15px;

    padding:
      18px
      0
      20px;

    border: 0;
  }

  .chart-items {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    column-gap: 20px;

    row-gap: 10px;
  }

  .chart-entry {
    font-size: 13px;
    line-height: 1.25;
  }

}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 460px) {

  .chart-row {

    column-gap: 12px;
  }

  .chart-items {
    grid-template-columns: 1fr;

    row-gap: 10px;
  }

  .chart-entry {
    font-size: 18px;
  }

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .chart-row {
    opacity: 1;

    transform: none;

    animation: none;
  }

}

/* =========================================================
   AKTUELLE WERTE (Stern, Abstände, Zahlen)
   - Sternchen statt Berry-Punkt, mittig zwischen Artist und Song
   - nach jeder Positionsgruppe eine deutliche Leerzeile
   ========================================================= */

.chart-star {
  font-weight: 700;
  /* das Sternchen sitzt in der Schrift oben – auf die Mitte der
     Großbuchstaben setzen (ausgemessen) */
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .chart-entry:hover .chart-star { transform: scale(1.3); }
}

.chart-row {
  padding-top: 22px;
  padding-bottom: calc(25px + 1.25em);   /* + eine Leerzeile */
}
@media (max-width: 700px) {
  .chart-row { padding-bottom: calc(18px + 1.25em); }
}

/* Positionszahlen etwas kleiner (gleich groß wie die Buchstaben
   in Archive und Client Roster) */
.chart-position { font-size: 38px; padding-top: 3px; }
.chart-row { grid-template-columns: 46px minmax(0, 1fr); }
@media (max-width: 1100px) {
  .chart-position { font-size: 34px; }
  .chart-row { grid-template-columns: 44px minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .chart-position { font-size: 30px; }
  .chart-row { grid-template-columns: 34px minmax(0, 1fr); }
}

/* =========================================================
   STERN aus zwei Dreiecken (Hexagramm) – Airplay Peaks, Überschrift, Kontakt
   6 Zacken, symmetrisch – als Maske, Farbe = currentColor.
   vertical-align: middle = genau mittig zur Kleinbuchstaben-Höhe
   ========================================================= */
body .chart-star,
body .contact-star {
  display: inline-block;
  width: var(--star-size);
  height: var(--star-size);
  font-size: inherit;      /* Größe relativ zur umgebenden Schrift */
  overflow: hidden;        /* das „*“ im HTML ist unsichtbar (nur Fallback) */
  line-height: 0;
  color: transparent;
  background: var(--berry);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 64.43,25 93.3,25 78.87,50 93.3,75 64.43,75 50,100 35.57,75 6.7,75 21.13,50 6.7,25 35.57,25'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 64.43,25 93.3,25 78.87,50 93.3,75 64.43,75 50,100 35.57,75 6.7,75 21.13,50 6.7,25 35.57,25'/%3E%3C/svg%3E") center / contain no-repeat;
  vertical-align: middle;
  position: relative;
  top: var(--star-nudge, 0);
}
body .chart-star {
  --star-size: .74em;
  margin: 0 .3em;
}
body .contact-star {
  --star-size: .74em;
  margin: 0 .3em;
}

/* =========================================================
   AIRPLAY PEAKS: Künstler + Song immer in einer Zeile
   Ab 1200px Fensterbreite (Inhalt bis 1280px) zwei Spalten –
   so passt auch der längste Eintrag in eine Zeile. Kein erzwungenes
   „nowrap“: wird ein Eintrag künftig extrem lang, rutscht der Song
   in die nächste Zeile, statt in die Nachbarspalte zu laufen.
   ========================================================= */
@media (min-width: 1200px) {
  body .charts-page .chart-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(40px, 4vw, 80px);
  }
}