/*
 * Hertha Flipbox — press "book" cards.
 * Ported 1:1 from the Hertha Metals design (.bk component).
 * All colours/sizes are CSS custom properties so Elementor controls can override them.
 */

/* ---------- tokens (dark = design default) ---------- */
.hfb-grid {
	--hfb-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--hfb-cols: 2;
	--hfb-h: 460px;
	--hfb-mh: 500px;
	--hfb-pad: 24px;
	--hfb-dur: 1.1s;
	--hfb-ease: cubic-bezier(.22, .7, .18, 1);

	--hfb-left-bg: #0B0911;
	--hfb-border: #25222F;
	--hfb-left-text: #8E89A0;
	--hfb-num: #2E2A3A;
	--hfb-hint: #6B6577;

	--hfb-right-bg: #F2F0F5;
	--hfb-title: #141218;
	--hfb-kicker: #5A2D91;
	--hfb-date: #55505F;
	--hfb-summary: #3A3644;
	--hfb-btn-bg: #141218;
	--hfb-btn-text: #FFFFFF;
	--hfb-btn-hover-text: #C9B4F0;

	--hfb-cover-bg: #120F1B;
	--hfb-cover-border: #3A3646;
	--hfb-cover-text: #F2F0F5;
	--hfb-accent: #A98BE0;
	--hfb-cover-muted: #8E89A0;
	--hfb-open: #A8A4B5;
	--hfb-open-hover: #FFFFFF;
	--hfb-logo-bg: #1A1426;

	--hfb-back-bg: #120F1B;
	--hfb-close-border: #6B6577;
	--hfb-close-hover: #F2F0F5;
	--hfb-shade: rgba(0, 0, 0, .45);

	/* type scale (grid card) */
	--hfb-num-size: 56px;
	--hfb-title-size: 19px;
	--hfb-summary-size: 14px;
	--hfb-front-title-size: 15px;
	--hfb-front-title-weight: 600;
	--hfb-big-size: 38px;

	display: grid;
	grid-template-columns: repeat(var(--hfb-cols), minmax(0, 1fr));
	gap: 32px;
	font-family: var(--hfb-font);
	line-height: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.hfb-grid--cover {
	--hfb-cols: 1;
	--hfb-h: 640px;
	--hfb-pad: 40px;
	--hfb-num-size: 96px;
	--hfb-title-size: 30px;
	--hfb-summary-size: 17px;
	--hfb-front-title-size: 24px;
	--hfb-front-title-weight: 800;
	--hfb-big-size: 64px;
}

/* ---------- light scheme ---------- */
.hfb-scheme-light .hfb-grid {
	--hfb-left-bg: #F7F6FA;
	--hfb-border: #DDD9E5;
	--hfb-left-text: #6B6577;
	--hfb-num: #D9D4E3;
	--hfb-hint: #8E89A0;

	--hfb-right-bg: #141218;
	--hfb-title: #F2F0F5;
	--hfb-kicker: #A98BE0;
	--hfb-date: #A8A4B5;
	--hfb-summary: #C9C5D3;
	--hfb-btn-bg: #F2F0F5;
	--hfb-btn-text: #141218;
	--hfb-btn-hover-text: #5A2D91;

	--hfb-cover-bg: #FFFFFF;
	--hfb-cover-border: #DDD9E5;
	--hfb-cover-text: #141218;
	--hfb-accent: #5A2D91;
	--hfb-cover-muted: #6B6577;
	--hfb-open: #55505F;
	--hfb-open-hover: #141218;
	--hfb-logo-bg: #EFEAF7;

	--hfb-back-bg: #FFFFFF;
	--hfb-close-border: #8E89A0;
	--hfb-close-hover: #141218;
	--hfb-shade: rgba(0, 0, 0, .18);
}

/* ---------- book ---------- */
.hfb-grid *,
.hfb-grid *::before,
.hfb-grid *::after {
	box-sizing: border-box;
}

.hfb-book {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	height: var(--hfb-h);
	margin: 0;
	padding: 0;
	perspective: 2400px;
	font-family: inherit;
}

.hfb-meta {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	line-height: normal;
	text-transform: uppercase;
}

/* left page (issue details) */
.hfb-page {
	min-width: 0;
	padding: var(--hfb-pad);
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hfb-border);
}

.hfb-page--left {
	justify-content: space-between;
	border-right: 0;
	background: var(--hfb-left-bg);
}

.hfb-left-meta,
.hfb-inside-meta,
.hfb-front-meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.hfb-left-meta,
.hfb-left-date {
	color: var(--hfb-left-text);
}

.hfb-num {
	font-size: var(--hfb-num-size);
	font-weight: 900;
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--hfb-num);
	font-variant-numeric: tabular-nums;
}

.hfb-left-date {
	margin-top: 16px;
}

.hfb-left-foot > .hfb-left-date:first-child {
	margin-top: 0;
}

/* issue numbers: one running count across every flipbox on the page */
:where(body) {
	counter-reset: hfb-issue;
}

.hfb-book--count {
	counter-increment: hfb-issue;
}

.hfb-count::before {
	content: counter(hfb-issue, decimal-leading-zero);
}

.hfb-hint {
	margin-top: 8px;
	color: var(--hfb-hint);
}

/* right page (inside) */
.hfb-page--right {
	gap: 16px;
	border-left: 0;
	background: var(--hfb-right-bg);
	color: var(--hfb-title);
}

