/*
 * Chart card block (template-parts/blocks/chart-card.php)
 *
 * Loaded wherever the block is used, in the editor as well as on the site.
 * Card look taken from the dashboard panels (public/css/dashboard.css),
 * without the coloured top border.
 */

.chart-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	color: #1d1d1b;
	padding: 18px 18px 16px;
}

/*
 * Cards side by side in Columns get equal heights: the columns stretch to the
 * tallest one, the card fills its column, and the link stays at the bottom.
 */
.wp-block-columns:has(> .wp-block-column > .chart-card) {
	align-items: stretch !important; /* also when a vertical alignment is set */
}

.wp-block-column:has(> .chart-card) {
	display: flex;
	flex-direction: column;
	align-self: stretch !important;
}

.wp-block-column > .chart-card {
	flex: 1 1 auto;
}

.chart-card__icon {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.chart-card__title {
	color: #000;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.3;
	margin: 0;
	padding-right: 32px; /* room for the icon */
}

.chart-card__title strong,
.chart-card__title b {
	font-weight: 700;
}

.chart-card__subtitle {
	color: #1a98a8;
	font-size: 0.75rem;
	line-height: 1.3;
	margin: 2px 0 0;
}

.chart-card__chart {
	display: block;
	width: 100%;
	border: 0;
	margin-top: 16px;
}

.chart-card__placeholder {
	margin: 16px 0 0;
	padding: 40px 16px;
	background: #f2f2f2;
	color: #666;
	font-size: 0.875rem;
	text-align: center;
}

/* "Ga naar deze indicator" link */
.chart-card__link {
	display: flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	margin: auto 0 0 auto; /* bottom right, also when the card is stretched */
	padding-top: 16px;
	color: #1d1d1b;
	font-size: 0.9375rem;
	text-decoration: none;
}

.chart-card__link:hover,
.chart-card__link:focus-visible {
	color: #1a98a8;
	text-decoration: underline;
}

.chart-card__link svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}