/**
 * DhishaAI - Job Openings loop grid card design.
 *
 * SCOPE: every rule is scoped to `.e-loop-item.type-career`, i.e. a loop-grid
 * card rendering a `career` post. Nothing else on the Careers page, and nothing
 * on any other page, is affected. This is presentation only - no markup, job
 * data, ACF field, query, pagination or Apply behaviour is touched.
 *
 * DARK CARD TREATMENT
 * -------------------
 * The Current Openings section is already dark: the outer container paints
 * rgb(5, 18, 38) and the panel holding the grid sits on #03081780 inside a
 * #12324A border. White cards made the grid the brightest thing on the page,
 * so the card surface is now dark too - but deliberately a step *lighter* than
 * the ground beneath it (#0E2439 against roughly #04101F), because a card has
 * to look raised to still read as a card. Going darker than the panel would
 * turn each card into a hole rather than a tile.
 *
 * Palette is the existing DhishaAI system already used by the 404 page and the
 * document viewers, so the section reads as part of the same site:
 *   #0E2439 card surface (dark)        #133049 card surface, hovered
 *   #073E5C deep navy-teal             #0d6ea1 mid blue (primary action)
 *   #FF6A00 orange accent              #051226 section ground
 *   #8CA6BC muted on dark              #F1F5F9 primary text on dark
 */

/* ---------------------------------------------------------------- card shell */

.e-loop-item.type-career {
	display: flex;
	height: 100%;
	min-width: 0;                 /* never let a long word widen the grid track */
}

/* The card root is the loop item's outer atomic flexbox. */
.e-loop-item.type-career > .e-con {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	height: 100%;
	gap: clamp(0.75rem, 1.3vw, 0.95rem);
	padding: clamp(1rem, 1.9vw, 1.3rem);
	background: #0E2439;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 16px;
	/* On a dark ground a drop shadow barely registers, so the lift comes mostly
	   from the lighter surface and a faint inner top highlight. */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 14px 28px -20px rgba(0, 0, 0, 0.85);
	overflow: hidden;
	isolation: isolate;
	transition:
		transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
		background-color 0.22s ease,
		box-shadow 0.22s ease,
		border-color 0.22s ease;
}

/* Accent rail across the top; grows from the left on hover. */
.e-loop-item.type-career > .e-con::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, #073E5C 0%, #0d6ea1 45%, #FF6A00 100%);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.e-loop-item.type-career > .e-con:hover,
.e-loop-item.type-career > .e-con:focus-within {
	transform: translateY(-4px);
	background: #133049;
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.07),
		0 26px 44px -24px rgba(0, 0, 0, 0.95);
}

.e-loop-item.type-career > .e-con:hover::before,
.e-loop-item.type-career > .e-con:focus-within::before {
	transform: scaleX(1);
}

/* ------------------------------------------------------------- content block */

/* First child flexbox = title + the three meta rows. */
.e-loop-item.type-career > .e-con > .e-con:first-child {
	flex: 1 1 auto;
	min-width: 0;
	gap: 0;
}

/* --------------------------------------------------------------- job title */

.e-loop-item.type-career h2.e-heading-base {
	margin: 0 0 clamp(0.6rem, 1.2vw, 0.8rem);
	font-size: clamp(1rem, 1.25vw, 1.12rem);
	font-weight: 650;
	line-height: 1.32;
	letter-spacing: -0.012em;
	color: #F1F5F9;
	text-wrap: balance;
	overflow-wrap: anywhere;
	transition: color 0.18s ease;
}

.e-loop-item.type-career > .e-con:hover h2.e-heading-base {
	color: #7FC9F0;
}

/* ----------------------------------------------------------- metadata rows */

/* The three label/value rows inside the content block. */
.e-loop-item.type-career > .e-con > .e-con:first-child > .e-con {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	padding: 0.42rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.e-loop-item.type-career > .e-con > .e-con:first-child > .e-con:first-of-type {
	border-top: 0;
	padding-top: 0;
}

/* Leading icon per row. Order follows the template: Location, Type, Experience.
   If the rows are ever reordered the icons simply follow the new order - the
   layout does not break. */
.e-loop-item.type-career > .e-con > .e-con:first-child > .e-con::before {
	content: "";
	/* Elementor styles `.e-con::before` as an absolutely-positioned container
	   overlay. Reset that so the icon is a normal flex item beside the label
	   instead of being stacked on top of it. */
	position: static;
	inset: auto;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	min-height: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.72;
}

/* map pin */
.e-loop-item.type-career > .e-con > .e-con:first-child > .e-con:nth-of-type(1)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9C6DC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* briefcase */
.e-loop-item.type-career > .e-con > .e-con:first-child > .e-con:nth-of-type(2)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9C6DC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}

/* clock */
.e-loop-item.type-career > .e-con > .e-con:first-child > .e-con:nth-of-type(3)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9C6DC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
}

