/**
 * CWS-Suite blog card — Jasmin Maziva, "Kartica članka".
 *
 * Everything card-internal is scoped under .jmblog, the class blog-card.php puts
 * on the wrapper. Every descendant rule is written as ".jmblog .jmblog-x" rather
 * than ".jmblog-x" on purpose: Elementor's kit ships ".elementor-kit-N a" and
 * ".elementor-kit-N button" at specificity (0,1,1), which beats any single-class
 * rule. Two classes clears it without a single !important.
 *
 * Radius is 0 throughout — the squared brand look is the point of the design,
 * not an oversight. Same as the loop card and the filters panel this ships next
 * to.
 *
 * Manrope is what the design uses. Loading a web font is the theme's call, so
 * the @import is commented out and the card inherits the theme's font until you
 * turn it on. Enqueuing the font properly in functions.php beats an @import.
 */

/* @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap'); */

.jmblog,
.jmblog-grid {
	--jmblog-ink:          #16333f;
	--jmblog-body:         #5c727b;
	--jmblog-meta:         #8fa3ac;

	--jmblog-accent:       #0b7da9;

	--jmblog-green:        #7cb342;
	--jmblog-green-hover:  #6aa034;
	--jmblog-green-lbl:    #6f9e34;

	--jmblog-surface:      #ffffff;
	--jmblog-media-bg:     #dde5e9;
	--jmblog-line:         #eef2f4;

	--jmblog-lift:         0 24px 46px -26px rgba(18, 48, 60, .45);
}

/* ---------------------------------------------------------------- grid ---- */
/*
 * The host wrapper. If the plugin emits its own grid element you cannot add a
 * class to, add that element's selector here rather than restyling the card.
 */
.jmblog-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	align-items: stretch;
}

/* ---------------------------------------------------------------- card ---- */
.jmblog {
	position: relative;               /* anchor for the title's stretched link */
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	background: var(--jmblog-surface);
	border-radius: 0;
	color: var(--jmblog-ink);
	transition: transform .18s ease, box-shadow .18s ease;
}

/*
 * :focus-within matches the mouse lift for keyboard users — the card's two real
 * tab stops are the title and the CTA.
 */
.jmblog:hover,
.jmblog:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--jmblog-lift);
}

@media (prefers-reduced-motion: reduce) {
	.jmblog {
		transition: none;
	}

	.jmblog:hover,
	.jmblog:focus-within {
		transform: none;
	}
}

/* --------------------------------------------------------------- media ---- */
/*
 * A fixed band, not an aspect ratio: the design pins it at 216px so a row of
 * cards keeps its meta lines level regardless of the source images. z-index
 * lifts it over the title's stretched link so the media stays independently
 * clickable — both go to the same post, so the overlap is harmless either way.
 */
.jmblog .jmblog-media {
	position: relative;
	z-index: 2;
	display: block;
	height: 216px;
	flex: 0 0 auto;
	background: var(--jmblog-media-bg);
	overflow: hidden;
}

.jmblog .jmblog-media-link {
	display: block;
	width: 100%;
	height: 100%;
}

.jmblog .jmblog-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/*
 * A post with no featured image keeps the band, filled with --jmblog-media-bg,
 * so a mixed row still has its meta lines level. Uncomment to collapse it
 * instead — cards in that row will then stagger.
 */
/*
.jmblog--no-media .jmblog-media {
	display: none;
}
*/

/* The chip is flush left, so its left padding is the larger one. */
.jmblog .jmblog-chip {
	position: absolute;
	left: 0;
	top: 18px;
	z-index: 3;
	background: var(--jmblog-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	padding: 8px 14px 8px 18px;
}

/* ---------------------------------------------------------------- body ---- */
/*
 * flex: 1 is what bottom-aligns the CTA across a row — the body absorbs the
 * difference between a two-line and a three-line title.
 */
.jmblog .jmblog-body {
	display: block;
	flex: 1 1 auto;
	padding: 26px 26px 0;
}

.jmblog .jmblog-meta {
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--jmblog-meta);
	margin-bottom: 12px;
}

.jmblog .jmblog-sep {
	margin: 0 .35em;
}

.jmblog .jmblog-title {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.28;
	letter-spacing: -.5px;
	color: var(--jmblog-ink);
	text-wrap: pretty;
}

.jmblog .jmblog-title a {
	color: inherit;
	text-decoration: none;
}

/*
 * The whole-card click target, from the heading link so the card keeps its
 * heading semantics. It sits under .jmblog-media and .jmblog-cta-wrap, which
 * both carry z-index: 2. Trade-off: text inside the body cannot be selected.
 */
.jmblog .jmblog-title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.jmblog .jmblog-excerpt {
	margin: 12px 0 0;
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--jmblog-body);
	text-wrap: pretty;
}

/* ----------------------------------------------------------------- cta ---- */
.jmblog .jmblog-cta-wrap {
	position: relative;
	z-index: 2;
	display: block;
}

.jmblog .jmblog-cta {
	text-decoration: none;
}

.jmblog .jmblog-arrow {
	flex: 0 0 auto;
}

/* Gumb — the default. */
.jmblog--cta-button .jmblog-cta-wrap {
	padding: 22px 26px 26px;
}

.jmblog--cta-button .jmblog-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--jmblog-green);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	padding: 13px 18px;
	border-radius: 0;
	transition: background .16s ease;
}

.jmblog--cta-button:hover .jmblog-cta,
.jmblog--cta-button .jmblog-cta:hover,
.jmblog--cta-button .jmblog-cta:focus-visible {
	background: var(--jmblog-green-hover);
	color: #fff;
}

/* Link — the rule-above variant. */
.jmblog--cta-link .jmblog-cta-wrap {
	margin: 22px 26px 0;
	padding: 0;
}

.jmblog--cta-link .jmblog-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 0 22px;
	border-top: 1px solid var(--jmblog-line);
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: .2px;
	color: var(--jmblog-accent);
}

.jmblog--cta-link .jmblog-arrow {
	stroke: var(--jmblog-green);
}

.jmblog--cta-link:hover .jmblog-cta,
.jmblog--cta-link .jmblog-cta:hover,
.jmblog--cta-link .jmblog-cta:focus-visible {
	color: var(--jmblog-ink);
}

/* -------------------------------------------------------------- section ---- */
/*
 * The eyebrow and heading above the grid. Part of the design, but chrome rather
 * than card — drop these two rules if your section header comes from Elementor.
 */
.jmblog-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--jmblog-green-lbl, #6f9e34);
	margin-bottom: 14px;
}

.jmblog-eyebrow::before {
	content: '';
	width: 22px;
	height: 2px;
	background: currentColor;
}

.jmblog-heading {
	margin: 0 0 34px;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.8px;
	color: var(--jmblog-ink, #16333f);
}

/* ------------------------------------------------------------ responsive ---- */
@media (max-width: 1024px) {
	.jmblog-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 22px;
	}
}

@media (max-width: 640px) {
	.jmblog-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.jmblog .jmblog-body {
		padding: 22px 22px 0;
	}

	.jmblog .jmblog-title {
		font-size: 18.5px;
	}

	.jmblog--cta-button .jmblog-cta-wrap {
		padding: 18px 22px 22px;
	}

	.jmblog--cta-link .jmblog-cta-wrap {
		margin: 18px 22px 0;
	}
}