/*
 * Content types: cards (Produto/Serviço, Case Study), resources and brand logos.
 * Markup: inc/content-render.php. Used by porto/related, porto/brands, templates.
 */

/* Grids ---------------------------------------------------------------- */

.porto-related__items--cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 992px) {
	.porto-related__items--cards {
		grid-template-columns: repeat(var(--porto-related-columns, 3), minmax(0, 1fr));
	}
}

.porto-related__items--recurso {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--20);
}

.porto-related__items--marca,
.porto-brands__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(9rem, 45%), 1fr));
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

@media (min-width: 992px) {
	.porto-related__items--marca {
		grid-template-columns: repeat(var(--porto-related-columns, 6), minmax(0, 1fr));
	}

	.porto-brands__grid {
		grid-template-columns: repeat(var(--porto-brands-columns, 6), minmax(0, 1fr));
	}
}

/* Cards (brand: rounded, no lines, title/text/button aligned) ------------- */

.porto-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.porto-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--card-hover);
}

.porto-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--light);
}

.porto-card__media img,
.porto-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.6s ease;
}

.porto-card:hover .porto-card__media img {
	transform: scale(1.05);
}

.porto-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--30);
}

.porto-card__label {
	margin: 0;
	color: var(--wp--preset--color--secondary-dark);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.porto-brand-emr .porto-card__label,
.porto-card.porto-brand-emr .porto-card__label {
	color: var(--wp--preset--color--accent-emr);
}

.porto-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.35;
}

.porto-card__title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.porto-card__title a:hover {
	color: var(--wp--preset--color--secondary-dark);
}

.porto-card__text,
.porto-card__meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.porto-card__meta {
	font-weight: 600;
}

.porto-card__actions {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

/* Dark sections: cards stay light. */
.is-style-section-dark .porto-card {
	color: var(--wp--preset--color--body);
}

/* Resources (open in a new tab) ------------------------------------------ */

.porto-resource {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--light);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.porto-resource:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	text-decoration: none !important;
}

.porto-resource__thumb {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--secondary);
	font-size: 24px;
}

.porto-resource__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.porto-resource__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.porto-resource__meta {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.75;
}

.porto-resource__title {
	font-weight: 600;
	line-height: 1.4;
}

.porto-resource__action {
	flex: none;
	opacity: 0.7;
}

/* Brand logos ------------------------------------------------------------ */

.porto-brand {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	align-items: center;
	text-align: center;
}

.porto-brand__logo {
	display: block;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 390 / 222;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--base);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

a.porto-brand__logo:hover {
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-2px);
}

/* The logo image fills the whole tile (logos are uploaded as 390×222 tiles with their own white margin).
 * In colour since 2026-11-09. */
.porto-brand__logo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	border-radius: 0;
	opacity: 1;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

a.porto-brand__logo:hover img {
	opacity: 1;
}

/* Brand without a logo: name centred in the tile. */
.porto-brand__logo:not(:has(img)) {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--20);
}

