/*
 * Microcredentials catalogue: search, filters and course cards.
 *
 * Design: Figma "IHTE - Teach English Website", node 3815:2360, measured at 1440.
 * Own class prefix (.pmc-cat) and own file: the older finder styles live in
 * pmc-course.css and are shared by other widgets, so nothing here can disturb them.
 *
 * Order: tokens, blocks, then the responsive rules at the end of the file.
 */

.pmc-cat {
	--pmc-cat-ink: #000;
	--pmc-cat-grey: #4c4c4c;
	--pmc-cat-label: #656565;
	--pmc-cat-dica: #999999;
	--pmc-cat-blue: #3b44b5;
	--pmc-cat-line: #dddddd;
	--pmc-cat-soft: #f5f5f7;
	--pmc-cat-field: rgba(255, 255, 255, 0.25);
	--pmc-cat-pad: 0;   /* a folga vem do contentor pai, no editor */
	--pmc-cat-gap: 40px;
	/* Entre o texto da strand e os cards. Separado do gap da grelha: aqui
	   muda-se o ritmo da página, ali o desenho do cartão. */
	--pmc-cat-vao: 64px;
	/* A pílula de um filtro: altura, e o tecto da largura. */
	--pmc-cat-dd-h: 47px;
	--pmc-cat-dd-max: 260px;
	--pmc-cat-cols: 3;
	--pmc-cat-font: "Aptos", "Segoe UI", Arial, sans-serif;
	--pmc-cat-font-title: "Open Sans", "Segoe UI", Arial, sans-serif;

	padding: var(--pmc-cat-pad);
	background: var(--pmc-cat-soft);
	font-family: var(--pmc-cat-font);
	color: var(--pmc-cat-ink);
}

.pmc-cat *,
.pmc-cat *::before,
.pmc-cat *::after {
	box-sizing: border-box;
}

.pmc-cat__wrap {
	display: flex;
	flex-direction: column;
	gap: var(--pmc-cat-gap);
	max-width: 1200px;
	margin: 0 auto;
}

.pmc-cat ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pmc-cat a {
	text-decoration: none;
}

.pmc-cat .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Search row and results row are one block in the design (gap 24),
   and only then comes the 40px gap to the strand text or the cards. */
