/*
 * ==========================================================================
 * KROGIAS NEA BLOG + SMART SEARCH
 * Δήμος Ξάνθης
 * ==========================================================================
 */


/*
 * ==========================================================================
 * 1. SMART SEARCH MODULE - "ΟΛΑ ΤΑ ΝΕΑ"
 * ==========================================================================
 */

.krogias-nea-search {
	width: 100%;
	max-width: 650px;
	margin: 8px 0 14px 0;
	padding: 0;
}

.krogias-nea-search .mod-finder {
	width: 100%;
	margin: 0;
	padding: 0;
}

.krogias-nea-search .mod-finder__search {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch !important;
	gap: 0;

	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}


/*
 * Awesomplete wrapper
 */

.krogias-nea-search .mod-finder__search > .awesomplete {
	display: block !important;

	width: 100% !important;
	min-width: 0;
	height: 44px !important;

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


/*
 * Input
 */

.krogias-nea-search .mod-finder__search .form-control,
.krogias-nea-search .awesomplete > input {
	display: block !important;

	box-sizing: border-box !important;

	width: 100% !important;
	height: 44px !important;
	min-height: 44px !important;
	max-height: 44px !important;

	margin: 0 !important;
	padding: 0 14px !important;

	font-size: 15px;
	font-weight: 400;
	line-height: 42px !important;

	color: #333;
	background: #fff;

	border: 1px solid #bfc7cd !important;
	border-right: 0 !important;
	border-radius: 5px 0 0 5px !important;

	box-shadow: none !important;
	outline: 0;
}

.krogias-nea-search .mod-finder__search .form-control::placeholder,
.krogias-nea-search .awesomplete > input::placeholder {
	color: #8a8f94;
	opacity: 1;
}

.krogias-nea-search .mod-finder__search .form-control:focus,
.krogias-nea-search .awesomplete > input:focus {
	border-color: #17628a !important;

	box-shadow:
		inset 1px 0 0 #17628a,
		inset 0 1px 0 #17628a,
		inset 0 -1px 0 #17628a !important;

	outline: 0 !important;
}


/*
 * Button
 */

.krogias-nea-search .mod-finder__search .btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	box-sizing: border-box !important;

	height: 44px !important;
	min-height: 44px !important;
	max-height: 44px !important;

	margin: 0 !important;
	padding: 0 17px !important;

	font-size: 14px;
	font-weight: 600;
	line-height: 1 !important;

	white-space: nowrap;

	color: #fff !important;
	background: #2b6181 !important;

	border: 1px solid #2b6181 !important;
	border-radius: 0 5px 5px 0 !important;

	box-shadow: none !important;
}

.krogias-nea-search .mod-finder__search .btn:hover,
.krogias-nea-search .mod-finder__search .btn:focus {
	background: #1f4f6c !important;
	border-color: #1f4f6c !important;
}

.krogias-nea-search .mod-finder__search .btn .icon-search {
	margin-right: 5px;
}


/*
 * Suggestions
 */

.krogias-nea-search .awesomplete {
	width: 100%;
}

.krogias-nea-search .awesomplete > ul {
	z-index: 1000;

	margin-top: 3px;

	border: 1px solid #ccd2d6;
	border-radius: 4px;

	background: #fff;

	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}


/*
 * ==========================================================================
 * 2. GLOBAL COM_FINDER SEARCH FORM
 * ==========================================================================
 */

.krogias-finder .com-finder__form {
	width: 100%;
	margin: 0 0 24px 0;
	padding: 0;
}

.krogias-finder .krogias-finder-form {
	width: 100%;
	max-width: 650px;

	margin: 0;
	padding: 0;
}

.krogias-finder .krogias-finder-search {
	margin: 0;
	padding: 0;

	border: 0;
}


/*
 * Search row
 */

