/**
 * Creator Suite — Modern Theme
 *
 * Clean editorial style with full-width hero and progress bar ratings.
 * All rules scoped under .sn-theme-modern so they don't affect Classic.
 * Depends on: review.css (base styles loaded first)
 *
 * Fonts: Outfit (loaded via Google Fonts by PHP enqueue)
 */

/* ── Typography ───────────────────────────────────────────── */
.sn-theme-modern {
	--sn-font-heading: 'Outfit', sans-serif;
	--sn-font-body:    'Outfit', sans-serif;
}

/* ── Hero — full-width image with overlay ─────────────────── */
.sn-theme-modern .sn-review-hero {
	padding: 0;
	margin-bottom: 32px;
	position: relative; /* positioning context for the gallery overlay */
}

.sn-theme-modern .sn-review-hero-full-img {
	position: relative;
	width: 100%;
	max-height: 480px;
	overflow: hidden;
	border-radius: 8px;
}

.sn-theme-modern .sn-review-hero-full-img > img {
	width: 100%;
	height: 480px;
	object-fit: cover;
	display: block;
}

.sn-theme-modern .sn-review-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
	display: flex;
	align-items: flex-end;
}

.sn-theme-modern .sn-review-hero-overlay-inner {
	padding: 32px 40px;
	width: 100%;
}

.sn-theme-modern .sn-review-hero-overlay-inner .sn-review-title {
	color: #fff;
	font-size: 2.4rem;
	font-weight: 700;
	margin: 8px 0 12px;
	line-height: 1.2;
	font-family: var(--sn-font-heading);
}

.sn-theme-modern .sn-review-hero-overlay-inner .sn-review-badge {
	background: var(--sn-accent, #3B82F6);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 4px;
}

.sn-theme-modern .sn-review-hero-overlay-inner .sn-review-meta {
	color: rgba(255,255,255,0.8);
	font-size: 0.85rem;
}

.sn-theme-modern .sn-review-hero-overlay-inner .sn-review-meta a {
	color: #fff;
}

/* Hero NAP on gradient overlay — light text */
.sn-theme-modern .sn-review-hero-overlay-inner .sn-review-hero-location p {
	color: rgba(255, 255, 255, 0.80);
}

.sn-theme-modern .sn-review-hero-overlay-inner .sn-review-hero-location a {
	color: #fff;
}

.sn-theme-modern .sn-review-hero-overlay-inner .sn-review-hero-location .sn-location-sep {
	color: rgba(255, 255, 255, 0.50);
	opacity: 1; /* override the base 0.5 opacity so we control it via color instead */
}

/* Fallback hero when no featured image */
.sn-theme-modern .sn-review-hero .sn-review-hero-inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: center;
	padding: 32px 0;
}

