/* ==========================================================================
   CCI Posts Explorer
   AJAX-filtered post grid with a filter bar.
   ========================================================================== */

.cci-posts-explorer {
	--cci-explorer-columns: 3;
	--cci-explorer-gap: 24px;
	--cci-explorer-accent: #c79a3a;
	--cci-explorer-radius: 12px;
	--cci-explorer-card-bg: #f7f8fa;
	--cci-explorer-muted: #6b7280;
	--cci-explorer-navy: #1e2a4a;
	--cci-explorer-field-bg: #f2f4f2;
	--cci-explorer-field-border: #d3d3d3;
	position: relative;
}

/* ---- Section heading (multi-type archive, e.g. author) ------------------ */

.cci-posts-explorer__section-heading {
	margin: 0 0 24px;
	font-size: 24px;
	font-weight: 700;
	color: var(--cci-explorer-navy);
}

/* Space between stacked sections (an author archive renders one per type). */
.cci-posts-explorer + .cci-posts-explorer {
	margin-top: 48px;
}

/* ---- Filter bar ---------------------------------------------------------- */

.cci-posts-explorer__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 52px;
}

.cci-posts-explorer__field {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 160px;
	min-width: 0;
}

.cci-posts-explorer__field--search {
	flex: 2 1 220px;
}

.cci-posts-explorer__field-label {
	font-size: 16px;
	font-weight: 700;
	color: var(--cci-explorer-navy);
}

.cci-posts-explorer__select,
.cci-posts-explorer__search {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 12px;
	border: 0.5px solid var(--cci-explorer-field-border);
	border-radius: 8px;
	background: var(--cci-explorer-field-bg);
	font-size: 16px;
	color: #23345a;
	line-height: 1.3;
}

/* Dropdown option list. */
.cci-posts-explorer__select option {
	padding: 12px;
	background: var(--cci-explorer-field-bg);
	color: var(--cci-explorer-navy);
}

.cci-posts-explorer__select option:checked {
	background: #e6e9e6;
	font-weight: 600;
}

.cci-posts-explorer__select::placeholder,
.cci-posts-explorer__search::placeholder {
	color: #9aa1ad;
}

.cci-posts-explorer__select:focus,
.cci-posts-explorer__search:focus {
	outline: none;
	border-color: var(--cci-explorer-accent);
	box-shadow: 0 0 0 3px rgba(199, 154, 58, 0.18);
}

/* Native select styled as a pill with a custom chevron on the right. */
.cci-posts-explorer__select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 40px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231e2a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

/* Magnifier icon inside the search field, plus the elevated card look. */
.cci-posts-explorer .cci-posts-explorer__search {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-left: 42px;
	border: 0.5px solid #d3d3d3;
	border-radius: 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231e2a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 16px center;
	box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);
}

/* Strip WebKit's native search decorations (inner shadow + clear button). */
.cci-posts-explorer .cci-posts-explorer__search::-webkit-search-decoration,
.cci-posts-explorer .cci-posts-explorer__search::-webkit-search-cancel-button,
.cci-posts-explorer .cci-posts-explorer__search::-webkit-search-results-button,
.cci-posts-explorer .cci-posts-explorer__search::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.cci-posts-explorer .cci-posts-explorer__reset {
	box-sizing: border-box;
	flex: 0 0 auto;
	align-self: flex-end;
	height: 48px;
	padding: 0 18px;
	border: 0.5px solid var(--cci-explorer-field-border);
	border-radius: 8px;
	background: var(--cci-explorer-field-bg);
	font-size: 14px;
	font-weight: 600;
	color: #23345a;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.cci-posts-explorer .cci-posts-explorer__reset:hover {
	background: #e6e9e6;
	border-color: #c4c4c4;
	color: #000;
	box-shadow: 0 4px 10px rgba(16, 24, 40, 0.12), 0 2px 4px rgba(16, 24, 40, 0.08);
}

/* Keep the theme's blue button focus/active background off the reset button. */
.cci-posts-explorer .cci-posts-explorer__reset:focus,
.cci-posts-explorer .cci-posts-explorer__reset:active {
	background: var(--cci-explorer-field-bg);
	border-color: var(--cci-explorer-field-border);
	color: #23345a;
}

/* ---- Results / loading state -------------------------------------------- */

.cci-posts-explorer__results {
	transition: opacity 0.2s ease;
}

.cci-posts-explorer.is-loading .cci-posts-explorer__results {
	opacity: 0.45;
	pointer-events: none;
}

/* ---- Grid ---------------------------------------------------------------- */

.cci-posts-explorer__grid {
	display: grid;
	grid-template-columns: repeat(var(--cci-explorer-columns, 3), minmax(0, 1fr));
	grid-auto-flow: row dense;
	gap: 20px;
}

.cci-posts-explorer__card {
	display: flex;
	flex-direction: column;
	background: var(--cci-explorer-card-bg);
	border-radius: var(--cci-explorer-radius);
	overflow: hidden;
}

.cci-posts-explorer__card-image {
	display: block;
	position: relative;
	overflow: hidden;
}

