/* =========================================================
   POOL PROMOTION — ARCHIVE
   ========================================================= */

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

.archive-page {
  position: relative;

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

  margin: 0 auto;

  padding-top: 90px;
  padding-bottom: 120px;

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

/* =========================================================
   DESKTOP / TABLET COLUMNS
   ========================================================= */

.archive-columns {
  width: 100%;

  column-count: 6;
  column-gap: 42px;

  column-fill: balance;
}

/* =========================================================
   MOBILE VERSION
   AUF DESKTOP VERSTECKEN
   ========================================================= */

.archive-mobile {
  display: none;
}

/* =========================================================
   LETTER GROUP
   ========================================================= */

.archive-group {
  display: grid;

  grid-template-columns:
    17px
    minmax(0, 1fr);

  column-gap: 4px;

  width: 100%;

  margin: 0 0 5px;
  padding: 0;

  break-inside: avoid;
  page-break-inside: avoid;
}

/* =========================================================
   LETTER
   ========================================================= */

.archive-letter {
  margin: 0;
  padding: 0;

  color: var(--berry);

  font-size: 17px;
  line-height: 1.35;

  font-weight: 700;
}

/* =========================================================
   LIST
   ========================================================= */

.archive-list {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 0;

  min-width: 0;

  margin: 0;
  padding: 0;
}

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

.archive-artist {
  display: block;

  width: 100%;

  margin: 0;
  padding: 0;

  color: #fff;

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

  font-weight: 400;

  overflow-wrap: anywhere;

  transition:
    color .2s ease,
    opacity .2s ease;
}

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

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

  .archive-group:hover
  .archive-artist:not(:hover) {
    opacity: .3;
  }

  .archive-artist:hover {
    color: var(--berry);
  }

}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1260px) {

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

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

}

/* =========================================================
   5 COLUMNS
   ========================================================= */

@media (max-width: 1050px) {

  .archive-columns {
    column-count: 5;

    column-gap: 38px;
  }

}

/* =========================================================
   4 COLUMNS
   ========================================================= */

@media (max-width: 900px) {

  .archive-columns {
    column-count: 4;

    column-gap: 34px;
  }

}

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

   LINKS:
   A
   C
   E
   G
   ...

   RECHTS:
   B
   D
   F
   H
   ...

   Beide Spalten laufen unabhängig voneinander.

   Die linke Spalte wird am unteren Viewport-Rand sticky,
   sobald sie früher endet als die rechte.
   ========================================================= */

