/* Job Fair: /job-fair image grid + popup. Site theme orange (#ff8a24 → #ff6500 → #ec4e00). */
.kr-jf {
	--jf-orange: #ff6500;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

/* Card: just the image, opens the popup on click */
.kr-jf__card { position: relative; display: block; width: 100%; padding: 0; border: 0; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #f1f5f9; cursor: zoom-in; box-shadow: 0 10px 28px rgba(15,23,42,.12); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.kr-jf__card:hover, .kr-jf__card:focus-visible { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(255,101,0,.22); }
.kr-jf__card:focus-visible { outline: 3px solid var(--jf-orange); outline-offset: 4px; }

.kr-jf__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.kr-jf__card:hover .kr-jf__img, .kr-jf__card:focus-visible .kr-jf__img { transform: scale(1.05); }

/* Popup */
.kr-jf-lightbox { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 2rem 4.5rem; background: rgba(5,14,28,.92); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.kr-jf-lightbox.is-open { opacity: 1; visibility: visible; }
.kr-jf-lightbox__img { display: block; max-width: min(1100px, 100%); max-height: 88vh; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 70px rgba(0,0,0,.5); }
.kr-jf-lightbox__close,
.kr-jf-lightbox__nav { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #172033; cursor: pointer; box-shadow: 0 5px 20px rgba(0,0,0,.3); transition: background .2s, color .2s; }
.kr-jf-lightbox__close:hover,
.kr-jf-lightbox__nav:hover { background: var(--jf-orange, #ff6500); color: #fff; }
.kr-jf-lightbox__close { top: 1rem; right: 1rem; font-size: 1.7rem; line-height: 1; }
.kr-jf-lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 1rem; }
.kr-jf-lightbox__nav--prev { left: 1rem; }
.kr-jf-lightbox__nav--next { right: 1rem; }

@media (max-width: 575.98px) {
	.kr-jf { grid-template-columns: 1fr; gap: 16px; }
	.kr-jf-lightbox { padding: 4rem 1rem; }
	.kr-jf-lightbox__nav { top: auto; bottom: 1rem; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.kr-jf__card, .kr-jf__img, .kr-jf-lightbox { transition: none; }
	.kr-jf__card:hover, .kr-jf__card:hover .kr-jf__img { transform: none; }
}