/*
 * Story Buddy — shared digital product mockups
 * Used by hero, cta-banner, and any block that needs a visual.
 * Sizes: sm (110×140), md (160×210), lg (220×280) driven by CSS vars.
 */

.sb-mockup {
	--sbm-w: 160px;
	--sbm-h: 210px;
	--sbm-accent: var(--color-accent, #D95F3B);
	--sbm-accent-dark: var(--color-coral-dark, #B84D2C);
	--sbm-accent-light: var(--color-coral-light, #F2B49C);
	--sbm-tint: var(--color-tint, #FDF1ED);
	--sbm-surface: #fff;
	--sbm-ink: #1E1E2E;
	--sbm-ink-muted: #6B7280;
	--sbm-border: #E8E4DF;
	width: var(--sbm-w);
	height: var(--sbm-h);
	position: relative;
	flex-shrink: 0;
	font-family: var(--font-sans, inherit);
}
/* Force span descendants to behave as blocks — the mockup markup nests spans
   for structural reasons, but we need them sized / positioned like divs. */
.sb-mockup span {
	display: block;
}
.sb-mockup-sm { --sbm-w: 110px; --sbm-h: 145px; }
.sb-mockup-md { --sbm-w: 160px; --sbm-h: 210px; }
.sb-mockup-lg { --sbm-w: 220px; --sbm-h: 285px; }

/* ── Ebook (portrait) ──────────────────────────────────── */
.sb-mockup-ebook .sbm-spine {
	position: absolute;
	left: 0;
	top: calc(var(--sbm-h) * 0.014);
	width: calc(var(--sbm-w) * 0.13);
	height: calc(var(--sbm-h) * 0.986);
	background: var(--sbm-accent-dark);
	border-radius: 2px 0 0 2px;
}
.sb-mockup-ebook .sbm-pages {
	position: absolute;
	right: -3px;
	top: calc(var(--sbm-h) * 0.014);
	width: 5px;
	height: calc(var(--sbm-h) * 0.986);
	background: repeating-linear-gradient(to bottom, #fff 0, #fff 2.5px, #d0cde0 2.5px, #d0cde0 3.5px);
	border-radius: 0 2px 2px 0;
}
.sb-mockup-ebook .sbm-cover {
	position: absolute;
	left: calc(var(--sbm-w) * 0.10);
	top: 0;
	width: calc(var(--sbm-w) * 0.90);
	height: 100%;
	background: var(--sbm-accent);
	border-radius: 0 3px 3px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px;
	gap: 8px;
	overflow: hidden;
}
.sb-mockup-ebook .sbm-cover::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 35%;
	background: rgb(255 255 255 / 0.07);
}
.sb-mockup-ebook .sbm-icon {
	width: calc(var(--sbm-w) * 0.18);
	height: calc(var(--sbm-w) * 0.18);
	border-radius: 6px;
	background: rgb(255 255 255 / 0.14);
	position: relative;
	z-index: 1;
}
.sb-mockup-ebook .sbm-title {
	font-size: calc(var(--sbm-w) * 0.085);
	font-weight: 600;
	color: #fff;
	text-align: center;
	line-height: 1.3;
	position: relative;
	z-index: 1;
	font-family: var(--font-display, serif);
}
.sb-mockup-ebook .sbm-sub {
	font-size: calc(var(--sbm-w) * 0.065);
	color: rgb(255 255 255 / 0.7);
	text-align: center;
	position: relative;
	z-index: 1;
}

/* ── Guide (stacked pages) ─────────────────────────────── */
.sb-mockup-guide .sbm-s1,
.sb-mockup-guide .sbm-s2 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--sbm-border);
	border-radius: 3px;
	border: 1px solid rgb(0 0 0 / 0.06);
}
.sb-mockup-guide .sbm-s1 { top: 6px; left: 4px; }
.sb-mockup-guide .sbm-s2 { top: 3px; left: 2px; background: #f0efe9; }
.sb-mockup-guide .sbm-body {
	position: relative;
	width: 100%;
	height: 100%;
	background: var(--sbm-surface);
	border: 1px solid rgb(0 0 0 / 0.1);
	border-radius: 3px;
	overflow: hidden;
}
.sb-mockup-guide .sbm-top {
	height: 8px;
	background: var(--sbm-accent);
}
.sb-mockup-guide .sbm-inner {
	padding: 14px;
}
.sb-mockup-guide .sbm-cat {
	font-size: calc(var(--sbm-w) * 0.055);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var(--sbm-accent);
	margin-bottom: 7px;
}
.sb-mockup-guide .sbm-title {
	font-size: calc(var(--sbm-w) * 0.078);
	font-weight: 600;
	color: var(--sbm-ink);
	line-height: 1.35;
	margin-bottom: 10px;
	font-family: var(--font-display, serif);
}
.sb-mockup-guide .sbm-line {
	height: 4px;
	border-radius: 2px;
	background: #f0efe9;
	margin-bottom: 5px;
}

/* ── Workbook (softcover + fields) ─────────────────────── */
.sb-mockup-workbook .sbm-spine {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(var(--sbm-w) * 0.075);
	height: 100%;
	background: var(--sbm-accent-light);
	border-radius: 2px 0 0 2px;
}
.sb-mockup-workbook .sbm-body {
	position: absolute;
	left: calc(var(--sbm-w) * 0.055);
	top: 0;
	width: calc(var(--sbm-w) * 0.945);
	height: 100%;
	background: var(--sbm-surface);
	border: 1px solid rgb(0 0 0 / 0.14);
	border-radius: 0 3px 3px 0;
	overflow: hidden;
}
.sb-mockup-workbook .sbm-header {
	height: 35%;
	background: var(--sbm-accent);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 10px 12px;
}
.sb-mockup-workbook .sbm-tag {
	font-size: calc(var(--sbm-w) * 0.055);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgb(255 255 255 / 0.75);
}
.sb-mockup-workbook .sbm-title {
	font-size: calc(var(--sbm-w) * 0.08);
	font-weight: 600;
	color: #fff;
	line-height: 1.3;
	margin-top: 3px;
	font-family: var(--font-display, serif);
}
.sb-mockup-workbook .sbm-content {
	padding: 10px 12px;
}
.sb-mockup-workbook .sbm-field {
	border: 1px solid var(--sbm-border);
	border-radius: 3px;
	height: 18px;
	margin-bottom: 7px;
}
.sb-mockup-workbook .sbm-prog {
	height: 5px;
	background: #f0efe9;
	border-radius: 2px;
	margin-top: 8px;
	overflow: hidden;
}
.sb-mockup-workbook .sbm-prog-fill {
	height: 100%;
	width: 35%;
	background: var(--sbm-accent);
}

/* ── Checklist (folded corner) ─────────────────────────── */
.sb-mockup-checklist .sbm-shadow {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 100%;
	height: 100%;
	background: rgb(30 30 46 / 0.08);
	border-radius: 3px;
	filter: blur(1px);
}
.sb-mockup-checklist .sbm-body {
	position: relative;
	width: 100%;
	height: 100%;
	background: var(--sbm-surface);
	border: 1px solid var(--sbm-border);
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgb(30 30 46 / 0.06);
}
.sb-mockup-checklist .sbm-fold {
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	background: var(--sbm-tint);
	clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.sb-mockup-checklist .sbm-accent {
	height: 6px;
	background: var(--sbm-accent);
}
.sb-mockup-checklist .sbm-inner {
	padding: 12px 14px;
}
.sb-mockup-checklist .sbm-tag {
	display: inline-block;
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--sbm-tint);
	color: var(--sbm-accent);
	padding: 3px 8px;
	border-radius: 10px;
	margin-bottom: 10px;
}
.sb-mockup-checklist .sbm-row {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 7px;
}
.sb-mockup-checklist .sbm-chk {
	width: 10px;
	height: 10px;
	border: 1.5px solid var(--sbm-accent);
	border-radius: 2px;
	flex-shrink: 0;
}
.sb-mockup-checklist .sbm-line {
	height: 4px;
	flex: 1;
	background: #f0efe9;
	border-radius: 2px;
}

/* ── Swipe file (numbered list) ────────────────────────── */
.sb-mockup-swipe .sbm-shadow {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 100%;
	height: 100%;
	background: rgb(30 30 46 / 0.08);
	border-radius: 3px;
	filter: blur(1px);
}
.sb-mockup-swipe .sbm-body {
	position: relative;
	width: 100%;
	height: 100%;
	background: var(--sbm-surface);
	border: 1px solid var(--sbm-border);
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgb(30 30 46 / 0.06);
}
.sb-mockup-swipe .sbm-head {
	height: 42px;
	background: var(--sbm-accent);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px;
}
.sb-mockup-swipe .sbm-head-t {
	font-size: 10px;
	font-weight: 600;
	color: #fff;
}
.sb-mockup-swipe .sbm-badge {
	font-size: 8px;
	background: rgb(255 255 255 / 0.22);
	color: #fff;
	padding: 2px 6px;
	border-radius: 8px;
}
.sb-mockup-swipe .sbm-inner {
	padding: 10px;
}
.sb-mockup-swipe .sbm-row {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 6px;
	padding: 4px 6px;
	background: #f8f8f6;
	border-radius: 3px;
}
.sb-mockup-swipe .sbm-num {
	font-size: 9px;
	font-weight: 700;
	color: var(--sbm-accent);
	min-width: 14px;
}
.sb-mockup-swipe .sbm-line {
	height: 3px;
	flex: 1;
	background: #e8e7e1;
	border-radius: 2px;
}

/* ── Toolkit (resource list) ───────────────────────────── */
.sb-mockup-toolkit .sbm-body {
	position: relative;
	width: 100%;
	height: 100%;
	background: var(--sbm-surface);
	border: 1px solid var(--sbm-border);
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgb(30 30 46 / 0.06);
}
.sb-mockup-toolkit .sbm-fold {
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	background: var(--sbm-tint);
	clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.sb-mockup-toolkit .sbm-accent {
	height: 6px;
	background: var(--sbm-accent);
}
.sb-mockup-toolkit .sbm-inner {
	padding: 12px 14px;
}
.sb-mockup-toolkit .sbm-tag {
	display: inline-block;
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--sbm-tint);
	color: var(--sbm-accent);
	padding: 3px 8px;
	border-radius: 10px;
	margin-bottom: 8px;
}
.sb-mockup-toolkit .sbm-title {
	font-size: calc(var(--sbm-w) * 0.075);
	font-weight: 600;
	color: var(--sbm-ink);
	line-height: 1.3;
	margin-bottom: 10px;
	font-family: var(--font-display, serif);
}
.sb-mockup-toolkit .sbm-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
}
.sb-mockup-toolkit .sbm-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sbm-accent);
	flex-shrink: 0;
}
.sb-mockup-toolkit .sbm-line {
	height: 4px;
	flex: 1;
	background: #f0efe9;
	border-radius: 2px;
}

