/*
 * SME - Talk.
 *
 * Read from cp-all-designer sme.html:349-389 and css/sme.css:587-592. The
 * cards are the news listing's own (news-widget.css).
 *
 * Colour, type and the spaces between the parts arrive from the Style tab and
 * are not repeated here.
 */

/* sme.css:57-60 — the button under the cards, centred */
.custom-sme-talk .custom-sme-talk__act {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

/* news.css:505-519, app.css:2357 — the design's card does not fade in: it is
   there at once and rises over 0.3s, the row arriving left to right. Its
   transition carries the row's delay always, a pointer's lift included. */
.custom-sme-talk [data-custom-news-grid] > [data-custom-news-card][data-custom-reveal],
.custom-sme-talk [data-custom-news-grid] > [data-custom-news-card][data-custom-reveal].is-in,
.custom-sme-talk [data-custom-news-grid] > [data-custom-news-card][data-custom-reveal].is-in:hover {
	transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
	transition-delay: var(--custom-sme-talk-delay, 0ms);
}

.custom-sme-talk [data-custom-news-grid] > :nth-child(3n+2) {
	--custom-sme-talk-delay: 80ms;
}

.custom-sme-talk [data-custom-news-grid] > :nth-child(3n+3) {
	--custom-sme-talk-delay: 160ms;
}

@media (max-width: 1024px) {
	.custom-sme-talk [data-custom-news-grid] > :nth-child(3n+2),
	.custom-sme-talk [data-custom-news-grid] > :nth-child(3n+3) {
		--custom-sme-talk-delay: 0ms;
	}
	.custom-sme-talk [data-custom-news-grid] > :nth-child(2n) {
		--custom-sme-talk-delay: 80ms;
	}
}

@media (max-width: 767px) {
	.custom-sme-talk [data-custom-news-grid] > * {
		--custom-sme-talk-delay: 0ms;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-sme-talk [data-custom-news-grid] > [data-custom-news-card][data-custom-reveal],
	.custom-sme-talk [data-custom-news-grid] > [data-custom-news-card][data-custom-reveal].is-in,
	.custom-sme-talk [data-custom-news-grid] > [data-custom-news-card][data-custom-reveal].is-in:hover {
		transition: none;
	}
}

/* a card past a tier's count is left out at that tier */
@media (min-width: 1025px) {
	.custom-sme-talk [data-custom-sme-talk-off~="desktop"] {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.custom-sme-talk [data-custom-sme-talk-off~="tablet"] {
		display: none;
	}
}

@media (max-width: 767px) {
	.custom-sme-talk [data-custom-sme-talk-off~="mobile"] {
		display: none;
	}
	/* sme.css:702 — the button runs the column's width */
	.custom-sme-talk .custom-sme-talk__act [data-custom-partner-button] {
		flex: 1 1 100%;
	}
}