/**
 * Production Card Styles
 * Layout-only styles - colors/fonts handled by theme
 */

/* ==========================================================================
   Card Component
   ========================================================================== */

.production-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
    aspect-ratio: 16 / 10;
}

.production-card__image {
    position: absolute;
    inset: 0;
    line-height: 0;
}

.production-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay - flex container for positioning content */
.production-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 70%);
    padding: 1.5rem;
}

/* Additional overlay that fades in on hover to cover full image */
.production-card__overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
    z-index: 0;
}

.production-card:hover .production-card__overlay::after,
.production-card:focus .production-card__overlay::after {
    opacity: 1;
}

/* Spacer pushes content to bottom by default, collapses on hover */
.production-card__overlay::before {
    content: '';
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    transition: flex 0.7s ease;
}

.production-card:hover .production-card__overlay::before,
.production-card:focus .production-card__overlay::before {
    flex: 0 0 0;
}

/* Content container */
.production-card__content {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

/* Title */
.production-card__title {
    margin: 0 0 0.25rem 0;
}

/* Date */
.production-card__date {
    margin: 0;
}

/* See details text - hidden below, slides up on hover */
.production-card__see-details {
    display: block;
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    transform: translateY(calc(100% + 1.5rem));
    opacity: 0;
    transition: transform 0.7s ease, opacity 0.7s ease;
}

/* Hover state - slide see details into view */
.production-card:hover .production-card__see-details,
.production-card:focus .production-card__see-details {
    transform: translateY(0);
    opacity: 1;
}

/* Focus outline for accessibility */
.production-card:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.production-card:focus:not(:focus-visible) {
    outline: none;
}

.production-card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ==========================================================================
   Modal Component
   ========================================================================== */

.production-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow-y: auto;
    /* background: #000000; */
}

.production-modal.is-open {
    opacity: 1;
    visibility: visible;
}

/* Modal backdrop */
.production-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

/* Modal container */
.production-modal__container {
    position: relative;
    width: 100%;
    max-width: 900px;
    transform: translateY(1rem);
    transition: transform 0.3s ease;
}

.production-modal.is-open .production-modal__container {
    transform: translateY(0);
}

/* Close button */
.production-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    background: rgba(0, 0, 0, 0.75);
    cursor: pointer;
    transition: background 0.2s ease;
}

.production-modal__close:hover,
.production-modal__close:focus {
    background: rgba(0, 0, 0, 1);
}

.production-modal__close svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: #fff;
}

/* Modal image */
.production-modal__image {
    display: block;
    width: 100%;
    line-height: 0;
}

.production-modal__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Modal content */
.production-modal__content-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #000000;
}



.production-modal__content {
    padding: 1.5rem;
    width: 100%;
    max-width: 800px;
}

.production-modal__title {
    margin: 0 0 0.5rem 0;
}

.production-modal__date {
    margin: 0 0 1rem 0;
}

.production-modal__info {
    margin: 0;
}

/* Rich text content in info */
.production-modal__info > *:first-child {
    margin-top: 0;
}

.production-modal__info > *:last-child {
    margin-bottom: 0;
}

.production-modal__info p {
    margin: 0 0 1rem 0;
}

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

@media (max-width: 768px) {
    .production-card__overlay {
        padding: 1rem;
    }

    .production-card__see-details {
        bottom: 1rem;
        left: 1rem;
        transform: translateY(calc(100% + 1rem));
    }

    .production-modal__content {
        padding: 1rem;
    }
}

/* ==========================================================================
   Body scroll lock when modal is open
   ========================================================================== */

body.production-modal-open {
    overflow: hidden;
}