/* ==========================================================
   MODAIS — base compartilhada (galeria, Nossa Escola, calculadora)
   Cada modal define sua própria composição em lightbox.css e
   panels.css; aqui ficam somente caixa, entrada/saída, backdrop,
   scroll lock e o reset contra o CSS legado.
   ========================================================== */

/*
 * Scroll lock: a rolagem é travada em html/body (mesma técnica do menu
 * mobile), sem mover a página. A Home permanece exatamente onde estava.
 * --ecdl-scrollbar-gap compensa a barra de rolagem que some.
 */
html.ecdl-modal-open,
html.ecdl-modal-open body {
    overflow: hidden;
}

html.ecdl-modal-open body {
    padding-right: var(--ecdl-scrollbar-gap, 0px);
}

/*
 * Elementos fixos ocupam a largura da viewport e, sem a barra, ganham
 * esse espaço: o mesmo gap é devolvido a eles para nada "pular" atrás
 * do modal (barras clássicas de Windows/Linux; no mobile o gap é 0).
 */
html.ecdl-modal-open .site-header {
    padding-right: var(--ecdl-scrollbar-gap, 0px);
}

html.ecdl-modal-open .whatsapp-cta {
    right: calc(22px + var(--ecdl-scrollbar-gap, 0px));
}

/* ----------------------------------------------------------
   CAIXA
   ---------------------------------------------------------- */

.ecdl-modal {
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    border: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    background: transparent;
    color: inherit;

    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.985);
    transition:
        opacity var(--motion-fast, 240ms) var(--ease-premium, cubic-bezier(.16, 1, .3, 1)),
        transform var(--motion-medium, 480ms) var(--ease-premium, cubic-bezier(.16, 1, .3, 1));
}

.ecdl-modal.is-visible {
    opacity: 1;
    transform: none;
}

/* Saída mais curta que a entrada. */
.ecdl-modal.is-closing {
    transition-duration: var(--motion-instant, 160ms);
}

/*
 * ::backdrop não herda de forma confiável em todos os navegadores:
 * valores literais (iguais aos tokens --motion-fast / --ease-premium).
 */
.ecdl-modal::backdrop {
    background: rgba(22, 16, 16, 0.52);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 240ms cubic-bezier(.16, 1, .3, 1);
}

.ecdl-modal.is-visible::backdrop {
    opacity: 1;
}

.ecdl-modal.is-closing::backdrop {
    transition-duration: 160ms;
}

.ecdl-modal[hidden] {
    display: none;
}

/* ----------------------------------------------------------
   RESET CONTRA O CSS LEGADO
   O tema legado declara `button { width: 70% !important;
   font-size: 1.1em !important; border: 0 !important; ... }` e
   `h1 { color }`. Os modais ficam fora de .section, então estas
   regras isolam o que é indispensável.
   ---------------------------------------------------------- */

.ecdl-modal button {
    width: auto !important;
    font-size: 1rem !important;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: 1.2;
    background: none;
    color: inherit;
    transition: none;
}

.ecdl-modal a {
    color: inherit;
    text-decoration: none;
}

.ecdl-modal img {
    float: none;
    max-width: 100%;
}

.ecdl-modal :is(h2, h3, h4, p) {
    margin: 0;
}

.ecdl-modal :focus-visible {
    outline: 3px solid var(--color-yellow, #eed536);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .ecdl-modal,
    .ecdl-modal::backdrop {
        transition: none;
        transform: none;
    }
}