/* ============================================================
   Shared components loaded on every engine-rendered page.
   ============================================================ */

/* Media is rendered inside <picture> (an art-directed mobile <source> + the
   desktop <img>). display:contents drops the wrapper from layout so existing
   `figure > img` / flex / grid rules see the <img> as the direct child. */
picture {
    display: contents;
}

/* ---------- Request modal ---------- */
.request-modal {
    /* margin: auto re-centers the dialog — the global `* { margin: 0 }` reset
       zeroes the UA stylesheet's auto margin, which otherwise pins it top-left. */
    margin: auto;
    width: min(480px, calc(100vw - 32px));
    max-height: 90vh;
    padding: 28px 24px 24px;
    border: 1px solid var(--modal-border);
    border-radius: var(--radius-lg);
    /* Frosted glass: translucent panel over a blurred page. */
    background: var(--modal-bg);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    color: var(--text-light);
    box-shadow: var(--shadow-modal);
    overflow: auto;
}

.request-modal::backdrop {
    background: var(--modal-backdrop);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.request-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.request-modal-close:hover {
    color: var(--text-light);
}

.request-modal-title {
    margin: 0 0 4px;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 500;
    color: var(--text-light);
}

.request-modal-sub {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

.request-form .form-group {
    margin-bottom: 12px;
}

.request-form-submit {
    width: 100%;
    margin-top: 6px;
}