/**
 * SLN Core Features
 * People Modal
 *
 * Modal shell, overlay, loading/error states, and basic accessibility behavior.
 * This intentionally does not fully style the internal person biography layout yet.
 */

body {
    --person-modal-padding: clamp(15px, 4vw, 25px);
    --person-modal-close-button-color: #2841f8;
    --person-modal-close-button-color-hover: black;
    --person-modal-overlay-background: rgba(0, 0, 0, 0.72);
}

/* Prevent background scroll while modal is open */
body.sln-modal-open {
    overflow: hidden;
}

/* Dark page overlay */
.sln-person-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--person-modal-padding);
    background: var(--person-modal-overlay-background);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 220ms ease,
        visibility 220ms ease;
}

/* Visible state */
.sln-person-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Modal visual shell */
.sln-person-modal-container {
    position: relative;
    width: fit-content;
    max-width: calc(100vw - (var(--person-modal-padding) * 2));
    max-height:90dvh;
    align-self:center;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.38);
    transform: translateY(18px) scale(0.96);
    opacity: 0;
    transition:
        transform 240ms ease,
        opacity 240ms ease;
    outline: none;
    overflow: hidden;
}

/* Container animation */
.sln-person-modal-overlay.is-visible .sln-person-modal-container {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/*
 * Inner scroll area.
 *
 * The outer container is the rounded visual shell.
 * This inner element owns the scrolling.
 *
 * Important:
 * Padding only moves the content.
 * Margin moves the scroll area itself, which is what pulls the scrollbar
 * away from the outside rounded edge.
 */
.sln-person-modal-scroll {
    max-height:calc(90vh - 50px);
    overflow-y: auto;
    overflow-x: hidden;

    /*
     * Inset the actual scrollbar from the modal shell.
     * top/right/bottom/left
     */
    margin: 10px 10px 10px 0;

    /*
     * Content padding.
     */
    padding: 34px 44px 34px 44px;

    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

/* Chrome / Edge / Safari scrollbar */
.sln-person-modal-scroll::-webkit-scrollbar {
    width: 8px;
}

.sln-person-modal-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.sln-person-modal-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.24);
    border-radius: 999px;
}

.sln-person-modal-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.38);
}

/* Loading state */
.sln-person-modal-loading {
    padding: 56px 32px;
    text-align: center;
    font-size: 18px;
    color: #333333;
}

/* Error state */
.sln-person-modal-error {
    position: relative;
    padding: 48px 40px;
    color: #333333;
}

.sln-person-modal-error p {
    margin: 0 0 12px;
}

/* Generic close button */
.sln-person-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    margin-left: auto;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 0;
    border-radius: 999px;
    background: var(--person-modal-close-button-color) !important;
    color: white;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    transition:
        background 180ms ease,
        transform 180ms ease;
}

.sln-person-modal__close:hover,
.sln-person-modal__close:focus {
    background: var(--person-modal-close-button-color-hover) !important;
    transform: scale(1.05);
}

.sln-person-modal__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Responsive video embeds inside modal */
.sln-person-modal-container .wp-block-embed.is-type-video {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}

.sln-person-modal-container .wp-block-embed.is-type-video .wp-block-embed__wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
}

.sln-person-modal-container .wp-block-embed.is-type-video iframe {
    width: 100%;
    height: 100%;
}

.sln-person-modal__content .name-and-church {
    justify-content: space-between;
    align-items: baseline;
    gap:10px;
    margin-top:10px;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .sln-person-modal-overlay {
        align-items: flex-start;
        padding: 16px;
        overflow-y: auto;
    }

    .sln-person-modal-container {
        width: 100%;
        max-width: none;
        max-height: none;
        margin: 16px 0;
        border-radius: 16px;
    }

    .sln-person-modal-scroll {
        margin: 10px 8px 10px 0;
        padding: 20px 26px 20px 20px;
    }

    .sln-person-modal__close {
        top: 12px;
        right: 12px;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sln-person-modal-overlay,
    .sln-person-modal-container,
    .sln-person-modal__close {
        transition: none;
    }

    .sln-person-modal-container {
        transform: none;
    }
}