/* "Casting foto's" on the home page. Separate from style.css (the old site's theme, kept as it was). */

.casting-intro { max-width: 760px; margin: -15px 0 30px; color: var(--px-text); }
.casting-intro p:last-child { margin-bottom: 0; }

.casting-photo {
    display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; overflow: hidden;
    aspect-ratio: 3 / 4; background: rgba(var(--px-theme-rgb), 0.1); cursor: zoom-in;
}
.casting-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.casting-photo:hover img, .casting-photo:focus-visible img { transform: scale(1.04); }
.casting-photo:focus-visible { outline: 2px solid var(--px-theme); outline-offset: 3px; }

.casting-download { margin-top: 35px; }

/* Download form, in a Bootstrap modal */
.casting-modal .modal-content {
    position: relative; padding: 32px 28px 28px; border-radius: 10px; color: var(--px-text);
    background: linear-gradient(rgba(var(--px-theme-rgb), 0.1), rgba(var(--px-theme-rgb), 0.1)), var(--px-black);
    border: 1px solid rgba(var(--px-theme-rgb), 0.3); box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.casting-modal-title { margin: 0 40px 12px 0; color: var(--px-heading); }
.casting-modal-close {
    position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
}
.casting-modal-close:hover, .casting-modal-close:focus-visible { background: var(--px-theme); }
.casting-form p { margin: 0 0 16px; }
.casting-form .form-label { color: var(--px-white); }
.casting-form .form-control {
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--px-white); box-shadow: none;
}
.casting-form .form-control:focus { border-color: var(--px-theme); }
.casting-thanks { margin-left: 16px; color: var(--px-theme); font-weight: 500; }
.casting-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Captcha box ("Ik ben geen robot") */
.casting-captcha {
    position: relative; display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 12px 18px; border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05);
    color: var(--px-white); cursor: pointer; user-select: none;
}
.casting-captcha input { width: 22px; height: 22px; margin: 0; accent-color: var(--px-theme); cursor: pointer; }
.casting-captcha.is-busy { cursor: progress; }
.casting-captcha.is-busy input { visibility: hidden; }
.casting-captcha.is-busy::before {
    content: ""; position: absolute; left: 18px; top: 50%; margin-top: -11px; width: 22px; height: 22px; border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .2); border-top-color: var(--px-theme); animation: casting-spin .8s linear infinite;
}
.casting-captcha.is-done { border-color: var(--px-theme); cursor: default; }
@keyframes casting-spin { to { transform: rotate(360deg); } }

.casting-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(4, 12, 22, 0.92);
}
.casting-overlay[hidden] { display: none; }
.casting-overlay img { max-width: 92vw; max-height: 90vh; border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.casting-overlay button { position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.casting-overlay button:hover, .casting-overlay button:focus-visible { background: var(--px-theme); }
.casting-overlay-close { top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; font-size: 28px; line-height: 1; }
.casting-overlay-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border-radius: 8px; font-size: 40px; line-height: 1; }
.casting-overlay-prev { left: 16px; }
.casting-overlay-next { right: 16px; }
@media (max-width: 575px) {
    .casting-overlay-nav { width: 40px; height: 52px; font-size: 32px; }
    .casting-overlay-prev { left: 6px; }
    .casting-overlay-next { right: 6px; }
}