/**
 * DeiraJobs Job Category — Dedicated stylesheet
 *
 * Specificity intentionally kept low (.class = 0,1,0) so that Elementor
 * controls ({{WRAPPER}} .djc-style-x .class = 0,3,0) always override it.
 * Colors below are fallbacks only: every one of them is exposed, per style,
 * in the widget's Style tab.
 */

/* ──────────────────────────────────────────
   WRAPPER & TOKENS
────────────────────────────────────────── */
.deira-job-category {
	--djc-accent: #ad881e;
	--djc-bar: 3px;
	position: relative;
	box-sizing: border-box;
}

.deira-job-category *,
.deira-job-category *::before,
.deira-job-category *::after {
	box-sizing: border-box;
}

/* ──────────────────────────────────────────
   SECTION HEADER
────────────────────────────────────────── */
.djc-header {
	margin-bottom: 36px;
	text-align: center;
}

.djc-header__title { margin: 0 0 8px; color: #0f172a; }
.djc-header__subtitle { margin: 0; color: #6b7280; }

/* ──────────────────────────────────────────
   GRID
────────────────────────────────────────── */
.djc-grid {
	--djc-columns: 4;
	display: grid;
	grid-template-columns: repeat(var(--djc-columns), minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.djc-item {
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* ──────────────────────────────────────────
   ITEM (shared)
────────────────────────────────────────── */
.djc-card {
	--djc-lift: -4px;
	--djc-align: flex-start;
	--djc-icon-gap: 18px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: var(--djc-align);
	text-align: var(--djc-align);
	height: 100%;
	padding: 26px 24px;
	color: inherit;
	text-decoration: none;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	overflow: hidden;
	isolation: isolate;
	transition: transform .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

a.djc-card:hover,
a.djc-card:focus-visible {
	transform: translateY(var(--djc-lift));
	text-decoration: none;
}

a.djc-card:focus-visible {
	outline: 2px solid var(--djc-accent);
	outline-offset: 3px;
}

/* Icon box */
.djc-icon {
	--djc-icon-size: 26px;
	--djc-icon-box: 60px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--djc-icon-box);
	height: var(--djc-icon-box);
	margin-bottom: var(--djc-icon-gap);
	font-size: var(--djc-icon-size);
	line-height: 1;
	border-radius: 14px;
	transition: color .3s ease, background-color .3s ease, transform .3s ease;
}

.djc-icon svg,
.djc-watermark svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.djc-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.djc-name {
	margin: 0 0 4px;
	overflow-wrap: anywhere;
	transition: color .3s ease;
}

.djc-count {
	transition: color .3s ease, background-color .3s ease;
}

.djc-desc {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.5;
}

.djc-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	transition: color .3s ease, background-color .3s ease, transform .3s ease;
}

.djc-arrow .djb-ico {
	width: 16px;
	height: 16px;
}

/* ──────────────────────────────────────────
   STYLE: CARDS
────────────────────────────────────────── */
.djc-style-cards .djc-card {
	background-color: #ffffff;
}

/* Accent bar drawn from the left on hover */
.djc-style-cards .djc-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--djc-bar);
	background-color: var(--djc-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .35s ease;
}

.djc-style-cards a.djc-card:hover::after,
.djc-style-cards a.djc-card:focus-visible::after {
	transform: scaleX(1);
}

.djc-style-cards .djc-icon { color: #ad881e; background-color: #f6efdc; }
.djc-style-cards .djc-name { color: #0f172a; }
.djc-style-cards .djc-count { color: #6b7280; }
.djc-style-cards .djc-desc { color: #6b7280; }

.djc-style-cards .djc-arrow {
	position: absolute;
	top: 22px;
	right: 22px;
	color: #0f172a;
	background-color: #f1f5f9;
}

.djc-style-cards a.djc-card:hover .djc-arrow,
.djc-style-cards a.djc-card:focus-visible .djc-arrow {
	transform: rotate(-45deg);
}

/* ──────────────────────────────────────────
   STYLE: TILES
────────────────────────────────────────── */
.djc-style-tiles .djc-card {
	min-height: 190px;
	background-color: #0f172a;
	border-color: rgba(255, 255, 255, .06);
}

/* Accent overlay rising from the bottom */
.djc-style-tiles .djc-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--djc-accent);
	transform: translateY(101%);
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}

.djc-style-tiles a.djc-card:hover::before,
.djc-style-tiles a.djc-card:focus-visible::before {
	transform: translateY(0);
}

.djc-style-tiles .djc-body { margin-top: auto; }
.djc-style-tiles .djc-icon { color: #e9c46a; background-color: rgba(255, 255, 255, .08); }
.djc-style-tiles .djc-name { color: #ffffff; }
.djc-style-tiles .djc-count { color: #cbd5e1; }
.djc-style-tiles .djc-desc { color: #94a3b8; }

.djc-watermark {
	position: absolute;
	right: -14px;
	bottom: -22px;
	z-index: -1;
	font-size: 130px;
	line-height: 1;
	color: #ffffff;
	opacity: .08;
	pointer-events: none;
	transition: transform .5s ease;
}

.djc-style-tiles a.djc-card:hover .djc-watermark {
	transform: rotate(-10deg) scale(1.08);
}

.djc-style-tiles .djc-arrow {
	position: absolute;
	top: 22px;
	right: 22px;
	color: #ffffff;
	background-color: rgba(255, 255, 255, .1);
}

/* ──────────────────────────────────────────
   STYLE: ICON LIST
────────────────────────────────────────── */
.djc-style-list .djc-card {
	--djc-icon-gap: 14px;
	flex-direction: row;
	align-items: center;
	text-align: left;
	gap: var(--djc-icon-gap);
	padding: 14px 16px;
	background-color: #ffffff;
	border-radius: 14px;
}

.djc-style-list .djc-icon {
	--djc-icon-size: 18px;
	--djc-icon-box: 44px;
	margin-bottom: 0;
	color: #0f172a;
	background-color: #f1f5f9;
}

.djc-style-list .djc-body {
	flex: 1 1 auto;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 12px;
}

.djc-style-list .djc-name { margin: 0; color: #1f2937; }

.djc-style-list .djc-count {
	padding: 3px 10px;
	font-size: 13px;
	color: #4b5563;
	background-color: #f1f5f9;
	border-radius: 999px;
	white-space: nowrap;
}

.djc-style-list .djc-desc { flex-basis: 100%; margin-top: 0; color: #6b7280; }

.djc-style-list .djc-arrow {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	color: #9ca3af;
}

.djc-style-list a.djc-card:hover .djc-arrow,
.djc-style-list a.djc-card:focus-visible .djc-arrow {
	transform: translateX(3px);
}

.djc-style-list a.djc-card:hover,
.djc-style-list a.djc-card:focus-visible {
	transform: none;
}

/* ──────────────────────────────────────────
   STYLE: CENTERED (round icon)
────────────────────────────────────────── */
.djc-style-centered .djc-card {
	--djc-align: center;
	background-color: #ffffff;
	border-color: #f1f5f9;
}

/* Round icon with a ring in the icon color */
.djc-style-centered .djc-icon {
	--djc-icon-box: 72px;
	color: #ad881e;
	background-color: #ffffff;
	border-radius: 999px;
	box-shadow: inset 0 0 0 2px currentColor;
}

.djc-style-centered a.djc-card:hover .djc-icon,
.djc-style-centered a.djc-card:focus-visible .djc-icon {
	transform: scale(1.06);
}

.djc-style-centered .djc-name { color: #0f172a; }
.djc-style-centered .djc-count { color: #6b7280; }
.djc-style-centered .djc-desc { color: #6b7280; }

.djc-style-centered .djc-arrow {
	margin-top: 16px;
	color: #ad881e;
}

/* ──────────────────────────────────────────
   STYLE: BANNER (dark header band)
────────────────────────────────────────── */
.deira-job-category.djc-style-banner {
	--djc-band: 58px;
	--djc-band-bg: #0f172a;
}

.djc-style-banner .djc-card {
	background-color: #ffffff;
}

/* Band behind the top of the card; the icon straddles its lower edge */
.djc-style-banner .djc-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
	height: var(--djc-band);
	background-color: var(--djc-band-bg);
	transition: background-color .35s ease;
}

.djc-style-banner a.djc-card:hover::before,
.djc-style-banner a.djc-card:focus-visible::before {
	background-color: var(--djc-accent);
}

.djc-style-banner .djc-icon {
	color: #ad881e;
	background-color: #ffffff;
	box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
}

.djc-style-banner .djc-name { color: #0f172a; }
.djc-style-banner .djc-count { color: #6b7280; }
.djc-style-banner .djc-desc { color: #6b7280; }

.djc-style-banner .djc-arrow {
	position: absolute;
	top: 12px;
	right: 12px;
	color: #ffffff;
	background-color: rgba(255, 255, 255, .12);
}

/* ──────────────────────────────────────────
   "VIEW ALL" BUTTON
────────────────────────────────────────── */
.djc-footer {
	margin-top: 40px;
	text-align: center;
}

.djc-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 30px;
	line-height: 1.2;
	color: #0f172a;
	background-color: transparent;
	border: 2px solid #0f172a;
	border-radius: 10px;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.djc-btn .djb-ico { width: 1.1em; height: 1.1em; transition: transform .2s ease; }
.djc-btn:hover .djb-ico,
.djc-btn:focus-visible .djb-ico { transform: translateX(3px); }

/* ──────────────────────────────────────────
   REDUCED MOTION
────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.deira-job-category *,
	.deira-job-category *::before,
	.deira-job-category *::after {
		transition: none !important;
	}

	a.djc-card:hover,
	a.djc-card:focus-visible,
	.djc-card:hover .djc-arrow,
	.djc-card:hover .djc-watermark,
	.djc-btn:hover .djb-ico {
		transform: none !important;
	}

	/* Keep the hover feedback without movement */
	.djc-style-cards a.djc-card:hover::after,
	.djc-style-tiles a.djc-card:hover::before {
		transform: none !important;
	}
}