/* ── Video course ──────────────────────────────────────── */
/* Base aspect ratio for video; actual dimensions come from compound
   selectors below so that the sm/md/lg size modifier still wins. */
.sb-mockup-course-video                    { --sbm-w: 200px; --sbm-h: 150px; }
.sb-mockup-course-video.sb-mockup-sm       { --sbm-w: 150px; --sbm-h: 112px; }
.sb-mockup-course-video.sb-mockup-md       { --sbm-w: 200px; --sbm-h: 150px; }
.sb-mockup-course-video.sb-mockup-lg       { --sbm-w: 270px; --sbm-h: 200px; }
.sb-mockup-course-video .sbm-screen {
	width: 100%;
	height: 78%;
	background: var(--sbm-accent-dark);
	border-radius: 6px 6px 0 0;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sb-mockup-course-video .sbm-thumb {
	width: 100%;
	height: 100%;
	background: var(--sbm-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}
.sb-mockup-course-video .sbm-play-btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.22);
	border: 2px solid rgb(255 255 255 / 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
}
.sb-mockup-course-video .sbm-play-tri {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent #fff;
	margin-left: 3px;
}
.sb-mockup-course-video .sbm-prog-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: rgb(255 255 255 / 0.12);
}
.sb-mockup-course-video .sbm-prog-fill {
	height: 100%;
	width: 30%;
	background: var(--sbm-accent-light);
}
.sb-mockup-course-video .sbm-base {
	width: 100%;
	height: 22%;
	background: #f0efe9;
	border: 1px solid var(--sbm-border);
	border-radius: 0 0 6px 6px;
	display: flex;
	align-items: center;
	padding: 0 10px;
	gap: 6px;
}
.sb-mockup-course-video .sbm-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--sbm-accent);
}
.sb-mockup-course-video .sbm-dot-off {
	background: #e8e7e1;
}
.sb-mockup-course-video .sbm-base-title {
	font-size: 9px;
	font-weight: 600;
	color: var(--sbm-ink-muted);
	margin-left: auto;
}

