/*
 * Career - Contact doors.
 *
 * Read from cp-all-designer css/career.css:2363-2422 (.crrdoor, .doorc),
 * css/contact-info.css:20-62 and css/contact-info-apply.css:48-68, 138-140.
 *
 * Colour, type, padding and the measures arrive from the Style tab and are not
 * repeated here.
 */

/* contact-info-apply.css:138-140 — a pale blue at the top falling to white */
.custom-career-contact-doors.custom-career-contact-doors[data-custom-partner-band] {
	background: linear-gradient(180deg,
		var(--custom-career-contact-doors-top, #F7FBFE) 0%,
		var(--custom-career-contact-doors-ground, #FFFFFF) 42%,
		var(--custom-career-contact-doors-ground, #FFFFFF) 100%);
}

/* contact-info-apply.css:48-49 — the design centres the head's words but leaves the line's box at
   the head's left edge (app.css:293 gives .lead no auto margins), so its words sit 15px left of centre */
.custom-career-contact-doors.custom-career-contact-doors[data-custom-partner-band] .custom-career-contact-doors__intro {
	margin-right: auto;
	margin-left: 0;
}

/* career.css:2377-2381 — three across, two from 860, one from 560 */
.custom-career-contact-doors .custom-career-contact-doors__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.custom-career-contact-doors .custom-career-contact-doors__item {
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* career.css:2382-2389, contact-info.css:24 — the whole card one link, its top edge its colour */
.custom-career-contact-doors .custom-career-contact-doors__card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100%;
	overflow: hidden;
	border: 2px solid var(--custom-career-contact-doors-edge, #EEF2F7);   /* career.css:2385 measures 1px */
	border-top: 4px solid var(--custom-career-contact-doors-fam, #16418C);
	color: inherit;
	text-decoration: none;
	transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* career.css:2389-2392, contact-info.css:40-42 — it lifts, and its edge takes its own colour */
@media (hover: hover) {
	.custom-career-contact-doors a.custom-career-contact-doors__card:hover {
		border-color: var(--custom-career-contact-doors-fam, #16418C);
		box-shadow: 0 18px 44px -14px rgba(22, 65, 140, 0.2);   /* --sh */
		transform: translateY(-6px);
	}
	.custom-career-contact-doors a.custom-career-contact-doors__card:hover .custom-career-contact-doors__picture img {
		transform: scale(1.05);
	}
}

.custom-career-contact-doors a.custom-career-contact-doors__card:focus-visible {
	outline: 4px solid #50A3D5;                 /* career.css:2393 measures 3px */
	outline-offset: 4px;
}

/* career.css:2394-2395 */
.custom-career-contact-doors .custom-career-contact-doors__picture {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.custom-career-contact-doors .custom-career-contact-doors__card .custom-career-contact-doors__picture img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* career.css:2396-2401 */
.custom-career-contact-doors .custom-career-contact-doors__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

/* career.css:2403-2406, contact-info.css:55 — the name is the card's colour */
/* Kadence takes the top margin off a widget's first heading (0,3,2): this stands over it */
.custom-career-contact-doors .custom-career-contact-doors__card .custom-career-contact-doors__body .custom-career-contact-doors__card-title {
	margin: 0;
	font-weight: 600;
	line-height: 1.35;
	color: var(--custom-career-contact-doors-fam, #16418C);
}

/* career.css:2407-2409 */
.custom-career-contact-doors .custom-career-contact-doors__card-text {
	display: block;
	margin: 0;
	font-weight: 300;
	line-height: 1.7;
}

/* career.css:2411-2415 — held to the card's foot, so the three line up */
.custom-career-contact-doors .custom-career-contact-doors__card-go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font-weight: 600;
	line-height: 1.6;
}

@media (max-width: 860px) {
	.custom-career-contact-doors .custom-career-contact-doors__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.custom-career-contact-doors .custom-career-contact-doors__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-career-contact-doors .custom-career-contact-doors__card,
	.custom-career-contact-doors .custom-career-contact-doors__card .custom-career-contact-doors__picture img {
		transition: none;
	}
}