/**
 * Maker Directory
 *
 * Horizontal card: photograph of the work on the left, detail on the right.
 * Composition follows the certifiedeo.com/companies directory; the skin is
 * ours - the 25px card radius, navy headings and the hover lift already used
 * by the member directory.
 *
 * Every selector is namespaced to .calgary-chamber-maker-directory and the
 * properties Elementor commonly resets carry !important, per CLAUDE.md.
 *
 * @package Calgary_Chamber
 */

/* -----------------------------------------------------------------------------
 * Container
 * -------------------------------------------------------------------------- */

/*
 * The block sizes itself, never its parent. Elementor full-width sections, the
 * theme's text column and a narrow Gutenberg column all hand us a different
 * width, so we cap at the layout width and centre with auto margins - no
 * breaking out past the parent, which centred on the parent's box and bled
 * edge to edge inside a full-width section.
 *
 * `container-type` makes this the query container for everything below, so the
 * grid and the cards respond to the space the block actually has rather than to
 * the viewport.
 */
.calgary-chamber-maker-directory {
	container-type: inline-size;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 1360px !important;
	margin-inline: auto !important;
	font-family: inherit !important;
	color: var(--chamber-text) !important;
}

.calgary-chamber-maker-directory *,
.calgary-chamber-maker-directory *::before,
.calgary-chamber-maker-directory *::after {
	box-sizing: border-box !important;
}

.calgary-chamber-maker-directory .sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

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

.calgary-chamber-maker-directory .maker-directory-filters {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 1rem !important;
	align-items: flex-start !important;
	margin-bottom: 1rem !important;
}

.calgary-chamber-maker-directory .maker-directory-filters__search {
	flex: 1 1 16rem !important;
	min-width: 0 !important;
}

.calgary-chamber-maker-directory .maker-search-box {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
}

.calgary-chamber-maker-directory .maker-search-box__icon {
	position: absolute !important;
	left: 1rem !important;
	color: var(--chamber-gray-dark) !important;
	pointer-events: none !important;
}

.calgary-chamber-maker-directory .maker-search-box__input {
	width: 100% !important;
	padding: 0.75rem 1rem 0.75rem 3rem !important;
	border: 1px solid var(--chamber-gray) !important;
	border-radius: 2rem !important;
	background: var(--chamber-white) !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	line-height: normal !important;
	color: var(--chamber-text) !important;
}

.calgary-chamber-maker-directory .maker-search-box__input:focus {
	outline: 2px solid var(--chamber-secondary) !important;
	outline-offset: 1px !important;
	border-color: var(--chamber-secondary) !important;
}

.calgary-chamber-maker-directory .maker-directory-filters__facets {
	display: flex !important;
	flex: 2 1 30rem !important;
	flex-wrap: wrap !important;
	gap: 0.75rem !important;
	align-items: center !important;
	min-width: 0 !important;
}

.calgary-chamber-maker-directory .maker-filter-select {
	flex: 1 1 9rem !important;
	min-width: 0 !important;
	padding: 0.75rem 2.5rem 0.75rem 1rem !important;
	border: 1px solid var(--chamber-gray) !important;
	border-radius: 2rem !important;
	background-color: var(--chamber-white) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23041E42' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1rem center !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
	line-height: normal !important;
	color: var(--chamber-primary) !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer !important;
}

.calgary-chamber-maker-directory .maker-filter-select:focus {
	outline: 2px solid var(--chamber-secondary) !important;
	outline-offset: 1px !important;
}

.calgary-chamber-maker-directory .maker-filter-reset {
	flex: 0 0 auto !important;
	padding: 0.75rem 1.25rem !important;
	border: none !important;
	border-radius: 2rem !important;
	background: transparent !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	line-height: normal !important;
	color: var(--chamber-link) !important;
	text-decoration: underline !important;
	cursor: pointer !important;
}

.calgary-chamber-maker-directory .maker-filter-reset:hover {
	color: var(--chamber-primary) !important;
}

.calgary-chamber-maker-directory .maker-directory-count {
	margin: 0 0 1.5rem !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
	color: var(--chamber-gray-dark) !important;
}

