/*
 * Shared Mission Map preview.
 *
 * Images are loaded through api/mission_map_image.php from images/maps/.
 */

.mission-map-preview-cell {
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    border: 1px solid var(--panel-border, #555);
    background: var(--panel-bg, #202020);
}

.mission-map-preview-cell > h3 {
    margin: 0 0 7px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--panel-border, #555);
    font-size: 0.86rem;
    text-align: center;
}

.mission-map-preview-frame {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 474px);
    aspect-ratio: 474 / 570;
    max-height: 570px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--panel-border, #666);
    background:
        linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.025) 25%,
            transparent 25%
        ),
        linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.025) 25%,
            transparent 25%
        ),
        linear-gradient(
            45deg,
            transparent 75%,
            rgba(255, 255, 255, 0.025) 75%
        ),
        linear-gradient(
            -45deg,
            transparent 75%,
            rgba(255, 255, 255, 0.025) 75%
        ),
        #111;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
    background-size: 24px 24px;
}

.mission-map-preview-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.mission-map-preview-frame img[hidden],
.mission-map-preview-placeholder[hidden] {
    display: none;
}

.mission-map-preview-placeholder {
    max-width: 20rem;
    padding: 1rem;
    color: var(--muted, #cfcfcf);
    font-size: 0.78rem;
    line-height: 1.3;
    text-align: center;
}

.mission-map-preview-frame[data-state="loading"]
    .mission-map-preview-placeholder::before {
    content: "";
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    margin: 0 auto 0.55rem;
    border: 3px solid #555;
    border-top-color: #ddd;
    border-radius: 50%;
    animation: ems-map-preview-spin 0.8s linear infinite;
}

.mission-map-preview-frame[data-state="error"] {
    border-color: var(--danger, #b34747);
}

.mission-map-preview-cell figcaption {
    min-height: 1rem;
    margin-top: 5px;
    color: var(--muted, #cfcfcf);
    font-size: 0.72rem;
    text-align: center;
}

.basic-mission-data-layout {
    display: grid;
    grid-template-columns:
        minmax(280px, 400px)
        200px
        minmax(280px, 400px);
    gap: 8px;
    align-items: start;
    justify-content: center;
    margin-top: 8px;
}

.basic-mission-data-layout > * {
    min-width: 0;
}

.basic-map-preview-cell {
    width: 100%;
    max-width: 400px;
    height: 400px;
}

.basic-map-preview-cell .mission-map-preview-frame {
    width: 100%;
    height: 338px;
    max-height: 338px;
    aspect-ratio: auto;
}

.basic-mission-parameter-cell {
    box-sizing: border-box;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    height: 400px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid var(--panel-border, #555);
    background: var(--panel-bg, #202020);
}

.basic-mission-parameter-cell > h3 {
    margin: 0 0 7px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--panel-border, #555);
    font-size: 0.86rem;
    text-align: center;
}

.basic-mission-data-layout .mission-description-cell {
    width: 100%;
    max-width: 400px;
    height: 400px;
    margin: 0;
}

@keyframes ems-map-preview-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 780px) {
    .basic-mission-data-layout {
        grid-template-columns: 1fr;
    }

    .basic-map-preview-cell,
    .basic-mission-data-layout .mission-description-cell {
        width: min(100%, 400px);
        justify-self: center;
    }

    .basic-mission-parameter-cell {
        width: min(100%, 200px);
        min-width: 0;
        max-width: 200px;
        justify-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mission-map-preview-frame[data-state="loading"]
        .mission-map-preview-placeholder::before {
        animation: none;
    }
}