/**
 * Search Results Pattern Styles
 * Theme: ollie-cfp
 * Version: 1.0.0
 * 
 * Grid layout with 1rem vertical gutter, equal-height cards,
 * and conditional empty field hiding.
 */

/* ============================================
   GRID LAYOUT - Search Results
   Single column, 100% width, 1rem vertical gutter
   ============================================ */

.search-results-grid {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 1rem !important;
	row-gap: 1rem !important;
	width: 100%;
}

/* ============================================
   CARD STYLES - Equal Height
   Flexbox column ensures content distribution
   ============================================ */

.search-result-card {
	display: flex;
	flex-direction: column;
	height: auto;
	width: 100%;
	padding: var(--wp--preset--spacing--medium);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-light);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
	text-align: left;
	align-items: flex-start;
}

.search-result-card:hover {
	box-shadow: var(--wp--preset--shadow--small-light);
	border-color: var(--wp--preset--color--primary);
}

/* ============================================
   FIELD STYLES
   ============================================ */

/* Category */
.search-result-category {
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--primary);
	margin-bottom: var(--wp--preset--spacing--small);
}

.search-result-category a {
	text-decoration: none;
	color: inherit;
}

.search-result-category a:hover {
	text-decoration: underline;
}

/* Title */
.search-result-card .wp-block-post-title {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--small);
}

.search-result-card .wp-block-post-title a {
	color: var(--wp--preset--color--main);
	text-decoration: none;
}

.search-result-card .wp-block-post-title a:hover {
	text-decoration: underline;
	color: var(--wp--preset--color--primary);
}

/* Excerpt */
.search-result-card .wp-block-post-excerpt {
	flex-grow: 1;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: var(--wp--preset--spacing--small);
}

.search-result-card .wp-block-post-excerpt__excerpt {
	margin-bottom: 0;
}

/* Meta container (date + read more) */
.search-result-meta {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--small);
	border-top: 1px solid var(--wp--preset--color--border-light);
}

/* Date */
.search-result-date {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--secondary);
}

/* Read More Link */
.search-result-read-more {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.search-result-read-more:hover {
	text-decoration: underline;
}

/* ============================================
   CONDITIONAL DISPLAY - Empty States
   Hide fields when they have no content
   ============================================ */

/* Hide empty category terms */
.search-result-category:empty {
	display: none !important;
}

/* Hide empty post terms (alternative selector) */
.search-result-card .wp-block-post-terms:empty {
	display: none !important;
}

/* Hide excerpt if empty */
.search-result-card .wp-block-post-excerpt:empty {
	display: none !important;
}

/* Hide excerpt paragraph if empty */
.search-result-card .wp-block-post-excerpt__excerpt:empty {
	display: none !important;
}

/* ============================================
   PAGINATION
   ============================================ */

.search-results-pagination {
	margin-top: var(--wp--preset--spacing--large);
}

.search-results-pagination .wp-block-query-pagination {
	justify-content: center;
	gap: var(--wp--preset--spacing--small);
}

/* ============================================
   NO RESULTS MESSAGE
   ============================================ */

.search-no-results {
	text-align: center;
	padding: var(--wp--preset--spacing--x-large) var(--wp--preset--spacing--medium);
	color: var(--wp--preset--color--secondary);
	background-color: var(--wp--preset--color--tertiary);
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.search-result-card:focus-within {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.search-result-card a:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}