/* =========================================================
   PFLEGEEDU — PFLEGE HORIZONT
   Premium Responsive Cards
========================================================= */


/* =========================================================
   ROOT
========================================================= */

#pflegeedu-horizont {

	--ph-blue: #0B3154;
	--ph-blue-dark: #082640;
	--ph-yellow: #D0AA35;
	--ph-white: #FFFFFF;

	--ph-radius: 18px;

	display: block;

	width: 100%;
	max-width: 100%;

	margin: 0;
	padding: 0;

	overflow: hidden;

	box-sizing: border-box;
}


/* =========================================================
   BOX SIZING
========================================================= */

#pflegeedu-horizont *,
#pflegeedu-horizont *::before,
#pflegeedu-horizont *::after {

	box-sizing: border-box;
}


/* =========================================================
   HEADER
========================================================= */

.pflege-horizont__header {

	display: flex;

	align-items: flex-end;

	justify-content: space-between;

	width: 100%;
	max-width: 100%;

	margin: 0 0 28px;

	padding: 0;
}


.pflege-horizont__heading {

	display: flex;

	flex-direction: column;

	min-width: 0;
}


.pflege-horizont__eyebrow {

	display: block;

	margin: 0 0 6px;
	padding: 0;

	color: var(--ph-yellow);

	font-size: 10px;

	font-weight: 800;

	line-height: 1.2;

	letter-spacing: .18em;

	text-transform: uppercase;
}


.pflege-horizont__title {

	display: block;

	width: auto;
	max-width: 100%;

	margin: 0;
	padding: 0;

	color: var(--ph-white);

	font-size: 40px;

	font-weight: 750;

	line-height: 1.08;

	letter-spacing: -.025em;
}


/* =========================================================
   POST COUNT
========================================================= */

.pflege-horizont__count {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 7px;

	padding: 9px 15px;

	border: 1px solid rgba(11, 49, 84, .08);

	border-radius: 999px;

	background:
		linear-gradient(
			135deg,
			rgba(11, 49, 84, .08),
			rgba(11, 49, 84, .035)
		);

	box-shadow:
		0 5px 18px rgba(8, 38, 64, .05);

	white-space: nowrap;

	flex-shrink: 0;
}


.pflege-horizont__count-number {

	color: var(--ph-yellow);

	font-size: 14px;

	font-weight: 800;

	line-height: 1;
}


.pflege-horizont__count-label {

	color: var(--ph-blue);

	font-size: 12px;

	font-weight: 600;

	line-height: 1;
}


/* =========================================================
   VIEWPORT
========================================================= */

.pflege-horizont__viewport {

	display: block;

	width: 100%;
	max-width: 100%;

	margin: 0;
	padding: 0;

	overflow: hidden;

	box-sizing: border-box;
}


/* =========================================================
   DESKTOP TRACK
========================================================= */

.pflege-horizont__track {

	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	align-items: stretch;

	gap: 20px;

	width: 100%;
	max-width: 100%;

	margin: 0;
	padding: 0;

	transform: none;

	box-sizing: border-box;
}


/* =========================================================
   SLIDE
========================================================= */

.pflege-horizont__slide {

	display: flex;

	flex-direction: column;

	width: 100%;
	min-width: 0;
	max-width: 100%;

	margin: 0;
	padding: 0;

	overflow: hidden;

	box-sizing: border-box;
}


/* =========================================================
   CARD
========================================================= */

.pflege-horizont__card {

	position: relative;

	display: flex;

	flex-direction: column;

	width: 100%;
	min-width: 0;
	max-width: 100%;

	height: 100%;

	margin: 0;
	padding: 0;

	overflow: hidden;

	border: 1px solid rgba(255, 255, 255, .055);

	border-radius: var(--ph-radius);

	background: var(--ph-blue);

	box-shadow:
		0 8px 24px rgba(8, 38, 64, .10),
		0 2px 6px rgba(8, 38, 64, .05);

	transition:
		transform .4s cubic-bezier(.22, 1, .36, 1),
		box-shadow .4s cubic-bezier(.22, 1, .36, 1),
		border-color .4s ease;

	box-sizing: border-box;
}


/* =========================================================
   CARD HOVER
========================================================= */

