/* =========================================
   DISCOGRAPHY SPECIFIC STYLES
   ========================================= */

/* Import basic styles if needed, or overwrite specific parts */
/* Note: This file relies on style.css being loaded OR duplicates necessary parts.
   Ideally, load style.css FIRST, then this file to override. 
   Or, since we want full control, we can copy everything. 
   For simplicity here, this file contains the FULL STYLES required for Discography.
*/

/* --- Variables & Reset (Duplicate for safety) --- */
:root {
    --bg-color: #0b0b0b;
    --surface-color: #141414;
    --text-main: #f0f0f0;
    --text-muted: #888888;
    --accent: #D4AF37;
    --font-serif: 'Cinzel', serif;
    --font-sans: 'Manrope', sans-serif;
    --ease-custom: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    /* Radial Gradient Background specific to Discography */
    background-image: radial-gradient(circle at 50% 30%, rgba(212, 175, 55, 0.05) 0%, transparent 60%);
    background-attachment: fixed;
}

/* --- Tab Controls --- */
.tab-controls {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}

.tab-btn {
    background: transparent;
    border: none;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    position: relative;
    padding-bottom: 5px;
    cursor: pointer;
    transition: color 0.3s;
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.3s var(--ease-custom);
}

.tab-btn:hover, .tab-btn.active {
    color: var(--text-main);
}

.tab-btn.active::after {
    width: 100%;
}

/* --- Grid Layout with Container Queries --- */
.cards-container {
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 3rem;
}

/* --- Card Style --- */
.card {
    background: var(--surface-color);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s var(--ease-custom), box-shadow 0.4s;
    opacity: 0; /* JS handles reveal */
    transform: translateY(30px);
}

.card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

.card-img-wrap {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    position: relative;
}

.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-custom);
}

.card:hover .card-img-wrap img {
    transform: scale(1.08);
}

.card-body {
    padding: 1.5rem;
    text-align: center;
}

.card-category {
    font-size: 0.75rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0.5rem;
}

.card-title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--text-main);
    margin: 0;
    line-height: 1.3;
}

/* --- Modal Styles --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
    z-index: 1000; opacity: 0; pointer-events: none;
    transition: opacity 0.4s var(--ease-custom);
    display: flex; justify-content: center; align-items: center;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }

.modal-content {
    background: #1a1a1a;
    width: 90%; max-width: 900px;
    border: 1px solid rgba(255,255,255,0.1);
    position: relative; overflow: hidden;
    transform: scale(0.95); transition: transform 0.4s var(--ease-custom);
}
.modal-overlay.active .modal-content { transform: scale(1); }

.modal-body { display: flex; flex-direction: column; }
@media (min-width: 768px) { .modal-body { flex-direction: row; } }

.modal-img-wrap { flex: 1; min-height: 300px; }
.modal-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

.modal-details { flex: 1.2; padding: 3rem; }
.modal-cat { color: var(--accent); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: 0.5rem; }
.modal-title { font-family: var(--font-serif); font-size: 2rem; margin-bottom: 1.5rem; line-height: 1.2; }
.modal-desc { font-size: 0.95rem; color: #ccc; line-height: 1.7; margin-bottom: 2rem; }

.modal-close {
    position: absolute; top: 1rem; right: 1rem;
    background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; z-index: 10;
}

/* Accordion in Modal */
.accordion { border-top: 1px solid rgba(255,255,255,0.1); }
.accordion-item { border-bottom: 1px solid rgba(255,255,255,0.1); }
.accordion-header {
    width: 100%; padding: 1rem 0; background: none; border: none;
    color: #fff; font-family: var(--font-sans); font-size: 1rem;
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
.accordion-header .icon { transition: transform 0.3s; }
.accordion-header.active .icon { transform: rotate(45deg); color: var(--accent); }
.accordion-content { height: 0; overflow: hidden; transition: height 0.4s var(--ease-custom); }
.accordion-inner { padding: 1rem 0; font-size: 0.9rem; color: #999; }