/**
 * Zippyn home — PRO cerca + últimos publicados as vertical list.
 * Mobile-first.
 */

.zp-service-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0 0 8px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.zp-service-card--list {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 12px;
	row-gap: 8px;
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	margin: 0;
	padding: 10px;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
	box-shadow: none;
	scroll-snap-align: unset;
	box-sizing: border-box;
}

.zp-service-card--list .zp-service-card__media {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 88px;
	min-height: 88px;
	margin: 0;
}

.zp-service-card--list .zp-card-img {
	width: 88px !important;
	height: 88px !important;
	min-height: 88px !important;
	border-radius: 10px;
	background-size: cover;
	background-position: center;
}

.zp-service-card--list .zp-card-corner-stack {
	top: 4px;
	right: 4px;
}

.zp-service-card--list .zp-service-card__body {
	grid-column: 2;
	grid-row: 1;
	padding: 0 !important;
	min-width: 0;
}

.zp-service-card--list .zp-service-card__title,
.zp-service-card--list .zp-service-card__title a {
	font-size: 15px !important;
	line-height: 1.25 !important;
	margin: 0 0 4px !important;
	-webkit-line-clamp: 2;
}

.zp-service-card--list .zp-service-card__cta-row {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0;
	padding: 0;
}

.zp-service-card--list .zp-service-card__cta-row .zp-btn {
	min-height: 40px;
	padding: 8px 12px;
	font-size: 13px;
}

.zp-service-card--list.zp-service-card--pro {
	border-color: #bfdbfe;
	background: #f8fbff;
}

@media (min-width: 900px) {
	.zp-service-list {
		gap: 12px;
		max-width: 720px;
	}

	.zp-service-card--list {
		grid-template-columns: 112px minmax(0, 1fr);
		padding: 12px;
	}

	.zp-service-card--list .zp-service-card__media,
	.zp-service-card--list .zp-card-img {
		width: 112px !important;
		height: 112px !important;
		min-height: 112px !important;
	}
}