/* Blog: popis članaka (PB Blog popis) i članak (PB Blog članak). Teal je samo za klik: gumb i linkovi. */

.pbw-blog,
.pbw-art {
	box-sizing: border-box;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding-inline: 24px;
}

/* Widget je u flex kontejneru, pa mora zauzeti cijelu širinu */
.elementor-widget-pb_blog_list,
.elementor-widget-pb_blog_post {
	width: 100%;
}

/* Glavni gumb (teal = klik) */
body.elementor-kit-6 :is(.pbw-blog__cta, .pbw-art__cta) a.pb-btn-primary:not(#pb-x):not(#pb-y):not(#pb-z) {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--on-accent);
}

body.elementor-kit-6 :is(.pbw-blog__cta, .pbw-art__cta) a.pb-btn-primary:not(#pb-x):not(#pb-y):not(#pb-z):is(:hover, :focus-visible) {
	border-color: var(--accent-hover);
	background: var(--accent-hover);
	color: var(--on-accent);
}

/* ---------- Zajedničko: datum i vrijeme čitanja ---------- */
.pbw-bmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	color: var(--text-secondary);
	font-size: 13px;
	line-height: 1.45;
}

.pbw-bmeta > * + *::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: .9em;
	margin: 0 10px;
	background: var(--border);
	vertical-align: -.1em;
}

/* ---------- Kartica članka ---------- */
.pbw-bcard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.pbw-bcard__img {
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: var(--pbw-r-lg);
	background: var(--bg-alt);
}

.pbw-bcard__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.pbw-bcard__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
}

.pbw-bcard .pbw-bcard__title:not(#pb-x):not(#pb-y) {
	margin: 0;
	color: var(--text);
	font-size: var(--t-lead);
	font-weight: 600;
	line-height: 1.24;
	letter-spacing: -.01em;
}

.pbw-bcard .pbw-bcard__title a {
	color: inherit;
	text-decoration: none;
	transition: color .15s;
}

/* Cijela kartica je link */
.pbw-bcard .pbw-bcard__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pbw-bcard__text {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--text-secondary);
	font-size: 15px;
	line-height: 1.47;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.pbw-bcard__more {
	margin-top: 8px;
	color: var(--accent-hover);
	font-size: 15px;
	font-weight: 500;
	transition: color .15s;
}

.pbw-bcard a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (hover: hover) {
	.pbw-bcard:hover .pbw-bcard__img img {
		transform: scale(1.03);
	}

	.pbw-bcard:hover .pbw-bcard__title:not(#pb-x):not(#pb-y) a,
	.pbw-bcard:hover .pbw-bcard__more {
		color: var(--accent-hover);
	}
}

/* Velika kartica: najnoviji članak */
.pbw-bcard--lead {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
	overflow: hidden;
	border-radius: var(--pbw-r-lg);
	background: var(--bg-alt);
}

.pbw-bcard--lead .pbw-bcard__img {
	aspect-ratio: auto;
	min-height: 380px;
	border-radius: 0;
}

.pbw-bcard--lead .pbw-bcard__body {
	justify-content: center;
	gap: 10px;
	padding: clamp(24px, 4vw, 48px);
}

.pbw-bcard--lead .pbw-bcard__title:not(#pb-x):not(#pb-y) {
	font-size: var(--t-h3);
	line-height: 1.12;
	letter-spacing: -.02em;
}

/* ---------- Popis ---------- */
.pbw-blog {
	padding-top: 56px;
	padding-bottom: 88px;
}

.pbw-blog__head {
	margin-bottom: 40px;
}

.pbw-blog .pbw-blog__title:not(#pb-x):not(#pb-y) {
	margin: 0;
	font-size: var(--t-h1);
}

.pbw-blog__lead {
	max-width: 609px;
	margin: 12px 0 0;
	color: var(--text-secondary);
	font-size: var(--t-hero-lead);
	line-height: 1.4;
}

.pbw-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 24px;
}

.pbw-bcard--lead + .pbw-blog__grid {
	margin-top: 48px;
}

/* Listanje */
.pbw-blog__pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 56px;
}

.pbw-blog__pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 41px;
	height: 41px;
	padding: 0 10px;
	box-sizing: border-box;
	border-radius: 980px;
	color: var(--text-secondary);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color .15s, color .15s;
}

.pbw-blog__pages a.page-numbers:hover {
	background: var(--fill);
	color: var(--text);
}

.pbw-blog__pages .page-numbers.current {
	background: var(--fill);
	color: var(--text);
}

.pbw-blog__pages svg {
	width: 22px;
	height: 22px;
}

/* Poziv na kviz */
.pbw-blog__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	margin-top: 64px;
	padding: clamp(24px, 4vw, 40px);
	border-radius: var(--pbw-r-lg);
	background: var(--bg-alt);
}

.pbw-blog .pbw-blog__cta-title:not(#pb-x):not(#pb-y) {
	margin: 0;
	font-size: var(--t-h3);
	line-height: 1.12;
}

.pbw-blog__cta p {
	max-width: 560px;
	margin: 8px 0 0;
	color: var(--text-secondary);
	font-size: var(--t-body);
	line-height: 1.47;
}

.pbw-blog__cta .pb-btn {
	flex: none;
}

/* ---------- Članak ---------- */
.pbw-art {
	padding-top: 20px;
}

.pbw-art__crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 6px;
	margin-bottom: 28px;
	color: var(--text-secondary);
	font-size: .86rem;
	line-height: 1.45;
}

