/*---*\
Dynamic Directory
Partners / Dealers / Print Providers listing block

KEY FEATURES:
- 4-column card grid (mobile-first)
- Search + filter toolbar
- Load More with progress bar
- Carousel (Slick) display mode
\*---*/

.dynamic-directory {
	--dd-text: #353535;
	--dd-muted: #767676;
	--dd-accent: #01916d;
	--dd-border: #e0e0e0;
	--dd-radius: 10px;
	--dd-bg-soft: #f3f4f4;
	padding: 40px 0;
	color: var(--dd-text);
}

/* Optional WYSIWYG intro above the directory, set per CPT in Theme General Settings. */
.directory-archive__top-content {
	padding: 40px 0 40px;
	color: #353535;
}

.directory-archive__top-content .wysiwyg__content > *:last-child {
	margin-bottom: 0;
}

.directory-archive__top-content + .dynamic-directory {
	padding-top: 24px;
}

.dynamic-directory__header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 28px;
}

.dynamic-directory__heading {
	margin: 0 0 8px;
	color: var(--dd-text);
	padding-bottom: 0;
}

.dynamic-directory__intro {
	margin: 0;
	color: var(--dd-muted);
}

.dynamic-directory__header .dynamic-directory__view-all {
	align-self: flex-start;
	padding: 15px 34px;
}

/* Archive heading matches the centered Partners Directory Figma header. */
.dynamic-directory--archive .dynamic-directory__header {
	align-items: center;
	gap: 0;
	margin-bottom: 35px;
	text-align: center;
}

.dynamic-directory--archive .dynamic-directory__header-text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.dynamic-directory--archive .dynamic-directory__heading {
	margin: 0;
	padding: 0;
	font-family: 'Clarimo UD PE', 'Inter', sans-serif;
	font-size: 36px;
	font-weight: 600;
	line-height: 42px;
	color: #353535;
}

.dynamic-directory--archive .dynamic-directory__intro {
	margin: 0;
	padding: 0;
	font-family: 'Clarimo UD PE', 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 22.4px;
	color: #353535;
}

.dynamic-directory__toolbar {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 28px;
}

.dynamic-directory__search {
	display: block;
	width: 100%;
}

.dynamic-directory__search-input {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius);
	font-size: 16px;
	color: var(--dd-text);
	background: #fff;
}

.dynamic-directory__search-input:focus-visible {
	outline: 2px solid var(--dd-accent);
	outline-offset: 2px;
}

.dynamic-directory__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.dynamic-directory__filters-label {
	font-weight: 600;
	color: var(--dd-text);
}

.dynamic-directory__filter select {
	min-width: 160px;
	padding: 10px 12px;
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius);
	background: #fff;
	color: var(--dd-text);
}

.dynamic-directory__filter select:focus-visible {
	outline: 2px solid var(--dd-accent);
	outline-offset: 2px;
}

.dynamic-directory__filter--checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.dynamic-directory__peppm-logo,
.directory-card__peppm-logo {
	display: block;
	width: 110px;
	height: auto;
    position: absolute;
    top: 0;
    right: 0;	
}

/* Archive search and filters match the Partners Directory Figma toolbar. */
.dynamic-directory--archive .dynamic-directory__toolbar {
	gap: 20px;
}

.dynamic-directory--archive .dynamic-directory__search {
	position: relative;
}

.dynamic-directory--archive .dynamic-directory__search::after {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 24px;
	height: 24px;
	background: url('/wp-content/themes/fujigraphicsystems/assets/icons/directory-search.svg') center / 24px 24px no-repeat;
	content: "";
	pointer-events: none;
}

.dynamic-directory--archive .dynamic-directory__search-input {
	height: 48px;
	padding: 12px 48px 12px 16px;
	border-color: #d1d1d1;
	border-radius: 5px;
	font-family: 'Clarimo UD PE', sans-serif;
	font-size: 16px;
	line-height: normal;
}

.dynamic-directory--archive .dynamic-directory__search-input::placeholder {
	color: #737373;
	opacity: 1;
}

.dynamic-directory--archive .dynamic-directory__filters {
	gap: 12px;
}

.dynamic-directory--archive .dynamic-directory__filters-label {
	font-family: 'Clarimo UD PE', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: normal;
	text-transform: uppercase;
	white-space: nowrap;
}

.dynamic-directory--archive .dynamic-directory__filter {
	position: relative;
	display: block;
}

.dynamic-directory--archive .dynamic-directory__filter:not(.dynamic-directory__filter--checkbox)::after {
	position: absolute;
	top: 17px;
	right: 15px;
	width: 8.28px;
	height: 14.094px;
	background: url('/wp-content/themes/fujigraphicsystems/assets/icons/directory-select-arrow.svg') center / 8.28px 14.094px no-repeat;
	content: "";
	pointer-events: none;
	transform: rotate(90deg);
	transform-origin: center;
}

