/* =====================================================
   MÓDULO: mod_agendacoop_historico
   Escopo total isolado
   ===================================================== */

.mod-agendacoop-historico {
    position: relative;
    width: 100%;
    background: #5883D0;
    padding: 45px 0 0;

    /* Variáveis do carrossel (mantidas) */
    --agch-item: 168px;
    --agch-gap: 22px;
    --agch-visible: 5;
    --agch-side: 88px;

    /* Variáveis (modal) */
    --agch-modal-bg: var(--ocb-azul-marinho, #171C66);
    --agch-modal-text: var(--ocb-branco, #fff);
    --agch-modal-height: 450px;
    --agch-modal-container: 1340px; /* container interno do modal */
    --agch-modal-nav-space: 110px; /* “respiro” p/ setas */
    --agch-modal-pad-x: 24px; /* padding interno geral */
    --agch-modal-topspace: 56px; /* reserva pro X no topo */
}

/* Container interno fixo */
.mod-agendacoop-historico .agch__container {
    max-width: 1340px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* Top */
.mod-agendacoop-historico .agch__top {
    margin: 0 auto 50px auto;
    width: 960px;
}

.mod-agendacoop-historico .agch__topMedia {
    text-align: center;
    width: 40% !important;
}

.mod-agendacoop-historico .agch__topText {
    width: 60% !important;
}

.mod-agendacoop-historico .agch__figure {
    margin: 0;
}

.mod-agendacoop-historico .agch__introImg {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.mod-agendacoop-historico .agch__introText {
    font-size: 1rem;
    line-height: 1.45;
    color: #fff;
}

.mod-agendacoop-historico .agch__bottom {
    margin-top: 6px;
}

/* Wrapper do carrossel vira "palco" */
.mod-agendacoop-historico .agch__carousel {
    position: relative;
    width: 100%;
    padding-left: var(--agch-side);
    padding-right: var(--agch-side);
    display: block;
}

/* Setas */
.mod-agendacoop-historico .agch__nav {
    border: 0;
    background: rgba(255, 255, 255, .20);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #fff;
    transition: background .2s ease, transform .15s ease;
    position: absolute;
    top: 50%;
    transform: translateY(-35%);
    z-index: 2;
}

.mod-agendacoop-historico .agch__nav:hover {
    background: rgba(255, 255, 255, .35);
}

.mod-agendacoop-historico .agch__nav:active {
    transform: translateY(-35%) scale(.96);
}

.mod-agendacoop-historico .agch__nav[disabled] {
    opacity: .35;
    cursor: not-allowed;
}

.mod-agendacoop-historico .agch__nav--prev {
    left: 16px;
}

.mod-agendacoop-historico .agch__nav--next {
    right: 16px;
}

/* Track */
.mod-agendacoop-historico .agch__track {
    display: flex;
    gap: var(--agch-gap);
    align-items: flex-start;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;

    max-width: calc(
            (var(--agch-visible) * var(--agch-item)) +
            ((var(--agch-visible) - 1) * var(--agch-gap))
    );
    margin: 0 auto;
    padding: 6px 2px 2px;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mod-agendacoop-historico .agch__track::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.mod-agendacoop-historico .agch__card {
    flex: 0 0 auto;
}

.mod-agendacoop-historico .agch__item {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: default !important;
    width: var(--agch-item);
    text-align: center;
    color: #fff;
}

.mod-agendacoop-historico .agch__year {
    display: block;
    font: normal normal 700 12px/16px var(--font-inter, Inter, sans-serif);
    margin-bottom: 30px;
    color: #fff;
}

.mod-agendacoop-historico .agch__cover,
.mod-agendacoop-historico .agch__coverPlaceholder {
    display: block;
    width: var(--agch-item);
    height: var(--agch-item);
    border-radius: 14px;
}

.mod-agendacoop-historico .agch__cover {
    object-fit: cover;
    object-position: top;
}

.mod-agendacoop-historico .agch__coverPlaceholder {
    background: rgba(255, 255, 255, .25);
}

.mod-agendacoop-historico .agch__empty {
    margin-top: .75rem;
    opacity: .85;
    color: #fff;
}

/* Responsivo */
@media (max-width: 1199.98px) {
    .mod-agendacoop-historico {
        --agch-visible: 4;
        --agch-side: 74px;
    }
}

@media (max-width: 991.98px) {
    .mod-agendacoop-historico {
        --agch-visible: 3;
        --agch-side: 66px;
    }
}

@media (max-width: 767.98px) {
    .mod-agendacoop-historico {
        --agch-visible: 2;
        --agch-side: 58px;
    }

    .mod-agendacoop-historico .agch__top {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .mod-agendacoop-historico .agch__topMedia {
        width: 100% !important;
    }

    .mod-agendacoop-historico .agch__topText {
        width: 100% !important;
    }

    .mod-agendacoop-historico .agch__nav--prev {
        left: 0;
    }

    .mod-agendacoop-historico .agch__nav--next {
        right: 0;
    }
}

@media (max-width: 575.98px) {
    .mod-agendacoop-historico {
        --agch-visible: 1;
        --agch-side: 54px;
    }
}


/* =====================================================
   MODAL (2º carrossel) — DEFINITIVO
   OBS: As variáveis também são definidas no .agchmodal
        porque o JS pode mover o modal pro <body>.
   ===================================================== */

/* trava scroll do site quando modal abre */
html.agchmodal-open,
body.agchmodal-open {
    overflow: hidden !important;
}

/* Base do modal (com fallback de variáveis caso esteja fora do módulo) */
.agchmodal {
    --agch-modal-bg: var(--ocb-azul-marinho, #171C66);
    --agch-modal-text: var(--ocb-branco, #fff);
    --agch-modal-height: 450px;
    --agch-modal-container: 1340px;
    --agch-modal-nav-space: 110px;
    --agch-modal-pad-x: 24px;
    --agch-modal-topspace: 56px;

    position: fixed;
    inset: 0;
    z-index: 2147483647;
}

/* Se estiver dentro do módulo, herda as variáveis do módulo (ok) */
.mod-agendacoop-historico .agchmodal {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
}

.agchmodal[hidden] {
    display: none !important;
}

.agchmodal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

/* dialog 100% + altura fixa */
.agchmodal__dialog {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 496px;
    background: var(--agch-modal-bg);
    color: var(--agch-modal-text);
    border-radius: 18px;
    overflow: hidden;
    box-sizing: border-box;
    --agch-modal-gutter: max(var(--agch-modal-pad-x), calc((100% - var(--agch-modal-container)) / 2));
}

/* wrapper do tmpl */
.agchmodal__carrossel {
    position: relative;
    height: 100%;
    width: 100%;
}

/* X: sempre no topo direito do “container” */
.agchmodal__close {
    position: absolute;
    top: 12px;
    right: calc(var(--agch-modal-gutter) + 6px);
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font-size: 44px;
    line-height: 1;
    cursor: pointer;
    padding: 8px 10px;
    z-index: 8;
}

.agchmodal__close:hover {
    color: #fff;
}

/* Setas: laterais, fora do conteúdo */
.agchmodal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: rgba(255, 255, 255, .20);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #fff;
    transition: background .2s ease, transform .15s ease;
    z-index: 8;
}

.agchmodal__nav:hover {
    background: rgba(255, 255, 255, .35);
}

.agchmodal__nav:active {
    transform: translateY(-50%) scale(.96);
}

.agchmodal__nav[disabled] {
    opacity: .35;
    cursor: not-allowed;
}

/* posição “segura” das setas */
.agchmodal__nav--prev {
    left: max(12px, calc(var(--agch-modal-gutter) - (var(--agch-modal-nav-space) / 2)));
}

.agchmodal__nav--next {
    right: max(12px, calc(var(--agch-modal-gutter) - (var(--agch-modal-nav-space) / 2)));
}

/* TRACK: container central e 1 slide por vez */
.agchmodal__track {
    height: 100%;
    width: min(
            var(--agch-modal-container),
            calc(100% - (var(--agch-modal-nav-space) * 2))
    );
    margin: 0 auto;

    display: flex;
    gap: 0;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;

    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;

    scrollbar-width: none;
    -ms-overflow-style: none;

    /* reserva topo pro X */
    padding-top: var(--agch-modal-topspace);
    box-sizing: border-box;
}

.agchmodal__track::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* 1 por vez (garante que não aparece “várias capas”) */
.agchmodal__slide {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    display: block;
    box-sizing: border-box;
}

/* GRID INTERNO: não estoura com gap (3fr/7fr ~ 30/70) */
.agchmodal__grid {
    height: calc(var(--agch-modal-height) - var(--agch-modal-topspace));
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    gap: 32px;
    align-items: center;
    box-sizing: border-box;

    /* padding interno do conteúdo */
    padding: 0 var(--agch-modal-pad-x);
}

/* mídia */
.agchmodal__media {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}

.agchmodal__cover {
    width: min(320px, 100%);
    display: block;
    border-radius: 14px 14px 0 0;
    object-fit: cover;
    object-position: top right;
}

.agchmodal__coverPlaceholder {
    width: min(320px, 100%);
    height: calc(var(--agch-modal-height) - 90px);
    border-radius: 14px 14px 0 0;
    background: rgba(255, 255, 255, .12);
}

/* conteúdo */
.agchmodal__content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    min-width: 0; /* CRUCIAL: impede overflow do texto */
}

.agchmodal__year {
    margin: 0 0 16px 0;
    font-family: var(--font-intro-semibold, "Intro SemiBold", sans-serif);
    font-weight: var(--weight-semibold, 600);
    font-size: 24px;
    line-height: 1.2;
    color: var(--agch-modal-text);
}

.agchmodal__text {
    font-family: var(--font-inter, "Inter", sans-serif);
    font-weight: var(--weight-regular, 400);
    font-size: 14px;
    line-height: 1.6;
    color: var(--agch-modal-text);

    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* marca */
.agchmodal__brand {
    margin-top: auto;
    padding-top: 18px;
    padding-bottom: 30px;
    opacity: .95;
}

.agchmodal__brandImg {
    height: 26px;
    width: auto;
    display: inline-block;
}

/* MOBILE: mantém simples, sem bagunçar */
@media (max-width: 767.98px) {
    .agchmodal__dialog {
        top: 0;
        transform: none;
        inset: 12px;
        width: auto;
        height: auto;
        border-radius: 14px;
        background: var(--ocb-azul-marinho, #171C66);

        /* no mobile o gutter vira fixo */
        --agch-modal-gutter: 12px;
    }

    .agchmodal__nav--prev {
        left: 12px;
    }

    .agchmodal__nav--next {
        right: 12px;
    }

    .agchmodal__close {
        top: 10px;
        right: 10px;
    }

    .agchmodal__track {
        width: calc(100% - 88px);
        padding-top: 54px;
        height: 100%;
    }

    .agchmodal__grid {
        height: auto;
        grid-template-columns: 1fr;
        gap: 16px;
        align-content: start;
        padding: 0 12px 14px;
    }

    .agchmodal__media {
        order: 2;
    }

    .agchmodal__cover,
    .agchmodal__coverPlaceholder {
        width: min(260px, 100%);
        height: 320px;
        margin: 0 auto;
        border-radius: 14px;
    }

    .agchmodal__year {
        text-align: center;
    }

    .agchmodal__brand {
        text-align: center;
    }
}