/* Ações Educacionais - Frontend Styles */

html {
    scroll-behavior: smooth;
}

/* Tabs UI for categories */
.ae-tabs-wrapper { width: 100%; }
.ae-tabs { display: flex; gap: 30px; flex-wrap: wrap; margin-bottom: 1rem; }
.ae-tab-button {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem; 
	font-size: 12pt;
	line-height: 1.25rem; 
	font-weight: 500; 
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms; 
}
.ae-tab-button:hover { transform: translateY(-1px); }

.ae-tab-button.active {
	color: var(--tab-color, #56BAA8);
	border-bottom: 2px solid var(--tab-color, #56BAA8);
}

html.alto-contraste .ae-tab-button.active{
	font-weight:900;
	border-bottom: 4px solid var(--color-vermelhoMP-100, #561521);
	color:var(--color-vermelhoMP-100, #561521);
}

.ae-tab-panels { width: 100%; }
.ae-tab-panel { padding-top: 0.5rem; }

/* Make tabs horizontally scrollable on small screens */
@media (max-width: 640px) {
	.ae-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
	.ae-tabs::-webkit-scrollbar { height: 6px; }
	.ae-tab-button { white-space: nowrap; }
}

.item-container{
	width:100%;
}


/* Thumb: forçar todas as imagens do card a terem as mesmas dimensões (quadrado) */
.acoes-educacionais-thumb-wrap {
	max-width: 100%;
	overflow: hidden;
}
.acoes-educacionais-thumb-wrap img {
	height: 150px;        /* fallback para navegadores sem aspect-ratio */
	object-fit: cover;
	display: block;
}


.acoes-educacionais-item .button-primary:hover {
	background-color: var(--ae-cat-color);
	color: #fff;
	border: 2px solid var(--ae-cat-color);
}

html.alto-contraste .button-primary:hover {
	color: #000000 !important;
}

.acoes-educacionais-item .button-primary {
	background-color: transparent;
	color: var(--ae-cat-color);
	border: 2px solid var(--ae-cat-color);
}


.acoes-educacionais-item > div[style*="display: flex"] {
	margin-top: 15px;
	display: flex;
	flex-wrap: wrap;
}

html.alto-contraste .acoes-educacionais-item {
	background-color:#000000 !important;
}

.acoes-educacionais-pagination {
	text-align: center;
	margin: 2rem 0;
	padding: 1.5rem 0;
	width:100%;
	display:inline-flex;
}

.acoes-educacionais-pagination ul {
	display:flex;
	width:100%;
	justify-content:center;
}

.acoes-educacionais-pagination a,
.acoes-educacionais-pagination span {
	display: inline-block;
	margin: 0 0.25rem;
	padding: 0.5rem 1rem;
	text-decoration: none;
	border: 1px solid #ddd;
	border-radius: 3px;
	background-color: #fff;
	color: #0073aa;
	transition: all 0.2s ease;
}

html.alto-contraste .acoes-educacionais-pagination a{
	color: #000 !important;
	border: 1px solid #000;
}


.acoes-educacionais-pagination a:hover {
	background-color: #0073aa;
	color: #fff;
	border-color: #0073aa;
}

html.alto-contraste .acoes-educacionais-pagination a:hover{
	background-color: #000 !important;
	border-color: #000 !important;
	color: #fff !important;
}

.acoes-educacionais-pagination .current {
	background-color: #0073aa;
	color: #fff;
	border-color: #0073aa;
}

html.alto-contraste .acoes-educacionais-pagination .current{
	background-color: #000 !important;
	border-color: #000 !important;
}

/* Responsive */



@media (max-width: 1200px) {

	.item-container{
	width:80%;
	}
}


@media (max-width: 1024px) {
	.item-container{
	width:50%;
	}

}

@media (max-width: 768px) {
	.item-container{
	width:80%;
	}
}
	
@media (max-width: 640px) {
	.item-container{
	width:100%;
	}
	
	.acoes-educacionais-item .button-primary h6 {
	font-size:12px;
}
	
}

/* Helper: screen-reader-only (visually hidden but available to assistive tech) */
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.sr-only:focus,
.sr-only:active {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}