/* ── Rating Bar — progress bars ───────────────────────────── */
.sn-theme-modern .sn-review-rating-bar {
	background: var(--sn-bg, #fff);
	border: 1px solid var(--sn-border, #E5E5E5);
	border-radius: 8px;
	padding: 28px 32px;
	margin-bottom: 32px;
}

.sn-theme-modern .sn-review-rating-bar-inner {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 32px;
	align-items: center;
}

.sn-theme-modern .sn-review-overall {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.sn-theme-modern .sn-review-big-num {
	font-size: 3rem;
	font-weight: 700;
	color: var(--sn-primary, #1A1A1A);
	line-height: 1;
	font-family: var(--sn-font-heading);
}

.sn-theme-modern .sn-review-of-five {
	font-size: 1.1rem;
	color: var(--sn-text, #6B6B6B);
}

.sn-theme-modern .sn-review-overall-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sn-text, #6B6B6B);
}

/* Progress bar categories */
.sn-theme-modern .sn-review-categories--bars {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sn-theme-modern .sn-review-cat-bar {
	display: grid;
	grid-template-columns: 130px 1fr 36px;
	gap: 12px;
	align-items: center;
}

.sn-theme-modern .sn-review-cat-bar .sn-review-cat-name {
	font-size: 0.875rem;
	color: var(--sn-secondary, #444);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sn-theme-modern .sn-review-bar-track {
	height: 8px;
	background: var(--sn-card, #F4F4F4);
	border-radius: 4px;
	overflow: hidden;
}

.sn-theme-modern .sn-review-bar-fill {
	height: 100%;
	background: var(--sn-accent, #3B82F6);
	border-radius: 4px;
	transition: width 0.4s ease;
}

.sn-theme-modern .sn-review-cat-bar .sn-review-cat-num {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sn-primary, #1A1A1A);
	text-align: right;
}

/* ── Quick Verdict ────────────────────────────────────────── */
.sn-theme-modern .sn-review-quick-verdict {
	background: var(--sn-card, #F4F4F4);
	border-left: 4px solid var(--sn-accent, #3B82F6);
	border-radius: 0 6px 6px 0;
	padding: 20px 24px;
	margin-top: 24px;
	margin-bottom: 24px;
}

/* ── Pros / Cons — Highlights / Drawbacks ─────────────────── */
.sn-theme-modern .sn-review-pros-heading,
.sn-theme-modern .sn-review-cons-heading {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.sn-theme-modern .sn-review-pros-heading {
	color: var(--sn-pros, #27AE60);
}

.sn-theme-modern .sn-review-cons-heading {
	color: var(--sn-cons, #D94848);
}

/* ── Gallery — overlaid bottom-right on the hero image ───────
   Uses the general sibling combinator so the overlay only fires
   when a featured image is present. Falls through to base gallery
   styles on the no-image fallback. ──────────────────────────── */

.sn-theme-modern .sn-review-hero-full-img ~ .sn-hero-gallery {
	position: absolute;
	/*
	 * top = image_height − thumb_size − container_padding(top+bottom) − bottom_gap
	 *     = 480px − 50px − 12px − 16px = 402px
	 * This places the gallery's bottom edge 16px above the hero image's bottom.
	 */
	top: calc(480px - 50px - 12px - 16px);
	right: 16px;
	z-index: 10;
	margin: 0;
	padding: 6px;
	background: rgba(0, 0, 0, 0.30);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-radius: 6px;
}

.sn-theme-modern .sn-review-hero-full-img ~ .sn-hero-gallery .sn-hero-gallery-thumbs {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	padding: 0;
	margin: 0;
	/* display:flex overrides the base repeat(4,1fr) grid — no need to unset */
}

.sn-theme-modern .sn-review-hero-full-img ~ .sn-hero-gallery .sn-hero-gallery-thumb {
	width: 50px !important;
	height: 50px !important;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	border: 2px solid rgba(255, 255, 255, 0.40) !important;
	border-radius: 3px;
	box-shadow: none !important;
	overflow: hidden;
	opacity: 0.70;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.sn-theme-modern .sn-review-hero-full-img ~ .sn-hero-gallery .sn-hero-gallery-thumb:hover,
.sn-theme-modern .sn-review-hero-full-img ~ .sn-hero-gallery .sn-hero-gallery-thumb.is-active {
	opacity: 1;
	border-color: #fff !important;
	box-shadow: none !important;
}

.sn-theme-modern .sn-review-hero-full-img ~ .sn-hero-gallery .sn-hero-gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 1px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
	.sn-theme-modern .sn-review-rating-bar-inner {
		grid-template-columns: 1fr;
	}

	.sn-theme-modern .sn-review-cat-bar {
		grid-template-columns: 1fr 36px;
	}

	.sn-theme-modern .sn-review-cat-bar .sn-review-cat-name {
		grid-column: 1 / -1;
	}

	.sn-theme-modern .sn-review-hero-full-img > img {
		height: 280px;
	}

	.sn-theme-modern .sn-review-hero-overlay-inner {
		padding: 20px;
	}

	.sn-theme-modern .sn-review-hero-overlay-inner .sn-review-title {
		font-size: 1.6rem;
	}
}

/* Gallery: revert to standard row below the hero on mobile.
   Separate from the 640px block so Classic + Bold are unaffected. */
@media (max-width: 600px) {
	.sn-theme-modern .sn-review-hero-full-img ~ .sn-hero-gallery {
		position: static;
		background: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-radius: 0;
		padding: 0;
		margin-top: 12px;
	}

	.sn-theme-modern .sn-review-hero-full-img ~ .sn-hero-gallery .sn-hero-gallery-thumbs {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 6px;
	}

	.sn-theme-modern .sn-review-hero-full-img ~ .sn-hero-gallery .sn-hero-gallery-thumb {
		width: auto !important;
		height: auto !important;
		border-color: var(--sn-border, #e0e0e0) !important;
		opacity: 0.7;
	}

	.sn-theme-modern .sn-review-hero-full-img ~ .sn-hero-gallery .sn-hero-gallery-thumb:hover,
	.sn-theme-modern .sn-review-hero-full-img ~ .sn-hero-gallery .sn-hero-gallery-thumb.is-active {
		border-color: var(--sn-border, #e0e0e0) !important;
		opacity: 1;
	}
}