:root {
    --color-bg-dark: #121212; /* Dark background for subpanels */
    --color-bg-medium: #151515; /* Medium background for panel */
    --color-text-light: #d7d7d7;
    --color-text-muted: grey;
    --spacing-sm: 5px;
    --spacing-md: 10px;
    --spacing-lg: 20px;
    --border-radius: 5px;
    --image-width: 200px;
    --image-width-mobile: 100px;
}

/* Productions container */
.productions-subpanels {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: var(--spacing-sm);
}

/* Individual production card */
.production-subpanel {
    padding: var(--spacing-md);
    background-color: var(--color-bg-dark); /* Restored to #121212 */
    border-radius: var(--border-radius);
    width: 65%;
    margin-bottom: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-md);
}

/* Thumbnail image */
.production-subpanel img {
    width: var(--image-width);
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius);
    margin-right: var(--spacing-lg); /* Restored 20px spacing */
}

/* Production details */
.production-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Production content (details + description) */
.production-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Description */
.production-description {
    margin-top: var(--spacing-md); /* Restored 10px spacing */
}

/* Productions panel */
.productions-panel {
    background-color: var(--color-bg-medium); /* Restored to #151515 */
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    width: 100%;
    margin-bottom: var(--spacing-lg);
}

/* Typography */
.productions-panel h1 {
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-light);
}

.production-subpanel h2 {
    font-size: 20px;
    margin: 0;
    color: var(--color-text-light);
}

.production-subpanel p {
    font-size: 16px;
    margin: 0;
    color: var(--color-text-muted);
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .production-subpanel {
        width: 90%;
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: 10px;
    }

    .production-subpanel img {
        width: 100%;
        max-width: var(--image-width-mobile);
        align-self: center;
        margin-right: 0; /* Adjusted for mobile */
    }

    .production-details {
        align-items: flex-start;
    }

    .production-description {
        margin-top: var(--spacing-sm); /* Adjusted for mobile */
    }
}