.porto-brand__name {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.porto-brand__description {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.is-style-section-light .porto-brand__logo,
.porto-brands.has-background .porto-brand__logo {
	background: var(--wp--preset--color--base);
}

.porto-brands:not(.has-background) .porto-brand__logo {
	background: var(--wp--preset--color--light);
}

/* On a light-gray section the tiles stay white (otherwise they vanish into the background). */
.is-style-section-light .porto-brands:not(.has-background) .porto-brand__logo {
	background: var(--wp--preset--color--base);
}

.porto-brands__group + .porto-brands__group {
	margin-top: var(--wp--preset--spacing--50);
}

.porto-brands__group-title {
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-large);
}

/* Carousels of cards / logos ---------------------------------------------- */

.porto-related__carousel .owl-stage,
.porto-brands__carousel .owl-stage {
	display: flex;
}

.porto-related__carousel .owl-item,
.porto-brands__carousel .owl-item {
	display: flex;
}

.porto-related__carousel .owl-item > *,
.porto-brands__carousel .owl-item > * {
	width: 100%;
}

.porto-related__carousel .porto-card {
	margin: 8px 0 24px;
}

/* Blog listing: content label (Artigo / Case Study). */
.porto-content-label a {
	display: inline-block;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: var(--wp--preset--color--light);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

.porto-content-label a[href*="case-study"] {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Produto/Serviço: breadcrumb bar under the header. */
.porto-solucao-breadcrumbs .wp-block-porto-breadcrumbs {
	margin-block: 0;
}

/* Sections that only exist to show related items hide themselves when the
 * porto/related block inside is empty (front end only; visible in the editor). */
body:not(.editor-styles-wrapper) .porto-related-section:not(:has(.wp-block-porto-related)) {
	display: none;
}

/* Case Study testimonial (porto/field). */
.porto-field--testimonial .testimonial blockquote,
.porto-field--testimonial .testimonial blockquote p {
	font-family: inherit;
}

.porto-field--testimonial .testimonial blockquote::before,
.porto-field--testimonial .testimonial blockquote::after {
	font-family: Georgia, "Times New Roman", serif;
}

/* Breadcrumb bar aligned with the header (wide width). */
.porto-solucao-breadcrumbs > .wp-block-porto-breadcrumbs {
	max-width: var(--wp--style--global--wide-size);
}

/* Language switcher (porto/language-switcher) */
.porto-lang {
	display: inline-flex;
	gap: 0.15rem;
	align-items: center;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.porto-lang__item {
	padding: 0.2rem 0.45rem;
	border-radius: var(--wp--custom--radius--small);
	color: inherit;
	text-decoration: none;
}

.porto-lang__item.is-current {
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.porto-lang__item.is-disabled {
	opacity: 0.45;
}

/* Search results / listings (porto/post-summary) */
.porto-summary {
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
}

.porto-summary__type {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--secondary-dark);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.porto-summary__title {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--large);
}

.porto-summary__title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.porto-summary__text {
	margin: 0;
}

/* Blog filter (porto/label-filter): one row per filter (Tipo, Área), 2026-11-09. */
.porto-label-filter {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.porto-label-filter__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.porto-label-filter .porto-label-filter__label {
	min-width: 3.5rem;
	padding: 0;
	background: none;
	color: var(--wp--preset--color--secondary-dark);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.porto-label-filter a,
.porto-label-filter span {
	padding: 0.45rem 1rem;
	border-radius: 999px;
	background: var(--wp--preset--color--light);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
}

.porto-label-filter .is-current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Whole card clickable (title link stretched over the card). */
.porto-card {
	position: relative;
}

.porto-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.porto-card__top {
	display: flex;
	gap: var(--wp--preset--spacing--10);
	align-items: center;
	justify-content: space-between;
	min-height: 28px;
}

.porto-card__brand {
	width: auto;
	max-width: 96px;
	max-height: 28px;
	margin-left: auto;
	object-fit: contain;
	border-radius: 0;
}

/* Compact variant ("Também pode ser relevante"): small cards, list on mobile. */
.porto-related.is-compact .porto-card__media {
	display: none;
}

.porto-related.is-compact .porto-card__body {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

/* The image is hidden here, so the label/logo row goes back into the flow (it sat over the title). */
.porto-related.is-compact .porto-card .porto-card__top {
	position: static;
}

.porto-related.is-compact .porto-card__title {
	font-size: var(--wp--preset--font-size--medium);
}

.porto-related.is-compact .porto-card__text {
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 781.98px) {
	.porto-related.is-compact .porto-related__items--cards {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.porto-related.is-compact .porto-card {
		border-radius: 0;
		box-shadow: none;
		border-bottom: 1px solid var(--wp--preset--color--border);
		background: transparent;
	}

	.porto-related.is-compact .porto-card__text,
	.porto-related.is-compact .porto-card__actions {
		display: none;
	}

	.porto-related.is-compact .porto-card__body {
		padding: var(--wp--preset--spacing--20) 0;
	}
}

/* Agregadora option cards: 2–3 per row on desktop, vertical list on mobile. */
@media (max-width: 781.98px) {
	.porto-related__items--cards {
		grid-template-columns: 1fr;
	}
}

/* "O que a Europneumaq/EMR oferece": icons on desktop, bullets on mobile. */
@media (max-width: 781.98px) {
	.porto-offer {
		gap: var(--wp--preset--spacing--10) !important;
	}

	.porto-offer .porto-icon-box__icon {
		display: none;
	}

	.porto-offer .wp-block-porto-icon-box {
		position: relative;
		padding-inline-start: 1.6em;
	}

	.porto-offer .wp-block-porto-icon-box::before {
		content: "\2713";
		position: absolute;
		top: 0.1em;
		left: 0;
		color: var(--wp--preset--color--secondary);
		font-weight: 700;
	}

	.porto-offer .wp-block-porto-icon-box :is(h2, h3, h4) {
		font-size: var(--wp--preset--font-size--medium);
	}
}

/* -------------------------------------------------------------------------
 * porto/brands "Faixa contínua": endless strip of logos (CSS loop; the
 * render prints each row twice so -50% lands on an identical frame).
 * Hover pauses the row; reduced motion turns it into a scroller.
 * ---------------------------------------------------------------------- */

.porto-brands__marquee {
	--porto-brands-gap: clamp(2.5rem, 6vw, 6rem);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.porto-brands__filter {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.porto-brands__marquee .porto-brand__name {
	white-space: nowrap;
}

.porto-brands__marquee + .porto-brands__marquee {
	margin-top: var(--wp--preset--spacing--40);
}

.porto-brands__track {
	display: flex;
	gap: var(--porto-brands-gap);
	width: max-content;
	padding-inline-end: var(--porto-brands-gap);
	animation: porto-brands-marquee var(--porto-brands-duration, 60s) linear infinite;
}

.porto-brands__marquee.is-reverse .porto-brands__track {
	animation-direction: reverse;
}

.porto-brands__marquee:hover .porto-brands__track {
	animation-play-state: paused;
}

.porto-brands__marquee .porto-brand {
	flex: 0 0 auto;
	width: clamp(8.5rem, 13vw, 12rem);
}

@keyframes porto-brands-marquee {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.porto-brands__marquee {
		overflow-x: auto;
	}

	.porto-brands__track {
		animation: none;
	}
}