/* ── Text/PDF course ───────────────────────────────────── */
.sb-mockup-course-text .sbm-body {
	width: 100%;
	height: 100%;
	background: var(--sbm-surface);
	border: 1px solid var(--sbm-border);
	border-radius: 6px;
	overflow: hidden;
}
.sb-mockup-course-text .sbm-header {
	height: 32%;
	background: var(--sbm-accent);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 12px;
	gap: 3px;
}
.sb-mockup-course-text .sbm-label {
	font-size: 8px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgb(255 255 255 / 0.75);
}
.sb-mockup-course-text .sbm-title {
	font-size: calc(var(--sbm-w) * 0.08);
	font-weight: 600;
	color: #fff;
	font-family: var(--font-display, serif);
}
.sb-mockup-course-text .sbm-mods {
	padding: 10px 12px;
}
.sb-mockup-course-text .sbm-mod {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	padding: 5px 8px;
	border-radius: 3px;
	background: #f0efe9;
}
.sb-mockup-course-text .sbm-num {
	font-size: 9px;
	font-weight: 700;
	color: var(--sbm-accent);
	min-width: 14px;
}
.sb-mockup-course-text .sbm-bar {
	height: 5px;
	flex: 1;
	background: #e8e7e1;
	border-radius: 2px;
}
.sb-mockup-course-text .sbm-bar-done {
	background: var(--sbm-accent);
}

