.sfb-wrap {
	--sfb-tile-bg: #15181c;
	--sfb-tile-color: #ffffff;
	--sfb-accent: #ff6a2b;
	--sfb-gap: 6px;
	--sfb-tile-gap: 2px;
	/* fallback sizing until JS measures the card and sets exact px values */
	--sfb-tile-w: 41px;
	--sfb-tile-h: 54px;

	box-sizing: border-box;
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
	font-family: inherit;
}

/*
 * Desktop tiles are a FIXED 120px tall (see DESKTOP_TILE_H in flip-board.js)
 * regardless of card width, so the row can need more room than the 620px
 * cap allows — let it grow on desktop instead of forcing an overflow/wrap.
 * The page-builder container around the shortcode still bounds the outer
 * width in practice.
 */
@media (min-width: 1024px) {
	.sfb-wrap {
		max-width: none;
	}
}

/*
 * "card" now only adds breathing room — fully transparent, no fill/border/
 * shadow/blur, by request: the user places this inside their own styled
 * container (background, glass effect, whatever) at the page-builder level.
 */
.sfb-wrap--card {
	padding: clamp(14px, 2.4vw, 22px) clamp(18px, 3.4vw, 30px);
}

.sfb-wrap * {
	box-sizing: border-box;
}

/*
 * Font/size/weight/color are deliberately untouched — this <h2> should look
 * like every other <h2> the theme renders. Only spacing is overridden here
 * (line-height between the two lines, margin before the divider); do not
 * add font-size/weight/color back.
 */
h2.sfb-heading {
	line-height: 1.15;
	margin-bottom: 0;
}

.sfb-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 6px auto 4px;
	max-width: 200px;
}

.sfb-divider::before,
.sfb-divider::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: rgba(22, 58, 99, 0.2);
}

.sfb-divider-icon {
	flex-shrink: 0;
	display: inline-block;
	color: var(--sfb-accent);
	font-size: 15px;
	transform: rotate(-40deg);
}

.sfb-label {
	color: #5b6b7c;
	font-size: clamp(12px, 1.6vw, 15px);
	font-weight: 500;
	margin: 0 0 10px;
}

.sfb-board {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sfb-gap);
	width: 100%;
}

.sfb-board[role="link"] {
	cursor: pointer;
}

.sfb-tiles {
	display: flex;
	gap: var(--sfb-tile-gap);
	justify-content: center;
}

.sfb-icon {
	flex-shrink: 0;
	width: var(--sfb-tile-w);
	height: var(--sfb-tile-h);
	background: var(--sfb-tile-bg);
	border-radius: calc(var(--sfb-tile-w) * 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
}

.sfb-icon-glyph {
	display: inline-block;
	color: var(--sfb-accent);
	font-size: calc(var(--sfb-tile-w) * 0.55);
	transform: rotate(-40deg);
}

.sfb-tile {
	position: relative;
	flex-shrink: 0;
	width: var(--sfb-tile-w);
	height: var(--sfb-tile-h);
	background: var(--sfb-tile-bg);
	border-radius: calc(var(--sfb-tile-w) * 0.2);
	overflow: hidden;
	perspective: 300px;
}

.sfb-tile::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	background: rgba(0, 0, 0, 0.55);
	transform: translateY(-1px);
	z-index: 5;
	pointer-events: none;
}

.sfb-half,
.sfb-flap {
	position: absolute;
	left: 0;
	right: 0;
	height: 50%;
	overflow: hidden;
}

.sfb-half-top,
.sfb-flap-top {
	top: 0;
}

.sfb-half-bottom,
.sfb-flap-bottom {
	bottom: 0;
}

.sfb-half .glyph,
.sfb-flap .glyph {
	position: absolute;
	left: 0;
	right: 0;
	height: 200%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 400;
	font-family: "Bebas Neue", "Arial Narrow", "Helvetica Neue Condensed", "Roboto Condensed", "Segoe UI", sans-serif;
	letter-spacing: 0.02em;
	font-size: calc(var(--sfb-tile-h) * 0.55);
	color: var(--sfb-tile-color);
	user-select: none;
}

.sfb-half-top .glyph {
	top: 0;
}

.sfb-half-bottom .glyph {
	bottom: 0;
}

.sfb-flap {
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	background: var(--sfb-tile-bg);
	backface-visibility: hidden;
	transform-style: preserve-3d;
}

.sfb-flap-top {
	transform-origin: bottom center;
}

.sfb-flap-top .glyph {
	top: 0;
}

.sfb-flap-bottom {
	transform-origin: top center;
}

.sfb-flap-bottom .glyph {
	bottom: 0;
}