.pmc-cat__topo {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ---------- Search row ---------- */

.pmc-cat__barra {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* flex-basis a zero: a quebra de linha olha para o tamanho hipotetico, e o
   do <input> e largo o bastante para empurrar o botao Search para baixo. */
.pmc-cat__busca {
	flex: 1 1 0;
	min-width: 0;
}

.pmc-cat__busca input[type="search"] {
	min-width: 0;
}

.pmc-cat__busca input[type="search"] {
	width: 100%;
	height: 47px;
	padding: 9px 24px;
	border: 1px solid var(--pmc-cat-ink);
	border-radius: 30px;
	background: var(--pmc-cat-field);
	font-family: var(--pmc-cat-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--pmc-cat-ink);
	box-shadow: none;
}

/* O mesmo cinzento do filtro de cursos em /course-listing/ (#999). A preto,
   como estava, a dica lia-se como texto já escrito no campo. */
.pmc-cat__busca input[type="search"]::placeholder {
	color: var(--pmc-cat-dica);
	opacity: 1;
}

/* ---------- Pills (buttons and selects) ---------- */

.pmc-cat .pmc-cat__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 47px;
	padding: 9px 24px;
	border: 1px solid transparent;
	border-radius: 30px;
	font-family: var(--pmc-cat-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 27px;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pmc-cat .pmc-cat__btn--primary,
.pmc-cat .pmc-cat__btn--primary:hover,
.pmc-cat .pmc-cat__btn--primary:focus {
	background: var(--pmc-cat-blue);
	border-color: var(--pmc-cat-blue);
	color: #fff;
}

.pmc-cat .pmc-cat__btn--primary:hover {
	background: #2f3796;
	border-color: #2f3796;
}

.pmc-cat .pmc-cat__btn--outline,
.pmc-cat .pmc-cat__btn--outline:hover,
.pmc-cat .pmc-cat__btn--outline:focus {
	background: #fff;
	border-color: #cecece;
	color: var(--pmc-cat-ink);
}

.pmc-cat .pmc-cat__btn--outline:hover {
	border-color: var(--pmc-cat-ink);
}

/* Selects look like the pills in the design: value inside, chevron on the right. */
.pmc-cat__campo {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.pmc-cat__campo select {
	appearance: none;
	-webkit-appearance: none;
	height: 47px;
	padding: 9px 44px 9px 24px;
	border: 1px solid var(--pmc-cat-grey);
	border-radius: 30px;
	background: var(--pmc-cat-field);
	font-family: var(--pmc-cat-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--pmc-cat-grey);
	cursor: pointer;
}

.pmc-cat__campo::after {
	content: "";
	position: absolute;
	right: 24px;
	width: 10px;
	height: 10px;
	border-right: 1.5px solid var(--pmc-cat-grey);
	border-bottom: 1.5px solid var(--pmc-cat-grey);
	rotate: 45deg;
	translate: 0 -3px;
	pointer-events: none;
}

.pmc-cat__campo--larga select {
	min-width: 196px;
}

/* ---------- Results row ---------- */

.pmc-cat__resultados {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.pmc-cat__contagem {
	margin: 0;
	font-family: var(--pmc-cat-font-title);
	font-size: 24px;
	font-weight: 600;
	line-height: 33.6px;
	color: var(--pmc-cat-grey);
}

.pmc-cat__filtros {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.pmc-cat__grupo {
	display: flex;
	align-items: center;
	gap: 16px;
}

.pmc-cat__rotulo {
	font-size: 18px;
	font-weight: 600;
	line-height: 25.2px;
	color: var(--pmc-cat-label);
	white-space: nowrap;
}

/* ---------- Strand intro (only with a strand chosen) ---------- */

.pmc-cat__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
	text-align: center;
}

.pmc-cat__intro-titulo {
	margin: 0;
	font-family: var(--pmc-cat-font-title);
	font-size: 32px;
	font-weight: 600;
	line-height: 41.6px;
	color: var(--pmc-cat-ink);
}

.pmc-cat__intro-texto {
	max-width: 736px;
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 27px;
	color: var(--pmc-cat-ink);
}

/* ---------- Cards ---------- */

.pmc-cat__lista {
	display: grid;
	grid-template-columns: repeat(var(--pmc-cat-cols), minmax(0, 1fr));
	gap: var(--pmc-cat-gap);
	align-items: stretch;
}

.pmc-cat__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	padding: 32px;
	border: 1.5px solid var(--pmc-cat-line);
	border-radius: 20px;
	background: #fff;
}

.pmc-cat__media {
	position: relative;
	aspect-ratio: 306 / 260;
	overflow: hidden;
	border-radius: 15px;
	background: #d9d9d9;
}

.pmc-cat__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 15px;
}

/* The strand tag, in the strand's own colour (Figma 4046:1977).

   Always one line (Pedro, 23/09/2026). The design asks for 14px, but
   "Inclusive Education and Learner Wellbeing" then needs 313px and the photo
   is 286-307px wide in three columns, so it broke in two. At 11px, with a
   16px icon, it needs 250px: it fits in three columns at any width, in two
   from ~760px and in one from ~370px. Narrower than that the name ends in
   an ellipsis instead of breaking. */
.pmc-cat__strand {
	position: absolute;
	top: 16px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: calc(100% - 28px);
	padding: 7px 12px 7px 10px;
	border-radius: 500px;
	background: var(--pmc-strand-bg, var(--pmc-cat-blue));
	color: var(--pmc-strand-fg, #fff);
	font-size: 11px;
	font-weight: 600;
	line-height: 15px;
	white-space: nowrap;
}

.pmc-cat__strand svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* The icon follows the text: white on purple, black on green and orange.
   The SVG ships with fill="white". */
.pmc-cat__strand svg path { fill: currentColor; }

.pmc-cat__strand-nome {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pmc-cat__tipo {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 25.2px;
	color: var(--pmc-cat-blue);
}

.pmc-cat__titulo {
	margin: 0;
	font-family: var(--pmc-cat-font-title);
	font-size: 24px;
	font-weight: 700;
	line-height: 33.6px;
	color: var(--pmc-cat-ink);
}

.pmc-cat__titulo a {
	color: inherit;
}

.pmc-cat__titulo a:hover {
	color: var(--pmc-cat-blue);
}

.pmc-cat__resumo {
	margin: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 25.2px;
	color: var(--pmc-cat-ink);
}

.pmc-cat__preco {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 33.6px;
	color: var(--pmc-cat-ink);
}

/* WooCommerce prints the amount plus the VAT note; the note is the quiet part. */
.pmc-cat__preco .woocommerce-Price-amount {
	font: inherit;
}

.pmc-cat__preco small,
.pmc-cat__preco .pmc-preco__nota {
	display: block;
	/* A regra geral da nota põe 6px à esquerda, para ela ficar AO LADO do
	   preço. Aqui ela está por baixo, e esses 6px desalinhavam-na de todo o
	   resto do card. */
	margin-left: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--pmc-cat-grey);
}

/* Actions sit at the bottom, so cards in a row line up. */
.pmc-cat__acoes {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: auto;
}

.pmc-cat__acoes .pmc-cat__btn {
	width: 100%;
	min-height: 50px;
}

.pmc-cat__acoes .added_to_cart {
	display: none;
}

.pmc-cat__btn.loading {
	opacity: 0.7;
}

/* ---------- Empty state ---------- */

.pmc-cat__vazio {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 32px;
	border: 1.5px solid var(--pmc-cat-line);
	border-radius: 20px;
	background: #fff;
}

.pmc-cat__vazio p {
	margin: 0;
	font-size: 18px;
	line-height: 27px;
}

/* Visible keyboard focus everywhere in the catalogue. */
.pmc-cat a:focus-visible,
.pmc-cat button:focus-visible,
.pmc-cat select:focus-visible,
.pmc-cat input:focus-visible {
	outline: 2px solid var(--pmc-cat-blue);
	outline-offset: 3px;
}

/* ---------- Custom dropdown ----------
   Same menu as the Teach English filter (/course-listing/): the browser's own
   list is grey and out of place next to these pills. The native <select> stays
   in the form and keeps working without JavaScript; pmc-dropdown.js hides it
   and builds this on top. */

.pmc-cat__campo--dd select {
	position: absolute;
	/* min-width: 0 e max-width: o .pmc-cat__campo--larga impoe min-width 196px,
	   que vencia o width: 1px e deixava o select nativo visivel por baixo. */
	width: 1px;
	min-width: 0;
	max-width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.pmc-cat__campo--dd::after {
	content: none;
}

/* Quem define a caixa do filtro é o medidor, não o botão.

   O medidor tem TODAS as opções, empilhadas e invisíveis, por isso a largura
   fica na da maior e deixa de depender da escolhida — era isso que fazia a
   pílula saltar ao trocar "Available Courses" por "Phonology".

   O botão assenta por cima, absoluto: fora do fluxo ele não pesa na medida.
   Tentei antes uma grelha de uma célula, mas aí a coluna `auto` olhava para o
   max-content do botão também, e um nome comprido voltava a esticar tudo. */
.pmc-cat__dd {
	position: relative;
	display: block;
}

.pmc-cat .pmc-cat__dd > .pmc-cat__dd-btn {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 0;
	height: var(--pmc-cat-dd-h);
}

.pmc-cat__dd-medida {
	display: block;
	/* Segura a altura da caixa, já que o botão saiu do fluxo. */
	height: var(--pmc-cat-dd-h);
	/* O tecto. "Inclusive Education and Learner Wellbeing" sozinho pedia 372px
	   e desequilibrava a linha; daí para cima é o botão que corta com
	   reticências, e a lista aberta mostra o nome inteiro na mesma. */
	max-width: var(--pmc-cat-dd-max);
	/* As folgas do botão, somadas: 24 à esquerda; à direita 24 mais os 10 do
	   gap e os 12 da seta, que o medidor não tem. E a moldura: com
	   `box-sizing: border-box` ela come 1px de cada lado ao texto, e era por
	   isso que a opção mais longa ainda cortava por uns pixels. */
	padding: 0 46px 0 24px;
	border: 1px solid transparent;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	font-family: var(--pmc-cat-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0;
}

.pmc-cat__dd-medida > span {
	display: block;
	white-space: nowrap;
}

/* Duas classes de propósito: o kit do Elementor pinta `button` com peso
   (0,1,1) e vencia uma classe só — os filtros apareciam azuis e rosa. Todos
   os estados vêm juntos, senão o hover do tema reaparece no primeiro toque. */
.pmc-cat .pmc-cat__dd-btn,
.pmc-cat .pmc-cat__dd-btn:hover,
.pmc-cat .pmc-cat__dd-btn:focus,
.pmc-cat .pmc-cat__dd-btn:focus-visible,
.pmc-cat .pmc-cat__dd-btn:active {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 100%;
	height: 47px;
	padding: 9px 24px;
	border: 1px solid var(--pmc-cat-grey);
	border-radius: 30px;
	background: var(--pmc-cat-field);
	background-image: none;
	box-shadow: none;
	font-family: var(--pmc-cat-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0;
	text-transform: none;
	/* Cinzento escolhido ou não. O que diz qual filtro está activo é o texto
	   dentro da pílula; escurecê-lo ao escolher fazia a barra saltar à vista
	   sem dizer nada de novo. */
	color: var(--pmc-cat-grey);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.pmc-cat .pmc-cat__dd-btn:hover,
.pmc-cat .pmc-cat__dd-btn:focus-visible {
	border-color: var(--pmc-cat-ink);
	background: #fff;
}

.pmc-cat .pmc-cat__dd.is-open .pmc-cat__dd-btn {
	border-color: var(--pmc-cat-ink);
	background: #fff;
}

/* No medidor, e não no botão: é ele que manda na largura agora. 196 é o do
   desenho (Figma 3815:2368). */
.pmc-cat__campo--larga .pmc-cat__dd-medida {
	min-width: 196px;
	max-width: 290px;
}

.pmc-cat__dd-texto {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pmc-cat__dd-seta {
	flex: 0 0 auto;
	transition: rotate 0.2s ease;
}

.pmc-cat__dd.is-open .pmc-cat__dd-seta {
	rotate: 180deg;
}

.pmc-cat__dd-painel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	display: none;
	min-width: 100%;
	max-width: min(360px, 90vw);
	max-height: 280px;
	margin-top: 6px;
	padding: 6px 0;
	overflow-y: auto;
	border: 1px solid #e6e6f0;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.pmc-cat__dd.is-open .pmc-cat__dd-painel {
	display: block;
}

.pmc-cat .pmc-cat__dd-opt {
	padding: 10px 20px;
	font-family: var(--pmc-cat-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	color: #1a1a2e;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pmc-cat .pmc-cat__dd-opt:hover,
.pmc-cat .pmc-cat__dd-opt:focus-visible {
	background: #f4f4f9;
	color: var(--pmc-cat-blue);
	outline: none;
}

.pmc-cat .pmc-cat__dd-opt.is-active {
	font-weight: 600;
}

/* ==========================================================
   Responsive. Keep these last.
   ========================================================== */

@media (max-width: 1199px) {
	.pmc-cat {
		--pmc-cat-pad: 0;
		--pmc-cat-gap: 24px;
		--pmc-cat-vao: 48px;
		--pmc-cat-cols: 2;
	}
}

@media (max-width: 860px) {
	/* Os três numa linha: busca, Search e "Available Courses". Só a busca
	   estica, os outros dois ficam do seu tamanho. */
	.pmc-cat__barra {
		flex-wrap: nowrap;
	}

	.pmc-cat__busca {
		flex: 1 1 0;
		min-width: 0;
	}

	.pmc-cat__barra .pmc-cat__campo {
		flex: 0 1 auto;
		min-width: 0;
	}

	.pmc-cat__resultados {
		align-items: flex-start;
		flex-direction: column;
	}

	/* Os três filtros numa linha só, sem quebrar. */
	.pmc-cat__filtros {
		width: 100%;
		flex-wrap: nowrap;
		gap: 16px;
	}

	.pmc-cat__grupo {
		flex: 0 1 auto;
		min-width: 0;
		gap: 10px;
	}

	/* O "View" não cede: tem dois caracteres lá dentro e encolhê-lo só faria
	   "All" virar "A…". Quem dá lugar são os outros dois, que têm texto a mais
	   e uma lista aberta onde o nome aparece inteiro. */
	.pmc-cat__grupo--ver {
		flex: 0 0 auto;
	}

	.pmc-cat__grupo--strand .pmc-cat__campo,
	.pmc-cat__grupo--ordem .pmc-cat__campo,
	.pmc-cat__grupo--strand .pmc-cat__dd,
	.pmc-cat__grupo--ordem .pmc-cat__dd {
		width: 100%;
		min-width: 0;
	}

	.pmc-cat__grupo--strand .pmc-cat__dd-medida,
	.pmc-cat__grupo--ordem .pmc-cat__dd-medida {
		max-width: 100%;
	}

	/* A pílula cede folga e o rótulo um ponto: sem isto os três pediam 919px
	   numa coluna de 757. */
	.pmc-cat__rotulo {
		font-size: 15px;
	}

	.pmc-cat .pmc-cat__dd-btn,
	.pmc-cat .pmc-cat__dd-btn:hover,
	.pmc-cat .pmc-cat__dd-btn:focus,
	.pmc-cat .pmc-cat__dd-btn:focus-visible,
	.pmc-cat .pmc-cat__dd-btn:active {
		gap: 8px;
		padding: 9px 16px;
	}

	/* 16 à esquerda; à direita 16 mais os 8 do gap e os 12 da seta. */
	.pmc-cat__dd-medida {
		padding: 0 36px 0 16px;
	}

	.pmc-cat__campo select {
		width: 100%;
	}
}

/* Nas medidas reais de tablet (768 para cima) o "Sort by" também não cede:
   quem encolhe é só o strand, que é o que tem o nome comprido. Repartir o
   aperto pelos dois deixava "Price: low to high" cortado sem necessidade.

   Abaixo de 768 — telefone ao deitado — voltam os dois a ceder, senão a linha
   não fecha. */
@media (min-width: 768px) and (max-width: 860px) {
	.pmc-cat__grupo--ordem {
		flex: 0 0 auto;
	}
}

@media (max-width: 767px) {
	.pmc-cat {
		--pmc-cat-pad: 0;
	}
}

@media (max-width: 680px) {
	.pmc-cat {
		--pmc-cat-vao: 40px;
		--pmc-cat-pad: 0;
		--pmc-cat-cols: 1;
	}

	.pmc-cat__card {
		padding: 20px;
	}

	.pmc-cat__contagem {
		font-size: 20px;
		line-height: 28px;
	}

	.pmc-cat__intro-titulo {
		font-size: 26px;
		line-height: 34px;
	}

	.pmc-cat__grupo {
		flex: 1 1 100%;
	}

	/* Cabem os dois na linha se o botao ceder fonte e folga. */
	.pmc-cat .pmc-cat__btn--primary {
		gap: 6px;
		padding: 9px 14px;
		font-size: 15px;
	}

	.pmc-cat__busca input[type="search"] {
		padding-inline: 16px;
	}

	/* O "Available Courses" desce para a sua linha e ocupa-a inteira. */
	.pmc-cat__barra {
		flex-wrap: wrap;
	}

	.pmc-cat__barra .pmc-cat__campo--larga {
		flex: 1 1 100%;
		min-width: 0;
	}

	.pmc-cat__campo--larga,
	.pmc-cat__campo--larga .pmc-cat__dd {
		width: 100%;
		min-width: 0;
	}

	.pmc-cat__campo--larga .pmc-cat__dd-medida {
		min-width: 0;
		max-width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pmc-cat * {
		transition: none !important;
	}
}

/* ------------------------------------------- filtros no telemovel

   "Sort by:" e "View" numa linha so. Os campos cedem fonte e folga: o
   "View" nunca tem mais do que dois caracteres, por isso e ele que fica
   com a parte estreita. Fica no fim, que e onde as regras de ecra pequeno
   tem de estar para ganhar. */
@media (max-width: 680px) {
	/* No telemóvel a linha volta a quebrar: o `nowrap` do tablet punha os três
	   filtros a disputar 350px e o "Sort by" ficava com zero. */
	.pmc-cat__filtros {
		flex-wrap: wrap;
		gap: 12px;
	}

	/* `min-width: 0` nos três: sem ele o tamanho mínimo automático do grupo
	   é o conteúdo dele, e o rótulo mais a pílula do medidor empurravam o
	   "Filter by Strand" para fora da coluna. */
	.pmc-cat__grupo { min-width: 0; }
	.pmc-cat__grupo--strand { flex: 1 1 100%; }
	/* Base zero, e não `auto`: com `auto` a base era o conteúdo (rótulo mais
	   pílula), a soma passava a linha e o "View" ia parar abaixo. A zero, os
	   dois cabem e o Sort by fica com o que sobra. */
	.pmc-cat__grupo--ordem { flex: 1 1 0; }
	.pmc-cat__grupo--ver { flex: 0 0 auto; }

	/* Aqui, sim: a linha tem 335px e o Sort by e o View têm de caber lado a
	   lado, então a pílula acompanha o grupo e o texto corta com reticências.

	   A largura continua a não depender da opção escolhida: o botão está fora
	   do fluxo e quem mede é sempre o medidor. */
	.pmc-cat__grupo .pmc-cat__campo,
	.pmc-cat__grupo .pmc-cat__dd { min-width: 0; width: 100%; }

	/* E o medidor larga o tecto de 260: aqui ele nem precisa de mandar na
	   largura — quem manda é a linha. O que interessa é que a pílula não mude
	   ao escolher, e isso já está garantido pelo botão estar fora do fluxo.
	   Com 260 ele empurrava o grupo do strand para fora da coluna. */
	.pmc-cat__dd-medida { max-width: 100%; }

	.pmc-cat__grupo--ordem .pmc-cat__rotulo,
	.pmc-cat__grupo--ver .pmc-cat__rotulo { font-size: 14px; }

	.pmc-cat .pmc-cat__grupo--ordem .pmc-cat__dd-btn,
	.pmc-cat .pmc-cat__grupo--ver .pmc-cat__dd-btn,
	.pmc-cat__grupo--ordem .pmc-cat__campo select,
	.pmc-cat__grupo--ver .pmc-cat__campo select {
		min-width: 0;
		height: 42px;
		padding: 8px 14px;
		font-size: 14px;
		gap: 6px;
	}

	.pmc-cat__grupo--ver .pmc-cat__dd { min-width: 72px; }

	/* O medidor acompanha o botão mais pequeno: 42 de altura, 14 à esquerda e,
	   à direita, 14 mais os 6 do gap e os 12 da seta. */
	.pmc-cat__grupo--ordem,
	.pmc-cat__grupo--ver {
		--pmc-cat-dd-h: 42px;
	}

	.pmc-cat__grupo--ordem .pmc-cat__dd-medida,
	.pmc-cat__grupo--ver .pmc-cat__dd-medida {
		padding: 0 32px 0 14px;
		font-size: 14px;
	}
}

/* O botao Search entra inteiro ou nao entra: sem encolher e sem quebrar. */
.pmc-cat .pmc-cat__barra .pmc-cat__btn--primary {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ------------------------------------------------ a troca dos cards

   Os filtros já não recarregam a página: trocam este pedaço. Enquanto a
   resposta não chega, a lista esmorece em vez de desaparecer — piscar o vazio
   e voltar é pior do que esperar meio segundo a olhar para o que já lá estava. */
.pmc-cat__saida {
	/* Coluna flex, e não um bloco: é isto que dá o vão entre o texto da
	   strand e os cards — ou entre ele e a caixa de "nenhum curso". */
	display: flex;
	flex-direction: column;
	gap: var(--pmc-cat-vao);
	transition: opacity 0.18s ease;
}

.pmc-cat[data-pmc-carregando] .pmc-cat__saida {
	opacity: 0.45;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.pmc-cat__saida {
		transition: none;
	}
}