/**
 * @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>
 *
 * Carrossel de destaques.
 *
 * Métricas espelhadas de `mod_casesocb/media/css/destaques.css` para que a peça
 * fique idêntica à de /conteudos/boas-praticas: item 50/50 com altura de 320px,
 * setas flanqueando verticalmente centradas e dots no fluxo, abaixo e centralizados.
 */

.mod-informes .informes__destaques {
    position: relative;

    /* Altura base do bloco: imagem 571x320 do handoff. */
    --informes-destaque-h: 320px;
}

.mod-informes .informes__carousel {
    position: relative;
    /* Espaço lateral para as setas, como no Cases. */
    padding: 0 72px;
}

/*
 * O Bootstrap aplica `overflow: hidden` em `.carousel-inner` para mascarar os
 * slides. Sem esta folga o chip, que ultrapassa a base da imagem em 14px, era
 * cortado ao meio.
 */
.mod-informes .informes__carousel-inner {
    padding-bottom: 18px;
}

/* =========================================================
   ITEM 50/50
   ========================================================= */

.mod-informes .informes__destaque {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

/* Coluna da imagem */
.mod-informes .informes__destaque-media {
    flex: 0 0 50%;
    max-width: 50%;
    height: var(--informes-destaque-h);
    margin: 0;
    border-radius: var(--informes-raio-midia);
    background: var(--informes-fundo-suave);
    position: relative;
}

/* A imagem arredonda sozinha; a figure não recorta, senão o chip some. */
.mod-informes .informes__destaque-media > a,
.mod-informes .informes__destaque-media img {
    border-radius: var(--informes-raio-midia);
    overflow: hidden;
}

.mod-informes .informes__destaque-media > a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Chip sobre a imagem, canto inferior esquerdo, como na referência. */
.mod-informes .informes__destaque-media .informes__chip {
    position: absolute;
    left: 24px;
    bottom: -14px;
    max-width: calc(100% - 48px);
    border-radius: var(--informes-raio-chip);
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
}

.mod-informes .informes__destaque-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--informes-raio-midia);
}

/* Coluna do conteúdo — mesma altura da imagem */
.mod-informes .informes__destaque-body {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--informes-destaque-h);
    padding: 6px 20px;
}

/* =========================================================
   CONTEÚDO
   ========================================================= */

.mod-informes .informes__destaque-cat {
    margin: 0 0 10px;
}

.mod-informes .informes__destaque-titulo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--informes-destaque-titulo-linhas, 2);
    line-clamp: var(--informes-destaque-titulo-linhas, 2);
    overflow: hidden;
    margin: 0 0 12px;
    min-height: calc(var(--informes-destaque-titulo-linhas, 2) * 1.15em);
    font-family: var(--informes-fonte-titulo-bold);
    font-size: 28px;
    line-height: 35px;
    font-weight: 700;
    color: var(--informes-navy);
}

.mod-informes .informes__destaque-titulo a {
    color: inherit;
    text-decoration: none;
}

.mod-informes .informes__destaque-titulo a:hover {
    text-decoration: underline;
}

.mod-informes .informes__destaque-resumo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--informes-destaque-resumo-linhas, 3);
    line-clamp: var(--informes-destaque-resumo-linhas, 3);
    overflow: hidden;
    margin: 0;
    min-height: calc(var(--informes-destaque-resumo-linhas, 3) * 1.5em);
    font-size: 14px;
    line-height: 1.5;
    color: var(--informes-texto-suave);
}

/*
 * Edição + data seguem o fluxo, logo abaixo do resumo.
 *
 * O Cases usa `margin-top: auto` no badge "Premiado" para colá-lo no rodapé, mas
 * copiar isso aqui abria um vão grande entre o resumo e a linha de edição, já que
 * o bloco tem 320px fixos e o resumo raramente os preenche.
 */
.mod-informes .informes__destaque-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 14px 0 0;
    font: normal normal normal 12px/15px var(--informes-fonte-corpo);
    color: var(--informes-navy);
}

.mod-informes .informes__destaque-meta .informes__meta-edicao,
.mod-informes .informes__destaque-meta .informes__meta-data {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/*
 * Peso normal, igual ao da data ao lado. O negrito destacava a edicao sobre a
 * data sem que houvesse hierarquia entre as duas: sao a mesma informacao de
 * apoio.
 */
.mod-informes .informes__meta-edicao {
    font-weight: var(--weight-regular, 400);
}

/* =========================================================
   SETAS — flanqueando, verticalmente centradas
   ========================================================= */

.mod-informes .informes__carousel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    opacity: 1;
    z-index: 5;
    border: 0;
    background: transparent;
}

.mod-informes .informes__carousel-arrow.carousel-control-prev {
    left: 0;
    right: auto;
}

.mod-informes .informes__carousel-arrow.carousel-control-next {
    right: 0;
    left: auto;
}

.mod-informes .informes__carousel-arrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 2px solid var(--informes-navy);
    background: transparent;
    color: var(--informes-navy);
    transition: background-color .2s ease, color .2s ease;
}

.mod-informes .informes__carousel-arrow:hover .informes__carousel-arrow-icon {
    background: var(--informes-navy);
    color: var(--informes-branco);
}

/* =========================================================
   DOTS — no fluxo, abaixo e centralizados
   ========================================================= */

.mod-informes .informes__carousel-dots {
    position: static;
    margin: 6px 0 0;
    gap: 10px;
    justify-content: center;
    z-index: 4;
    pointer-events: auto;
}

.mod-informes .informes__carousel-dots [data-bs-target] {
    width: 10px;
    height: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: var(--informes-navy);
    opacity: .25;
    text-indent: 0;
    transition: width .2s ease, opacity .2s ease;
}

.mod-informes .informes__carousel-dots .active {
    width: 24px;
    opacity: 1;
}

/* =========================================================
   RESPONSIVO — mesmos pontos de quebra do Cases
   ========================================================= */

@media (max-width: 991.98px) {
    .mod-informes .informes__destaques {
        --informes-destaque-h: 280px;
    }

    .mod-informes .informes__carousel {
        padding: 0 56px;
    }
}

@media (max-width: 767.98px) {
    .mod-informes .informes__destaques {
        --informes-destaque-h: 220px;
    }

    .mod-informes .informes__carousel {
        padding: 0;
    }

    .mod-informes .informes__destaque {
        flex-direction: column;
        gap: 8px;
    }

    .mod-informes .informes__destaque-media,
    .mod-informes .informes__destaque-body {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .mod-informes .informes__destaque-body {
        min-height: 0;
        padding: 6px 0 0;
    }

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

    /*
     * Sem espaço lateral, as setas passam a sobrepor as bordas da imagem — mesmo
     * comportamento do Cases no mobile. O fundo branco sólido garante contraste
     * do ícone navy sobre qualquer foto.
     */
    .mod-informes .informes__carousel-arrow {
        width: 44px;
        top: calc(var(--informes-destaque-h) / 2);
    }

    .mod-informes .informes__carousel-arrow-icon {
        background: var(--informes-branco);
    }
}