/**
 * JuryBoard Feature Grid — frontend styles.
 *
 * Every value that the Elementor controls can change is exposed as a custom
 * property on .jb-feature-grid. The controls write those properties on a
 * higher-specificity selector ({{WRAPPER}} .jb-feature-grid), so the values
 * below act purely as out-of-the-box defaults.
 *
 * Do not add responsive overrides here for anything a control sets a default
 * for — Elementor emits its desktop value at a higher specificity and would
 * win at every breakpoint. Responsive defaults for those live in the PHP
 * control definitions instead.
 */

.jb-feature-grid {
	/* Layout */
	--jb-fg-columns: 3;
	--jb-fg-col-gap: 20px;
	--jb-fg-row-gap: 20px;
	--jb-fg-card-dir: row;

	/* Card */
	--jb-fg-card-bg: #ffffff;
	--jb-fg-card-bg-hover: #ffffff;
	--jb-fg-border-width: 1px;
	--jb-fg-border-color: #e6eaf1;
	--jb-fg-border-color-hover: #cfdbef;
	--jb-fg-radius: 14px;
	--jb-fg-pad-top: 30px;
	--jb-fg-pad-right: 28px;
	--jb-fg-pad-bottom: 30px;
	--jb-fg-pad-left: 28px;
	--jb-fg-min-height: 160px;
	--jb-fg-shadow: 0 1px 3px rgba(15, 23, 42, .05);
	--jb-fg-shadow-hover: 0 12px 28px rgba(15, 23, 42, .1);
	--jb-fg-lift: -3px;

	/* Icon */
	--jb-fg-icon-box: 64px;
	--jb-fg-icon-size: 56px;
	--jb-fg-icon-gap: 20px;
	--jb-fg-accent: #0b4fbd;

	/* Title */
	--jb-fg-title-color: #101f44;
	--jb-fg-title-size: 20px;
	--jb-fg-title-weight: 700;
	--jb-fg-title-lh: 1.3;
	--jb-fg-title-ls: -.015em;
	--jb-fg-title-gap: 8px;

	/* Description */
	--jb-fg-text-color: #5a6675;
	--jb-fg-text-size: 16px;
	--jb-fg-text-lh: 1.6;

	/* Play badge */
	--jb-fg-play-size: 26px;
	--jb-fg-play-offset: 16px;
	--jb-fg-play-bg: #0b4fbd;
	--jb-fg-play-color: #ffffff;
	--jb-fg-play-ring: #ffffff;

	/* Lightbox — read off this element by the JS and copied onto .jb-vl. */
	--jb-vl-overlay: rgba(8, 15, 31, .88);
	--jb-vl-max-width: 980px;
	--jb-vl-radius: 12px;
	--jb-vl-ratio: 16 / 9;
	--jb-vl-close-color: #ffffff;
	--jb-vl-close-bg: rgba(0, 0, 0, .55);

	display: grid;
	grid-template-columns: repeat(var(--jb-fg-columns), minmax(0, 1fr));
	column-gap: var(--jb-fg-col-gap);
	row-gap: var(--jb-fg-row-gap);
	width: 100%;
}

/* ---------------------------------------------------------------- Card */