.dynamic-directory--archive .dynamic-directory__filter select {
	width: 100%;
	height: 48px;
	padding: 12px 44px 12px 16px;
	border: 0;
	border-radius: 5px;
	appearance: none;
	background: #f2f2f2;
	font-family: 'Clarimo UD PE', sans-serif;
	font-size: 16px;
	line-height: normal;
}

.dynamic-directory--archive .dynamic-directory__filter--category {
	width: 210px;
}

.dynamic-directory--archive .dynamic-directory__filter--subcategory,
.dynamic-directory--archive .dynamic-directory__filter--term {
	width: 220px;
}

.dynamic-directory__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

.dynamic-directory__grid > .directory-card {
	flex: 0 0 100%;
	height: auto;
}

/*---*\
Carousel display mode

Slick replaces the CSS grid with its own track, so the gutters and the
equal-height behaviour of the grid have to be rebuilt here:
- .slick-track is flexed so every slide stretches to the tallest card
- .slick-slide keeps height:auto so the stretch is not capped by content
- horizontal padding on the slides recreates the grid gap, cancelled out by a
 negative margin on .slick-list so the row still lines up with the container
- padding-bottom reserves a strip for the arrows below the cards

Slick wraps each card in its own markup and writes width/display straight onto
the card as an inline style, so the card rules below need !important to keep
the flex column that pushes the CTA to the bottom of every card.
\*---*/
.dynamic-directory__grid.js-directory-slider {
	position: relative;
	display: block;
}

/* Only reserve the arrow strip when Slick actually rendered arrows. */
.dynamic-directory__grid.js-directory-slider.slick-initialized:has(.slick-arrow) {
	padding-bottom: 76px;
}

.dynamic-directory__grid.js-directory-slider .slick-list {
	margin: 0 -12px;
}

.dynamic-directory__grid.js-directory-slider .slick-track {
	display: flex;
	align-items: stretch;
}

.dynamic-directory__grid.js-directory-slider .slick-slide {
	height: auto;
	padding: 0 12px;
}

.dynamic-directory__grid.js-directory-slider .slick-slide > div {
	height: 100%;
}

.dynamic-directory__grid.js-directory-slider .directory-card {
	display: flex !important;
	height: 100%;
}

.dynamic-directory__grid.js-directory-slider .slick-prev,
.dynamic-directory__grid.js-directory-slider .slick-next {
	top: auto;
	bottom: 0;
	right: auto;
	transform: none;
}

.dynamic-directory__grid.js-directory-slider .slick-prev {
	left: calc(50% - 60px);
}

.dynamic-directory__grid.js-directory-slider .slick-next {
	left: 50%;
}

.dynamic-directory__grid.js-directory-slider .slick-prev:not(.slick-disabled):hover,
.dynamic-directory__grid.js-directory-slider .slick-next:not(.slick-disabled):hover {
	background: var(--dd-accent);
	border-color: var(--dd-accent);
	box-shadow: 0 5px 12px rgb(0 0 0 / 18%);
}

.dynamic-directory__grid.js-directory-slider .slick-prev:not(.slick-disabled):hover::after,
.dynamic-directory__grid.js-directory-slider .slick-next:not(.slick-disabled):hover::after {
	color: #fff;
}

.dynamic-directory__grid.js-directory-slider .slick-prev:focus-visible,
.dynamic-directory__grid.js-directory-slider .slick-next:focus-visible {
	outline: 3px solid var(--dd-accent);
	outline-offset: 3px;
}

.dynamic-directory__empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 24px;
	text-align: center;
	color: var(--dd-muted);
}

.dynamic-directory__pagination {
	margin-top: 36px;
	text-align: center;
}

.dynamic-directory__count {
	margin: 0 0 12px;
	color: var(--dd-muted);
}

.dynamic-directory__progress {
	max-width: 320px;
	height: 6px;
	margin: 0 auto 20px;
	background: #d9d9d9;
	border-radius: 999px;
	overflow: hidden;
}

.dynamic-directory__progress-bar {
	display: block;
	height: 100%;
	background: var(--dd-accent);
	border-radius: 999px;
	transition: width 0.25s ease;
}

/* Card */
.directory-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius);
	overflow: hidden;
	height: 100%;
}

.directory-card__media {
	position: relative;
	background: var(--dd-bg-soft);
	min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;	
}

.directory-card__media a {
	border: none !important;
}

.directory-card__media-link {
	display: block;
}

