/**
 * =============================================================
 * @package		Joblo Default Module Layout
 * -------------------------------------------------------------
 * @copyright	Copyright (C) 2009-2024 RAXO Group
 * @link		https://www.raxo.org
 * @license		RAXO Commercial License
 * 				This file is forbidden for redistribution
 * =============================================================
 */

.joblo-default {

	/* ----- RESET & DEFAULT Styles ----- */

	& {
		box-sizing: border-box;
	}

	& *,
		& ::before,
		& ::after {
		box-sizing: inherit;
	}

	& article,
		& h3,
		& h4,
		& img,
		& a {
		margin: 0; padding: 0;
		background: transparent none;
		border: 0 none;
	}

	& a {
		outline: 0;
		text-decoration: none;
		transition: all .25s ease-out;
	}

	& a:hover {
		color: #333333 !important;
			text-decoration: underline;
	}

	/* ----- LAYOUT Settings ----- */

	& {
		--top-font-size: 15px;
		--nor-font-size: 13px;
	}

	/* ----- Module BLOCK ----- */

	& {
		margin: 20px 0 24px;
	}

	& .joblo-header {
		margin-bottom: 20px;
	}

	/* --- Block NAME --- */

	& .joblo-block-name {
		padding: 0 8px 16px;
		font-size: 24px;
		font-weight: inherit;
		line-height: 22px;
		text-transform: none;
		border-bottom: 3px solid #dddddd;
	}

	/* --- Block NAME Icon --- */

	& .joblo-block-name-icon {
		display: inline-block;
		vertical-align: text-bottom;
		width: var(--joblo-block-name-icon-width, auto);
		height: var(--joblo-block-name-icon-height, auto);
		max-width: 100%;
		margin-inline-end: 8px;
	}

	&.has-block-name-style .joblo-block-name {
		font-size: var(--joblo-block-name-size, inherit) !important;
		font-weight: var(--joblo-block-name-font-weight, inherit) !important;
		line-height: var(--joblo-block-name-line-height, inherit) !important;
		color: var(--joblo-block-name-color, inherit) !important;
		border-bottom-color: var(--joblo-block-name-border-color, currentColor) !important;
	}

	/* --- Block INTRO --- */

	& .joblo-block-intro {
		padding: 20px 4px 6px;
		font-size: inherit;
		line-height: 1.5;
	}

	/* --- Block BUTTON --- */

	& .joblo-block-button {
		margin-top: 4px; padding: 4px;
		text-align: right !important;
		border-top: 1px solid #dddddd;
	}

	/* ----- Module ITEMS ----- */

	& .joblo-top {
		font-size: var(--top-font-size);
	}

	& .joblo-normal {
		font-size: var(--nor-font-size);
	}

	& article {
		padding: 10px 0;
		overflow: hidden;
		border-bottom: 1px dotted #8b97a0;
	}

	& .joblo-wrap {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		margin: -8px -12px;
	}

	& .joblo-wrap > div {
		margin: 8px 12px;
	}

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

	& .joblo-image {
		flex: 0 1 auto;
		align-self: flex-start;
	}

	& .joblo-image img {
		max-width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	/* TOP item image respects the configured width/height from Advanced Images -
	   flex-shrink:0 keeps it at its full configured size, so when there isn't
	   enough room left beside it, the content naturally wraps below instead of
	   being squeezed into a cramped column. */
	& .joblo-top .joblo-image {
		flex: 0 0 var(--joblo-image-top-width, 320px);
		max-width: 100%;
	}

	& .joblo-top .joblo-image img {
		width: 100%; height: 100%;
		max-width: 100%;
		aspect-ratio: var(--joblo-image-top-ratio, 16 / 9);
		-o-object-fit: cover;
			object-fit: cover;
	}

	& .joblo-top .joblo-content {
		flex: 1 1 240px;
		min-width: min(240px, 100%);
	}

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

	& .joblo-content {
		flex: 1 1 144px;
	}

	& .joblo-title {
		margin-bottom: 4px;
		font-size: 1.29em; line-height: 1.16;
		font-weight: bold;
	}

	& .joblo-text {
		margin-top: -5px !important;
		line-height: 1.3;
		color: #373737;
	}

	& .joblo-readmore {
		float: inline-end;
		margin-inline-end: 4px;
	}

	& .joblo-readmore a::before {
		content: '';
		display: inline-block;
		vertical-align: middle;
		width: 0; height: 0;
		margin-inline-end: 6px;
		border-style: solid;
		border-width: 6px 0 6px 9px;
		border-color: transparent transparent transparent currentColor;
	}

	&:dir(rtl) .joblo-readmore a::before {
		border-width: 6px 9px 6px 0;
		border-color: transparent currentColor transparent transparent;
	}

	& .joblo-readmore a::after {
		content: '...';
	}

	&.has-read-more-style .joblo-readmore a {
		font-size: var(--joblo-read-more-size, inherit) !important;
		color: var(--joblo-read-more-color, inherit) !important;
	}

	/* ----- INFO Fields ----- */

	& .joblo-info {
		margin-top: -2px; padding-bottom: 4px;
		font-size: .93em; line-height: 1.38;
		font-style: italic;
		color: #b4b4b4;
	}

	& .joblo-info > span {
		font-style: normal;
			color: #808080;
	}

	& .joblo-info > span:not(:last-child) {
		padding-right: 8px;
	}

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

	& .joblo-meta {
		margin-bottom: 2px;
		line-height: 14px;
		font-size: 12px;
		color: #525252;
	}

	& .joblo-date,
		& .joblo-hits,
		& .joblo-comments {
		display: inline-block;
			padding: 0 10px 0 15px;
			background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAASwCAYAAADCLNu9AAAFNElEQVR4Xu2YAWhVVRzGz3nuas7lpakj3sttiZNYNhhsMJ5jm3ZHI7gUUniBgMYGVQk9CzC0dcNACQohgpzUyApJKCD2CrKodJkzJJjxylWQKAXLosAZe5vz9v3hCvetXe+Bl/CI7wcf57D/93Y2wP/kp/5z9OmGhlmcFnIC+RjZgwg+sgXpRuZSb69bZ31TW7sDgwIyhPSGeRY5JzPpKNd1A6RTxSAz6aQWfHH42imJzlD8N6Ojo4/ImViU7yblxYpL5JBh9IzOND79K87jyOtqcQaR7qrw8gayLab4CzKgbgyEEB2zAGwcXyHNyFXk3Sq1OHeFpb7w/mJKxSMbQ/blOJKqwjOHw3/8KeQ7JKsWIRWWdobPNMtTcUXJePiMMCZJWnsH8QEtkbuK8uTmzcHB1tYclr4z1NmZlzN6l5l0In8VrsucukEQQrBS6pGjSBEJFqQYzuqrwv943IZ4yCVVys3IXuSQCj/lXudF4YqslKXIn+EXX5Yzeg9nSxK/46dNTR62ybxG5xMMMsiu7ZOTalWxOB3p1YQ/45Ss5oHwFzqC0tJFds4xZFAtBM/YiI8EygQUP1JmEEIIIYToMz37zLzZSHXBOm1NxXozmaFTgd6M3owQejN6s9y9DwUjvbkclr7j9w3k5YzeZSYdjUGZ3owQQm92bMvz3kTPvlJvtuNyq1p9dXmyN0PJ3JthadmIj5h5MxRNvRkhhBBCiJ5068y82bC6wzql6mK9mczQqUBvRm9GCL0ZvdlTblfwlrsxh6Xv7HE78nJG7zKTjsagTG9GCKE3O+mu9c66daXebKeaUGvUTLI3Q8ncm2Fp2YiPmHkzFE29GSGEEEKIvjimzLzZS0c6rONn6mO9mczQqTxvRm9GCL0ZvVmqueGierhvog1L39m08UJGzuhdZtLRGJTpzQgh9Gbf56u938ZUqTfbO/iZurX2crI3Q8ncm2Fp2YiPmHkzFE29GSGEEEKIdoc3mHkzNb7WUuftWG8mM3Qqz5vRmxFCb0Zvptz+uwN3d3sOS99xH+/Kyxm9y0w6GoMyvRkhhN7M3X+nh21S6s3U5p+VWjGb7M1QMvdmeMZGfMTMm6Fo6s0IIYQQQnRmdMTMmzV9eMJaffZcrDeTGTqV583ozQihN6M3S13K1KnzXa1tWPrOHxvqM3JG7zKTjsagTG9GCKE3u/3wqx62Sak3K2zrVUW7JtmboWTuzfCMjfiImTdD0dSbEUIIIYTo6gc/N/NmrbPvWen5b2O9mczQqTxvRm9GCL0ZvZnadN8Twfqtr+Sw9J22+5/Jyxm9y0w6GoMyvRkhhN6s9oEPPGyTUm92clm/+lvfkuzNUDL3ZnjGRnzEzJuhaOrNCCGEEEJ0+4GfzLxZ7anXrOUXxmO9mczQqUBvRm9GCL0Zvdk9/U8HXbvfyWHpO85jL+TljN5lJh2NQZnejBBCb9ax/2uv/cCPpd7s955d6sqKNcneDCVzb4alZSM+YubNUDT1ZoQQQgghenv2fTNvNrXyqDW97IdYbyYzdCrPm9GbEUJvRm+WumkurVZNZ9uw9J2a4vqMnNG7zKSjMSjTmxFC6M0e7TzkYZuUerP0X1uVNb8y2ZuhZO7N8IyN+IiZN0PR2JsRQgghhKTT6VkkQL5EhuQe5jnki/A+q7q7u4OWlpYcBsPhhxxJeH9TZtKpOG9Gb0YIvRm9WXSHO9lsNi9n9H5th2sMyvRmhBB6s8bGRg/bpNSbFQoFNTMzk+zNUDL3ZnjGRnzEzJuh+H/1ZoQQQgj5B783rlwJ6bRoAAAAAElFTkSuQmCC");
			/*background-image: url("icons.png");*/
			background-repeat: no-repeat;
			background-size: 10px 1200px;
	}

	& .joblo-meta span:last-child {
		padding-right: 0;
	}

	/* --- Item RATING --- */

	& .joblo-rating {
		white-space: nowrap;
	}

	& .joblo-rating span {
		display: inline-block;
			width: 10px; height: 10px;
			background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAG4CAYAAAB8R3Z3AAABm0lEQVR42u2VYUQDYRzGrwzqe9GKoSmgKqVEtM/rOJICIlgIoajvUQAIFQIEibG+FxEUGKRMDC2qz33uGXdcS3vh1Z/8fjzudu/jOTf4ZYIWyuVylNymn2daSn26nMU/B5XX5KyzZXBL6Yqz/W1RK6u6Lih5ZTR1tqkUlJpy2Xz1njIQ/KRDGYsz03x1UXkOfqd5VuyMoqiqm5U2xWWlmnzMeJviRPqrw9TBR5wgfZb8jw/KtHKiHMTPdpRSfAYA8E/ItD64z+XcnlHJg2e0YuWZyXodzwAAmHimOr/v9oxKHjyjFSvPjFzv4hkAABPPPIa9bs+o5MEzWrHyzHDlDc8AAJh45v0mcHtGJQ+e0YqVZ3rmAjwDAGDimfB4yO0ZlTx4RitWnqmUnvAMAICJZ/orp27PqOTBM1qx8sxLuIZnAABMPNO9dOX2jEoePKMVK898nhfwDACAiWemjmpuz6jkwTNasfLM3XoezwAAmHhmY/bC7RmVPHhGK1aeObxdxDMAACaeyWazbs+o5MEzWrHyTKPRwDMAAH/BF4g4Fgjsmfc3AAAAAElFTkSuQmCC") no-repeat 0 0;
			/*background: url("rating.png") no-repeat 0 0;*/
			background-size: 10px 440px;
	}

	& .joblo-star {
		margin: 0 1px;
	}

	& .joblo-star span {
		display: block;
	}

	/* ----- RESPONSIVE Breakpoints ----- */

	@media (max-width: 480px) {
		& .joblo-top .joblo-image {
			width: 100%
		}

		& .joblo-top .joblo-image img {
			width: 100%
		}
	}

	/* ----- HIGH RESOLUTION Media Queries ----- */

	@media
		only screen and (-webkit-min-device-pixel-ratio: 1.3),
		only screen and (min-device-pixel-ratio: 1.3),
		only screen and (min-resolution: 120dpi) {
		& .joblo-date,
			& .joblo-hits,
			& .joblo-comments {
			background-image: url(icons@3x.png);
		}

		& .joblo-rating span {
			background-image: url(rating@3x.png);
		}
	}

	/* ----- Thumbnail Animations ----- */

	/* --- Hover: Zoom --- */
	&.thumb-hover-zoom .joblo-image {
		overflow: hidden;
		display: block;
	}
	&.thumb-hover-zoom .joblo-image img {
		transition: transform .35s ease;
	}
	&.thumb-hover-zoom .joblo-image img:hover {
		transform: scale(0.92);
	}

	/* --- Hover: Fade --- */
	&.thumb-hover-fade .joblo-image img {
		transition: opacity .3s ease;
	}
	&.thumb-hover-fade .joblo-image img:hover {
		opacity: .75;
	}

	/* --- Hover: Grayscale to Color --- */
	&.thumb-hover-grayscale .joblo-image img {
		filter: grayscale(100%);
		transition: filter .35s ease;
	}
	&.thumb-hover-grayscale .joblo-image img:hover {
		filter: grayscale(0%);
	}

	/* --- Hover: Darken --- */
	&.thumb-hover-darken .joblo-image img {
		transition: filter .3s ease;
	}
	&.thumb-hover-darken .joblo-image img:hover {
		filter: brightness(.75);
	}

	/* --- Entrance: Fade In --- */
	&.thumb-enter-fade .joblo-image {
		opacity: 0;
		transition: opacity .6s ease;
	}
	&.thumb-enter-fade .joblo-image.joblo-inview {
		opacity: 1;
	}

	/* --- Entrance: Slide Up --- */
	&.thumb-enter-slide .joblo-image {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity .6s ease, transform .6s ease;
	}
	&.thumb-enter-slide .joblo-image.joblo-inview {
		opacity: 1;
		transform: translateY(0);
	}

	/* --- Entrance: Zoom In --- */
	&.thumb-enter-zoom .joblo-image {
		opacity: 0;
		transform: scale(.92);
		transition: opacity .6s ease, transform .6s ease;
	}
	&.thumb-enter-zoom .joblo-image.joblo-inview {
		opacity: 1;
		transform: scale(1);
	}

	/* Respect the visitor's motion preference: disable transitions and reveal
	   entrance-animated thumbnails immediately instead of leaving them hidden. */
	@media (prefers-reduced-motion: reduce) {
		&[class*="thumb-hover-"] .joblo-image img,
			&[class*="thumb-enter-"] .joblo-image {
			transition: none !important;
		}
		&[class*="thumb-enter-"] .joblo-image {
			opacity: 1 !important;
			transform: none !important;
		}
	}


	/* ----- Style Overrides (thumbnail border, title & text typography) ----- */

	/* --- Thumbnail Border --- */
	&.has-thumb-border .joblo-image img {
		border-width: var(--joblo-thumb-border-size, 0) !important;
		border-style: solid !important;
		border-color: var(--joblo-thumb-border-color, transparent) !important;
		border-radius: var(--joblo-thumb-radius, 0) !important;
		padding: var(--joblo-thumb-border-padding, 0) !important;
		background-clip: padding-box !important;
	}

	/* --- Title Typography --- */
	&.has-title-style .joblo-title,
		&.has-title-style .joblo-title > a {
		font-size: var(--joblo-title-size, inherit) !important;
		color: var(--joblo-title-color, inherit) !important;
		font-weight: var(--joblo-title-weight, inherit) !important;
		line-height: var(--joblo-title-line-height, inherit) !important;
	}

	/* --- Text Typography --- */
	&.has-text-style .joblo-text {
		font-size: var(--joblo-text-size, inherit) !important;
		color: var(--joblo-text-color, inherit) !important;
		font-weight: var(--joblo-text-weight, inherit) !important;
		line-height: var(--joblo-text-line-height, inherit) !important;
	}

}