.jb-feature-grid .jb-feature-card {
	position: relative;
	display: flex;
	flex-direction: var(--jb-fg-card-dir);
	align-items: flex-start;
	gap: var(--jb-fg-icon-gap);
	box-sizing: border-box;
	min-height: var(--jb-fg-min-height);
	padding: var(--jb-fg-pad-top) var(--jb-fg-pad-right) var(--jb-fg-pad-bottom) var(--jb-fg-pad-left);
	background: var(--jb-fg-card-bg);
	border: var(--jb-fg-border-width) solid var(--jb-fg-border-color);
	border-radius: var(--jb-fg-radius);
	box-shadow: var(--jb-fg-shadow);
	color: inherit;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

.jb-feature-grid .jb-feature-card--link {
	cursor: pointer;
}

.jb-feature-grid .jb-feature-card--link:hover,
.jb-feature-grid .jb-feature-card--link:focus-visible {
	background: var(--jb-fg-card-bg-hover);
	border-color: var(--jb-fg-border-color-hover);
	box-shadow: var(--jb-fg-shadow-hover);
	transform: translateY(var(--jb-fg-lift));
}

.jb-feature-grid .jb-feature-card--link:focus-visible {
	outline: 2px solid var(--jb-fg-accent);
	outline-offset: 3px;
}

.jb-feature-grid .jb-feature-card__body {
	min-width: 0;
}

/*
 * The corner badge overhangs the content box by (size + offset − bottom
 * padding). Reserve exactly that much (plus 6px of breathing room) under the
 * text on badge cards, so the badge can never land on the description's last
 * line. This is necessary, not defensive: with the stock values a single-column
 * layout otherwise clears the badge by 3px at best and overlaps it at worst.
 * Collapses to 0 once the bottom padding alone is big enough to clear it.
 */
.jb-feature-grid .jb-feature-card--badge .jb-feature-card__body::after {
	content: "";
	display: block;
	height: max(0px, calc(var(--jb-fg-play-size) + var(--jb-fg-play-offset) + 6px - var(--jb-fg-pad-bottom)));
}

/* ---------------------------------------------------------------- Icon */

.jb-feature-grid .jb-icon {
	flex: 0 0 var(--jb-fg-icon-box);
	width: var(--jb-fg-icon-box);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	color: var(--jb-fg-accent);
}

.jb-feature-grid .jb-icon img {
	display: block;
	width: var(--jb-fg-icon-size);
	height: auto;
	max-width: 100%;
}

/* Kept so hand-pasted inline SVG icons still render like the original block. */
.jb-feature-grid .jb-icon svg {
	width: var(--jb-fg-icon-size);
	height: var(--jb-fg-icon-size);
	stroke: currentColor;
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.jb-feature-grid .jb-icon svg circle,
.jb-feature-grid .jb-icon svg path {
	vector-effect: non-scaling-stroke;
}

/* ----------------------------------------------------------- Play badge

   Anchored to the card's bottom-right corner rather than over the icon, so it
   never covers the icon art. It sits inside the padding gutter, and ragged
   right-hand text edges keep it clear of the description's last line. */

.jb-feature-grid .jb-play {
	position: absolute;
	right: var(--jb-fg-play-offset);
	bottom: var(--jb-fg-play-offset);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--jb-fg-play-size);
	height: var(--jb-fg-play-size);
	border-radius: 50%;
	background: var(--jb-fg-play-bg);
	color: var(--jb-fg-play-color);
	box-shadow: 0 0 0 2px var(--jb-fg-play-ring), 0 3px 10px rgba(15, 23, 42, .22);
	opacity: 0;
	transform: scale(.82);
	transition: opacity .22s ease, transform .22s ease;
	pointer-events: none;
}

.jb-feature-grid .jb-play svg {
	width: 42%;
	height: 42%;
	fill: currentColor;
	stroke: none;
}

.jb-feature-grid--badge-always .jb-play,
.jb-feature-grid .jb-feature-card--link:hover .jb-play,
.jb-feature-grid .jb-feature-card--link:focus-visible .jb-play {
	opacity: 1;
	transform: scale(1);
}

.jb-feature-grid--badge-none .jb-play {
	display: none;
}

/* ---------------------------------------------------------------- Text */

.jb-feature-grid .jb-feature-card__title {
	margin: 0 0 var(--jb-fg-title-gap);
	color: var(--jb-fg-title-color);
	font-size: var(--jb-fg-title-size);
	font-weight: var(--jb-fg-title-weight);
	line-height: var(--jb-fg-title-lh);
	letter-spacing: var(--jb-fg-title-ls);
}

.jb-feature-grid .jb-feature-card__text {
	margin: 0;
	color: var(--jb-fg-text-color);
	font-size: var(--jb-fg-text-size);
	font-weight: 400;
	line-height: var(--jb-fg-text-lh);
}

/* Type-scale defaults only — no control sets these, so overriding by
   breakpoint here is safe. */
@media (max-width: 1024px) {
	.jb-feature-grid {
		--jb-fg-title-size: 19px;
		--jb-fg-text-size: 15.5px;
	}
}

@media (max-width: 767px) {
	.jb-feature-grid {
		--jb-fg-title-size: 18.5px;
		--jb-fg-text-size: 15px;
	}
}

@media (max-width: 420px) {
	.jb-feature-grid {
		--jb-fg-card-dir: column;
		--jb-fg-icon-gap: 14px;
	}

	.jb-feature-grid .jb-icon {
		justify-content: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jb-feature-grid .jb-feature-card,
	.jb-feature-grid .jb-play {
		transition: none;
	}

	.jb-feature-grid .jb-feature-card--link:hover,
	.jb-feature-grid .jb-feature-card--link:focus-visible {
		transform: none;
	}
}

/* ------------------------------------------------------------ Lightbox */

.jb-vl {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

.jb-vl.is-open {
	display: flex;
}

.jb-vl__backdrop {
	position: absolute;
	inset: 0;
	background: var(--jb-vl-overlay, rgba(8, 15, 31, .88));
	opacity: 0;
	transition: opacity .25s ease;
	cursor: pointer;
}

.jb-vl.is-visible .jb-vl__backdrop {
	opacity: 1;
}

.jb-vl__dialog {
	position: relative;
	width: 100%;
	max-width: var(--jb-vl-max-width, 980px);
	opacity: 0;
	transform: translateY(14px) scale(.985);
	transition: opacity .25s ease, transform .25s ease;
}

.jb-vl.is-visible .jb-vl__dialog {
	opacity: 1;
	transform: none;
}

.jb-vl__frame {
	position: relative;
	aspect-ratio: var(--jb-vl-ratio, 16 / 9);
	overflow: hidden;
	background: #000;
	border-radius: var(--jb-vl-radius, 12px);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.jb-vl__frame iframe,
.jb-vl__frame video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.jb-vl__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--jb-vl-close-bg, rgba(0, 0, 0, .55));
	color: var(--jb-vl-close-color, #fff);
	cursor: pointer;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background-color .2s ease, transform .2s ease;
}

.jb-vl__close:hover,
.jb-vl__close:focus-visible {
	background: #000;
	transform: scale(1.06);
}

.jb-vl__close svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
}

html.jb-vl-lock {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.jb-vl__backdrop,
	.jb-vl__dialog,
	.jb-vl__close {
		transition: none;
	}
}