/* Label ("Location:") - quiet micro-label. */
.e-loop-item.type-career > .e-con > .e-con:first-child > .e-con > p.e-paragraph-base:first-child {
	flex: 0 0 auto;
	margin: 0;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.085em;
	text-transform: uppercase;
	color: #8CA6BC;
	white-space: nowrap;
}

/* Value ("Bangalore") - the scannable part. */
.e-loop-item.type-career > .e-con > .e-con:first-child > .e-con > p.e-paragraph-base:last-child {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	text-align: right;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.4;
	color: #E6EDF5;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ actions */

/* Last child flexbox = the two buttons. Pinned to the bottom so cards of
   differing content still align along a common baseline. */
.e-loop-item.type-career > .e-con > .e-con:last-child {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.45rem;
	margin-top: auto;
	padding-top: 0.1rem;
	min-width: 0;
}

.e-loop-item.type-career .elementor-widget-button {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}

.e-loop-item.type-career .elementor-widget-button .elementor-button-wrapper {
	display: flex;
	height: 100%;
}

/* Base button. 4 classes + element beats Elementor's generated 4-class rule. */
.e-loop-item.type-career .elementor-widget-button a.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* 38px on pointer devices; the mobile block below restores 44px so thumb
	   targets stay comfortable where it actually matters. */
	min-height: 38px;
	padding: 0.5rem 0.85rem;
	border-radius: 9px;
	border: 1.5px solid transparent;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		transform 0.18s ease;
}

/* Secondary - "Job Description" (carries .dhai-jd-trigger from the JD viewer). */
.e-loop-item.type-career .elementor-widget-button a.elementor-button.dhai-jd-trigger {
	background-color: transparent;
	color: #DCE8F2;
	fill: #DCE8F2;
	border-color: rgba(255, 255, 255, 0.28);
}

.e-loop-item.type-career .elementor-widget-button a.elementor-button.dhai-jd-trigger:hover {
	background-color: rgba(255, 106, 0, 0.10);
	color: #FF8A33;
	fill: #FF8A33;
	border-color: #FF6A00;
}

/* Primary - "Apply". The mid blue rather than the deep navy: navy is now close
   to the card surface itself and would stop reading as a filled button. */
.e-loop-item.type-career .elementor-widget-button a.elementor-button:not(.dhai-jd-trigger) {
	background-color: #0d6ea1;
	color: #fff;
	fill: #fff;
	border-color: #0d6ea1;
	box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.9);
}

.e-loop-item.type-career .elementor-widget-button a.elementor-button:not(.dhai-jd-trigger):hover {
	background-color: #1690CC;
	border-color: #1690CC;
	color: #fff;
	fill: #fff;
}

.e-loop-item.type-career .elementor-widget-button a.elementor-button:active {
	transform: translateY(1px);
}

.e-loop-item.type-career .elementor-widget-button a.elementor-button:focus-visible {
	outline: 3px solid #FF6A00;
	outline-offset: 2px;
}

/* Keep Elementor's inner span from re-introducing its own colour. */
.e-loop-item.type-career .elementor-widget-button a.elementor-button .elementor-button-text {
	color: inherit;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.e-loop-item.type-career > .e-con {
		padding: clamp(0.95rem, 2.2vw, 1.2rem);
	}
}

@media (max-width: 767px) {
	.e-loop-item.type-career > .e-con {
		border-radius: 14px;
	}

	/* Stack the CTAs so both stay comfortably tappable. */
	.e-loop-item.type-career > .e-con > .e-con:last-child {
		flex-direction: column;
		gap: 0.45rem;
	}

	/* Back to a full-size touch target on phones - the desktop card is tighter
	   because a mouse does not need 44px, but a thumb does. */
	.e-loop-item.type-career .elementor-widget-button a.elementor-button {
		min-height: 44px;
	}

	.e-loop-item.type-career .elementor-widget-button {
		flex: 1 1 auto;
		width: 100%;
	}

	/* Long values wrap under the label rather than cramping against it. */
	.e-loop-item.type-career > .e-con > .e-con:first-child > .e-con {
		flex-wrap: wrap;
		row-gap: 0.15rem;
	}

	.e-loop-item.type-career > .e-con > .e-con:first-child > .e-con > p.e-paragraph-base:last-child {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.e-loop-item.type-career > .e-con,
	.e-loop-item.type-career > .e-con::before,
	.e-loop-item.type-career h2.e-heading-base,
	.e-loop-item.type-career .elementor-widget-button a.elementor-button {
		transition: none;
	}

	.e-loop-item.type-career > .e-con:hover,
	.e-loop-item.type-career > .e-con:focus-within {
		transform: none;
	}

	.e-loop-item.type-career > .e-con::before {
		transform: scaleX(1);
	}
}