/* =========================================================
   NJ BEAUTY COURSES — LESSON BOOKLET / PDF VIEWER WRAPPER
   Wraps the existing [dflip] embed (3D FlipBook plugin) in a
   branded card. Does not restyle dFlip's internal controls.
   ========================================================= */

.nj-pdf-resource {
	margin: 32px 0;
	padding: 24px;
	border: 1px solid var(--nj-border);
	border-radius: var(--nj-radius-lg);
	background: var(--nj-cream);
	box-shadow: var(--nj-shadow);
}

.nj-pdf-resource__header {
	margin-bottom: var(--nj-space-2);
}

.nj-pdf-resource__header h2,
.nj-pdf-resource__header h3 {
	margin: 4px 0;
	font-size: 22px;
}

.nj-pdf-resource__header p {
	color: var(--nj-muted);
	font-size: 15px;
	margin: 0;
}

.nj-pdf-frame {
	overflow: hidden;
	border-radius: var(--nj-radius-md);
	border: 1px solid var(--nj-border);
	background: #fff;
	min-height: 70vh;
}

.nj-pdf-frame ._df_book {
	width: 100% !important;
	height: 75vh !important;
}

/* dFlip paints its viewer "stage" a heavy dark grey by default (set inline by
   its own JS), which looks cheap and off-brand behind the cream booklet page.
   Repaint that backdrop in a warm brand sand so the booklet sits on-palette.
   Scoped to our lesson-booklet frame so any other dFlip embeds are untouched. */
.nj-pdf-frame .df-container,
.nj-pdf-frame .df-container .df-bg,
.nj-pdf-frame ._df_book,
.nj-pdf-frame ._df_book .df-bg {
	background-color: var(--nj-canvas, #f1e8da) !important;
	background-image: none !important;
}

/* Desktop: Tutor parks the lesson body in a Bootstrap-style 8/12-column
   row (.tutor-col-xl-8) and centres it — the other 4/12 is an unused
   gutter on this tab, quietly capping the booklet at ~60% of the actual
   content width even on a wide screen. Only widen it when that column
   actually holds our PDF booklet, so quiz/assignment pages using the same
   grid class elsewhere are untouched. Then give the viewer itself much
   more room — both wider and taller — so it's readable without going
   fullscreen. */
@media (min-width: 992px) {
	.tutor-row.tutor-justify-center > .tutor-col-xl-8:has(.nj-pdf-resource) {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.nj-pdf-frame {
		min-height: 88vh;
	}

	.nj-pdf-frame ._df_book {
		height: max(88vh, 760px) !important;
	}
}

.nj-pdf-actions {
	display: flex;
	gap: var(--nj-space-2);
	margin-top: var(--nj-space-2);
	flex-wrap: wrap;
}

.nj-pdf-fallback {
	padding: var(--nj-space-3);
	text-align: center;
	color: var(--nj-muted);
}

@media (max-width: 767px) {
	.nj-pdf-resource {
		padding: 16px;
		border-radius: var(--nj-radius-md);
	}

	.nj-pdf-frame,
	.nj-pdf-frame ._df_book {
		min-height: 520px;
		height: 68vh !important;
	}

	.nj-pdf-actions {
		flex-direction: column;
	}

	.nj-pdf-actions .nj-btn {
		width: 100%;
	}
}