/* BJC Content Sections collections styles — v0.6.0 */

.bjc-cs-collection {
	--bjc-cs-border-color: rgba(0,0,0,.13);
	--bjc-cs-border-width: 1px;
	--bjc-cs-panel-radius: 14px;
	--bjc-cs-panel-padding: 20px;
	--bjc-cs-collection-accent: var(--e-global-color-accent, #2f6f4e);
	--bjc-cs-collection-button-text: #ffffff;
	width: 100%;
	color: var(--e-global-color-text, #333333);
}

.bjc-cs-collection-shell {
	width: 100%;
	padding: clamp(2rem, 5vw, 5rem);
	border-radius: 18px;
}

.bjc-cs-collection-intro-wrap {
	width: min(100%, 820px);
	margin: 0 auto clamp(2.5rem, 6vw, 5rem);
	text-align: center;
}

.bjc-cs-collection-heading {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 4vw, 4rem);
	line-height: 1.05;
	font-weight: 700;
	color: var(--e-global-color-text, #222222);
}

.bjc-cs-collection-intro > :first-child,
.bjc-cs-item-description > :first-child { margin-top: 0; }

.bjc-cs-collection-intro > :last-child,
.bjc-cs-item-description > :last-child { margin-bottom: 0; }

.bjc-cs-collection-intro-wrap::after {
	content: "";
	display: block;
	width: 64px;
	height: var(--bjc-cs-border-width);
	margin: 1.5rem auto 0;
	background: var(--bjc-cs-border-color);
}

.bjc-cs-item { min-width: 0; }
.bjc-cs-item-media > .bjc-cs-media > img { display:block; width:100%; height:auto; }

.bjc-cs-item-title {
	margin: .35rem 0 .85rem;
	color: var(--e-global-color-text, #222222);
}

.bjc-cs-item-subtitle {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .72;
	color: var(--e-global-color-text, #333333);
}

.bjc-cs-item-description { color: var(--e-global-color-text, #333333); }

.bjc-cs-item-link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: 1.25rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--bjc-cs-collection-accent);
}

.bjc-cs-item-media-link { display: block; text-decoration: none; }

.bjc-cs-item-media-link img {
	transition: transform .22s ease, box-shadow .22s ease;
}

.bjc-cs-item-media-link:hover img {
	transform: translateY(-4px);
	box-shadow: 0 15px 35px rgba(0,0,0,.14);
}

.bjc-cs-item-action-preview { cursor: default; opacity: .9; }

.bjc-cs-item-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1.25rem;
	padding: .8rem 1.2rem;
	border: 2px solid var(--bjc-cs-collection-accent);
	border-radius: 6px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.2;
	transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.bjc-cs-item-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(0,0,0,.10);
}

.bjc-cs-item-button-filled {
	background: var(--bjc-cs-collection-accent);
	color: var(--bjc-cs-collection-button-text);
}

.bjc-cs-item-button-outline {
	background: transparent;
	color: var(--bjc-cs-collection-accent);
}

.bjc-cs-item-button-soft {
	background: color-mix(in srgb, var(--bjc-cs-collection-accent) 12%, transparent);
	color: var(--bjc-cs-collection-accent);
	border-color: transparent;
}

.bjc-cs-item-button-pill {
	background: var(--bjc-cs-collection-accent);
	color: var(--bjc-cs-collection-button-text);
	border-radius: 999px;
}

.bjc-cs-item-embed { margin-top: 1.5rem; }
.bjc-cs-item-embed > iframe,
.bjc-cs-item-embed > video { max-width: 100%; }

/* Surface styles */
.bjc-cs-surface-soft .bjc-cs-collection-shell {
	background: color-mix(in srgb, currentColor 4%, transparent);
}

.bjc-cs-surface-soft .bjc-cs-item,
.bjc-cs-surface-soft .bjc-cs-accordion {
	background: rgba(255,255,255,.55);
	border-radius: var(--bjc-cs-panel-radius);
}

.bjc-cs-surface-framed .bjc-cs-collection-shell {
	border: var(--bjc-cs-border-width) solid var(--bjc-cs-border-color);
}

.bjc-cs-surface-framed .bjc-cs-item,
.bjc-cs-surface-framed .bjc-cs-accordion {
	border: var(--bjc-cs-border-width) solid var(--bjc-cs-border-color);
	border-radius: var(--bjc-cs-panel-radius);
}

/* Alternating */
.bjc-cs-collection-alternating .bjc-cs-collection-items {
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 8vw, 7rem);
}

.bjc-cs-collection-alternating .bjc-cs-item {
	display: grid;
	grid-template-columns: minmax(180px,.75fr) minmax(0,1.25fr);
	gap: clamp(2rem,6vw,6rem);
	align-items: center;
	padding-block: clamp(1.5rem,3vw,2.5rem);
	border-top: var(--bjc-cs-border-width) solid var(--bjc-cs-border-color);
}

.bjc-cs-collection-alternating .bjc-cs-item:last-child {
	border-bottom: var(--bjc-cs-border-width) solid var(--bjc-cs-border-color);
}

.bjc-cs-collection-alternating .bjc-cs-item-reverse {
	grid-template-columns: minmax(0,1.25fr) minmax(180px,.75fr);
}

.bjc-cs-collection-alternating .bjc-cs-item-reverse .bjc-cs-item-media-link { order: 2; }
.bjc-cs-collection-alternating .bjc-cs-item-reverse .bjc-cs-item-content { order: 1; }

.bjc-cs-surface-soft.bjc-cs-collection-alternating .bjc-cs-item,
.bjc-cs-surface-framed.bjc-cs-collection-alternating .bjc-cs-item {
	padding: var(--bjc-cs-panel-padding);
	border: var(--bjc-cs-border-width) solid var(--bjc-cs-border-color);
}

/* Gallery */
.bjc-cs-collection-grid .bjc-cs-collection-items {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: clamp(2rem,4vw,4rem);
}

.bjc-cs-collection-grid .bjc-cs-item {
	padding: var(--bjc-cs-panel-padding);
	border: var(--bjc-cs-border-width) solid var(--bjc-cs-border-color);
	border-radius: var(--bjc-cs-panel-radius);
	background: color-mix(in srgb, currentColor 2.5%, transparent);
}

.bjc-cs-collection-grid .bjc-cs-item-media {
	overflow: hidden;
	border-radius: max(0px, calc(var(--bjc-cs-panel-radius) - 6px));
}

.bjc-cs-collection-grid .bjc-cs-item-content { padding-top: 1.25rem; }

/* Library */
.bjc-cs-collection-list .bjc-cs-item {
	display: grid;
	grid-template-columns: 150px minmax(0,1fr);
	gap: 2rem;
	align-items: center;
	padding: 2rem 0;
	border-top: var(--bjc-cs-border-width) solid var(--bjc-cs-border-color);
}

.bjc-cs-collection-list .bjc-cs-item:last-child {
	border-bottom: var(--bjc-cs-border-width) solid var(--bjc-cs-border-color);
}

.bjc-cs-surface-soft.bjc-cs-collection-list .bjc-cs-item,
.bjc-cs-surface-framed.bjc-cs-collection-list .bjc-cs-item {
	padding: var(--bjc-cs-panel-padding);
	margin-bottom: 1rem;
	border: var(--bjc-cs-border-width) solid var(--bjc-cs-border-color);
}

.bjc-cs-type-videos.bjc-cs-collection-list .bjc-cs-item {
	grid-template-columns: minmax(220px,.7fr) minmax(0,1.3fr);
}

/* Magazine */
.bjc-cs-collection-magazine .bjc-cs-collection-items {
	display: flex;
	flex-direction: column;
	gap: clamp(4rem,10vw,9rem);
}

.bjc-cs-collection-magazine .bjc-cs-item {
	position: relative;
	display: grid;
	grid-template-columns: minmax(180px,.8fr) minmax(0,1.2fr);
	gap: clamp(2.5rem,8vw,8rem);
	align-items: center;
	padding: clamp(1.5rem,4vw,3rem);
	border-left: var(--bjc-cs-border-width) solid var(--bjc-cs-border-color);
}

.bjc-cs-collection-magazine .bjc-cs-item-reverse {
	grid-template-columns: minmax(0,1.2fr) minmax(180px,.8fr);
	border-left: 0;
	border-right: var(--bjc-cs-border-width) solid var(--bjc-cs-border-color);
}

.bjc-cs-collection-magazine .bjc-cs-item-reverse .bjc-cs-item-media-link { order: 2; }
.bjc-cs-collection-magazine .bjc-cs-item-reverse .bjc-cs-item-content { order: 1; }

.bjc-cs-surface-soft.bjc-cs-collection-magazine .bjc-cs-item,
.bjc-cs-surface-framed.bjc-cs-collection-magazine .bjc-cs-item {
	padding: var(--bjc-cs-panel-padding);
	border: var(--bjc-cs-border-width) solid var(--bjc-cs-border-color);
}

.bjc-cs-item-number {
	font-size: clamp(2.8rem,7vw,7rem);
	line-height: .85;
	font-weight: 700;
	opacity: .10;
	margin-bottom: .5rem;
}

.bjc-cs-collection-magazine .bjc-cs-item-title {
	font-size: clamp(1.8rem,4vw,3.8rem);
	line-height: 1.05;
}

/* Accordion */
.bjc-cs-collection-accordion .bjc-cs-accordion {
	border-top: var(--bjc-cs-border-width) solid var(--bjc-cs-border-color);
}

.bjc-cs-collection-accordion .bjc-cs-accordion:last-child {
	border-bottom: var(--bjc-cs-border-width) solid var(--bjc-cs-border-color);
}

.bjc-cs-surface-soft.bjc-cs-collection-accordion .bjc-cs-accordion,
.bjc-cs-surface-framed.bjc-cs-collection-accordion .bjc-cs-accordion {
	margin-bottom: .75rem;
	padding-inline: var(--bjc-cs-panel-padding);
	border: var(--bjc-cs-border-width) solid var(--bjc-cs-border-color);
}

.bjc-cs-accordion summary {
	display: grid;
	grid-template-columns: auto minmax(0,1fr) auto;
	align-items: center;
	gap: 1.25rem;
	padding: 1.2rem .25rem;
	cursor: pointer;
	list-style: none;
}

.bjc-cs-accordion summary::-webkit-details-marker { display: none; }

.bjc-cs-accordion summary::after {
	content: "+";
	font-size: 1.8rem;
	line-height: 1;
}

.bjc-cs-accordion[open] summary::after { content: "−"; }

.bjc-cs-accordion-thumb {
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: 6px;
}

.bjc-cs-type-books .bjc-cs-accordion-thumb {
	width: 48px;
	height: 70px;
}

.bjc-cs-accordion-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bjc-cs-accordion-title-wrap {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.bjc-cs-accordion summary .bjc-cs-item-title { margin: 0; }

.bjc-cs-accordion-body {
	display: grid;
	grid-template-columns: minmax(180px,.65fr) minmax(0,1.35fr);
	gap: clamp(2rem,5vw,5rem);
	align-items: start;
	padding: 1rem .25rem 2.5rem;
}

.bjc-cs-accordion-body .bjc-cs-item-media { max-width: 360px; }

/* Collection type behaviour */
.bjc-cs-type-books.bjc-cs-collection-alternating .bjc-cs-item-media {
	width: min(100%, 360px);
	margin-inline: auto;
}

.bjc-cs-type-books.bjc-cs-collection-magazine .bjc-cs-item-media {
	width: min(100%, 390px);
	margin-inline: auto;
}

.bjc-cs-type-books.bjc-cs-collection-grid .bjc-cs-item-media {
	aspect-ratio: 2 / 3;
	overflow: hidden;
}

.bjc-cs-type-books.bjc-cs-collection-grid .bjc-cs-item-media > .bjc-cs-media > img,
.bjc-cs-type-books.bjc-cs-collection-grid .bjc-cs-item-media > .bjc-cs-self-video > video {
	height: 100%;
	object-fit: contain;
}

.bjc-cs-type-books .bjc-cs-item-media > .bjc-cs-media > img,
.bjc-cs-type-books .bjc-cs-item-media > .bjc-cs-self-video > video { object-fit:contain; }

.bjc-cs-type-videos .bjc-cs-item-media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.bjc-cs-type-videos .bjc-cs-item-media > .bjc-cs-media > img,
.bjc-cs-type-videos .bjc-cs-item-media > .bjc-cs-self-video > video,
.bjc-cs-type-videos .bjc-cs-item-media > .bjc-cs-embed > iframe,
.bjc-cs-type-videos .bjc-cs-item-media > .bjc-cs-embed > video {
	height: 100%;
	object-fit: cover;
}

.bjc-cs-type-products.bjc-cs-collection-grid .bjc-cs-item-media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.bjc-cs-type-products.bjc-cs-collection-grid .bjc-cs-item-media > .bjc-cs-media > img,
.bjc-cs-type-products.bjc-cs-collection-grid .bjc-cs-item-media > .bjc-cs-self-video > video {
	height: 100%;
	object-fit: contain;
}

.bjc-cs-type-products .bjc-cs-item-subtitle { opacity: .85; }

/* Responsive */
@media (max-width: 767px) {
	.bjc-cs-collection-alternating .bjc-cs-item,
	.bjc-cs-collection-alternating .bjc-cs-item-reverse,
	.bjc-cs-collection-magazine .bjc-cs-item,
	.bjc-cs-collection-magazine .bjc-cs-item-reverse,
	.bjc-cs-collection-list .bjc-cs-item,
	.bjc-cs-accordion-body {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.bjc-cs-collection-alternating .bjc-cs-item-reverse .bjc-cs-item-media-link,
	.bjc-cs-collection-alternating .bjc-cs-item-reverse .bjc-cs-item-content,
	.bjc-cs-collection-magazine .bjc-cs-item-reverse .bjc-cs-item-media-link,
	.bjc-cs-collection-magazine .bjc-cs-item-reverse .bjc-cs-item-content {
		order: initial;
	}

	.bjc-cs-collection-magazine .bjc-cs-item,
	.bjc-cs-collection-magazine .bjc-cs-item-reverse {
		border-left: 0;
		border-right: 0;
		border-top: var(--bjc-cs-border-width) solid var(--bjc-cs-border-color);
	}

	.bjc-cs-surface-soft.bjc-cs-collection-magazine .bjc-cs-item,
	.bjc-cs-surface-framed.bjc-cs-collection-magazine .bjc-cs-item {
		border: var(--bjc-cs-border-width) solid var(--bjc-cs-border-color);
	}

	.bjc-cs-collection-grid .bjc-cs-collection-items { grid-template-columns: 1fr; }
	.bjc-cs-collection-shell { padding: 1.5rem; }
	.bjc-cs-accordion summary { grid-template-columns: auto minmax(0,1fr) auto; gap: .8rem; }
}

/* v0.6.1 separate Collection text background layer */
.bjc-cs-item-content,
.bjc-cs-accordion-title-wrap {
	border-radius: max(0px, calc(var(--bjc-cs-panel-radius) - 4px));
	background-clip: padding-box;
}
.bjc-cs-item-content {
	padding: .01px; /* establishes a distinct paint box without changing existing visual spacing */
}


/* =========================================================
   v0.8.32 COLLECTION MEDIA CONTRACT
   Principal item media supports image, external video,
   self-hosted video and shortcode/embed in every collection design.
   ========================================================= */

.bjc-cs-item-media {
	min-width:0;
}

.bjc-cs-item-media > .bjc-cs-media,
.bjc-cs-item-media > .bjc-cs-embed,
.bjc-cs-item-media > .bjc-cs-self-video {
	display:block;
	width:100%;
	max-width:100%;
	height:auto;
	min-width:0;
	margin:0;
	padding:0;
	border:0;
	outline:0;
	box-shadow:none;
	background:transparent;
	overflow:visible;
}

.bjc-cs-item-media > .bjc-cs-media > img,
.bjc-cs-item-media > .bjc-cs-embed > iframe,
.bjc-cs-item-media > .bjc-cs-embed > video,
.bjc-cs-item-media > .bjc-cs-self-video > video {
	display:block;
	width:100%;
	max-width:100%;
	height:auto;
	margin:0;
	padding:0;
	border:0;
	outline:0;
	box-shadow:none;
}

/* Widescreen collection type gives all direct video media the same 16:9 frame. */
.bjc-cs-type-videos .bjc-cs-item-media > .bjc-cs-embed > iframe,
.bjc-cs-type-videos .bjc-cs-item-media > .bjc-cs-embed > video,
.bjc-cs-type-videos .bjc-cs-item-media > .bjc-cs-self-video > video {
	height:100%;
	aspect-ratio:16 / 9;
	object-fit:cover;
	object-position:center;
}

/* Grid/item clipping belongs to the media frame, never nested plugin children. */
.bjc-cs-collection-grid .bjc-cs-item-media > .bjc-cs-media,
.bjc-cs-collection-grid .bjc-cs-item-media > .bjc-cs-embed,
.bjc-cs-collection-grid .bjc-cs-item-media > .bjc-cs-self-video,
.bjc-cs-type-videos .bjc-cs-item-media > .bjc-cs-media,
.bjc-cs-type-videos .bjc-cs-item-media > .bjc-cs-embed,
.bjc-cs-type-videos .bjc-cs-item-media > .bjc-cs-self-video {
	width:100%;
	height:100%;
}

/* Interactive media is deliberately not wrapped in the item link. */
.bjc-cs-item-media-link > .bjc-cs-item-media {
	width:100%;
}