/* ==========================================================================
   Single review (/reviews/{slug}/)
   ========================================================================== */

/* --- Backdrop --------------------------------------------------------------
   Inset "framed" banner — shares the page's container width (max 1200px)
   and side padding instead of running edge to edge, so there's always
   visible page background on both sides and the image never has to
   stretch past its native 1600px width (avoids the grainy/blown-up look
   a full-bleed webp got on wide screens). No fixed height and no
   object-fit crop this time — the box just follows the still's own
   1600x840 ratio at whatever width it's rendered at, so the full image
   always shows, just scaled responsively. */
.bim-review__backdrop {
	border-radius: var(--bim-radius-md);
	overflow: hidden;
}

.bim-review__backdrop img {
	width: 100%;
	height: auto;
	display: block;
}

/* --- Header (poster + title/meta) ------------------------------------------
   Only the POSTER overlaps the backdrop's bottom edge (a plain image, so
   there's no legibility problem doing that) — the title/meta column sits
   in normal flow below the backdrop, on the page's own background, so
   text is never read on top of a photo. */
.bim-review__header {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--bim-space-lg);
	align-items: start;
	padding-top: var(--bim-space-lg);
	padding-bottom: var(--bim-space-md);
}

.bim-review__poster {
	display: block;
	aspect-ratio: var(--bim-poster-ratio);
	border-radius: var(--bim-radius-md);
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0,0,0,0.25);
	background: var(--bim-color-surface);
	border: 4px solid var(--bim-color-surface);
	margin-top: -100px;
	position: relative;
}

.bim-review__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bim-review__intro {
	padding-top: 4px;
}

.bim-review__title {
	font-size: clamp(28px, 4vw, 44px);
	margin: 4px 0 var(--bim-space-sm);
}

.bim-review__meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--bim-space-sm);
}

.bim-review__credit {
	margin: 0 0 4px;
	font-size: 15px;
	color: var(--bim-color-text);
}

.bim-review__credit a {
	font-weight: 600;
}

.bim-review__genres {
	margin-top: var(--bim-space-sm);
}

/* Nudge the poster slightly off the left edge on desktop only, so it
   doesn't line up perfectly flush with the backdrop/still above it. */
@media (min-width: 961px) {
	.bim-review__poster {
		margin-left: 14px;
	}
}

/* --- Body: content column + "More Reviews" sidebar -------------------------- */
.bim-review__layout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: var(--bim-space-xl);
	align-items: start;
	padding-top: var(--bim-space-md);
	padding-bottom: var(--bim-space-xl);
}

/* --- End-of-review score line (plain text, not a boxed callout) ------------ */
.bim-review__score-line {
	margin-top: var(--bim-space-lg);
	padding-top: var(--bim-space-md);
	border-top: 2px solid var(--bim-color-text);
	font-family: var(--bim-font-heading);
	font-size: 22px;
	font-weight: 600;
}

.bim-review__score-value {
	color: var(--bim-color-accent);
	margin-left: 6px;
}

.bim-review__score-line--empty {
	color: var(--bim-color-text-muted);
	font-weight: 500;
	font-size: 16px;
}

/* --- Movie details (director/cast/studio/genre) -----------------------------
   Moved below the score — keeps the header compact no matter how large a
   cast list gets, since the full cast now shows here with no cap. */
.bim-review__details {
	margin-top: var(--bim-space-lg);
}

.bim-review__details-title {
	font-size: 20px;
	margin: 0 0 var(--bim-space-sm);
	padding-bottom: 12px;
	border-bottom: 2px solid var(--bim-color-text);
}

/* --- "More Reviews" sidebar --------------------------------------------------
   Sized up a bit — there's a lot of empty space next to the review text
   on desktop once the sidebar column is this wide, so bigger thumbnails
   and type fill it out better instead of leaving a narrow list of small
   rows floating in a wide column. No rating badge here anymore — scores
   only ever show at the bottom of a review itself. */
.bim-review__sidebar-title {
	font-size: 20px;
	margin: 0 0 var(--bim-space-md);
	padding-bottom: 12px;
	border-bottom: 2px solid var(--bim-color-text);
}

.bim-review__sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bim-space-md);
}

.bim-review__sidebar-item {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 16px;
	list-style: none;
	padding-bottom: var(--bim-space-md);
	border-bottom: 1px solid var(--bim-color-border);
}

.bim-review__sidebar-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.bim-review__sidebar-thumb {
	display: block;
	aspect-ratio: var(--bim-poster-ratio);
	border-radius: var(--bim-radius-sm);
	overflow: hidden;
	background: var(--bim-color-bg-alt);
}

.bim-review__sidebar-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bim-review__sidebar-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.bim-review__sidebar-link {
	font-weight: 600;
	font-size: 16px;
	color: var(--bim-color-text);
	line-height: 1.4;
}

.bim-review__sidebar-link:hover,
.bim-review__sidebar-link:focus {
	color: var(--bim-color-accent);
}

/* --- No-backdrop fallback: nothing to overlap, so the poster sits in
   normal flow too ------------------------------------------------------------ */
.bim-review__backdrop:not(:has(img)) {
	height: var(--bim-space-xl);
	background: var(--bim-color-bg-alt);
}

.bim-review__backdrop:not(:has(img)) + .bim-review__header .bim-review__poster {
	margin-top: 0;
}

/* --- Responsive -------------------------------------------------------------- */
@media (max-width: 960px) {
	.bim-review__layout {
		grid-template-columns: 1fr;
	}

	.bim-review__sidebar-list {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.bim-review__sidebar-item {
		width: calc(50% - var(--bim-space-sm) / 2);
	}
}

@media (max-width: 781px) {
	.bim-review__header {
		grid-template-columns: 140px 1fr;
	}

	.bim-review__poster {
		margin-top: -70px;
	}
}

@media (max-width: 560px) {
	.bim-review__header {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.bim-review__poster {
		width: 160px;
		margin-top: -90px;
		margin-left: auto;
		margin-right: auto;
	}

	.bim-review__backdrop:not(:has(img)) + .bim-review__header .bim-review__poster {
		margin-top: 0;
	}

	.bim-review__meta-row {
		justify-content: center;
	}

	.bim-review__sidebar-item {
		width: 100%;
	}
}