/**
 * Designer hub — [dp_designer_hub] (/designers/) and [dp_designer_band] (homepage).
 *
 * ⚠️ EVERY RULE IS SCOPED UNDER .dp-hub / .dp-band AND THE LOAD-BEARING ONES
 * CARRY !important. These render inside Elementor containers, and Elementor's
 * generated CSS reaches list items, links and headings with specificity that
 * beats a bare class. store-mm's store-grid.css documents the same defence, and
 * design-manager's featured-designs strip lost a whole image to it (a bare
 * .dm-fd-img computed to 0px under `.elementor img { height:auto }`).
 *
 * ⚠️ Typography on .dp-band is MEASURED off the homepage's own Elementor
 * headings — 37px / 700 / #2B303B with an 18px #6C727F sub — not chosen. A
 * shortcode does not inherit the per-widget font Elementor generates. The same
 * block lives in store-mm/includes/shortcodes/featured-products.php and
 * design-manager/core/featured-designs.php. CHANGE ALL THREE TOGETHER.
 *
 * Palette (CLAUDE.md): #ffffff bg · #0a0a0a primary · #1a1a1a body ·
 * #6b6b6b muted · #c0392b brand red, SPARINGLY · #e8e8e8 hairline borders.
 * Red appears on at most one CTA per section — never on body text or borders.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   SHARED — buttons and avatar faces
   ───────────────────────────────────────────────────────────────────────── */

.dp-hub .dp-btn,
.dp-band .dp-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px !important;
	border-radius: 8px !important;
	border: 1px solid transparent !important;
	font-size: .85rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center;
	text-decoration: none !important;
	transition: transform .12s ease, background-color .12s ease, color .12s ease;
	/* A long label must never blow the button out of a narrow phone. */
	max-width: 100%;
	overflow-wrap: anywhere;
}

.dp-hub .dp-btn:hover,
.dp-band .dp-btn:hover {
	transform: translateY(-1px);
}

.dp-hub .dp-btn-dark,
.dp-band .dp-btn-dark {
	background: #0a0a0a !important;
	color: #ffffff !important;
}

.dp-hub .dp-btn-dark:hover,
.dp-band .dp-btn-dark:hover {
	background: #1a1a1a !important;
	color: #ffffff !important;
}

.dp-hub .dp-btn-red,
.dp-band .dp-btn-red {
	background: #c0392b !important;
	color: #ffffff !important;
}

.dp-hub .dp-btn-red:hover,
.dp-band .dp-btn-red:hover {
	background: #a93226 !important;
	color: #ffffff !important;
}

.dp-hub .dp-btn-ghost,
.dp-band .dp-btn-ghost {
	background: #ffffff !important;
	color: #1a1a1a !important;
	border-color: #e8e8e8 !important;
}

.dp-hub .dp-btn-ghost:hover,
.dp-band .dp-btn-ghost:hover {
	background: #f8f8f8 !important;
	color: #0a0a0a !important;
}

