/* ══════════════════════════════════════════════════ *
 * MARK: 0. Query
 * ────────────────────────────────────────────────── */
/* .cvh--post_query[data-card-template="job"] .cvh--post_query-posts {
	padding-top: var(--cvh-space-m);
	row-gap: var(--cvh-space-xl);
} */


/* ══════════════════════════════════════════════════ *
* MARK: 1. Card
* ────────────────────────────────────────────────── */
.cvh--card-ctn:where([data-card-template="job"]) {
	--card-padding-y: var(--cvh-space-s);
	--card-padding-x: var(--cvh-space-m);

	margin-top: var(--cvh-space-m);
}


/* ══════════════════════════════════════════════════ *
* MARK: 2. Body
* ────────────────────────────────────────────────── */
/* #═#═#═#═#═# 2.1 Element #═#═#═#═#═# */
.cvh--card-ctn:where([data-card-template="job"]) .cvh--card-body {
	display: grid;
	grid-auto-flow: row;
	grid-template-rows: minmax(calc(var(--text-l) * 1.2 * 2 + var(--cvh-space-xs) * 2), auto) 1fr;
	grid-auto-rows: auto;
	row-gap: var(--cvh-space-m);
	margin-top: calc((var(--cvh-space-m) + var(--card-padding-y)) * -1);
}


/* #═#═#═#═#═# 2.1 Heading #═#═#═#═#═# */
.cvh--card-ctn:where([data-card-template="job"]) .cvh--heading-ctn {
	--cvh-color-text-dynamic: var(--cvh-color-text-light);
	--cvh-color-heading-dynamic: var(--cvh-color-text-light);

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: var(--primary);
	padding: var(--cvh-space-xs) var(--cvh-space-s);
	margin-bottom: 0 !important;
}


/* #═#═#═#═#═# 2.2 Title #═#═#═#═#═# */
.cvh--card-ctn:where([data-card-template="job"]) .cvh--card-title {
	font-size: var(--text-l);
}


/* #═#═#═#═#═# 2.3 Details #═#═#═#═#═# */
.cvh--card-ctn:where([data-card-template="job"]) .cvh--job_card-details {
	display: grid;
	grid-template-areas:	"date date location location"
							"type type duration duration";
	grid-template-columns: repeat(2, auto 1fr);
	grid-template-rows: repeat(2, auto);
	gap: 10px;
}

.cvh--card-ctn:where([data-card-template="job"]) .cvh--job_card-details > div {
	display: grid;
	grid-template-columns: subgrid;
	font-weight: 700;
}

.cvh--card-ctn:where([data-card-template="job"]) .cvh--job_card-details > div::before {
	content: var(--_element-icon, unset);
	font: var(--cvh-font-icon-berlichingen);
	font-size: calc(var(--text-m) * 1.4);
	height: min-content;
	place-self: center;
}

.cvh--card-ctn:where([data-card-template="job"]) .cvh--job_card-details [data-details-slot="date"] {
	--_element-icon: "\F073";
	grid-area: date;
}

.cvh--card-ctn:where([data-card-template="job"]) .cvh--job_card-details [data-details-slot="location"] {
	--_element-icon: "\E809";
	grid-area: location;
}

.cvh--card-ctn:where([data-card-template="job"]) .cvh--job_card-details [data-details-slot="type"] {
	--_element-icon: "\E801";
	grid-area: type;
}

.cvh--card-ctn:where([data-card-template="job"]) .cvh--job_card-details [data-details-slot="duration"] {
	--_element-icon: "\E822";
	grid-area: duration;
}


/* ══════════════════════════════════════════════════ *
 * MARK: 3. Footer 
 * ────────────────────────────────────────────────── */
/* #═#═#═#═#═# 3.1 Button #═#═#═#═#═# */
.cvh--card-ctn:where([data-card-template="job"]) .cvh--card-link {
	padding: var(--cvh-space-xs) var(--cvh-space-s);
}