/* ── 3D Bundle Box ─────────────────────────────────────── */
/* Base/default dimensions. Per-size compound selectors below keep the
   sm/md/lg modifier working (otherwise source-order would override it). */
.sb-mockup-box3d                  { --sbm-w: 170px; --sbm-h: 240px; --sbm-d: 36px; }
.sb-mockup-box3d.sb-mockup-sm     { --sbm-w: 130px; --sbm-h: 185px; --sbm-d: 28px; }
.sb-mockup-box3d.sb-mockup-md     { --sbm-w: 170px; --sbm-h: 240px; --sbm-d: 36px; }
.sb-mockup-box3d.sb-mockup-lg     { --sbm-w: 215px; --sbm-h: 305px; --sbm-d: 46px; }

.sb-mockup-box3d {
	/* Override the generic .sb-mockup width/height — the container needs
	   extra room above/below so the tilted top face has space to render. */
	width: calc(var(--sbm-w) + 60px);
	height: calc(var(--sbm-h) + 60px);
	perspective: 900px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.sb-mockup-box3d .sbm-box {
	width: var(--sbm-w);
	height: var(--sbm-h);
	position: relative;
	transform-style: preserve-3d;
	animation: sbm-tilt-right 11s ease-in-out infinite;
}
.sb-mockup-box3d .sbm-box.sbm-face-left {
	animation-name: sbm-tilt-left;
}
@keyframes sbm-tilt-right {
	0%, 100% { transform: rotateX(-16deg) rotateY(26deg); }
	50%      { transform: rotateX(-16deg) rotateY(42deg); }
}
@keyframes sbm-tilt-left {
	0%, 100% { transform: rotateX(-16deg) rotateY(-26deg); }
	50%      { transform: rotateX(-16deg) rotateY(-42deg); }
}
.sb-mockup-box3d .sbm-face {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	backface-visibility: visible;
}
.sb-mockup-box3d .sbm-f-front  { width: var(--sbm-w); height: var(--sbm-h); background: var(--sbm-accent);       transform: translateZ(calc(var(--sbm-d) / 2)); }
.sb-mockup-box3d .sbm-f-back   { width: var(--sbm-w); height: var(--sbm-h); background: var(--sbm-accent-dark);  transform: rotateY(180deg) translateZ(calc(var(--sbm-d) / 2)); }
.sb-mockup-box3d .sbm-f-right  { width: var(--sbm-d); height: var(--sbm-h); background: var(--sbm-accent-dark);  transform: rotateY(90deg) translateZ(calc(var(--sbm-w) - var(--sbm-d) / 2)); }
.sb-mockup-box3d .sbm-f-left   { width: var(--sbm-d); height: var(--sbm-h); background: var(--sbm-accent-dark);  transform: rotateY(-90deg) translateZ(calc(var(--sbm-d) / 2)); }
.sb-mockup-box3d .sbm-f-top    { width: var(--sbm-w); height: var(--sbm-d); background: var(--sbm-accent-light); transform: rotateX(90deg) translateZ(calc(var(--sbm-h) - var(--sbm-d) / 2)); bottom: 0; }
.sb-mockup-box3d .sbm-f-bottom { width: var(--sbm-w); height: var(--sbm-d); background: var(--sbm-accent-dark);  transform: rotateX(-90deg) translateZ(calc(var(--sbm-d) / 2)); }
.sb-mockup-box3d .sbm-box-inner {
	display: flex;
	flex-direction: column;
	padding: 18px;
	width: 100%;
	height: 100%;
	gap: 8px;
}
.sb-mockup-box3d .sbm-brand {
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	color: rgb(255 255 255 / 0.75);
}
.sb-mockup-box3d .sbm-title {
	font-family: var(--font-display, serif);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}
.sb-mockup-box3d .sbm-tag {
	display: inline-block;
	align-self: flex-start;
	font-size: 8px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	background: rgb(255 255 255 / 0.18);
	color: #fff;
	padding: 3px 8px;
	border-radius: 10px;
	margin-top: auto;
}

/* ── Multi-mockup group ────────────────────────────────── */
.sb-mockup-group {
	display: flex;
	gap: 24px;
	align-items: flex-end;
	flex-wrap: wrap;
	justify-content: center;
}
.sb-mockup-group.sb-mockup-group-stagger .sb-mockup:nth-child(odd) {
	transform: rotate(-3deg) translateY(8px);
}
.sb-mockup-group.sb-mockup-group-stagger .sb-mockup:nth-child(even) {
	transform: rotate(2deg);
}
.sb-mockup-group.sb-mockup-group-stagger .sb-mockup:nth-child(3n) {
	transform: rotate(-1deg) translateY(-6px);
}