/* Vinyl Vault — TestSite's own demo tenant module (a fictional record shop used as a rich
   content-modelling example alongside the plain service-request demos). Not part of the
   generic site design system; kept in its own file, consolidated from what used to be
   scattered across components.css and layout.css, so the demo can be found or removed as one
   unit without touching the generic site-components.css/site-layout.css files. */

.vinyl-vault-home .hero {
    text-align: center;
    margin-bottom: 3rem;
}

.vinyl-vault-home .hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.vinyl-vault-home .hero p {
    font-size: 1.2rem;
    color: #666;
    max-width: none;
}

/* Page layout */
.genre-landing,
.vinyl-detail,
.vinyl-vault-home {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.genre-header {
    text-align: center;
    margin-bottom: 3rem;
}

.vinyl-header {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.vinyl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2rem;
}

.genre-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

.genres-grid {
    margin-bottom: 3rem;
}

.vinyl-vault-home .vinyl-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .vinyl-header {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Components */
.breadcrumb {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1rem;
}

.breadcrumb a {
    color: #4299e1;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.vinyl-cover {
    aspect-ratio: 1;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-cover {
    font-size: 5rem;
}

.vinyl-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}

.vinyl-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.vinyl-card.out-of-stock {
    opacity: 0.7;
}

.vinyl-info h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.vinyl-title {
    margin: 0 0 0.5rem 0;
    color: #666;
    font-size: 0.95rem;
}

.vinyl-year {
    margin: 0 0 0.75rem 0;
    color: #999;
    font-size: 0.85rem;
}

.vinyl-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 4px;
    font-weight: 500;
}

.badge-in-stock {
    background: #48bb78;
    color: white;
}

.badge-out-of-stock {
    background: #e53e3e;
    color: white;
}

.badge-limited {
    background: #ed8936;
    color: white;
}

.vinyl-vault-home .badge.out-of-stock {
    background: #e53e3e;
    color: white;
    margin-top: 0.5rem;
}

.vinyl-vault-home .vinyl-card h4 {
    margin: 0.5rem 0 0.25rem 0;
    font-size: 0.9rem;
}

.vinyl-vault-home .vinyl-card p {
    margin: 0;
    color: #666;
    font-size: 0.85rem;
}

.vinyl-vault-home .vinyl-cover {
    margin-bottom: 0.5rem;
}

.vinyl-vault-home .placeholder-cover {
    font-size: 4rem;
}

.vinyl-cover-large {
    aspect-ratio: 1;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.vinyl-cover-large .placeholder-cover {
    font-size: 8rem;
}

.vinyl-meta h1 {
    font-size: 2.5rem;
    margin: 0 0 0.5rem 0;
}

.artist {
    font-size: 1.5rem;
    color: #666;
    font-weight: 400;
    margin: 0 0 2rem 0;
}

.vinyl-details {
    margin-bottom: 2rem;
    line-height: 1.8;
}

.vinyl-details p {
    margin: 0.5rem 0;
}

.vinyl-details .badge {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
}

.actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.actions button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.vinyl-description {
    background: #f7fafc;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.vinyl-description h3 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.back-link {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
}

.back-link a {
    color: #4299e1;
    text-decoration: none;
    font-weight: 500;
}

.back-link a:hover {
    text-decoration: underline;
}

.genre-header h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.genre-description {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 1.5rem;
}

.vinyl-collection h2,
.genres-grid h2,
.recent-arrivals h2 {
    margin-bottom: 1.5rem;
}

.genre-tile {
    display: block;
    padding: 2rem;
    background: #f5f5f5;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}

.genre-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.genre-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.genre-tile h3 {
    margin: 0.5rem 0;
}

.genre-tile p {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
}