/**
 * Página inicial da PROGEPE.
 */

/* Carrossel -------------------------------------------------------------- */

/*
 * Remove o espaçamento padrão do tema pai entre o cabeçalho e a primeira
 * seção da página inicial. Os seletores não dependem da classe progepe-home.
 */
/* Carrossel -------------------------------------------------------------- */

/*
 * Remove o espaçamento padrão do tema pai entre o cabeçalho e a primeira
 * seção da página inicial.
 */
body.home .site-content,
body.home main.site-main,
body.home #primary.site-main,
body.home #main.site-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.home main.site-main>.progepe-carousel,
body.home #primary.site-main>.progepe-carousel,
body.home #main.site-main>.progepe-carousel {
    margin-top: 0 !important;
}

/*
 * O carrossel utiliza a proporção padrão de 1270 x 400.
 *
 * A largura pode variar conforme a tela, mas a altura é calculada
 * automaticamente para preservar sempre a proporção original.
 */
.progepe-carousel {
    width: 100%;
}

.progepe-carousel .br-carousel {
    --carousel-min-height: 0;

    aspect-ratio: 800 / 160;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
    position: relative;
    width: 100%;
}

/*
 * O stage ocupa exatamente a área definida pela proporção 1270 / 400.
 */
.progepe-carousel .carousel-stage {
    bottom: 0 !important;
    height: 100% !important;
    left: 0 !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1;
}

.progepe-carousel .carousel-page {
    bottom: 0;
    height: 100% !important;
    left: 0;
    margin: 0 !important;
    top: 0;
    width: 100% !important;
}

.progepe-carousel .carousel-content {
    height: 100% !important;
    padding: 0 !important;
    position: relative;
    width: 100% !important;
}

.progepe-carousel__link,
.progepe-carousel__media {
    display: block;
    height: 100%;
    inset: 0;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.progepe-carousel__link {
    cursor: pointer;
    text-decoration: none;
}

/*
 * Como a imagem e o carrossel possuem exatamente a mesma proporção,
 * ela ocupa toda a área sem distorção e sem corte.
 */
.progepe-carousel__image {
    display: block;
    height: 100% !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: contain;
    object-position: center;
    width: 100% !important;
}

/*
 * Indicadores sobrepostos à imagem.
 */
.progepe-carousel .carousel-step {
    bottom: 8px;
    height: 40px;
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 20;
}

.progepe-carousel .carousel-step .step-progress-btn {
    pointer-events: auto;
    position: relative;
    z-index: 21;
}

/*
 * Setas sobrepostas à imagem.
 */
.progepe-carousel .carousel-button {
    pointer-events: none;
    z-index: 20 !important;
}

.progepe-carousel .carousel-button .carousel-btn-prev,
.progepe-carousel .carousel-button .carousel-btn-next {
    pointer-events: auto;
    position: relative;
    z-index: 21;
}

/* Atalhos --------------------------------------------------------------- */

.progepe-quick-links {
    background: var(--gray-2, #f8f8f8);
}

.progepe-quick-links__list {
    display: grid;
    gap: var(--spacing-scale-2x, 1rem);
    grid-template-columns: repeat(6, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.progepe-quick-links__list>.menu-item {
    display: flex;
    margin: 0;
}

.progepe-quick-links__list>.menu-item>a {
    align-items: center;
    background: var(--background, #fff);
    box-shadow: var(--surface-shadow-sm);
    color: var(--interactive, #1351b4);
    display: flex;
    font-weight: var(--font-weight-semi-bold, 600);
    justify-content: center;
    min-height: 9rem;
    padding: var(--spacing-scale-2x, 1rem);
    text-align: center;
    text-decoration: none;
    width: 100%;
}

.progepe-quick-links__list>.menu-item>a:hover {
    background-image:
        linear-gradient(rgba(var(--color-rgb), var(--hover)),
            rgba(var(--color-rgb), var(--hover)));
    text-decoration: none;
}

.progepe-quick-links__list>.menu-item>a:focus-visible {
    outline: 2px solid var(--focus-color, #1351b4);
    outline-offset: 4px;
}

@media (max-width: 1199px) {
    .progepe-quick-links__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .progepe-quick-links__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 479px) {
    .progepe-quick-links__list {
        grid-template-columns: 1fr;
    }
}


.progepe-highlights__image-wrapper {
    aspect-ratio: 1;
    border: 2px solid var(--interactive);
    border-radius: 50%;
    display: block;
    overflow: hidden;
    width: 9rem;
}

.progepe-highlights__image {
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.progepe-highlights {
    overflow: hidden;
    padding-block: var(--spacing-scale-5x, 3rem);
    padding-top: 0px !important;
}

.progepe-highlights__title {
    align-items: center;
    display: flex;
    gap: var(--spacing-scale-2x, 1rem);
    justify-content: center;
    margin-bottom: var(--spacing-scale-4x, 2rem);
    text-align: center;
}

.progepe-highlights__title-line {
    background: var(--border-color, #ccc);
    display: block;
    height: 1px;
    max-width: 25rem;
    width: 100%;
}

.progepe-highlights__title-content {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: var(--spacing-scale-base, 0.5rem);
    font-size: var(--font-size-scale-base, 1rem);
    font-weight: var(--font-weight-semi-bold, 600);
    text-transform: uppercase;
}

.progepe-highlights__carousel {
    align-items: center;
    display: grid;
    gap: var(--spacing-scale-2x, 1rem);
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.progepe-highlights__viewport {
    min-width: 0;
    overflow: hidden;
}

.progepe-highlights__track {
    display: flex;
    gap: var(--spacing-scale-4x, 2rem);
    list-style: none;
    margin: 0;
    padding: 0;
    will-change: transform;
}

.progepe-highlights__item {
    flex: 0 0 calc((100% - (var(--progepe-highlights-items-per-page,
                        3) - 1) * var(--spacing-scale-4x, 2rem)) / var(--progepe-highlights-items-per-page,
                3));
    min-width: 0;
    text-align: center;
}

.progepe-highlights__link {
    align-items: center;
    color: var(--text-color, inherit);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-scale-base, 0.5rem);
    text-decoration: none;
}

.progepe-highlights__link:hover {
    text-decoration: none;
}

.progepe-highlights__image-wrapper {
    aspect-ratio: 1;
    border: 2px solid var(--interactive, #1351b4);
    border-radius: 50%;
    display: block;
    max-width: 11rem;
    overflow: hidden;
    width: 100%;
}

.progepe-highlights__image {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.progepe-highlights__item-title {
    font-size: var(--font-size-scale-up-01, 1.2rem);
    font-weight: var(--font-weight-medium, 500);
}

.progepe-highlights__pagination {
    align-items: center;
    display: flex;
    gap: var(--spacing-scale-base, 0.5rem);
    justify-content: center;
    margin-top: var(--spacing-scale-2x, 1rem);
}

.progepe-highlights__dot {
    background: var(--gray-40, #999);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    height: 0.5rem;
    padding: 0;
    width: 0.5rem;
}

.progepe-highlights__dot.active {
    background: var(--interactive, #1351b4);
}

.progepe-highlights__previous:disabled,
.progepe-highlights__next:disabled {
    cursor: default;
    opacity: 0.45;
}

@media (max-width: 575px) {
    .progepe-highlights__carousel {
        gap: var(--spacing-scale-base, 0.5rem);
    }

    .progepe-highlights__title-line {
        display: none;
    }
}