/**
 * @package     com_technicalreports
 * @subpackage  mod_technicalreports
 * @copyright   2024 Hirlei Carlos Pereira de Araújo
 * @license     GNU General Public License versão 2 ou posterior; consulte o arquivo License. txt
 * @author      Hirlei Carlos Pereira de Araújo <prof.hirleicarlos@gmail.com>
 *
 * Faixa navy de assinatura: texto à esquerda, card branco com o embed do RD Station
 * à direita. O card é apenas o container — o formulário é o módulo já existente,
 * renderizado sem alteração de campos, endpoint ou script.
 */

/*
 * A sangria e o padding vêm da regra genérica `section[data-fundo]` em base.css.
 * Aqui fica só o que é específico da faixa de assinatura.
 */
.mod-informes .informes__assinatura {
    color: var(--informes-branco);
}

.mod-informes .informes__assinatura-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    align-items: center;
    gap: 48px;
}

/* Escala do template, escrita com os tokens - ver nota em base.css. */
.mod-informes .informes__assinatura-titulo {
    margin: 0 0 12px;
    font-family: var(--informes-fonte-titulo);
    font-size: 28px;
    line-height: 35px;
    font-weight: var(--weight-light, 300);
    /* Sobre a faixa navy o padrão é branco; a variável vem do parâmetro. */
    color: var(--informes-titulo-cor, var(--informes-branco));
}

.mod-informes .informes__assinatura-apoio {
    margin: 0 0 16px;
    max-width: 52ch;
    font-size: 16px;
    line-height: 26px;
    color: rgba(255, 255, 255, .85);
}

/*
 * `:last-of-type` não serve aqui: o aviso final também é <p>, então o "último do
 * tipo" seria ele. `:last-child` zera a margem quando o parágrafo realmente
 * encerra o bloco; havendo aviso, as margens colapsam nos 24px dele.
 */
.mod-informes .informes__assinatura-apoio:last-child {
    margin-bottom: 0;
}

/* Linha final: menor, em itálico e mais discreta que o texto de apoio. */
.mod-informes .informes__assinatura-obs {
    margin: 24px 0 0;
    max-width: 52ch;
    font-size: 13px;
    line-height: 20px;
    font-style: italic;
    color: rgba(255, 255, 255, .6);
}

/* =========================================================
   CARD DO FORMULÁRIO (RD Station)
   ========================================================= */

.mod-informes .informes__assinatura-card {
    width: 100%;
    max-width: 460px;
    justify-self: end;
    padding: 28px;
    border-radius: 10px;
    background: var(--informes-branco);
    color: var(--informes-texto);
}

/* O embed do RD traz o próprio CSS; aqui só garantimos que ele caiba no card. */
.mod-informes .informes__assinatura-card :where(form, iframe, input, select, textarea, button) {
    max-width: 100%;
}

/*
 * O embed pinta os containers dele com um cinza próprio. Dentro do card branco
 * isso aparece como um retângulo de outra cor, que o layout não prevê.
 *
 * Zeramos SÓ a cor de fundo, e SÓ dos elementos estruturais: `input`, `select`,
 * `textarea` e `button` ficam de fora de propósito, para o campo e o botão
 * manterem a aparência que o RD define. Campos, endpoint, script e fluxo de
 * envio seguem exatamente como estão — isto é apresentação, não formulário.
 *
 * `!important` é necessário porque o embed costuma trazer a cor em atributo
 * `style` inline; sem ele a regra não alcança. Fica restrito à cor de fundo e
 * ao interior deste card.
 */
.mod-informes .informes__assinatura-card div,
.mod-informes .informes__assinatura-card section,
.mod-informes .informes__assinatura-card article,
.mod-informes .informes__assinatura-card form,
.mod-informes .informes__assinatura-card fieldset,
.mod-informes .informes__assinatura-card p,
.mod-informes .informes__assinatura-card ul,
.mod-informes .informes__assinatura-card li {
    background-color: transparent !important;
}

.mod-informes .informes__assinatura-aviso {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--informes-texto-suave);
}

@media (max-width: 991.98px) {
    .mod-informes .informes__assinatura-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .mod-informes .informes__assinatura-card {
        max-width: 100%;
        justify-self: stretch;
    }
}

@media (max-width: 767.98px) {
    .mod-informes {
        /* Menor que o desktop (30px), não maior. */
        --informes-faixa-padding: 22px;
    }

    .mod-informes .informes__assinatura-titulo {
        font-size: 24px;
        line-height: 29px;
    }

    .mod-informes .informes__assinatura-apoio {
        font-size: 14px;
        line-height: 22px;
    }

    .mod-informes .informes__assinatura-card {
        padding: 20px;
    }
}