/* Faces row — a <span> background-image, never an <img>. See the class doc. */
.dp-hub .dp-faces,
.dp-band .dp-faces {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.dp-hub .dp-face,
.dp-band .dp-face {
	display: block;
	width: 52px;
	height: 52px;
	margin-inline-start: -10px;
	border-radius: 50%;
	border: 2px solid #ffffff !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	text-decoration: none !important;
	flex: 0 0 auto;
	transition: transform .12s ease;
}

.dp-hub .dp-faces > .dp-face:first-child,
.dp-band .dp-faces > .dp-face:first-child {
	margin-inline-start: 0;
}

.dp-hub .dp-face:hover,
.dp-band .dp-face:hover {
	transform: translateY(-2px);
	z-index: 2;
	position: relative;
}

.dp-hub .dp-face-img,
.dp-band .dp-face-img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.dp-hub .dp-face-more,
.dp-band .dp-face-more {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f0;
	color: #6b6b6b;
	font-size: .8rem;
	font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────────
   [dp_designer_band] — the homepage section
   ───────────────────────────────────────────────────────────────────────── */

.dp-band {
	background: #f7f7f7;
	border-radius: 10px;
	padding: 46px 24px;
	margin: 0;
}

/*
 * bg="none" — the band is nested in a container that already paints a panel.
 * On the homepage that is Elementor container 80d706b (#F5F3F3, 20px radius,
 * 40/30px padding); without this the page shows a grey rounded box inside a
 * grey rounded box, with the padding applied twice.
 */
.dp-band.dp-band-plain {
	background: transparent;
	border-radius: 0;
	padding: 0;
}

.dp-band .dp-band-inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.dp-band .dp-band-title {
	font-family: "Myriad SemiCondensed Bold", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: 37px !important;
	font-weight: 700 !important;
	color: #2B303B !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
}

.dp-band .dp-band-sub {
	font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	color: #6C727F !important;
	line-height: 1.55 !important;
	margin: 0 !important;
}

.dp-band .dp-band-count {
	font-size: .82rem !important;
	font-weight: 700 !important;
	color: #6b6b6b !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin: 10px 0 0 !important;
}

.dp-band .dp-band-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 26px;
}

.dp-band .dp-band-note {
	font-size: .85rem !important;
	color: #6b6b6b !important;
	margin: 18px 0 0 !important;
}

.dp-band .dp-band-note a {
	color: #1a1a1a !important;
	font-weight: 700;
	text-decoration: underline !important;
}

.dp-band .dp-band-note a:hover {
	color: #c0392b !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   [dp_designer_hub] — the /designers/ page
   ───────────────────────────────────────────────────────────────────────── */

.dp-hub {
	background: #ffffff;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}

/* HERO */
.dp-hub .dp-hub-hero {
	text-align: center;
	padding: 40px 0 34px;
}

.dp-hub .dp-kicker {
	display: inline-block;
	font-size: .78rem !important;
	font-weight: 700 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #c0392b !important;
	margin-bottom: 10px;
}

.dp-hub .dp-hub-title {
	font-size: 2.35rem !important;
	font-weight: 800 !important;
	color: #0a0a0a !important;
	line-height: 1.15 !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
}

.dp-hub .dp-hub-sub {
	font-size: 1.05rem !important;
	color: #6b6b6b !important;
	line-height: 1.6 !important;
	max-width: 640px;
	margin: 0 auto !important;
}
.dp-hub .dp-pitch-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.dp-hub .dp-hub-directory {
	padding-top: 8px;
	scroll-margin-top: 120px;
}
/* CLOSING PITCH */
.dp-hub .dp-pitch {
	background: #f7f7f7;
	border-radius: 10px;
	padding: 40px 26px;
	margin: 46px 0 40px;
	text-align: center;
}

.dp-hub .dp-pitch-title {
	font-size: 1.6rem !important;
	font-weight: 800 !important;
	color: #0a0a0a !important;
	margin: 0 0 26px !important;
	padding: 0 !important;
}

.dp-hub .dp-pitch-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	text-align: start;
	margin-bottom: 28px;
}

.dp-hub .dp-pitch-item {
	background: #ffffff;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	padding: 20px 20px;
	min-width: 0;
}

.dp-hub .dp-pitch-item h3 {
	font-size: 1rem !important;
	font-weight: 800 !important;
	color: #0a0a0a !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
}

.dp-hub .dp-pitch-item p {
	font-size: .9rem !important;
	color: #6b6b6b !important;
	line-height: 1.55 !important;
	margin: 0 !important;
}

.dp-hub .dp-pitch-actions {
	justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE — tested targets 390 / 430 / 480 / 1200px
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.dp-hub .dp-pitch-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.dp-band {
		padding: 34px 16px;
	}

	.dp-band .dp-band-title {
		/* 30px matches the Elementor heading this band replaced
		   (typography_font_size_mobile = 30). */
		font-size: 30px !important;
	}

	.dp-band .dp-band-sub {
		font-size: 16px !important;
	}

	.dp-hub .dp-hub-title {
		font-size: 1.8rem !important;
	}

	.dp-hub .dp-pitch {
		padding: 30px 18px;
	}

	/* One CTA per row beats two cramped half-width buttons on a phone. */
	.dp-band .dp-band-actions .dp-btn,
	.dp-hub .dp-pitch-actions .dp-btn {
		flex: 1 1 100%;
	}

	.dp-hub .dp-face,
	.dp-band .dp-face {
		width: 44px;
		height: 44px;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   RTL — /ar/ only. Logical properties above (margin-inline-start, inset-inline-
   start, padding-inline-start, border-inline-start, text-align:start) already
   mirror themselves{
	/* The check mark is direction-neutral; only its box needs re-anchoring,
	   which inset-inline-start already does. Nothing further required. */
	content: "✓";
}

[dir="rtl"] .dp-hub .dp-kicker,
.rtl .dp-hub .dp-kicker{
	/* Letter-spacing breaks Arabic letter-joining and makes the word
	   unreadable — the same fix store-mm's idea-start.css documents. */
	letter-spacing: 0 !important;
}

[dir="rtl"] .dp-band .dp-band-count,
.rtl .dp-band .dp-band-count {
	letter-spacing: 0 !important;
}

/* HEADER — slim on purpose. A visitor here has already chosen to hire someone;
   the filter below is the point of the page, so the header stays out of its way. */
.dp-hub .dp-hub-hero-slim {
	padding: 34px 0 22px;
}

/* Fallback line, shown AFTER the results for the visitor the directory failed. */
.dp-hub .dp-hub-fallback {
	text-align: center;
	font-size: .92rem !important;
	color: #6b6b6b !important;
	margin: 22px 0 0 !important;
}

.dp-hub .dp-hub-fallback a {
	color: #1a1a1a !important;
	font-weight: 700;
	text-decoration: underline !important;
}

.dp-hub .dp-hub-fallback a:hover {
	color: #c0392b !important;
}

/* The closing pitch speaks to a different audience, so it says so. */
.dp-hub .dp-pitch-kicker {
	display: block;
	font-size: .78rem !important;
	font-weight: 700 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #c0392b !important;
	margin-bottom: 8px;
}

[dir="rtl"] .dp-hub .dp-pitch-kicker,
.rtl .dp-hub .dp-pitch-kicker {
	letter-spacing: 0 !important;
}