@media (hover: hover) {

	.pflege-horizont__card:hover {

		transform: translateY(-7px);

		border-color:
			rgba(208, 170, 53, .18);

		box-shadow:
			0 24px 50px rgba(8, 38, 64, .20),
			0 5px 14px rgba(8, 38, 64, .08);
	}

}


/* =========================================================
   IMAGE
========================================================= */

.pflege-horizont__image {

	position: relative;

	display: block;

	width: 100%;
	max-width: 100%;

	height: 220px;
	min-height: 220px;
	max-height: 220px;

	margin: 0;
	padding: 0;

	overflow: hidden;

	background: var(--ph-blue-dark);

	text-decoration: none;

	box-sizing: border-box;
}


/* =========================================================
   IMAGE
========================================================= */

.pflege-horizont__image img {

	position: absolute;

	top: 0;
	left: 0;

	display: block;

	width: 100%;
	max-width: 100%;

	height: 100%;
	min-height: 100%;
	max-height: 100%;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;

	outline: 0;

	object-fit: cover;

	/*
	 * Top-center:
	 * lica/bitni dio slike ostaje gore.
	 */
	object-position: center 20%;

	transform: scale(1.001);

	transition:
		transform .8s cubic-bezier(.22, 1, .36, 1),
		filter .5s ease;

	box-sizing: border-box;
}


/* =========================================================
   IMAGE HOVER
========================================================= */

@media (hover: hover) {

	.pflege-horizont__card:hover
	.pflege-horizont__image img {

		transform: scale(1.07);

		filter: saturate(1.04);
	}

}


/* =========================================================
   PREMIUM IMAGE GRADIENT
========================================================= */

.pflege-horizont__image-gradient {

	position: absolute;

	inset: 0;

	width: 100%;
	height: 100%;

	pointer-events: none;

	/*
	 * Namjerno vrlo mekan prijelaz.
	 *
	 * Slika se prvo lagano zatamnjuje,
	 * zatim postepeno prelazi u brand plavu.
	 */

	background:
		linear-gradient(
			to bottom,

			rgba(11, 49, 84, 0) 0%,

			rgba(11, 49, 84, 0) 26%,

			rgba(11, 49, 84, .035) 38%,

			rgba(11, 49, 84, .10) 48%,

			rgba(11, 49, 84, .22) 58%,

			rgba(11, 49, 84, .40) 68%,

			rgba(11, 49, 84, .60) 77%,

			rgba(11, 49, 84, .78) 86%,

			rgba(11, 49, 84, .93) 94%,

			#0B3154 100%
		);

	z-index: 2;
}


/* =========================================================
   SUBTLE TOP LIGHT
========================================================= */

.pflege-horizont__image::after {

	content: "";

	position: absolute;

	inset: 0;

	pointer-events: none;

	z-index: 3;

	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, .035),
			transparent 35%
		);

	opacity: .7;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.pflege-horizont__image-placeholder {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;
	height: 100%;

	color: rgba(255, 255, 255, .45);

	font-size: 20px;

	font-weight: 700;

	background:
		radial-gradient(
			circle at center,
			rgba(208, 170, 53, .10),
			transparent 65%
		),
		var(--ph-blue-dark);
}


/* =========================================================
   CONTENT
========================================================= */

.pflege-horizont__content {

	position: relative;

	z-index: 4;

	display: flex;

	flex-direction: column;

	flex: 1;

	width: 100%;
	min-width: 0;
	max-width: 100%;

	margin-top: -1px;

	padding: 17px;

	background: var(--ph-blue);

	box-sizing: border-box;
}


/* =========================================================
   META
========================================================= */

.pflege-horizont__meta {

	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 7px;

	width: 100%;
	max-width: 100%;

	margin: 0 0 9px;
	padding: 0;

	color: var(--ph-white);

	font-size: 11px;

	font-weight: 600;

	line-height: 1.3;
}


.pflege-horizont__category {

	color: var(--ph-white);

	font-size: inherit;

	font-weight: inherit;

	opacity: .96;
}


.pflege-horizont__separator {

	color: rgba(255, 255, 255, .35);
}


.pflege-horizont__date {

	color: rgba(255, 255, 255, .68);

	font-size: inherit;

	font-weight: 500;
}


/* =========================================================
   TITLE
========================================================= */