.calgary-chamber-maker-directory .maker-directory-count strong {
	color: var(--chamber-primary) !important;
	font-weight: 700 !important;
}

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

.calgary-chamber-maker-directory .maker-directory-grid {
	display: grid !important;
	gap: 1.5rem !important;
	margin-bottom: 2rem !important;
}

.calgary-chamber-maker-directory .maker-directory-grid--columns-1 {
	grid-template-columns: 1fr !important;
}

.calgary-chamber-maker-directory .maker-directory-grid--columns-2 {
	grid-template-columns: repeat(2, 1fr) !important;
}

.calgary-chamber-maker-directory .maker-directory-grid--columns-3 {
	grid-template-columns: repeat(3, 1fr) !important;
}

.calgary-chamber-maker-directory .maker-directory-grid--columns-4 {
	grid-template-columns: repeat(4, 1fr) !important;
}

/* -----------------------------------------------------------------------------
 * Card
 * -------------------------------------------------------------------------- */

.calgary-chamber-maker-directory .maker-card {
	display: flex !important;
	flex-direction: row !important;
	gap: 1.25rem !important;
	padding: 1.25rem !important;
	background: var(--chamber-white) !important;
	border: 1px solid var(--chamber-gray) !important;
	border-radius: 1.5625rem !important;
	overflow: hidden !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.calgary-chamber-maker-directory .maker-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
}

.calgary-chamber-maker-directory .maker-card__media {
	position: relative !important;
	flex: 0 0 42% !important;
	max-width: 42% !important;
	align-self: flex-start !important;
	aspect-ratio: 5 / 4 !important;
	border-radius: 1rem !important;
	overflow: hidden !important;
	background: var(--chamber-gray-light) !important;
}

/*
 * Contained, not cropped. What Membri stores in primary_image is a mix: some
 * makers have a photograph of the work, others a square logo on white. `cover`
 * frames the photographs nicely and decapitates the logos, so the whole image
 * is shown and allowed to letterbox against the media panel.
 */
.calgary-chamber-maker-directory .maker-card__image {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	padding: 0.75rem !important;
	object-fit: contain !important;
	border-radius: 0 !important;
}

/*
 * Fallback for a maker with no primary_image: the chamber logo, contained and
 * faded rather than cropped like a photograph, matching how the member
 * directory treats a missing logo.
 */
.calgary-chamber-maker-directory .maker-card__media--placeholder {
	background: #fafafa !important;
}

.calgary-chamber-maker-directory .maker-card__image--placeholder {
	padding: 1.5rem !important;
	object-fit: contain !important;
	filter: grayscale(100%) opacity(0.3) !important;
}

/*
 * The craft label sits in the card body, not as an overlay chip on the photo.
 * Membri sub-sector names run long ("Sporting goods, hobby, musical instrument,
 * book, and miscellaneous retailers"), and a chip on a 38%-wide photo cannot
 * hold that without covering the image it labels.
 *
 * Kept to a single line: a three-line chip outweighs the maker's own name. The
 * full value stays in the title attribute for anyone who needs it.
 */
.calgary-chamber-maker-directory .maker-card__craft {
	display: block !important;
	align-self: flex-start !important;
	max-width: 100% !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	padding: 0.25rem 0.625rem !important;
	border: none !important;
	border-radius: 2rem !important;
	background: var(--chamber-tertiary) !important;
	font-family: inherit !important;
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.02em !important;
	color: var(--chamber-primary) !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
}

.calgary-chamber-maker-directory .maker-card__body {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	gap: 0.5rem !important;
}

.calgary-chamber-maker-directory .maker-card__title {
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--chamber-primary) !important;
}

/*
 * Two class levels plus :any-link, so an Elementor kit's global link colour
 * cannot tie on specificity and win on source order - that renders the maker
 * name in the site's link blue instead of navy.
 */
.calgary-chamber-maker-directory .maker-card .maker-card__title a,
.calgary-chamber-maker-directory .maker-card .maker-card__title a:any-link {
	color: var(--chamber-primary) !important;
	text-decoration: none !important;
}

.calgary-chamber-maker-directory .maker-card .maker-card__title a:hover,
.calgary-chamber-maker-directory .maker-card .maker-card__title a:focus {
	color: var(--chamber-secondary) !important;
	text-decoration: underline !important;
}