.krogias-finder .krogias-finder-search-row {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch !important;
	gap: 0;

	width: 100%;

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


/*
 * Awesomplete wrapper
 */

.krogias-finder .krogias-finder-search-row > .awesomplete {
	display: block !important;

	width: 100% !important;
	min-width: 0;
	height: 44px !important;

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


/*
 * Input
 */

.krogias-finder .krogias-finder-search-row .form-control,
.krogias-finder .krogias-finder-search-row .awesomplete > input {
	display: block !important;

	box-sizing: border-box !important;

	width: 100% !important;
	height: 44px !important;
	min-height: 44px !important;
	max-height: 44px !important;

	margin: 0 !important;
	padding: 0 14px !important;

	font-size: 15px;
	font-weight: 400;
	line-height: 42px !important;

	color: #333;
	background: #fff;

	border: 1px solid #bfc7cd !important;
	border-right: 0 !important;
	border-radius: 5px 0 0 5px !important;

	box-shadow: none !important;
	outline: 0;
}

.krogias-finder .krogias-finder-search-row .form-control::placeholder,
.krogias-finder .krogias-finder-search-row .awesomplete > input::placeholder {
	color: #8a8f94;
	opacity: 1;
}

.krogias-finder .krogias-finder-search-row .form-control:focus,
.krogias-finder .krogias-finder-search-row .awesomplete > input:focus {
	border-color: #17628a !important;

	box-shadow:
		inset 1px 0 0 #17628a,
		inset 0 1px 0 #17628a,
		inset 0 -1px 0 #17628a !important;

	outline: 0 !important;
}


/*
 * Search button
 */

.krogias-finder .krogias-finder-search-button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	box-sizing: border-box !important;

	height: 44px !important;
	min-height: 44px !important;
	max-height: 44px !important;

	margin: 0 !important;
	padding: 0 17px !important;

	font-size: 14px;
	font-weight: 600;
	line-height: 1 !important;

	white-space: nowrap;

	color: #fff !important;
	background: #2b6181 !important;

	border: 1px solid #2b6181 !important;
	border-radius: 0 5px 5px 0 !important;

	box-shadow: none !important;
}

.krogias-finder .krogias-finder-search-button:hover,
.krogias-finder .krogias-finder-search-button:focus {
	color: #fff !important;
	background: #1f4f6c !important;
	border-color: #1f4f6c !important;
}

.krogias-finder .krogias-finder-search-button .icon-search {
	margin-right: 5px;
}


/*
 * Advanced search button
 */

.krogias-finder .krogias-finder-advanced-button {
	height: 44px !important;

	margin-left: 8px !important;

	border-radius: 5px !important;
}


/*
 * Finder suggestions
 */

.krogias-finder .awesomplete {
	width: 100%;
}

.krogias-finder .awesomplete > ul {
	z-index: 1000;

	margin-top: 3px;

	border: 1px solid #ccd2d6;
	border-radius: 4px;

	background: #fff;

	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}


/*
 * ==========================================================================
 * 3. SMART SEARCH RESULTS LIST
 * ==========================================================================
 */

.krogias-finder .com-finder__results {
	margin: 0;
	padding: 0;
}

.krogias-finder #search-result-list,
.krogias-finder .com-finder__results-list {
	display: block !important;

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

	list-style: none !important;
}

.krogias-finder #search-result-list > li,
.krogias-finder .com-finder__results-list > li {
	display: block;

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

	list-style: none !important;
}

.krogias-finder #search-result-list > li::marker,
.krogias-finder .com-finder__results-list > li::marker {
	content: "";
}


/*
 * Individual Finder result
 */

.krogias-finder-result {
	margin: 0 !important;
	padding: 0 !important;

	border-bottom: 1px solid #e5e5e5;
}

.krogias-finder-result:last-child {
	border-bottom: 0;
}


/*
 * Hide standard Finder elements if they survive
 * inside a generic result layout.
 */

.krogias-finder .result__taxonomy,
.krogias-finder .result__description,
.krogias-finder .result__date,
.krogias-finder .result__url {
	margin: 0;
}


/*
 * ==========================================================================
 * 4. "ΟΛΑ ΤΑ ΝΕΑ" LIST
 * ==========================================================================
 */

.krogias-nea-items {
	margin: 0;
	padding: 0;
}

.krogias-nea-item {
	margin: 0;
	padding: 0;

	border-bottom: 1px solid #e5e5e5;
}

.krogias-nea-item:last-child {
	border-bottom: 0;
}


/*
 * ==========================================================================
 * 5. COMMON ARTICLE / RESULT LAYOUT
 * ==========================================================================
 */

.krogias-nea-article {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 24px;
	align-items: center;

	width: 100%;

	margin: 0;
	padding: 20px 0;
}


/*
 * No image:
 * retain empty left image column.
 */

.krogias-nea-article--no-image .krogias-nea-content {
	grid-column: 2;
}


/*
 * Image
 */

.krogias-nea-image-wrap {
	width: 220px;

	margin: 0;
	padding: 0;
}

.krogias-nea-image-link {
	display: block;

	width: 100%;
	aspect-ratio: 16 / 9;

	overflow: hidden;

	border-radius: 4px;

	background: #f3f3f3;
	text-decoration: none;
}

.krogias-nea-image {
	display: block;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;

	object-fit: cover;

	transition: transform 0.2s ease;
}

.krogias-nea-image-link:hover .krogias-nea-image {
	transform: scale(1.03);
}


/*
 * Content
 */

.krogias-nea-content {
	min-width: 0;

	margin: 0;
	padding: 0;
}


/*
 * Title
 */

.krogias-nea-title {
	margin: 0 0 8px 0 !important;
	padding: 0 !important;

	font-size: 21px !important;
	font-weight: 600;
	line-height: 1.3;
}

.krogias-nea-title a {
	color: #17628a;
	text-decoration: none;
}

.krogias-nea-title a:hover,
.krogias-nea-title a:focus {
	color: #104967;
	text-decoration: underline;
}


/*
 * Metadata
 */

.krogias-nea-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;

	margin: 0;
	padding: 0;

	font-size: 14px;
	line-height: 1.4;
}