.pflege-horizont__post-title {

	display: block;

	width: 100%;
	max-width: 100%;

	margin: 0;
	padding: 0;

	font-size: 18px;

	font-weight: 700;

	line-height: 1.3;

	letter-spacing: -.01em;

	overflow-wrap: break-word;
}


.pflege-horizont__post-title a {

	display: inline;

	color: var(--ph-yellow);

	text-decoration: none;

	transition:
		color .25s ease,
		text-shadow .25s ease;
}


.pflege-horizont__post-title a:hover {

	color: var(--ph-white);

	text-shadow:
		0 0 18px rgba(208, 170, 53, .15);
}


/* =========================================================
   EXCERPT
========================================================= */

.pflege-horizont__excerpt {

	display: -webkit-box;

	width: 100%;
	max-width: 100%;

	margin: 9px 0 0;
	padding: 0;

	color: rgba(255, 255, 255, .68);

	font-size: 12px;

	font-weight: 400;

	line-height: 1.55;

	-webkit-line-clamp: 3;

	-webkit-box-orient: vertical;

	overflow: hidden;

	overflow-wrap: break-word;
}


/* =========================================================
   READ MORE
========================================================= */

.pflege-horizont__read-more {

	display: inline-flex;

	align-items: center;

	align-self: flex-start;

	gap: 7px;

	margin-top: auto;
	padding: 17px 0 0;

	color: var(--ph-yellow);

	font-size: 11px;

	font-weight: 700;

	line-height: 1.2;

	text-decoration: none;

	transition:
		gap .3s cubic-bezier(.22, 1, .36, 1),
		color .25s ease;
}


.pflege-horizont__read-more:hover {

	gap: 12px;

	color: var(--ph-white);
}


/* =========================================================
   DOTS
========================================================= */