.hfb-inside-meta {
	font-weight: 600;
	color: var(--hfb-kicker);
}

.hfb-inside-date {
	color: var(--hfb-date);
}

.hfb-grid .hfb-title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: var(--hfb-title-size);
	font-weight: 900;
	line-height: 1.22;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: var(--hfb-title);
	overflow-wrap: break-word;
}

.hfb-grid .hfb-summary {
	margin: 0;
	padding: 0;
	font-size: var(--hfb-summary-size);
	font-weight: 400;
	line-height: 1.65;
	color: var(--hfb-summary);
}

.hfb-grid a.hfb-btn,
.hfb-grid a.hfb-btn:visited {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: 0;
	background: var(--hfb-btn-bg);
	color: var(--hfb-btn-text);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	line-height: normal;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none;
}

.hfb-grid a.hfb-btn:hover,
.hfb-grid a.hfb-btn:focus {
	background: var(--hfb-btn-bg);
	color: var(--hfb-btn-hover-text);
	text-decoration: none;
}

/* spine shade */
.hfb-shade {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 28px;
	margin-left: -14px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--hfb-shade), rgba(0, 0, 0, 0));
	pointer-events: none;
	z-index: 4;
}

/* ---------- cover ---------- */
.hfb-cover {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	transform-origin: left center;
	transform-style: preserve-3d;
	transition: transform var(--hfb-dur) var(--hfb-ease);
	z-index: 3;
}

.hfb-book.is-open .hfb-cover {
	transform: rotateY(-180deg);
}

.hfb-face {
	position: absolute;
	inset: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* front (closed cover) — hard reset against theme/kit button styles */
.hfb-grid button.hfb-front,
.hfb-grid button.hfb-front:hover,
.hfb-grid button.hfb-front:focus,
.hfb-grid button.hfb-front:active {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 1px solid var(--hfb-cover-border);
	border-radius: 0;
	background: var(--hfb-cover-bg);
	color: var(--hfb-cover-text);
	box-shadow: none;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: normal;
	white-space: normal;
	cursor: pointer;
	transform: none;
}

.hfb-media {
	position: relative;
	display: block;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.hfb-grid .hfb-media img.hfb-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
}

.hfb-media--logo {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--hfb-pad);
	background: var(--hfb-logo-bg);
	border-bottom: 1px solid var(--hfb-cover-border);
}

.hfb-logo-bar {
	display: block;
	width: 56px;
	height: 3px;
	background: var(--hfb-accent);
}

.hfb-logo-text {
	display: block;
	font-size: var(--hfb-big-size);
	font-weight: 800;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--hfb-cover-text);
}

.hfb-front-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--hfb-pad);
}

.hfb-front-meta {
	gap: 10px;
	color: var(--hfb-accent);
}

.hfb-front-year {
	color: var(--hfb-cover-muted);
}

.hfb-front-title {
	display: block;
	font-size: var(--hfb-front-title-size);
	font-weight: var(--hfb-front-title-weight);
	line-height: 1.3;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--hfb-cover-text);
}

.hfb-open {
	display: block;
	font-weight: 600;
	color: var(--hfb-open);
}

.hfb-grid button.hfb-front:hover .hfb-open {
	color: var(--hfb-open-hover);
}

/* back of cover (shown over the left page when open) */
.hfb-back {
	transform: rotateY(180deg);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--hfb-pad);
	border: 1px solid var(--hfb-cover-border);
	background: var(--hfb-back-bg);
}

.hfb-back-kicker {
	letter-spacing: .24em;
	color: var(--hfb-cover-muted);
}

.hfb-back-title {
	font-size: var(--hfb-big-size);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--hfb-cover-text);
	overflow-wrap: break-word;
}

.hfb-grid button.hfb-close,
.hfb-grid button.hfb-close:hover,
.hfb-grid button.hfb-close:focus,
.hfb-grid button.hfb-close:active {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--hfb-close-border);
	border-radius: 0;
	background: none;
	color: var(--hfb-cover-text);
	box-shadow: none;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	line-height: normal;
	text-transform: uppercase;
	cursor: pointer;
}

.hfb-grid button.hfb-close:hover {
	border-color: var(--hfb-close-hover);
}

.hfb-grid button.hfb-front:focus-visible,
.hfb-grid button.hfb-close:focus-visible,
.hfb-grid a.hfb-btn:focus-visible {
	outline: 2px solid var(--hfb-accent);
	outline-offset: 2px;
}

.hfb-empty {
	padding: 24px;
	border: 1px dashed #6B6577;
	font-family: var(--hfb-font, sans-serif);
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.hfb-cover {
		transition: none;
	}
}

/* ---------- responsive (design breakpoints) ---------- */
@media (max-width: 1000px) {
	.hfb-grid--grid {
		--hfb-cols: 1;
	}
}

@media (max-width: 560px) {
	.hfb-grid {
		--hfb-pad: 16px;
		--hfb-title-size: 15px;
		--hfb-summary-size: 13px;
		--hfb-front-title-size: 15px;
		--hfb-big-size: 22px;
	}

	.hfb-grid .hfb-book {
		height: auto;
		min-height: var(--hfb-mh);
	}

	.hfb-logo-text,
	.hfb-back-title {
		overflow-wrap: anywhere;
	}
}