/* vinyl — page-specific styles */

/* Finish type cards */
.finish-types {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.finish-card {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.3s ease;
}

.finish-card:hover {
    border-color: rgba(201, 169, 110, 0.3);
    transform: translateY(-4px);
}

.finish-card__visual {
    height: 120px;
    position: relative;
}

/* Gloss — reflective gradient with a highlight stripe */
.finish-card__visual--gloss {
    background: linear-gradient(135deg, #111 0%, #333 40%, #fff 50%, #333 60%, #111 100%);
}

/* Matte — flat, soft, no reflections */
.finish-card__visual--matte {
    background: #1e1e1e;
}

/* Satin — subtle soft sheen */
.finish-card__visual--satin {
    background: linear-gradient(160deg, #1a1a1a 0%, #2a2a2a 40%, #3a3a3a 50%, #2a2a2a 60%, #1a1a1a 100%);
}

/* Metallic — sparkle-like effect with angled gradient */
.finish-card__visual--metallic {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(255,255,255,0.05) 0%, transparent 50%),
        linear-gradient(135deg, #2a2a3a 0%, #3a3a4a 30%, #4a4a5a 50%, #3a3a4a 70%, #2a2a3a 100%);
}

/* Chameleon — color-shifting multi-gradient */
.finish-card__visual--chameleon {
    background: linear-gradient(135deg,
        #1a4a3a 0%,
        #2a3a5a 25%,
        #4a2a5a 50%,
        #5a3a3a 75%,
        #3a5a4a 100%
    );
    animation: chameleon-shift 6s ease-in-out infinite alternate;
}

@keyframes chameleon-shift {
    0% {
        background: linear-gradient(135deg, #1a4a3a, #2a3a5a, #4a2a5a, #5a3a3a, #3a5a4a);
    }
    50% {
        background: linear-gradient(135deg, #3a2a5a, #5a4a2a, #2a5a4a, #4a3a5a, #5a2a3a);
    }
    100% {
        background: linear-gradient(135deg, #2a5a3a, #4a2a4a, #5a4a2a, #3a5a5a, #4a3a2a);
    }
}

.finish-card__body {
    padding: var(--space-md) var(--space-md) var(--space-lg);
}

.finish-card__title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--color-text);
}

.finish-card__text {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 968px) {
    .finish-types {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 580px) {
    .finish-types {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 380px) {
    .finish-types {
        grid-template-columns: 1fr;
    }
}