.pbw-art__crumbs a {
	color: var(--text-secondary);
	text-decoration: none;
	transition: color .15s;
}

.pbw-art__crumbs a:hover {
	color: var(--text);
}

.pbw-art__layout {
	display: grid;
	grid-template-columns: minmax(0, 720px) 300px;
	justify-content: space-between;
	gap: 48px;
	align-items: start;
}

.pbw-art .pbw-art__title:not(#pb-x):not(#pb-y) {
	margin: 0;
	font-size: var(--t-h2);
	line-height: 1.08;
}

.pbw-art__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 24px;
}

.pbw-art__img {
	overflow: hidden;
	aspect-ratio: 16 / 9;
	margin-bottom: 32px;
	border-radius: var(--pbw-r-lg);
	background: var(--bg-alt);
}

.pbw-art__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Tekst članka */
.pbw-art__body {
	color: var(--text);
	font-size: var(--t-body);
	line-height: 1.6;
}

.pbw-art__body p {
	margin: 0 0 18px;
}

.pbw-art__body :is(ul, ol) {
	margin: 0 0 18px;
	padding-left: 1.25em;
}

.pbw-art__body li {
	margin-bottom: 8px;
}

.pbw-art__body li::marker {
	color: var(--accent-hover);
}

.pbw-art__body strong {
	font-weight: 600;
}

.pbw-art .pbw-art__body a:not(#pb-x):not(#pb-y) {
	color: var(--accent-hover);
	font-weight: 500;
	text-decoration: none;
	transition: color .15s;
}

.pbw-art .pbw-art__body a:not(#pb-x):not(#pb-y):hover {
	color: var(--accent-active);
}

.pbw-art .pbw-art__body h2:not(#pb-x):not(#pb-y) {
	margin: 40px 0 12px;
	font-size: var(--t-h4);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.015em;
	scroll-margin-top: 110px;
}

/* Reset teme briše margine elementa figure, pa treba jači selektor */
.pbw-art .pbw-art__body figure:not(#pb-x):not(#pb-y) {
	margin: 28px 0;
}

.pbw-art__body figure img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--pbw-r-lg);
}

.pbw-art__body .pbw-art__video {
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--pbw-r-lg);
	background: var(--bg-alt);
}

.pbw-art__video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.pbw-art__gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 28px 0;
}

.pbw-art__gallery img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--pbw-r);
}

/* Bočni stupac */
.pbw-art__side {
	position: sticky;
	top: 110px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pbw-art__toc {
	padding: 4px 0 4px 16px;
	border-left: 1px solid var(--border);
}

.pbw-art__toc b {
	display: block;
	margin-bottom: 10px;
	color: var(--text);
	font-size: var(--t-small);
	font-weight: 600;
}

.pbw-art__toc ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pbw-art .pbw-art__toc a:not(#pb-x):not(#pb-y) {
	color: var(--text-secondary);
	font-size: var(--t-small);
	line-height: 1.35;
	text-decoration: none;
	transition: color .15s;
}

.pbw-art .pbw-art__toc a:not(#pb-x):not(#pb-y):hover {
	color: var(--accent-hover);
}

.pbw-art__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 20px;
	border-radius: var(--pbw-r-lg);
	background: var(--bg-alt);
}

.pbw-art__cta b {
	color: var(--text);
	font-size: var(--t-lead);
	font-weight: 600;
	line-height: 1.2;
}

.pbw-art__cta p {
	margin: 0 0 8px;
	color: var(--text-secondary);
	font-size: var(--t-small);
	line-height: 1.45;
}

.pbw-art a:is(.pbw-art__shop, .pbw-art__all):not(#pb-x):not(#pb-y) {
	color: var(--accent-hover);
	font-size: var(--t-small);
	font-weight: 500;
	text-decoration: none;
	transition: color .15s;
}

.pbw-art__shop {
	margin-top: 4px;
}

.pbw-art a:is(.pbw-art__shop, .pbw-art__all):not(#pb-x):not(#pb-y):hover {
	color: var(--accent-active);
}

/* Povezani članci: siva traka preko cijele širine, box-shadow i clip-path bojaju rubove bez vodoravnog skrolanja */
.pbw-art__related {
	margin-top: 72px;
	padding: 56px 0;
	background: var(--bg-alt);
	box-shadow: 0 0 0 100vmax var(--bg-alt);
	clip-path: inset(0 -100vmax);
}

.pbw-art__related-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
}

.pbw-art .pbw-art__related-head h2:not(#pb-x):not(#pb-y) {
	margin: 0;
	font-size: var(--t-h3);
	line-height: 1.12;
}

.pbw-art__related .pbw-bcard__img {
	background: var(--fill);
}

/* ---------- Tablet i mobitel ---------- */
@media (max-width: 1024px) {
	.pbw-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pbw-art__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.pbw-art__side {
		position: static;
	}

	/* Sadržaj članka ima smisla samo prije teksta, a ovdje bi završio ispod njega */
	.pbw-art__toc {
		display: none;
	}
}

@media (max-width: 860px) {
	.pbw-bcard--lead {
		grid-template-columns: minmax(0, 1fr);
	}

	.pbw-bcard--lead .pbw-bcard__img {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.pbw-blog__cta {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 600px) {
	.pbw-blog,
	.pbw-art {
		padding-inline: 16px;
	}

	.pbw-blog {
		padding-top: 36px;
		padding-bottom: 56px;
	}

	.pbw-blog__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.pbw-art__gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pbw-art__related {
		margin-top: 48px;
		padding: 40px 0;
	}
}