/*
[tob_news_cards] - News & reports cards (Figma Home 1162:11193 / 11223 / 11208).
Loaded only on pages that use the shortcode (include/enqueue.php).
Card: 31px corners, 4px shadow, 19/16/16 padding, items 16px apart;
image 216px, 16px corners; chip UI/Tag; title H4; date Body/Regular;
button = Salient legacy outline button (global button rules).
Colours: news = Ground or Teal 50 (alternating) + Teal 500 chip, teal
shadow; reports = Golden Hour Light + Yellow 500 chip, gold shadow.
*/
.tob-news-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin-top: 31px;
}
.tob-news-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 19px 16px 16px;
	border-radius: 31px;
	background-color: #F5FAF9; /* Ground */
	box-shadow: 0 4px 4px rgba(44, 124, 122, 0.2);
}
.tob-news-card--alt {
	background-color: #E2F9F8; /* Teal 50 */
}
.tob-news-card--report {
	background-color: #FDF2DD; /* Golden Hour Light */
	box-shadow: 0 4px 4px rgba(182, 137, 10, 0.2);
}
.tob-news-card__image {
	display: block;
	width: 100%;
}
/* Beats Salient's `.row .col img {height:auto}` (style.css). */
.row .col .tob-news-card__image img,
.tob-news-card__image img {
	display: block;
	width: 100%;
	height: 216px;
	object-fit: cover;
	border-radius: 16px;
	margin: 0;
}
.tob-news-card__chip {
	display: inline-block;
	height: 20px;
	padding: 0 10px;
	border-radius: 9999px;
	background-color: #4CBDBD; /* Teal 500 */
	color: #FFFAF5; /* Off White */
	font-size: 10px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0.05px;
}
.tob-news-card--report .tob-news-card__chip {
	background-color: #FEBC00; /* Yellow 500 */
}
/* Beats Salient's heading margin (8px) - .row .col adds the specificity. */
.row .col .tob-news-card .tob-news-card__title,
.tob-news-card .tob-news-card__title {
	margin: 0;
	padding: 0;
}
.tob-news-card .tob-news-card__title a {
	color: inherit;
}
.tob-news-card .tob-news-card__date {
	margin: 0;
	padding: 0;
}
.tob-news-card .nectar-button {
	margin: 0;
}

@media only screen and (max-width: 999px) {
	.tob-news-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media only screen and (max-width: 690px) {
	.tob-news-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}