.calgary-chamber-maker-directory .maker-card__meta {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.25rem !important;
}

.calgary-chamber-maker-directory .maker-card__meta-row {
	display: flex !important;
	align-items: flex-start !important;
	gap: 0.4375rem !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	color: var(--chamber-link) !important;
}

.calgary-chamber-maker-directory .maker-card__meta-icon {
	flex: 0 0 auto !important;
	margin-top: 0.0625rem !important;
	color: var(--chamber-link) !important;
}

.calgary-chamber-maker-directory .maker-card__description {
	margin: 0 !important;
}

.calgary-chamber-maker-directory .maker-card__description p {
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: var(--chamber-text) !important;
}

.calgary-chamber-maker-directory .maker-card__cta {
	margin-top: auto !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	line-height: normal !important;
	color: var(--chamber-link) !important;
	text-decoration: none !important;
}

.calgary-chamber-maker-directory .maker-card__cta:hover,
.calgary-chamber-maker-directory .maker-card__cta:focus {
	color: var(--chamber-primary) !important;
	text-decoration: underline !important;
}

/* -----------------------------------------------------------------------------
 * Empty state, loading, pagination
 * -------------------------------------------------------------------------- */

.calgary-chamber-maker-directory .maker-directory-empty {
	padding: 3rem 1rem !important;
	text-align: center !important;
	color: var(--chamber-gray-dark) !important;
}

.calgary-chamber-maker-directory .maker-directory-grid.is-loading {
	opacity: 0.45 !important;
	transition: opacity 0.15s ease !important;
	pointer-events: none !important;
}

.calgary-chamber-maker-directory .maker-directory-pagination {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.5rem !important;
	justify-content: center !important;
	align-items: center !important;
}

.calgary-chamber-maker-directory .maker-directory-pagination:empty {
	display: none !important;
}

.calgary-chamber-maker-directory .maker-directory-pagination .page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 2.5rem !important;
	padding: 0.5rem 0.75rem !important;
	border: 1px solid var(--chamber-gray) !important;
	border-radius: 2rem !important;
	background: var(--chamber-white) !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
	line-height: normal !important;
	color: var(--chamber-primary) !important;
	text-decoration: none !important;
}

.calgary-chamber-maker-directory .maker-directory-pagination .page-numbers:hover {
	background: var(--chamber-secondary) !important;
	border-color: var(--chamber-secondary) !important;
	color: var(--chamber-white) !important;
}

.calgary-chamber-maker-directory .maker-directory-pagination .page-numbers.current {
	background: var(--chamber-primary) !important;
	border-color: var(--chamber-primary) !important;
	color: var(--chamber-white) !important;
	font-weight: 700 !important;
}

/* -----------------------------------------------------------------------------
 * Responsive
 *
 * Keyed to the block's own width, not the viewport: a 2-column grid inside a
 * 600px Elementor column has to stack just as it does on a phone. A horizontal
 * card is unreadable below 640px, so the media block goes full-width on top.
 * -------------------------------------------------------------------------- */

@container (max-width: 1024px) {
	.calgary-chamber-maker-directory .maker-directory-grid--columns-3,
	.calgary-chamber-maker-directory .maker-directory-grid--columns-4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@container (max-width: 900px) {
	.calgary-chamber-maker-directory .maker-directory-grid--columns-2,
	.calgary-chamber-maker-directory .maker-directory-grid--columns-3,
	.calgary-chamber-maker-directory .maker-directory-grid--columns-4 {
		grid-template-columns: 1fr !important;
	}
}

@container (max-width: 640px) {
	.calgary-chamber-maker-directory .maker-card {
		flex-direction: column !important;
	}

	.calgary-chamber-maker-directory .maker-card__media {
		flex: 0 0 auto !important;
		max-width: 100% !important;
		width: 100% !important;
		aspect-ratio: 5 / 4 !important;
	}

	.calgary-chamber-maker-directory .maker-directory-filters__facets {
		width: 100% !important;
	}

	.calgary-chamber-maker-directory .maker-filter-select {
		flex: 1 1 100% !important;
	}
}