/**
 * BSM Blocks v0.2.0 — brand styles (front-end AND editor).
 * Self-contained BSM tokens so the kit looks on-brand on ANY theme.
 */
:root {
	--bsmb-bg: #05080f;
	--bsmb-surface: #0d1117;
	--bsmb-surface2: #161b22;
	--bsmb-border: rgba(139, 161, 196, .14);
	--bsmb-text: #cdd5e0;
	--bsmb-muted: #8b97a8;
	--bsmb-bright: #e8ecf2;
	--bsmb-accent: #3b82f6;
	--bsmb-cyan: #22d3ee;
	--bsmb-grad: linear-gradient(115deg, #3b82f6, #22d3ee);
}

/* ---- Section ---- */
.bsm-section {
	width: 100%;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}
.bsm-section--grad {
	background: var(--bsmb-grad);
}
.bsm-section .bsm-inner {
	margin-left: auto;
	margin-right: auto;
}

/* ---- Grid ---- */
.bsm-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 600px) {
	.bsm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bsm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bsm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.bsm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bsm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Card ---- */
.bsm-card {
	background: var(--bsmb-surface);
	border: 1px solid var(--bsmb-border);
	border-radius: 14px;
	padding: 1.6rem;
}
.bsm-card :is(h1, h2, h3, h4) {
	font-size: 1.3rem;
	line-height: 1.25;
	margin: .75rem 0 .5rem;
}
/* Never let a long word blow out a column */
.bsm-grad, .bsm-card :is(h1, h2, h3, h4), .bsm-stat__num { overflow-wrap: break-word; }
.bsm-section--grad .bsm-card { background: rgba(5, 8, 15, .35); border-color: rgba(255, 255, 255, .14); }

/* ---- Eyebrow ---- */
.bsm-eyebrow {
	margin: 0 0 .5rem;
	color: var(--bsmb-cyan);
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* ---- Gradient text helper ---- */
.bsm-grad {
	background: var(--bsmb-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---- Text ---- */
.bsm-lead {
	font-size: 1.15rem;
	line-height: 1.7;
	color: var(--bsmb-bright);
}

/* ---- Buttons ---- */
.bsm-btn {
	display: inline-block;
	background: var(--bsmb-grad);
	color: #05080f;
	font-weight: 600;
	padding: .7rem 1.4rem;
	border-radius: 10px;
	text-decoration: none;
	border: 0;
	line-height: 1.2;
}
.bsm-btn--outline {
	background: transparent;
	color: var(--bsmb-text);
	border: 1px solid rgba(139, 161, 196, .3);
}
.bsm-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
}

/* ---- Stat ---- */
.bsm-stat { display: flex; flex-direction: column; gap: .25rem; }
.bsm-stat__num { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.bsm-stat__label { color: var(--bsmb-muted); font-size: .95rem; }

/* ---- Pill ---- */
.bsm-pill {
	display: inline-block;
	border: 1px solid var(--bsmb-border);
	border-radius: 999px;
	padding: .28rem .8rem;
	margin: 0 .4rem .4rem 0;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .78rem;
	color: var(--bsmb-muted);
}

/* ---- Icon ---- */
.bsm-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.bsm-icon--chip {
	width: 2.2em;
	height: 2.2em;
	border-radius: 14px;
	background: var(--bsmb-surface2);
	border: 1px solid var(--bsmb-border);
}

/* ---- Image ---- */
.bsm-img { max-width: 100%; height: auto; display: block; }
.bsm-img--round { border-radius: 14px; }

/* ---- Spacer ---- */
.bsm-spacer { width: 100%; }

/* ---- FAQ (native <details>) ---- */
.bsm-faq { display: flex; flex-direction: column; gap: .75rem; }
.bsm-faq__item {
	background: var(--bsmb-surface);
	border: 1px solid var(--bsmb-border);
	border-radius: 12px;
	padding: 1rem 1.2rem;
}
.bsm-faq__q {
	cursor: pointer;
	font-weight: 600;
	color: var(--bsmb-bright);
	list-style: none;
	position: relative;
	padding-right: 1.5rem;
}
.bsm-faq__q::-webkit-details-marker { display: none; }
.bsm-faq__q::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 0;
	color: var(--bsmb-cyan);
	font-weight: 400;
	transition: transform .15s;
}
.bsm-faq__item[open] .bsm-faq__q::after { content: "\2212"; }
.bsm-faq__a { margin-top: .6rem; color: var(--bsmb-text); }

/* ---- List (checklist) ---- */
.bsm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.bsm-list li { position: relative; padding-left: 1.7rem; }
.bsm-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--bsmb-cyan); font-weight: 700; }

/* ---- Quote / testimonial ---- */
.bsm-quote { margin: 0; border-left: 3px solid var(--bsmb-accent); padding: .15rem 0 .15rem 1.2rem; }
.bsm-quote__q { margin: 0; font-size: 1.25rem; line-height: 1.5; color: var(--bsmb-bright); font-weight: 500; }
.bsm-quote__cite { margin-top: .6rem; color: var(--bsmb-muted); font-size: .9rem; font-style: normal; }
.bsm-quote__cite::before { content: "\2014\00a0"; }

/* ---- Logo strip ---- */
.bsm-logos { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; }
.bsm-logos .bsm-pill { opacity: .85; }

/* ---- Map ---- */
.bsm-map { position: relative; padding-top: 52%; border-radius: 12px; overflow: hidden; margin: 0; }
.bsm-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bsm-map--ph { padding-top: 0; min-height: 120px; display: flex; align-items: center; justify-content: center; color: var(--bsmb-muted); border: 1px dashed var(--bsmb-border); border-radius: 12px; }

/* ---- Social ---- */
.bsm-social { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.bsm-social__link { display: inline-block; border: 1px solid rgba(139,161,196,.3); border-radius: 999px; padding: .3rem .85rem; font-size: .85rem; color: var(--bsmb-text); text-decoration: none; transition: border-color .15s, color .15s; }
.bsm-social__link:hover { border-color: var(--bsmb-accent); color: var(--bsmb-bright); }

/* ---- Gallery ---- */
.bsm-gallery { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.bsm-gallery img, .bsm-gallery .bsm-img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
@media (min-width: 900px) { .bsm-gallery--3 { grid-template-columns: repeat(3, 1fr); } .bsm-gallery--4 { grid-template-columns: repeat(4, 1fr); } }

/* ---- Video ---- */
.bsm-video { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; margin: 0; }
.bsm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bsm-video--ph { padding-top: 0; min-height: 120px; display: flex; align-items: center; justify-content: center; color: var(--bsmb-muted); border: 1px dashed var(--bsmb-border); border-radius: 12px; }

/* ---- Notice / callout ---- */
.bsm-notice { display: flex; gap: .7rem; align-items: flex-start; padding: 1rem 1.2rem; border-radius: 12px; border: 1px solid var(--bsmb-border); background: var(--bsmb-surface); }
.bsm-notice__icon { flex: 0 0 auto; font-size: 1.1rem; line-height: 1.5; }
.bsm-notice__body { color: var(--bsmb-text); }
.bsm-notice__body :first-child { margin-top: 0; }
.bsm-notice__body :last-child { margin-bottom: 0; }
.bsm-notice--info { border-color: rgba(59,130,246,.45); }
.bsm-notice--success { border-color: rgba(34,197,94,.45); }
.bsm-notice--warning { border-color: rgba(234,179,8,.5); }
.bsm-notice--tip { border-color: rgba(34,211,238,.45); }

/* ---- Gradient sections: inverse, legible "dark ink" treatment ----
   The signature gradient is a light band, so gradient text / filled buttons
   would vanish on it. Inside a gradient section we flip content to dark ink. */
.bsm-section--grad,
.bsm-section--grad :is(h1, h2, h3, h4),
.bsm-section--grad .bsm-lead,
.bsm-section--grad p { color: #05080f; }
.bsm-section--grad .bsm-eyebrow { color: rgba(5, 8, 15, .75); }
.bsm-section--grad .bsm-grad {
	background: none;
	-webkit-text-fill-color: #05080f;
	color: #05080f;
}
.bsm-section--grad .bsm-btn { background: #05080f; color: #e8ecf2; }
.bsm-section--grad .bsm-btn--outline { background: transparent; color: #05080f; border-color: rgba(5, 8, 15, .45); }
.bsm-section--grad .bsm-stat__label { color: rgba(5, 8, 15, .7); }
.bsm-section--grad .bsm-pill { color: rgba(5, 8, 15, .8); border-color: rgba(5, 8, 15, .25); }

/* ---- Zero-JS entrance animations (CSS scroll-driven) + hover ---- */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.bsm-anim { animation: linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
		.bsm-anim--fade-up { animation-name: bsmFadeUp; }
		.bsm-anim--fade-in { animation-name: bsmFadeIn; }
		.bsm-anim--zoom-in { animation-name: bsmZoomIn; }
	}
	@keyframes bsmFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
	@keyframes bsmFadeIn { from { opacity: 0; } to { opacity: 1; } }
	@keyframes bsmZoomIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
}
.bsm-hover--lift { transition: transform .2s ease, box-shadow .2s ease; }
.bsm-hover--lift:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,.4); }
.bsm-hover--glow { transition: box-shadow .2s ease; }
.bsm-hover--glow:hover { box-shadow: 0 0 0 1px rgba(59,130,246,.6), 0 10px 34px rgba(59,130,246,.25); }

/* ---- Editor niceties ---- */
.editor-styles-wrapper .bsm-btn-wrap { display: inline-block; }
.editor-styles-wrapper .bsm-section { outline: 1px dashed var(--bsmb-border); }
.editor-styles-wrapper .bsm-anim { animation: none !important; opacity: 1 !important; transform: none !important; }