/* JD Card Nav 0.1.0
 * Every size is a plain number times --jdcn-u (1px, or a slice of the screen
 * width in "scale" mode). The numbers come from Settings > Card Nav.
 */

.jdcn, .jdcn-cards { --jdcn-font: inherit; box-sizing: border-box; }
.jdcn *, .jdcn *::before, .jdcn *::after,
.jdcn-cards *, .jdcn-cards *::before, .jdcn-cards *::after { box-sizing: border-box; }

/* ------------------------------------------------------------ nav row */
.jdcn {
	position: relative;
	background: var(--jdcn-nav-bg, transparent);
	font-family: var(--jdcn-font);
	width: 100%;
}
.jdcn-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: var(--jdcn-align, center);
	gap: calc(var(--jdcn-gap, 14) * var(--jdcn-u, 1px));
}
.jdcn-item { position: relative; margin: 0; padding: 0; }

.jdcn-link {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: calc(var(--jdcn-card-w, 150) * var(--jdcn-u, 1px));
	color: var(--jdcn-text, #fff);
	text-decoration: none;
	background: var(--jdcn-card-bg, #1b1b20);
	border: 1px solid var(--jdcn-card-border, transparent);
	border-radius: calc(var(--jdcn-radius, 10) * var(--jdcn-u, 1px));
	overflow: hidden;
	position: relative;
	transition: transform .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
}
.jdcn-img {
	display: block;
	height: calc(var(--jdcn-img-h, 84) * var(--jdcn-u, 1px));
	overflow: hidden;
	background: rgba(255, 255, 255, .04);
}
.jdcn-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.jdcn-label {
	display: block;
	padding: calc(8 * var(--jdcn-u, 1px)) calc(6 * var(--jdcn-u, 1px));
	font-size: calc(var(--jdcn-font-size, 15) * var(--jdcn-u, 1px));
	font-weight: var(--jdcn-font-weight, 600);
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.jdcn-upper .jdcn-label { text-transform: uppercase; letter-spacing: .06em; }

/* Label over the image: a dark band along the bottom of the card. */
.jdcn-label-over.jdcn-style-cards .jdcn-link .jdcn-label {
	position: absolute; left: 0; right: 0; bottom: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, .75));
	padding-top: calc(18 * var(--jdcn-u, 1px));
}

/* Text only: no card box, just words. */
.jdcn-style-text .jdcn-link { width: auto; background: none; border-color: transparent; }
.jdcn-style-text .jdcn-label { padding: calc(6 * var(--jdcn-u, 1px)) calc(4 * var(--jdcn-u, 1px)); }

/* Hover and current page */
.jdcn-link:hover, .jdcn-link:focus-visible,
.jdcn-item.is-current > .jdcn-link, .jdcn-item.is-current-parent > .jdcn-link {
	color: var(--jdcn-hover, #ffd23f);
	border-color: var(--jdcn-hover, #ffd23f);
}
.jdcn-link:focus-visible { outline: 2px solid var(--jdcn-hover, #ffd23f); outline-offset: 2px; }
.jdcn-fx-lift .jdcn-link:hover { transform: translateY(calc(-4 * var(--jdcn-u, 1px))); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
.jdcn-fx-glow .jdcn-link:hover { box-shadow: 0 0 calc(18 * var(--jdcn-u, 1px)) var(--jdcn-hover, #ffd23f); }
.jdcn-fx-zoom .jdcn-link:hover .jdcn-img img { transform: scale(1.08); }

/* ------------------------------------------------------------ drop-downs */
.jdcn-sub {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 50;
	list-style: none;
	margin: 0;
	padding: calc(8 * var(--jdcn-u, 1px)) 0;
	min-width: max(100%, calc(220 * var(--jdcn-u, 1px)));
	background: var(--jdcn-drop-bg, #16161a);
	border-radius: 0 0 calc(var(--jdcn-radius, 10) * var(--jdcn-u, 1px)) calc(var(--jdcn-radius, 10) * var(--jdcn-u, 1px));
	box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}
.jdcn-item:hover > .jdcn-sub,
.jdcn-item:focus-within > .jdcn-sub,
.jdcn-item.is-sub-open > .jdcn-sub { display: block; }
.jdcn-sub .jdcn-link {
	width: auto;
	background: none;
	border: 0;
	border-radius: 0;
	transform: none !important;
	box-shadow: none !important;
}
.jdcn-sub .jdcn-label { text-align: left; padding: calc(8 * var(--jdcn-u, 1px)) calc(16 * var(--jdcn-u, 1px)); white-space: nowrap; }

/* The small arrow button that opens a drop-down by keyboard or touch.
   Hidden on desktop (hover and focus-within do the work), shown on phones. */
.jdcn-subtoggle {
	display: none;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: var(--jdcn-text, #fff);
	cursor: pointer;
}
.jdcn-subtoggle span {
	width: 8px; height: 8px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.jdcn-item.is-sub-open > .jdcn-subtoggle span { transform: rotate(-135deg); }

/* ------------------------------------------------------------ phone menu button */
.jdcn-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--jdcn-card-bg, #1b1b20);
	color: var(--jdcn-text, #fff);
	border: 1px solid var(--jdcn-card-border, transparent);
	border-radius: 8px;
	font: inherit;
	font-family: var(--jdcn-font);
	font-weight: 600;
	cursor: pointer;
}
.jdcn-burger, .jdcn-burger::before, .jdcn-burger::after {
	display: block; width: 20px; height: 2px; background: currentColor; content: ""; position: relative;
	transition: transform .2s ease, background .2s ease;
}
.jdcn-burger::before { position: absolute; top: -6px; }
.jdcn-burger::after  { position: absolute; top: 6px; }
.jdcn.is-open .jdcn-burger { background: transparent; }
.jdcn.is-open .jdcn-burger::before { transform: translateY(6px) rotate(45deg); }
.jdcn.is-open .jdcn-burger::after  { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------ card grids */
.jdcn-cards { container-type: inline-size; width: 100%; font-family: var(--jdcn-font); }
.jdcn-cards-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--jdcn-cols, 3), minmax(0, 1fr));
	gap: calc(var(--jdcn-grid-gap, 24) * var(--jdcn-u, 1px));
}
@container (max-width: 760px) { .jdcn-cards-grid { grid-template-columns: repeat(min(var(--jdcn-cols, 3), 2), minmax(0, 1fr)); } }
@container (max-width: 460px) { .jdcn-cards-grid { grid-template-columns: minmax(0, 1fr); } }

.jdcn-card { margin: 0; padding: 0; display: flex; }
.jdcn-card-link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: var(--jdcn-text, #fff);
	text-decoration: none;
	background: var(--jdcn-card-bg, #1b1b20);
	border: 1px solid var(--jdcn-card-border, transparent);
	border-radius: calc(var(--jdcn-radius, 10) * var(--jdcn-u, 1px));
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.jdcn-card-img {
	display: block;
	aspect-ratio: var(--jdcn-ratio, 16/9);
	overflow: hidden;
	background: rgba(255, 255, 255, .04);
}
.jdcn-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.jdcn-card-body {
	display: flex;
	flex-direction: column;
	gap: calc(8 * var(--jdcn-u, 1px));
	padding: calc(16 * var(--jdcn-u, 1px)) calc(18 * var(--jdcn-u, 1px)) calc(18 * var(--jdcn-u, 1px));
	flex: 1 1 auto;
}
.jdcn-card-title { font-size: calc(var(--jdcn-grid-title, 20) * var(--jdcn-u, 1px)); font-weight: 700; line-height: 1.25; }
.jdcn-card-text  { font-size: calc(var(--jdcn-grid-text, 15) * var(--jdcn-u, 1px)); line-height: 1.5; opacity: .85; }
.jdcn-card-more {
	margin-top: auto;
	align-self: flex-start;
	font-size: calc(var(--jdcn-grid-text, 15) * var(--jdcn-u, 1px));
	font-weight: 700;
	color: var(--jdcn-hover, #ffd23f);
}
.jdcn-card-more::after { content: " \2192"; }

.jdcn-card-link:hover, .jdcn-card-link:focus-visible { border-color: var(--jdcn-hover, #ffd23f); }
.jdcn-card-link:focus-visible { outline: 2px solid var(--jdcn-hover, #ffd23f); outline-offset: 2px; }
.jdcn-fx-lift .jdcn-card-link:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
.jdcn-fx-glow .jdcn-card-link:hover { box-shadow: 0 0 22px var(--jdcn-hover, #ffd23f); }
.jdcn-fx-zoom .jdcn-card-link:hover .jdcn-card-img img { transform: scale(1.06); }

/* ------------------------------------------------------------ misc */
.jdcn-notice { padding: 10px 14px; border: 1px dashed #c9a400; color: inherit; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
	.jdcn *, .jdcn-cards * { transition: none !important; }
	.jdcn-link:hover, .jdcn-card-link:hover { transform: none !important; }
}