/* Cobra Related Jobs — "Recommended Content" card */

/* Pop-in / pop-out: JS adds .crj-animate (initial hidden state) then toggles
   .crj-in as the card scrolls in and out of view. Without JS the card just
   shows normally (no .crj-animate class is added). */
.crj-card.crj-animate{
	opacity:0;
	transform:scale(.85) translateY(16px);
	transition:opacity .45s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
	will-change:opacity, transform;
}
.crj-card.crj-animate.crj-in{
	opacity:1;
	transform:scale(1) translateY(0);
}

.crj-card{
	display:flex;
	align-items:stretch;
	gap:0;
	background:#fff;
	border:1px solid #eee;
	border-left:6px solid #d9463e;
	border-radius:18px;
	box-shadow:0 10px 30px rgba(0,0,0,.08);
	overflow:hidden;
	margin:34px 0;
}
.crj-thumb{
	flex:0 0 42%;
	max-width:42%;
	display:block;
	position:relative;
	background:linear-gradient(135deg,#1f4d3a,#0f3024);
	min-height:200px;
	text-decoration:none;
}
.crj-thumb .crj-img,
.crj-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
/* Branded fallback when a related post has no featured image */
.crj-fallback{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	gap:10px;
	padding:22px;
	color:#fff;
	background:linear-gradient(135deg,#1f4d3a,#0f3024);
}
.crj-fallback-cat{
	align-self:flex-start;
	background:#e0a83c;
	color:#1a1000;
	font-size:11px;
	font-weight:800;
	letter-spacing:.04em;
	text-transform:uppercase;
	padding:5px 10px;
	border-radius:6px;
}
.crj-fallback-title{
	font-size:19px;
	font-weight:800;
	line-height:1.25;
}
.crj-body{
	flex:1 1 auto;
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:14px;
	padding:26px 28px;
	min-width:0;
}
.crj-badge{
	align-self:flex-start;
	background:#d9463e;
	color:#fff;
	font-size:12px;
	font-weight:800;
	letter-spacing:.06em;
	text-transform:uppercase;
	padding:8px 16px;
	border-radius:999px;
}
.crj-title{
	margin:0;
	font-size:1.6rem;
	line-height:1.25;
	font-weight:800;
	color:#0d1b3e;
}
.crj-title a{
	color:inherit;
	text-decoration:none;
}
.crj-title a:hover{ text-decoration:underline; }
.crj-excerpt{
	margin:0;
	color:#5a6473;
	font-size:1.05rem;
	line-height:1.5;
}
.crj-btn{
	position:relative;
	overflow:hidden;
	display:block;
	width:100%;
	box-sizing:border-box;
	margin-top:6px;
	padding:16px 20px;
	background:#d9463e;
	color:#fff;
	text-align:center;
	text-decoration:none;
	font-weight:700;
	font-size:1.05rem;
	border-radius:999px;
	box-shadow:0 4px 14px rgba(217,70,62,.35);
	transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
	animation:crj-pulse 2.4s ease-in-out infinite;
}
/* Shimmer sweep that runs across the button periodically (also visible on mobile). */
.crj-btn::before{
	content:"";
	position:absolute;
	top:0;
	left:-150%;
	width:60%;
	height:100%;
	background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%);
	transform:skewX(-20deg);
	animation:crj-shine 3.6s ease-in-out infinite;
}
/* The label sits above the shimmer. */
.crj-btn-label{ position:relative; z-index:1; }
.crj-btn:hover{
	background:#bf3a33;
	color:#fff;
	transform:translateY(-2px);
	box-shadow:0 8px 22px rgba(217,70,62,.5);
}
.crj-btn:hover::before{ animation:crj-shine .8s ease; }
@keyframes crj-pulse{
	0%,100%{ box-shadow:0 4px 14px rgba(217,70,62,.35); }
	50%{ box-shadow:0 6px 20px rgba(217,70,62,.55); }
}
@keyframes crj-shine{
	0%{ left:-150%; }
	60%,100%{ left:150%; }
}
/* Note: intentionally NOT gated behind prefers-reduced-motion — this CTA effect is
   a deliberate design choice and should stay visible even when the OS "Reduce
   Motion" setting is on. */

@media (max-width:640px){
	.crj-card{ flex-direction:column; border-left-width:5px; }
	.crj-thumb{ flex-basis:auto; max-width:100%; min-height:180px; }
	.crj-body{ padding:22px 20px; }
	.crj-title{ font-size:1.35rem; }
}