.cci-posts-explorer__card-image img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.4s ease;
}

.cci-posts-explorer__card:hover .cci-posts-explorer__card-image img {
	transform: scale(1.04);
}

.cci-posts-explorer__card-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 40px 32px 32px;
	flex: 1 1 auto;
}

.cci-posts-explorer__card-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
}

.cci-posts-explorer__card-date {
	color: var(--cci-explorer-accent);
	font-weight: 500;
}

.cci-posts-explorer__card-cat {
	color: var(--cci-explorer-accent);
	font-weight: 600;
	text-decoration: none;
}

/* Keep the category colour steady on hover (theme's a:hover would change it). */
.cci-posts-explorer .cci-posts-explorer__card-cat:hover,
.cci-posts-explorer .cci-posts-explorer__card-cat:focus {
	color: var(--cci-explorer-accent);
}

.cci-posts-explorer__card-author {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	color: #23345a;
	text-decoration: none;
}

/* Override theme's `.elementor img { border-radius: 0 }` for the round avatar. */
.cci-posts-explorer .cci-posts-explorer__avatar {
	border-radius: 50%;
}

.cci-posts-explorer__card-title {
	margin: 0;
	font-size: 20px;
	line-height: 1.35;
	font-weight: 700;
	color: #23345a;
}

.cci-posts-explorer__card-title a {
	color: inherit;
	text-decoration: none;
}

.cci-posts-explorer__card-title a:hover {
	color: var(--cci-explorer-accent);
}

.cci-posts-explorer__card-excerpt {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: #23345a;
}

.cci-posts-explorer__card-more {
	margin-top: auto;
	font-size: 16px;
	font-weight: 700;
	color: #23345a;
	text-decoration: none;
}

.cci-posts-explorer__card-more::before {
	content: "\21B3";
	margin-right: 6px;
	display: inline-block;
}

/* Shared link hover: a 2px underline that grows in width (left to right),
   sitting ~5px below the text. Used by the category, author name and
   "Read More" so those card links react the same way. */
.cci-posts-explorer__card-cat,
.cci-posts-explorer__author-name,
.cci-posts-explorer__card-more-text {
	background-image: linear-gradient( currentColor, currentColor );
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
	padding-bottom: 5px;
	transition: background-size 0.25s ease;
}

.cci-posts-explorer__card-cat:hover,
.cci-posts-explorer__card-author:hover .cci-posts-explorer__author-name,
.cci-posts-explorer__card-author:focus-visible .cci-posts-explorer__author-name,
.cci-posts-explorer__card-more:hover .cci-posts-explorer__card-more-text,
.cci-posts-explorer__card-more:focus-visible .cci-posts-explorer__card-more-text {
	background-size: 100% 2px;
}

/* ---- Empty + pagination -------------------------------------------------- */

.cci-posts-explorer__empty {
	padding: 40px 0;
	text-align: center;
	color: var(--cci-explorer-muted);
	font-size: 15px;
}

.cci-posts-explorer__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: calc(var(--cci-explorer-gap) + 8px);
}

.cci-posts-explorer .cci-posts-explorer__nav {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1.5px solid #f2f4f2;
	border-radius: 12px;
	background: #ffffff;
	font-size: 18px;
	line-height: 1;
	color: #002c56;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.cci-posts-explorer__nav-icon {
	display: block;
	width: 20px;
	height: 20px;
	color: #002c56;
}

.cci-posts-explorer__nav[disabled] .cci-posts-explorer__nav-icon {
	color: #c0cbd5;
}

.cci-posts-explorer .cci-posts-explorer__nav:hover:not([disabled]) {
	background: #f2f4f2;
	box-shadow: 0 4px 10px rgba(16, 24, 40, 0.12), 0 2px 4px rgba(16, 24, 40, 0.08);
}

/* Neutralise the theme's blue button focus/active background. */
.cci-posts-explorer .cci-posts-explorer__nav:focus,
.cci-posts-explorer .cci-posts-explorer__nav:active:not([disabled]) {
	background: #ffffff;
	color: #002c56;
}

.cci-posts-explorer .cci-posts-explorer__nav:active:not([disabled]) {
	background: #f2f4f2;
}

/* Inactive (disabled) buttons get no hover/focus reaction at all. */
.cci-posts-explorer .cci-posts-explorer__nav[disabled],
.cci-posts-explorer .cci-posts-explorer__nav[disabled]:hover,
.cci-posts-explorer .cci-posts-explorer__nav[disabled]:focus,
.cci-posts-explorer .cci-posts-explorer__nav[disabled]:active {
	background: #ffffff;
	border: 1.5px solid #f2f4f2;
	border-radius: 12px;
	color: #c0cbd5;
	cursor: default;
	box-shadow: none;
	transform: none;
}

.cci-posts-explorer__page-status {
	font-size: 18px;
	font-weight: 700;
	color: #23345a;
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
	.cci-posts-explorer__filters {
		margin-bottom: 40px;
	}
}

@media (max-width: 767px) {
	.cci-posts-explorer__filters {
		gap: 12px;
		margin-bottom: 32px;
	}
}