/* Popup board component styles (reusable) */

.board-popup{
	position:fixed;
	inset:0;
	display:grid;
	place-items:center;
	pointer-events:none;
	z-index:1200;
	transition:opacity .28s;
	opacity:0;
	/* subtle dark overlay by default (becomes active when visible) */
	background: transparent;
}
.board-popup.hidden{display:none;opacity:0}
.board-popup.visible{pointer-events:auto;opacity:1}
/* overlay element that provides the darkened + blurred background; animatable via opacity */
.board-overlay{
	position:absolute;inset:0;z-index:0;background:rgba(4,6,12,0.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity 1.2s cubic-bezier(.2,.9,.2,1);pointer-events:none}
.board-popup.visible .board-overlay{opacity:1}
.board-inner{
	width:min(80vw,680px);
	max-width:92%;
	background:linear-gradient(180deg, #0f1724, #071027);
	border-radius:14px; /* match site rounded panels */
	/* stronger multi-layer shadow so it remains visible over a blurred overlay */
	box-shadow:
		0 12px 30px rgba(2,6,23,0.55),
		0 30px 80px rgba(2,6,23,0.65),
		0 0 40px rgba(255,106,0,0.06);
		padding:2.5rem; /* increased interior margin as requested (≈double) */
	transform-origin:center center;
	cursor:pointer;
	border:3px solid #ff6a00; /* institutional orange, 3px */
		position:relative; /* to sit above overlay */
		z-index:1;
}
.board-inner img{width:100%;height:auto;display:block;border-radius:10px}
.board-close{position:absolute;top:1rem;right:1rem;background:rgba(0,0,0,0.35);border:0;color:rgba(255,255,255,0.95);font-size:1.4rem;cursor:pointer;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;transition:background .4s}

/* small screens tweaks */
@media (max-width:640px){
	.board-inner{width:92vw;border-radius:12px;padding:.9rem}
	.board-inner h3{font-size:1rem}
	.board-inner p{font-size:.92rem}
}

/* highlight effect on target */
.board-highlight{box-shadow:0 0 0 10px rgba(255,106,0,0.12);transform:translateZ(0);transition:box-shadow .9s}

/* ensure the popup content text uses good contrast */
.board-inner h3{color:#ffffff;margin:0 0 .25rem 0}
.board-inner p{color:rgba(255,255,255,0.88);margin:0}

/* IoT Ready badge — reuse site's gradient tokens */
.popup-badge{
	display:inline-block;
	padding:6px 14px;
	border-radius:999px;
	font-weight:800;
	color:#0b0b0b;
	background:linear-gradient(90deg,var(--color-primary),var(--color-primary-accent));
	box-shadow:0 8px 28px rgba(255,106,0,0.18);
	margin-bottom:0.75rem;
	letter-spacing:0.6px;
}