@media (max-width: 700px) {

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

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

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

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

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

    /*
     * Wichtig für sticky:
     * kein overflow hidden/clip
     */
    overflow: visible;
  }

  /* =======================================================
     DESKTOP / TABLET ARCHIVE AUS
     ======================================================= */

  .archive-columns-desktop {
    display: none !important;
  }

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

     Das Grid enthält NUR zwei Elemente:

     1. linke Spalte
     2. rechte Spalte

     Die Buchstabengruppen selbst sind deshalb nicht
     an gemeinsame Grid-Zeilen gebunden.
     ======================================================= */

  .archive-mobile {
    display: grid;

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

    column-gap: 30px;

    width: 100%;

    margin: 0;
    padding: 0;

    align-items: start;

    overflow: visible;
  }

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

     Jede Seite läuft vollkommen unabhängig.
     ======================================================= */

  .archive-mobile-column {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 5px;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    overflow: visible;
  }

  /* =======================================================
     LINKE SPALTE STICKY

     Sie scrollt zunächst normal mit.

     Wenn die linke Spalte kürzer als die rechte ist und
     ihr unteres Ende den unteren Viewport erreicht,
     bleibt sie dort stehen.

     Die rechte Spalte scrollt weiter.
     ======================================================= */

  .archive-mobile-column:first-child {
    position: sticky;

    bottom: 20px;

    align-self: end;
  }

  /* =======================================================
     RECHTE SPALTE

     Normaler Dokumentfluss.
     ======================================================= */

  .archive-mobile-column:last-child {
    position: relative;

    align-self: start;
  }

  /* =======================================================
     LETTER GROUP

     Jede Gruppe nimmt ausschließlich ihre tatsächliche
     Inhaltshöhe ein.

     Keine gemeinsamen Zeilen.
     Keine künstlichen Leerflächen.
     ======================================================= */

  .archive-mobile .archive-group {
    display: grid;

    grid-template-columns:
      17px
      minmax(0, 1fr);

    column-gap: 4px;

    width: 100%;
    min-width: 0;

    height: auto;

    margin: 0;
    padding: 0;

    align-self: auto;

    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* =======================================================
     ABSTAND ZWISCHEN BUCHSTABENGRUPPEN
     ======================================================= */

  .archive-mobile
  .archive-group + .archive-group {
    margin-top: 5px;
  }

  /* =======================================================
     LETTER — BERRY
     ======================================================= */

  .archive-mobile .archive-letter {
    display: block;

    margin: 0;
    padding: 0;

    color: var(--berry) !important;

    font-size: 17px;
    line-height: 1.35;

    font-weight: 700;
  }

  /* =======================================================
     LIST
     ======================================================= */

  .archive-mobile .archive-list {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 0;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
  }

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

  .archive-mobile .archive-artist {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    color: #fff;

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

    font-weight: 400;

    overflow-wrap: anywhere;

    transition:
      color .2s ease,
      opacity .2s ease;
  }

}

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

   Bewusst weiterhin 2 Spalten.
   ========================================================= */

@media (max-width: 420px) {

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

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

    column-gap: 20px;
  }

  .archive-mobile .archive-group {
    grid-template-columns:
      17px
      minmax(0, 1fr);

    column-gap: 4px;
  }

  .archive-mobile .archive-letter {
    color: var(--berry) !important;

    font-size: 17px;
    line-height: 1.35;

    font-weight: 700;
  }

  .archive-mobile .archive-artist {
    font-size: 18px;
    line-height: 1.35;
  }

  /*
   * Auf kleinen Screens etwas näher
   * am unteren Rand.
   */

  .archive-mobile-column:first-child {
    bottom: 15px;
  }

}

/* =========================================================
   BUCHSTABEN-SPALTE + ABSTÄNDE (aktuell)
   - eine Leerzeile zwischen den Buchstaben
   - Buchstaben so groß wie die Zahlen bei Airplay Peaks
   ========================================================= */

.archive-page .archive-group {
  margin: 0 0 var(--letter-gap, 24px);   /* = eine Leerzeile (18px × 1.35) */
}

/* Buchstaben im Stil der Airplay-Peaks-Zahlen (.chart-position) –
   Aufteilung der Liste bleibt wie vorher */
.archive-page .archive-group {
  grid-template-columns: var(--big-letter-col, 34px) minmax(0, 1fr);
  column-gap: 8px;
}
.archive-page .archive-letter {
  color: var(--berry);
  font-size: 38px;
  line-height: .8;
  font-weight: 600;
  letter-spacing: -.05em;
  padding-top: 3px;
}

/* Bricht ein Name um, stehen seine Zeilen eng zusammen –
   zwischen den Namen bleibt etwas Luft. So sieht man, was
   zusammengehört (Abstand pro Name bleibt etwa wie vorher). */
.archive-page .archive-artist {
  line-height: 1.12;
  padding: 2px 0 3px;
}

@media (max-width: 1100px) {
  .archive-page .archive-letter { font-size: 34px; }
}
@media (max-width: 700px) {
  .archive-page .archive-group { --big-letter-col: 28px; column-gap: 8px; }
  .archive-page .archive-letter { font-size: 30px; }
}

/* etwas schmalere Spaltenabstände → mehr Platz für die Namen, weniger Umbrüche */
.archive-page .archive-columns { column-gap: 30px; }