/**
 * CLM Directory — front-end stylesheet.
 *
 * Design tokens only: every color, radius, and shadow value below reads
 * from --region-* and --brand-* custom properties (as defined by the
 * active theme/network: iur, utrd, pch, sg). No hard-coded hex/rgb colors
 * appear anywhere in this file — each declaration includes a neutral
 * fallback only for graceful degradation when a token is undefined.
 *
 * Token contract expected from the parent theme:
 *   --brand-primary, --brand-primary-contrast, --brand-secondary,
 *   --brand-accent, --brand-font-heading, --brand-font-body,
 *   --region-bg, --region-surface, --region-border, --region-text,
 *   --region-text-muted, --region-success, --region-warning,
 *   --region-radius-sm, --region-radius-md, --region-radius-lg,
 *   --region-shadow-sm, --region-shadow-md
 */

.clm-directory-archive,
.clm-directory-single,
.clm-directory-shortcode,
.clm-directory-grid-shortcode,
.clm-directory-master {
	--clm-radius-card: var( --region-radius-lg, 14px );
	--clm-radius-pill: var( --region-radius-sm, 999px );
	--clm-color-text: var( --region-text, #1a1a1a );
	--clm-color-muted: var( --region-text-muted, #6b7280 );
	--clm-color-surface: var( --region-surface, #ffffff );
	--clm-color-bg: var( --region-bg, #f7f7f8 );
	--clm-color-border: var( --region-border, #e5e7eb );
	--clm-color-primary: var( --brand-primary, #1d4ed8 );
	--clm-color-primary-contrast: var( --brand-primary-contrast, #ffffff );
	--clm-color-accent: var( --brand-accent, #f59e0b );
	--clm-color-success: var( --region-success, #16a34a );
	--clm-color-warning: var( --region-warning, #b45309 );
	--clm-shadow-card: var( --region-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06) );
	--clm-shadow-card-hover: var( --region-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.08) );
	--clm-font-heading: var( --brand-font-heading, inherit );
	--clm-font-body: var( --brand-font-body, inherit );

	color: var( --clm-color-text );
	font-family: var( --clm-font-body );
}

.clm-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Hero */
.clm-hero {
	background: var( --clm-color-bg );
	padding: 48px 0 32px;
}

.clm-breadcrumbs {
	font-size: 0.8125rem;
	color: var( --clm-color-muted );
	margin-bottom: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.clm-breadcrumbs a {
	color: var( --clm-color-muted );
	text-decoration: none;
}

.clm-breadcrumbs a:hover {
	color: var( --clm-color-primary );
	text-decoration: underline;
}

.clm-h1 {
	font-family: var( --clm-font-heading );
	font-size: clamp( 1.75rem, 3.4vw, 2.75rem );
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
	color: var( --clm-color-text );
}

.clm-hero-subtitle {
	font-size: 1.0625rem;
	color: var( --clm-color-muted );
	max-width: 62ch;
	margin: 0 0 20px;
	line-height: 1.5;
}

.clm-hero-controls {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.clm-sort-select {
	appearance: none;
	background: var( --clm-color-surface );
	border: 1px solid var( --clm-color-border );
	border-radius: var( --clm-radius-pill );
	padding: 8px 16px;
	font-size: 0.875rem;
	color: var( --clm-color-text );
	cursor: pointer;
}

/* YMYL / compliance banner */
.clm-ymyl-banner {
	background: color-mix( in srgb, var( --clm-color-warning ) 10%, var( --clm-color-surface ) );
	border-left: 4px solid var( --clm-color-warning );
	padding: 16px 20px;
	margin: 0 0 32px;
	border-radius: var( --region-radius-sm, 8px );
}

.clm-ymyl-text {
	margin: 8px 0 0;
	font-size: 0.9375rem;
	color: var( --clm-color-text );
	line-height: 1.55;
}

.clm-credential-list {
	list-style: disc;
	margin: 10px 0 0 20px;
	padding: 0;
	font-size: 0.875rem;
	color: var( --clm-color-muted );
}

/* Badges */
.clm-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	border-radius: var( --clm-radius-pill );
	background: var( --clm-color-bg );
	color: var( --clm-color-muted );
}

.clm-badge-verified {
	background: color-mix( in srgb, var( --clm-color-success ) 16%, transparent );
	color: var( --clm-color-success );
}

.clm-badge-licensed {
	background: color-mix( in srgb, var( --clm-color-primary ) 14%, transparent );
	color: var( --clm-color-primary );
}

.clm-badge-ymyl {
	background: color-mix( in srgb, var( --clm-color-warning ) 18%, transparent );
	color: var( --clm-color-warning );
}

/* Listing grid + cards */
.clm-listing-section {
	padding: 40px 0 24px;
}

.clm-h2 {
	font-family: var( --clm-font-heading );
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 24px;
}

.clm-h2-sub {
	font-family: var( --clm-font-heading );
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 16px;
}

.clm-listing-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap: 20px;
}

.clm-card {
	background: var( --clm-color-surface );
	border: 1px solid var( --clm-color-border );
	border-radius: var( --clm-radius-card );
	overflow: hidden;
	box-shadow: var( --clm-shadow-card );
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	display: flex;
	flex-direction: column;
}

.clm-card:hover {
	box-shadow: var( --clm-shadow-card-hover );
	transform: translateY( -2px );
}

.clm-card-media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var( --clm-color-bg );
}

.clm-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.clm-card-body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.clm-card-title {
	font-size: 1.0625rem;
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
}

.clm-card-title a {
	color: var( --clm-color-text );
	text-decoration: none;
}

.clm-card-title a:hover {
	color: var( --clm-color-primary );
}

.clm-card-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	font-weight: 600;
}

.clm-stars {
	color: var( --clm-color-accent );
}

.clm-review-count {
	color: var( --clm-color-muted );
	font-weight: 400;
}

.clm-card-meta,
.clm-card-excerpt {
	font-size: 0.875rem;
	color: var( --clm-color-muted );
	margin: 0;
	line-height: 1.5;
}

.clm-card-badges {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 8px;
}

.clm-empty-state {
	grid-column: 1 / -1;
	text-align: center;
	color: var( --clm-color-muted );
	padding: 48px 0;
}

.clm-load-more-wrap {
	text-align: center;
	margin-top: 32px;
}

.clm-load-more {
	background: var( --clm-color-primary );
	color: var( --clm-color-primary-contrast );
	border: none;
	border-radius: var( --clm-radius-pill );
	padding: 12px 28px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.clm-load-more:hover {
	opacity: 0.9;
}

.clm-load-more[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Related modules */
.clm-related-categories,
.clm-related-cities,
.clm-faq-section {
	padding: 32px 0;
	border-top: 1px solid var( --clm-color-border );
}

.clm-related-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.clm-related-list a {
	display: inline-block;
	padding: 8px 16px;
	background: var( --clm-color-bg );
	border-radius: var( --clm-radius-pill );
	color: var( --clm-color-text );
	text-decoration: none;
	font-size: 0.875rem;
}

.clm-related-list a:hover {
	background: color-mix( in srgb, var( --clm-color-primary ) 12%, var( --clm-color-bg ) );
	color: var( --clm-color-primary );
}

/* FAQ */
.clm-faq-item {
	border-bottom: 1px solid var( --clm-color-border );
	padding: 14px 0;
}

.clm-faq-question {
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.clm-faq-question::-webkit-details-marker {
	display: none;
}

.clm-faq-question::after {
	content: '+';
	float: right;
	color: var( --clm-color-muted );
}

.clm-faq-item[open] .clm-faq-question::after {
	content: '\2212';
}

.clm-faq-answer {
	margin: 10px 0 0;
	color: var( --clm-color-muted );
	line-height: 1.6;
}

/* Single listing */
.clm-directory-single {
	padding: 32px 0 64px;
}

.clm-listing-header {
	margin-bottom: 20px;
}

.clm-listing-media img {
	width: 100%;
	border-radius: var( --clm-radius-card );
	margin-bottom: 24px;
}

.clm-listing-content {
	line-height: 1.7;
	margin-bottom: 32px;
}

.clm-contact-list,
.clm-amenity-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 0.9375rem;
}

.clm-amenity-list {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
}

.clm-gallery-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
	gap: 12px;
}

.clm-gallery-grid img {
	width: 100%;
	border-radius: var( --region-radius-sm, 8px );
	display: block;
}

.clm-review {
	padding: 16px;
	background: var( --clm-color-bg );
	border-radius: var( --region-radius-sm, 8px );
	margin-bottom: 12px;
}

.clm-review-author {
	font-weight: 700;
	margin: 0 0 6px;
}

.clm-review-text {
	margin: 0;
	color: var( --clm-color-muted );
}

/* Tile grid shortcode */
.clm-tile-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	gap: 14px;
}

.clm-tile {
	display: block;
	padding: 20px;
	background: var( --clm-color-surface );
	border: 1px solid var( --clm-color-border );
	border-radius: var( --clm-radius-card );
	text-align: center;
	text-decoration: none;
	color: var( --clm-color-text );
	font-weight: 600;
	transition: box-shadow 0.2s ease;
}

.clm-tile:hover {
	box-shadow: var( --clm-shadow-card-hover );
	color: var( --clm-color-primary );
}

/* Master accordion */
.clm-directory-master {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.clm-accordion-item {
	border: 1px solid var( --clm-color-border );
	border-radius: var( --region-radius-sm, 10px );
	overflow: hidden;
}

.clm-accordion-trigger {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	background: var( --clm-color-surface );
	border: none;
	padding: 16px 20px;
	font-size: 1rem;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	color: var( --clm-color-text );
}

.clm-accordion-trigger:hover {
	background: var( --clm-color-bg );
}

.clm-accordion-panel {
	padding: 4px 20px 18px;
	background: var( --clm-color-surface );
}

.clm-accordion-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: 6px 16px;
}

.clm-accordion-list a {
	color: var( --clm-color-muted );
	text-decoration: none;
	font-size: 0.9375rem;
}

.clm-accordion-list a:hover {
	color: var( --clm-color-primary );
	text-decoration: underline;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

@media ( max-width: 640px ) {
	.clm-hero {
		padding: 32px 0 24px;
	}

	.clm-listing-grid {
		grid-template-columns: 1fr;
	}
}