/* =========================================================
   ALBEN
   Datei: content-alben.css
========================================================= */

/* =========================================================
   VARIABLE
========================================================= */

          :root{
            --alben-gap: 24px;
          }

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

          .alben-intro{
            margin: 0 0 calc(var(--menu-gap) * 1.1);
            max-width: 75ch;
            color: rgba(255,255,255,0.88);
            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
          }

/* =========================================================
   SPRUNGMARKEN
========================================================= */

          .alben-jumps{
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 0 0 18px;
          }

          .alben-jumps a{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 12px;

            background: rgba(0,0,0,0.22);
            border: 1px solid var(--color-box-border);
            border-radius: calc(var(--radius-sm) - 1px);

            font-family: var(--font-style-headline);
            font-size: calc(var(--font-size-content) * 0.80);
            color: var(--color-link);
            text-decoration: none;
            white-space: nowrap;

            transition: background .2s ease, border-color .2s ease, color .2s ease;
          }

          .alben-jumps a:hover{
            background: var(--color-box-bg-strong);
            border-color: var(--color-box-border-strong);
            color: var(--color-link-hover);
          }

          /* Anker-Offset (Headerhöhe) */
          .alben-row,
          .alben-year,
          .alben-section{
            scroll-margin-top: 100px;
          }

/* =========================================================
   ROW: 2 Jahre nebeneinander (Desktop)
========================================================= */

          .alben-row{
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));

            column-gap: var(--alben-gap);
            row-gap: var(--alben-gap);

            margin-top: 22px;
            align-items: start;
          }

/* =========================================================
   YEAR BOX: einzelne Jahres-Box
========================================================= */

          .alben-year{
            padding: calc(var(--menu-gap) * 0.5);
            border: 1px solid var(--color-box-border);
              /* border: 1px solid rgba(255, 255, 255, 0.34); */    /* wie bei Terminen */
            border-radius: var(--radius-sm);
            background: var(--color-box-bg);
            transition: background .2s ease, border-color .2s ease;
            min-width: 0;
          }

          /* Nur leichter Hover */
          .alben-year:hover{
            background: var(--color-box-bg-strong);
            border-color: var(--color-box-border-strong);
          }

          .alben-year-title{
            margin: 0 0 14px;
            font-family: var(--font-style-headline);
            font-size: calc(var(--font-size-headline-section) * 0.85);
            color: #fff;
          }

/* =========================================================
   SECTION: normale Jahres-Abschnitte (1993, 1994, ...)
========================================================= */

          .alben-section{
            margin-top: 22px;
            padding: calc(var(--menu-gap) * 1.05);

            border: 1px solid var(--color-box-border);
            border-radius: var(--radius-sm);
            background: var(--color-box-bg);

            transition: background .2s ease, border-color .2s ease;
          }

          .alben-section:hover{
            background: var(--color-box-bg-strong);
            border-color: var(--color-box-border-strong);
          }

          .alben-section > h2{
            margin: 0 0 14px;
            font-family: var(--font-style-headline);
            font-size: calc(var(--font-size-headline-section) * 0.95);
            color: #fff;
          }

/* =========================================================
   GRID: Album-Kacheln (Jahres-Abschnitt zusammen (1999)
========================================================= */

          /* Default (Section-Grid) */
          .alben-grid{
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));

            column-gap: var(--alben-gap);
            row-gap: var(--alben-gap);

            align-items: stretch;
          }

          /* In einzelnen Year-Boxen standardmäßig 1 Spalte */
          .alben-year .alben-grid{
            grid-template-columns: 1fr;
          }

/* =========================================================
   ALBUM TILE (Link-Kachel)
========================================================= */

          .album-tile{
            display: grid;
            grid-template-columns: 96px 1fr;
            gap: 14px;

            padding: 14px;
            background: var(--color-box-bg);
            border: 1px solid var(--color-box-border);
            border-radius: var(--radius-sm);

            color: inherit;
            min-width: 0;

            text-decoration: none !important;
            transition: background .2s ease, border-color .2s ease;
          }

          .album-tile:hover{
            background: var(--color-box-bg-strong);
            border-color: var(--color-box-border-strong);
          }

          .album-tile:hover,
          .album-tile:focus{
            text-decoration: none !important;
          }

          .album-tile:focus-visible{
            outline: 2px solid var(--color-link);
            outline-offset: 3px;
          }

/* =========================================================
   COVER (wie aktuell – NICHT ändern)
========================================================= */

          .album-cover{
            width: 96px;
            aspect-ratio: 1 / 1;

            border-radius: calc(var(--radius-sm) - 2px);
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.12);
            overflow: hidden;
          }

          .album-cover img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
          }

/* =========================================================
   TEXTBLOCK
========================================================= */

          .album-body{
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 6px;
          }

/* =========================================================
   TITLE (h3 wie p) + Underline aus Mitte
========================================================= */

          .album-title{
            margin: 0;
            font-family: var(--font-style-text);
            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
            font-weight: 400;

            color: var(--color-link);
            position: relative;
            display: inline;
          }

          .album-title::after{
            content: "";
            position: absolute;
            left: 50%;
            bottom: -2px;

            width: 0;
            height: 1.5px;
            background: currentColor;

            transform: translateX(-50%);
            transition: width .25s ease;
          }

          .album-tile:hover .album-title{
            color: var(--color-link-hover);
          }

          .album-tile:hover .album-title::after{
            width: 100%;
          }

/* =========================================================
   META / INFO
========================================================= */

          .album-meta{
            margin: 0;
            color: rgba(255,255,255,0.80);
            font-size: calc(var(--font-size-content) * 0.90);
          }

          .album-mini{
            margin: 0;
            color: rgba(255,255,255,0.92);
            font-size: calc(var(--font-size-content) * 0.90);
            line-height: calc(var(--line-height-text) * 0.95);

            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .album-cta{
            margin-top: 2px;
            color: rgba(255,255,255,0.84);
            font-size: calc(var(--font-size-content) * 0.88);
          }

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

@media (max-width: 768px){

          /* Row: Jahre untereinander */
          .alben-row{
            grid-template-columns: 1fr;
            gap: var(--alben-gap);
          }

          /* Sections: alles 1 Spalte */
          .alben-grid{
            grid-template-columns: 1fr;
          }

          .album-tile{
            grid-template-columns: 80px 1fr;
          }

          .album-cover{
            width: 80px;
          }

          .alben-year{
            padding: 14px; /* vorher: 14px 0 -> sah optisch "anders" aus */
          }
}

/* =========================================================
   RELEASEGROUP: Mehrere Releases innerhalb eines Jahres
   - Desktop: 2 Spalten
   - Mobile: 1 Spalte
========================================================= */

          .alben-releasegroup{
            margin-top: 10px;

            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--alben-gap);

            padding: 0;
            border: 0;
            background: transparent;
          }

          /* Optional: wenn du bei 4 Releases wieder 2x2 willst,
             passiert automatisch, weil Grid 2 Spalten hat */

          /* MOBILE */
@media (max-width: 768px){

          .alben-releasegroup{
            grid-template-columns: 1fr;
            gap: var(--alben-gap);
          }

          .alben-releasegroup > .album-tile:nth-child(3):last-child{
            grid-column: auto;
          }
}