/**
 * Shows page styles
 * Includes show-item layout (shared pattern with homepage) plus shows-page additions
 */

/* ==========================================================================
   Shows List Layout
   ========================================================================== */

.row-showslist .shows-list {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ==========================================================================
   Show Item Row
   ========================================================================== */

.show-item {
    display: flex;
    align-items: center;
    padding: 2rem;
    gap: 2rem;
    background: var(--bodycolor1);
    border: 1px solid var(--bodycolor2);
    border-left: 5px solid var(--color-gold-dark);
    transition: all 0.3s ease;
}

.show-item:hover {
    border-left-color: var(--color-gold-logo-medium);
    transform: translateX(8px);
    box-shadow: var(--shadow-md), -5px 0 15px rgba(201, 169, 97, 0.2);
}

.show-item-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    gap: 2rem;
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   Date Block
   ========================================================================== */

.show-date {
    font-family: var(--font-display);
    text-align: center;
    min-width: 100px;
    flex-shrink: 0;
}

.show-date-day {
    display: block;
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--color-gold-logo-lightest);
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.show-date-month {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-gold-logo-medium);
    margin-top: 0.25rem;
    letter-spacing: 0.15em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ==========================================================================
   Thumbnail
   ========================================================================== */

.show-thumbnail {
    width: 180px;
    height: 120px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--bodycolor4);
}

.show-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(40%) contrast(1.2);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.show-item:hover .show-thumbnail img {
    filter: grayscale(0%) contrast(1.3);
    transform: scale(1.05);
}

/* ==========================================================================
   Details
   ========================================================================== */

.show-details {
    flex: 1;
}

.show-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--textcolor1);
    margin: 0 0 0.25rem;
    text-transform: uppercase;
}

.show-venue {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gold-logo-medium);
    margin: 0 0 0.25rem;
}

.show-location {
    font-size: 1rem;
    color: var(--textcolor2);
    margin: 0;
}

.show-badge {
    display: inline-block;
    background: var(--color-blood-bright);
    color: var(--textcolor-white);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: 3px;
    margin-top: 0.5rem;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   Tickets
   ========================================================================== */

.show-tickets {
    flex-shrink: 0;
}

.show-tickets .btn-small {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
}

/* ==========================================================================
   Show Entry Meta
   ========================================================================== */

.meta-data .meta-data-item.support::before {
    background-image: url('/images/icons/mic.svg');
}

.meta-data .meta-data-item.festival::before {
    background-image: url('/images/icons/horns.svg');
}

/* ==========================================================================
   Show Entry Actions
   ========================================================================== */

.show-entry-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    width: 100%;
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .show-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.5rem;
    }

    .show-item-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .show-date {
        width: 100%;
        max-width: 100px;
    }

    .show-thumbnail {
        width: 120px;
        height: 80px;
    }

    .show-tickets {
        width: 100%;
    }

    .show-tickets .btn-small {
        width: 100%;
        text-align: center;
    }
}