.pflege-horizont__dots {

	display: none;

	margin: 0;
	padding: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 1100px) and (min-width: 768px) {

	.pflege-horizont__track {

		grid-template-columns:
			repeat(3, minmax(0, 1fr));

		gap: 18px;
	}


	.pflege-horizont__image {

		height: 200px;

		min-height: 200px;

		max-height: 200px;
	}


	.pflege-horizont__content {

		padding: 15px;
	}


	.pflege-horizont__post-title {

		font-size: 17px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 767px) {


	/* -----------------------------------------------------
	   HEADER
	----------------------------------------------------- */

	.pflege-horizont__header {

		align-items: flex-start;

		margin-bottom: 20px;

		padding: 0;
	}


	.pflege-horizont__title {

		font-size: 28px;

		line-height: 1.1;
	}


	.pflege-horizont__eyebrow {

		font-size: 10px;

		margin-bottom: 5px;
	}


	/* -----------------------------------------------------
	   COUNT
	----------------------------------------------------- */

	.pflege-horizont__count {

		display: none;
	}


	/* -----------------------------------------------------
	   VIEWPORT
	----------------------------------------------------- */

	.pflege-horizont__viewport {

		display: block;

		width: 100%;
		max-width: 100%;

		margin: 0;
		padding: 0;

		overflow: hidden;

		touch-action: pan-y;

		box-sizing: border-box;
	}


	/* -----------------------------------------------------
	   TRACK
	----------------------------------------------------- */

	.pflege-horizont__track {

		display: flex !important;

		flex-direction: row;

		flex-wrap: nowrap;

		align-items: stretch;

		gap: 0 !important;

		width: 100%;
		max-width: none;

		margin: 0;
		padding: 0;

		transform: translate3d(0, 0, 0);

		will-change: transform;

		box-sizing: border-box;
	}


	/* -----------------------------------------------------
	   SLIDE
	----------------------------------------------------- */

	.pflege-horizont__slide {

		display: flex;

		flex: 0 0 100% !important;

		width: 100% !important;

		min-width: 100% !important;

		max-width: 100% !important;

		margin: 0;

		padding: 0 12px;

		overflow: hidden;

		box-sizing: border-box;
	}


	/* -----------------------------------------------------
	   CARD
	----------------------------------------------------- */

	.pflege-horizont__card {

		display: flex;

		flex-direction: column;

		width: 100%;

		min-width: 0;

		max-width: 100%;

		height: 100%;

		margin: 0;

		padding: 0;

		border-radius: 16px;

		overflow: hidden;
	}


	/* -----------------------------------------------------
	   IMAGE
	----------------------------------------------------- */

	.pflege-horizont__image {

		position: relative;

		display: block;

		width: 100%;

		max-width: 100%;

		height: 215px;

		min-height: 215px;

		max-height: 215px;

		margin: 0;

		padding: 0;

		overflow: hidden;

		box-sizing: border-box;
	}


	.pflege-horizont__image img {

		position: absolute;

		top: 0;
		left: 0;

		display: block;

		width: 100% !important;

		max-width: 100% !important;

		height: 100% !important;

		min-width: 0 !important;

		min-height: 100% !important;

		max-height: 100% !important;

		margin: 0 !important;

		padding: 0 !important;

		border: 0 !important;

		object-fit: cover;

		object-position: center 20%;

		transform: none;
	}


	/* -----------------------------------------------------
	   MOBILE GRADIENT
	----------------------------------------------------- */

	.pflege-horizont__image-gradient {

		background:
			linear-gradient(
				to bottom,

				rgba(11, 49, 84, 0) 0%,

				rgba(11, 49, 84, 0) 22%,

				rgba(11, 49, 84, .04) 36%,

				rgba(11, 49, 84, .12) 48%,

				rgba(11, 49, 84, .28) 61%,

				rgba(11, 49, 84, .50) 73%,

				rgba(11, 49, 84, .72) 84%,

				rgba(11, 49, 84, .91) 94%,

				#0B3154 100%
			);
	}


	/* -----------------------------------------------------
	   CONTENT
	----------------------------------------------------- */

	.pflege-horizont__content {

		width: 100%;

		min-width: 0;

		max-width: 100%;

		padding: 16px;
	}


	/* -----------------------------------------------------
	   META
	----------------------------------------------------- */

	.pflege-horizont__meta {

		margin-bottom: 9px;

		font-size: 11px;

		line-height: 1.35;
	}


	/* -----------------------------------------------------
	   TITLE
	----------------------------------------------------- */

	.pflege-horizont__post-title {

		width: 100%;

		font-size: 19px;

		line-height: 1.3;
	}


	/* -----------------------------------------------------
	   EXCERPT
	----------------------------------------------------- */

	.pflege-horizont__excerpt {

		font-size: 12px;

		line-height: 1.5;

		-webkit-line-clamp: 3;
	}


	/* -----------------------------------------------------
	   READ MORE
	----------------------------------------------------- */

	.pflege-horizont__read-more {

		padding-top: 16px;

		font-size: 11px;
	}


	/* -----------------------------------------------------
	   DOTS
	----------------------------------------------------- */

	.pflege-horizont__dots {

		display: flex;

		align-items: center;

		justify-content: center;

		gap: 7px;

		width: 100%;

		margin: 18px 0 0;

		padding: 0;

		box-sizing: border-box;
	}


	.pflege-horizont__dot {

		display: block;

		flex: 0 0 auto;

		width: 7px;

		height: 7px;

		min-width: 7px;

		max-width: 7px;

		padding: 0;

		margin: 0;

		border: 0;

		border-radius: 50%;

		background: rgba(11, 49, 84, .20);

		cursor: pointer;

		transition:
			width .25s ease,
			min-width .25s ease,
			max-width .25s ease,
			background .25s ease;
	}


	.pflege-horizont__dot.is-active {

		width: 22px;

		min-width: 22px;

		max-width: 22px;

		border-radius: 999px;

		background: var(--ph-yellow);

		box-shadow:
			0 2px 8px rgba(208, 170, 53, .25);
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media screen and (max-width: 480px) {

	.pflege-horizont__title {

		font-size: 25px;
	}


	.pflege-horizont__image {

		height: 205px;

		min-height: 205px;

		max-height: 205px;
	}


	.pflege-horizont__content {

		padding: 15px;
	}


	.pflege-horizont__post-title {

		font-size: 18px;
	}

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media screen and (max-width: 360px) {

	.pflege-horizont__slide {

		padding-left: 8px;

		padding-right: 8px;
	}


	.pflege-horizont__image {

		height: 195px;

		min-height: 195px;

		max-height: 195px;
	}


	.pflege-horizont__content {

		padding: 14px;
	}

}