.krogias-nea-category {
	font-weight: 500;

	color: #17628a;
	text-decoration: none;
}

a.krogias-nea-category:hover,
a.krogias-nea-category:focus {
	color: #104967;
	text-decoration: underline;
}

.krogias-nea-meta-separator {
	color: #888;
}

.krogias-nea-date {
	color: #666;
}


/*
 * ==========================================================================
 * 6. PAGINATION
 * ==========================================================================
 */

.krogias-finder .pagination,
.krogias-nea-blog .pagination {
	margin-top: 24px;
}

.krogias-finder .pagination ul,
.krogias-nea-blog .pagination ul {
	margin-bottom: 0;
}


/*
 * ==========================================================================
 * 7. ACCESSIBILITY
 * ==========================================================================
 */

.krogias-nea-image-link:focus-visible,
.krogias-nea-title a:focus-visible,
.krogias-nea-category:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}


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

@media (max-width: 991.98px) {

	.krogias-nea-article {
		grid-template-columns: 180px minmax(0, 1fr);
		gap: 18px;

		padding: 18px 0;
	}

	.krogias-nea-article--no-image .krogias-nea-content {
		grid-column: 2;
	}

	.krogias-nea-image-wrap {
		width: 180px;
	}

	.krogias-nea-title {
		font-size: 19px !important;
	}

}


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

@media (max-width: 767.98px) {

	.krogias-nea-search,
	.krogias-finder .krogias-finder-form {
		max-width: 100%;
	}

	.krogias-nea-search {
		margin: 6px 0 12px 0;
	}

	.krogias-finder .com-finder__form {
		margin-bottom: 18px;
	}

	.krogias-nea-article {
		grid-template-columns: 130px minmax(0, 1fr);
		gap: 14px;
		align-items: start;

		padding: 15px 0;
	}

	.krogias-nea-article--no-image .krogias-nea-content {
		grid-column: 2;
	}

	.krogias-nea-image-wrap {
		width: 130px;
	}

	.krogias-nea-title {
		margin-bottom: 6px !important;

		font-size: 17px !important;
		line-height: 1.3;
	}

	.krogias-nea-meta {
		font-size: 13px;
	}

}


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

@media (max-width: 480px) {

	.krogias-nea-search .mod-finder__search > .awesomplete,
	.krogias-finder .krogias-finder-search-row > .awesomplete {
		height: 42px !important;
	}

	.krogias-nea-search .mod-finder__search .form-control,
	.krogias-nea-search .awesomplete > input,
	.krogias-finder .krogias-finder-search-row .form-control,
	.krogias-finder .krogias-finder-search-row .awesomplete > input {
		height: 42px !important;
		min-height: 42px !important;
		max-height: 42px !important;

		padding: 0 10px !important;

		font-size: 14px;
		line-height: 40px !important;
	}

	.krogias-nea-search .mod-finder__search .btn,
	.krogias-finder .krogias-finder-search-button {
		height: 42px !important;
		min-height: 42px !important;
		max-height: 42px !important;

		padding: 0 12px !important;

		font-size: 13px;
	}

	.krogias-nea-article {
		grid-template-columns: 105px minmax(0, 1fr);
		gap: 12px;

		padding: 13px 0;
	}

	.krogias-nea-article--no-image .krogias-nea-content {
		grid-column: 2;
	}

	.krogias-nea-image-wrap {
		width: 105px;
	}

	.krogias-nea-title {
		font-size: 15px !important;
		line-height: 1.3;
	}

	.krogias-nea-meta {
		gap: 4px;

		font-size: 12px;
	}

}