.directory-card__image {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.directory-card--dealer .directory-card__image {
	height: 130px;
	object-fit: contain;
	padding: 16px;
	background: #fff;
}

/* Partner tier badge -- label + swatch color come from the partner_tier taxonomy */
.directory-card__badge {
	position: absolute;
	left: 16px;
	bottom: 16px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px 5px 10px;
	background: #fff;
	border: 1px solid #d8d8d8;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	color: #353535;
}

.directory-card__badge-swatch {
	width: 18px;
	height: 18px;
	border-radius: 2px;
	background: #939598;
}

.directory-card__tags {
	position: absolute;
	left: 22px;
	bottom: 0px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none
}

.directory-card__tag {
    padding: 4px 15px;
    background: rgba(255, 255, 255, .95);
    border-radius: 5px;
    font-size: 16px;
    font-weight: 300;
    color: var(--dd-text);
}

.directory-card__tag::before {
	display: none;
}

.directory-card__peppm {
	position: absolute;
	right: 12px;
	top: 12px;
	padding: 4px 8px;
	background: var(--dd-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: 4px;
}

.directory-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	flex: 1;
}

.directory-card__category {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dd-muted);
	padding-bottom: 0;
}

.directory-card__title {
	margin: 0;
	line-height: 1.3;
	padding-top: 0;
	padding-bottom: 0;
}

.directory-card__title a {
	color: var(--dd-text);
	text-decoration: none;
	border: none;
}

.directory-card__title a:hover,
.directory-card__title a:focus-visible {
	color: var(--dd-accent);
	text-decoration: none !important;
}

.directory-card__excerpt {
	margin: 0;
	color: var(--dd-muted);
	font-size: 15px;
	line-height: 1.5;
	padding-bottom: 15px;
}

.directory-card__equipment {
	margin: 0;
	padding-left: 18px;
	color: var(--dd-muted);
	font-size: 14px;
}

.directory-card__equipment li {
	padding-bottom: 0;
	margin-bottom: 0;
}

.directory-card__address {
	display: inline-flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 10px;
	padding: 20px 14px;
	border: 1px solid var(--dd-border);
	border-radius: 6px;
	color: var(--dd-text);
	text-decoration: none;
	font-size: 14px;
	border: none;
	box-shadow: 0 0 15px rgb(32, 52, 140, 16%);
}

.directory-card__address::after {
	content: "\e90f";
    font-family: 'icomoon';
    margin-left: 0;
    font-size: 14px;
    top: 2px;
    position: relative;
    transition: margin-left .4s ease-in-out;
	color: var(--dd-accent);
}

.address_text {
	font-size: 14px;
	line-height: 1.5;
	padding-bottom: 0;
	margin-bottom: 0;
}

a.directory-card__address:hover,
a.directory-card__address:focus-visible {
	border-color: var(--dd-accent);
	color: var(--dd-accent);
}

.directory-card__phone {
	color: var(--dd-accent);
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	border: none;
	letter-spacing: 0.03em;
	text-align: center;
}

.directory-card__phone:hover,
.directory-card__phone:focus-visible {
	text-decoration: underline;
	border: none;
}

.directory-card .directory-card__cta {
	margin-top: auto;
	width: max-content !important;
	padding: 14px 34px 14px 34px;
}

.directory-card--logo-only .directory-card__media {
	flex: 1;
}

.directory-card--logo-only .directory-card__image {
	height: 160px;
	object-fit: contain;
	padding: 24px;
	background: #fff;
}

@media (min-width: 768px) {
	.dynamic-directory {
		padding: 56px 0;
	}

	.dynamic-directory__header {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}

	.dynamic-directory__header .dynamic-directory__header-text {
		max-width: calc(100% - 220px);
	}

	.dynamic-directory--archive .dynamic-directory__header {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.dynamic-directory--archive .dynamic-directory__heading {
		font-size: 50px;
		line-height: 56px;
	}

	.dynamic-directory__toolbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.dynamic-directory__search {
		flex: 1;
		max-width: 420px;
	}

	.dynamic-directory--archive .dynamic-directory__toolbar {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
	}

	.dynamic-directory--archive .dynamic-directory__search {
		max-width: none;
	}

	.dynamic-directory__grid {
		gap: 28px;
	}

	.dynamic-directory__grid > .directory-card {
		flex-basis: calc((100% - 28px) / 2);
	}

	.dynamic-directory__grid.js-directory-slider .slick-list {
		margin: 0 -14px;
	}

	.dynamic-directory__grid.js-directory-slider .slick-slide {
		padding: 0 14px;
	}
}

@media (min-width: 1200px) {
	.dynamic-directory {
		padding: 72px 0;
	}

	.dynamic-directory--archive .dynamic-directory__toolbar {
		flex-direction: row;
		align-items: center;
	}

	.dynamic-directory--archive .dynamic-directory__search {
		max-width: none;
	}

	.dynamic-directory--archive .dynamic-directory__filters {
		flex-wrap: nowrap;
	}

	.dynamic-directory__grid {
		gap: 32px;
	}

	.dynamic-directory__grid > .directory-card {
		flex-basis: calc((100% - 96px) / 4);
	}

	.dynamic-directory__grid.js-directory-slider .slick-list {
		margin: 0 -16px;
	}

	.dynamic-directory__grid.js-directory-slider .slick-slide {
		padding: 0 16px;
	}

	.directory-card__media {
		min-height: 200px;
	}	

	.directory-card__image {
		height: 200px;
	}

}