/**
 * Journal cards. Staging unit: sync this file alone.
 */

:root {
	--hbn-journal-card-title-size: 24px; /* kit H4 desktop */
	--hbn-journal-card-title-size-mobile: 20px; /* kit H4 mobile */
	--hbn-journal-card-title-weight: 600; /* kit H4 */
	--hbn-journal-card-title-lh: 1.3; /* kit H4 */
}

@media (max-width: 767px) {
	:root {
		--hbn-journal-card-title-size: var(--hbn-journal-card-title-size-mobile);
	}
}

/* -------------------------------------------------------------------------
 * Journal card (shortcode). Sizes from Design/Home.pdf and Home mobile.pdf.
 * ---------------------------------------------------------------------- */

.hbn-card--journal {
	background-color: var(--hbn-color-white);
	border-radius: var(--hbn-radius-card);
	box-shadow: var(--hbn-shadow-card);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	overflow: visible;
	width: 100%;
}

.hbn-card--journal .hbn-card__media {
	aspect-ratio: var(--hbn-journal-card-photo-ratio);
	border-radius: var(--hbn-radius-card) var(--hbn-radius-card) 0 0;
	flex-shrink: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.hbn-card--journal .hbn-card__img,
.hbn-card--journal .hbn-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.hbn-card--journal .hbn-card__media-link {
	display: block;
	height: 100%;
}

.hbn-card--journal .hbn-card__body {
	align-items: flex-start;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--hbn-journal-card-title-excerpt-gap);
	min-width: 0;
	padding: var(--hbn-journal-card-pad);
}

.hbn-card--journal .hbn-card__title {
	color: var(--hbn-color-navy);
	font-family: var(--hbn-font-body);
	font-size: var(--hbn-journal-card-title-size);
	font-weight: var(--hbn-journal-card-title-weight);
	line-height: var(--hbn-journal-card-title-lh);
	margin: 0;
	max-width: 100%;
	width: 100%;
}

.hbn-card--journal .hbn-card__title a {
	color: inherit;
	text-decoration: none;
}

.hbn-card--journal .hbn-card__excerpt {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: var(--hbn-color-text);
	display: -webkit-box;
	font-family: var(--hbn-font-body);
	font-size: var(--hbn-journal-card-excerpt-size);
	font-weight: 400;
	line-height: 1.5; /* оценка: mock body glyph bbox 16px */
	margin: 0;
	max-width: 100%;
	overflow: hidden;
	width: 100%;
}