/* =========================================================
   INESC Core — pagination
   Numbered, reload-based pagination nav shared by the Posts news
   listing and the Events listing. Consumers add the neutral
   .inesc-pagination classes to their markup:
     <nav class="… inesc-pagination">
       <ul>
         <li><a>1</a></li>
         <li class="inesc-pagination__ellipsis"><span>…</span></li>
         <li class="is-active"><a>3</a></li>
         <li class="inesc-pagination__next"><a>next ›</a></li>
       </ul>
     </nav>
   Self-contained tokens keep the component identical on either page,
   regardless of each plugin's own CSS variable names.
========================================================= */

.inesc-pagination {
	--ic-green:      #97ca3d;
	--ic-blue:       #005f80;
	--ic-white:      #fff;

	margin: 3rem 0 0;
}

.inesc-pagination ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	align-items: center;
}

.inesc-pagination li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.inesc-pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 0.7rem;
	font-size: clamp(1rem, 1.2vw, 1.25rem);
	font-weight: 400;
	color: var(--ic-green) !important;
	background: transparent;
	border: 1px solid var(--ic-green);
	text-decoration: none !important;
	line-height: 1;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.inesc-pagination a:hover,
.inesc-pagination a:focus,
.inesc-pagination li.is-active a {
	background: var(--ic-green);
	color: var(--ic-white) !important;
}

.inesc-pagination li.is-active a {
	pointer-events: none;
}

.inesc-pagination__ellipsis span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 2.4rem;
	color: var(--ic-green);
	font-size: clamp(1rem, 1.2vw, 1.25rem);
}

.inesc-pagination__next a {
	font-size: clamp(0.9rem, 1vw, 1.1rem);
	padding: 0 1rem;
	letter-spacing: 0.04em;
	color: var(--ic-blue) !important;
	border-color: var(--ic-blue);
}

.inesc-pagination__next a:hover,
.inesc-pagination__next a:focus {
	background: var(--ic-blue);
	color: var(--ic-white) !important;
}