/* ════════════════════════════════════════════════════════════════════════════
   Release-Katalog – Cover-Grid mit Filter-Tabs
   Datei: files/dran/css/release_catalog.css
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Custom Properties ────────────────────────────────────────────────────── */
.release-catalog {
    --rc-cols:          4;          /* Spalten Desktop */
    --rc-gap:           1rem;
    --rc-overlay-bg:    rgba(0, 0, 0, 0.78);
    --rc-overlay-ease:  0.22s ease;
    --rc-accent:        #c0392b;    /* Akzentfarbe für Tab + Buttons */
    --rc-radius:        3px;
    --rc-caption-size:  0.8rem;
    --rc-tab-active-bg: #1a1a1a;
    --rc-tab-active-fg: #ffffff;
}

/* ── Basis ────────────────────────────────────────────────────────────────── */
.release-catalog {
    container-type: inline-size;
}

.release-catalog__headline {
    margin-bottom: 1.5rem;
}

/* ── Filter-Tabs ──────────────────────────────────────────────────────────── */
.release-catalog__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.release-catalog__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.45em 0.9em;
    border: 1px solid #ccc;
    border-radius: var(--rc-radius);
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.release-catalog__tab:hover {
    border-color: var(--rc-accent);
    color: var(--rc-accent);
}

.release-catalog__tab.is-active {
    background: var(--rc-tab-active-bg);
    color: var(--rc-tab-active-fg);
    border-color: var(--rc-tab-active-bg);
}

.release-catalog__tab-count {
    font-size: 0.75em;
    opacity: 0.7;
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */
.release-catalog__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--rc-cols), 1fr);
    gap: var(--rc-gap);
}

/* Responsive über Container Query (kein Media-Query nötig) */
@container (max-width: 900px) {
    .release-catalog { --rc-cols: 3; }
}
@container (max-width: 620px) {
    .release-catalog { --rc-cols: 2; }
}
@container (max-width: 360px) {
    .release-catalog { --rc-cols: 1; }
}

/* Fallback ohne Container Queries */
@supports not (container-type: inline-size) {
    @media (max-width: 900px) {
        .release-catalog__grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 620px) {
        .release-catalog__grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 360px) {
        .release-catalog__grid { grid-template-columns: 1fr; }
    }
}

/* ── Karte ────────────────────────────────────────────────────────────────── */
.release-catalog__card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.release-catalog__card[hidden] {
    display: none;
}

/* ── Cover-Wrap (quadratisch, Overlay-Anker) ──────────────────────────────── */
.release-catalog__cover-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--rc-radius);
    background: #e8e8e8;
}

.release-catalog__cover-img,
.release-catalog__cover-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--rc-overlay-ease);
}

.release-catalog__cover-placeholder {
    background: linear-gradient(135deg, #d0d0d0, #b0b0b0);
}

/* Leichtes Zoom beim Hover */
.release-catalog__card:hover .release-catalog__cover-img,
.release-catalog__card:focus-within .release-catalog__cover-img {
    transform: scale(1.04);
}

/* ── Hover-Overlay ────────────────────────────────────────────────────────── */
.release-catalog__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.75rem;
    background: var(--rc-overlay-bg);
    color: #fff;
    opacity: 0;
    transition: opacity var(--rc-overlay-ease);
    pointer-events: none;
}

.release-catalog__card:hover .release-catalog__overlay,
.release-catalog__card:focus-within .release-catalog__overlay {
    opacity: 1;
    pointer-events: auto;
}

.release-catalog__overlay-artist {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.85;
    line-height: 1.2;
    margin-bottom: 0.15em;
}

.release-catalog__overlay-title {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 0.25em;
}

.release-catalog__overlay-date {
    display: block;
    font-size: 0.75rem;
    opacity: 0.65;
    margin-bottom: 0.1em;
}

.release-catalog__overlay-note {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.1em 0.4em;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 2px;
    margin-bottom: 0.5em;
    opacity: 0.8;
}

/* ── Link-Buttons im Overlay ──────────────────────────────────────────────── */
.release-catalog__overlay-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.release-catalog__overlay-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.35em 0.7em;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: var(--rc-radius);
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 0.78rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.release-catalog__overlay-btn:hover,
.release-catalog__overlay-btn:focus {
    background: rgba(255,255,255,0.25);
    border-color: #fff;
}

.release-catalog__overlay-btn svg {
    width: 0.95em;
    height: 0.95em;
    fill: currentColor;
    flex-shrink: 0;
}

/* Plattform-spezifische Akzente */
.release-catalog__overlay-btn--spotify:hover {
    background: rgba(30, 215, 96, 0.25);
    border-color: #1ed760;
}

.release-catalog__overlay-btn--bandcamp:hover {
    background: rgba(29, 160, 195, 0.25);
    border-color: #1da0c3;
}

.release-catalog__overlay-btn--youtube:hover {
    background: rgba(255, 0, 0, 0.25);
    border-color: #ff0000;
}

/* ── Transparenter Cover-Link (deckt das Cover ab für Klickbarkeit) ──────── */
.release-catalog__cover-link {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Overlay-Buttons über dem Cover-Link #}*/
.release-catalog__overlay-links {
    position: relative;
    z-index: 1;
}

/* ── Caption (unter dem Cover, immer sichtbar) ────────────────────────────── */
.release-catalog__caption {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    padding: 0 0.1rem;
    min-height: 2.5em;
}

.release-catalog__caption-artist {
    display: block;
    font-size: var(--rc-caption-size);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.release-catalog__caption-title {
    display: block;
    font-size: var(--rc-caption-size);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.7;
}

/* ── Leer-Meldung ─────────────────────────────────────────────────────────── */
.release-catalog__empty {
    margin-top: 1rem;
    font-style: italic;
    color: #666;
}

/* ── Touch-Geräte: Overlay dauerhaft eingeblendet ────────────────────────── */
@media (hover: none) {
    .release-catalog__overlay {
        opacity: 1;
    }

    /* Auf Mobile Overlay kompakter */
    .release-catalog__overlay-artist,
    .release-catalog__overlay-title {
        font-size: 0.72rem;
    }

    .release-catalog__overlay-date {
        display: none;
    }
}