/**
 * Demo page (pattern pdfflipbook/demo-main).
 * Values from the Figma "Demo" frame (1920px wide): a 474px dark sidebar, then demo cards from
 * x=516 to the right edge of the screen with their content in the first 1110px.
 */

.pf-demo {
	--pf-side-w: clamp(260px, 24.6875vw, 474px);
	display: grid;
	grid-template-columns: var(--pf-side-w) minmax(0, 1fr);
	column-gap: 42px;
	align-items: start;
	background: var(--wp--preset--color--light);
}
.pf-demo.pf-demo > * { margin: 0; }

/* ---------- Sidebar ---------- */
.pf-demo__side {
	position: sticky;
	top: var(--pf-header-bottom, 90px);
	z-index: 2;
	height: calc(100vh - var(--pf-header-bottom, 90px));
	height: calc(100dvh - var(--pf-header-bottom, 90px));
	padding: 80px 0 40px calc(var(--pf-side-w) * 0.2458); /* 116.5px at 1920 */
	background: var(--wp--preset--color--neutral);
	color: #fff;
}
.pf-demo__side-inner > * { margin: 0; }
.pf-demo__side .pf-demo__side-title {
	margin: 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.48px;
}

/* The list reaches 6.5px past the sidebar edge, so the active row sticks out like a tab */
.pf-demo__side .pf-demo-nav {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 30px -6.5px 0 0;
	padding: 0;
	list-style: none;
}
.pf-demo-nav > li {
	position: relative;
	margin: 0;
	padding: 0;
	border-radius: 6px 0 0 6px;
	transition: padding 0.3s var(--pf-ease), background-color 0.3s ease;
}
.pf-demo-nav > li.is-active { padding: 12px; background: #26384f; }
.pf-demo-nav > li::before,
.pf-demo-nav > li::after {
	content: "";
	position: absolute;
	right: 0;
	width: 6.5px;
	height: 7px;
	background: var(--wp--preset--color--neutral);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.pf-demo-nav > li::before { top: -7px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.pf-demo-nav > li::after { bottom: -7px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.pf-demo-nav > li.is-active::before,
.pf-demo-nav > li.is-active::after { opacity: 1; }
.pf-demo-nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 500;
	line-height: 26px;
	letter-spacing: -0.32px;
	text-decoration: none;
	transition: opacity 0.25s ease;
}
.pf-demo-nav a::before {
	content: "";
	box-sizing: border-box;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	border: 1px solid currentColor;
	border-radius: 2px;
	transition: background-color 0.25s ease;
}
.pf-demo-nav > li.is-active a::before { background: #fff; }
.pf-demo-nav > li:not(.is-active) a:hover { opacity: 0.75; }
.pf-demo-nav a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }

.pf-demo__side .pf-demo__side-cta { max-width: 241px; margin-top: 30px; }
.pf-btn-upload .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 11px;
	border-color: var(--wp--preset--color--secondary);
	border-radius: 6px;
	box-shadow: none;
	font-size: 16px;
	line-height: 26px;
}
.pf-btn-upload .wp-block-button__link::before {
	content: "";
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background: url("../../images/icons/document-upload.svg") center / contain no-repeat;
}
.pf-btn-upload .wp-block-button__link:hover,
.pf-btn-upload .wp-block-button__link:focus { border-color: var(--wp--preset--color--brand); background: var(--wp--preset--color--brand); color: #fff; }

/* Short screens: tighten the sidebar so it still fits */
@media (min-width: 1024px) and (max-height: 820px) {
	.pf-demo__side { padding-top: 40px; }
	.pf-demo__side .pf-demo-nav { gap: 16px; margin-top: 20px; }
	.pf-demo__side .pf-demo__side-cta { margin-top: 20px; }
}
@media (min-width: 1024px) and (max-height: 660px) {
	.pf-demo__side { padding-top: 24px; }
	.pf-demo__side .pf-demo__side-title { display: none; }
	.pf-demo__side .pf-demo-nav { gap: 8px; margin-top: 0; }
	.pf-demo-nav > li.is-active { padding-block: 6px; }
}

/* ---------- Main column ---------- */
.pf-demo__main { min-width: 0; padding: 80px 0 161px; }
.pf-demo__main .pf-demo__title {
	margin: 0;
	color: #0f2d35;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.76px;
}
.pf-demo__main > .pf-demo__title + * { margin-block-start: 26px; }
.pf-demo__main > .pf-demo-try { margin-block-start: 30px; }

/* Cards: 1px border, rounded on the left, running to the right edge of the screen */
.pf-demo-card {
	container-type: inline-size;
	padding: 39px; /* 40px from the outer edge, as the Figma stroke is inside */
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px 0 0 8px;
	background: #fff;
	scroll-margin-top: calc(var(--pf-header-bottom, 90px) + var(--pf-spy-bar, 0px) + 24px);
}
.pf-demo-card .pf-demo-card__title {
	margin: 0;
	color: var(--wp--preset--color--neutral);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.48px;
}
.pf-demo-card .pf-demo-card__text {
	max-width: 643px;
	color: var(--wp--preset--color--paragraph);
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: -0.32px;
}

/* Iframe card: title on the left, "Click to external view" on the right */
.pf-demo-card__bar { max-width: 1110px; row-gap: 12px; }
.pf-demo-card__bar > .pf-demo-card__head { flex: 0 1 643px; }
.pf-demo-card .pf-demo-card__link {
	margin: 0 0 -6px;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0;
}
.pf-demo-card__link a {
	color: #0f2d35;
	text-decoration: underline;
	text-decoration-thickness: from-font;
	text-underline-position: from-font;
	transition: color 0.25s ease;
}
.pf-demo-card__link a:hover { color: var(--wp--preset--color--brand); }
.pf-demo-card .pf-demo-embed { max-width: 1110px; margin-right: 0; margin-bottom: 0; margin-left: 0; }
.pf-demo-embed img { display: block; width: 100%; height: auto; }

/* ---------- Preview grids ---------- */
.pf-demo-grid.pf-demo-grid { max-width: 1110px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-demo-grid--cases.pf-demo-grid--cases { max-width: 1130px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container (max-width: 719px) {
	.pf-demo-grid.pf-demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 419px) {
	.pf-demo-grid.pf-demo-grid { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 899px) {
	.pf-demo-grid--cases.pf-demo-grid--cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 639px) {
	.pf-demo-grid--cases.pf-demo-grid--cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 299px) {
	.pf-demo-grid--cases.pf-demo-grid--cases { grid-template-columns: minmax(0, 1fr); }
}

.pf-demo-item { min-width: 0; }
/* The light frame around each screenshot; the screenshot fills it */
.pf-demo-item .pf-demo-thumb {
	box-sizing: content-box;
	aspect-ratio: 709 / 502;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	background: var(--wp--preset--color--light);
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.35s var(--pf-ease);
}
.pf-demo-item--sm .pf-demo-thumb { aspect-ratio: 546 / 392; border-radius: 4px; }
.pf-demo-thumb a { display: block; height: 100%; }
.pf-demo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-demo-item .pf-demo-item__label {
	color: var(--wp--preset--color--neutral);
	font-size: 16px;
	font-weight: 500;
	line-height: 26px;
	letter-spacing: -0.32px;
}
.pf-demo-item--sm .pf-demo-item__label { color: #0f2d35; }

/* Previews that link to a live demo lift on hover and underline their name */
.pf-demo-item:has(a) .pf-demo-item__label {
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: background-size 0.35s var(--pf-ease);
}
.pf-demo-item:has(a):hover .pf-demo-thumb { border-color: #cfd8e3; box-shadow: 0 16px 32px rgba(10, 26, 47, 0.08); transform: translateY(-4px); }
.pf-demo-item:has(a):hover .pf-demo-item__label { background-size: 100% 1px; }
.pf-demo-item .pf-demo-item__label { width: fit-content; margin-inline: auto; }

/* ---------- Try your own PDF ---------- */
.pf-demo-try {
	box-sizing: border-box;
	max-width: 1110px;
	padding: 56px clamp(20px, 10vw, 192px);
	border-radius: 9.3px;
	background: #0f2d35;
	scroll-margin-top: calc(var(--pf-header-bottom, 90px) + var(--pf-spy-bar, 0px) + 24px);
}
.pf-demo-try .pf-demo-try__title {
	margin: 0;
	font-size: clamp(28px, 1.6vw + 11px, 41.9px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}
.pf-demo-try .pf-demo-try__text { font-size: 16.76px; font-weight: 500; line-height: 1.6; letter-spacing: -0.335px; }
.pf-upload--demo { padding: 17.34px 17.34px 19.9px; border-radius: 20px; background: rgba(255, 255, 255, 0.9); }
.pf-upload--demo .pf-upload__drop {
	min-height: 313px;
	padding: 40px 24px;
	border: 0.931px dashed var(--wp--preset--color--paragraph-alt);
	border-radius: 16px;
	background: #fff;
}
.pf-upload--demo .pf-upload__drop > .pf-upload__title {
	margin-bottom: 13px !important;
	color: #0f2d35;
	font-size: 18.62px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.37px;
}
.pf-upload--demo .pf-upload__note { font-size: 14.9px; font-weight: 500; line-height: 1.5; letter-spacing: 0; }

/* Blue pill button from the upload box design */
.pf-btn-pill .wp-block-button__link {
	gap: 9.3px;
	padding: 11px 22px;
	border-color: #0055d4;
	border-radius: 30px;
	background: #0055d4;
	box-shadow: none;
	color: #fff;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 14.9px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
}
.pf-btn-pill .wp-block-button__link:hover,
.pf-btn-pill .wp-block-button__link:focus { border-color: #0044aa; background: #0044aa; color: #fff; }
.pf-btn-pill.pf-btn-pdf .wp-block-button__link::before { width: 22px; height: 22px; }

/* ---------- Tablet and phone: the sidebar becomes a bar under the header ---------- */
@media (max-width: 1023px) {
	.pf-demo { display: block; }
	.pf-demo__side {
		z-index: 20;
		height: auto;
		padding: 10px 24px;
		box-shadow: 0 8px 24px rgba(10, 26, 47, 0.12);
	}
	.pf-demo__side-inner { display: flex; align-items: center; gap: 12px; }
	.pf-demo__side .pf-demo__side-title { display: none; }
	.pf-demo__side .pf-demo-nav {
		flex: 1;
		flex-direction: row;
		gap: 4px;
		min-width: 0;
		margin: 0;
		padding-right: 24px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
	}
	.pf-demo__side .pf-demo-nav::-webkit-scrollbar { display: none; }
	.pf-demo-nav > li,
	.pf-demo-nav > li.is-active { flex-shrink: 0; padding: 6px 12px; border-radius: 6px; }
	.pf-demo-nav > li::before,
	.pf-demo-nav > li::after { display: none; }
	.pf-demo-nav a { gap: 8px; font-size: 14px; line-height: 22px; white-space: nowrap; }
	.pf-demo-nav a::before { width: 12px; height: 12px; }
	.pf-demo__side .pf-demo__side-cta { flex-shrink: 0; max-width: none; margin: 0; }
	.pf-demo__side-cta .wp-block-button { width: auto; }
	.pf-btn-upload .wp-block-button__link { gap: 6px; padding: 6px 12px; font-size: 14px; line-height: 22px; white-space: nowrap; }
	.pf-btn-upload .wp-block-button__link::before { width: 20px; height: 20px; }

	.pf-demo__main { padding: 40px 24px 80px; }
	.pf-demo-card { padding: 32px 24px; border-radius: 8px; }
	.pf-demo-try { padding: 40px 24px; }
}
@media (max-width: 600px) {
	.pf-demo__side { padding: 8px 16px; }
	.pf-demo__side .pf-demo__side-cta { display: none; }
	.pf-demo__main { padding: 32px 16px 64px; }
	.pf-demo__main .pf-demo__title { font-size: 30px; }
	.pf-demo__main > .pf-demo__title + * { margin-block-start: 20px; }
	.pf-demo-card { padding: 24px 16px; }
	.pf-demo-card .pf-demo-card__title { font-size: 20px; }
	.pf-demo-grid--cases .pf-demo-item__label { font-size: 14px; line-height: 20px; }
	.pf-demo-try { padding: 32px 16px; }
	.pf-upload--demo { padding: 12px; }
	.pf-upload--demo .pf-upload__drop { min-height: 260px; padding: 32px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.pf-demo-item:has(a):hover .pf-demo-thumb { transform: none; }
}

/* Editor: no sticky sidebar inside the canvas */
.editor-styles-wrapper .pf-demo__side { position: relative; top: 0; height: auto; min-height: 600px; }