/*=============================================
=            UNIVERSAL VARIABLES              =
=============================================*/
/* :root variables for colors, spacing, typography, gradients */

@import url("https://fonts.googleapis.com/css2?family=Playball&display=swap");

:root {
	--color-primary: #ca1b16;
	--color-accent: rgb(213, 186, 80);
	--color-bg: #1a1a1a;
	--color-dark: #111;
	--font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-deco: "Playball", "Brush Script MT", cursive;
	--font-serif: Georgia, serif;
	--spacing-sm: 10px;
	--spacing-md: 20px;
	--spacing-lg: 40px;
	--gradient-dark-vertical: linear-gradient(to bottom, #222 0%, #111 100%);
	--gradient-bg-radial: radial-gradient(circle, #1a1a1a 0%, #000000 100%);
	--gradient-bg-radial-2: radial-gradient(circle, #252525 0%, #1a1a1a 100%);
	--gradient-container-radial: radial-gradient(circle, #1f1f1f 0%, #111 100%);
	--gradient-container-radial-dark: radial-gradient(
		circle,
		#1a1a1a 0%,
		#000000 100%
	);
}

/*=============================================
=                   DEBUG                     =
=============================================*/

/*=============================================
=            PAGE STRUCTURE                   =
=============================================*/
/* Global resets, admin bar offsets, root-level layout rules */

body,
html {
	height: auto;
	min-height: 100vh;
	margin: 0;
	background: var(--color-dark);
	overscroll-behavior-y: none;
	-webkit-overflow-scrolling: auto;
}

body.admin-bar .site-header {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}
@media (max-width: 600px) {
	body.admin-bar .site-header {
		top: 0;
	}
}

/* Set body and sidebar for mobile*/
body.admin-bar #site-sidebar {
	top: 32px;
	height: calc(100vh - 32px);
}
@media (max-width: 1000px) {
	body.admin-bar #site-sidebar {
		top: 72px;
		height: calc(100vh - 72px);
	}
}
@media (max-width: 782px) {
	body.admin-bar #site-sidebar {
		top: 86px;
		height: calc(100vh - 86px);
	}
}
@media (max-width: 600px) {
	body.admin-bar #site-sidebar {
		top: 40px;
		height: calc(100vh - 40px);
	}
}

/*=============================================
=            TYPOGRAPHY                       =
=============================================*/
/* Typography for post headers, blockquotes, page content, etc. */
/* Sub-sections:

   - blockquote, cite
   - .page-content-wrapper
*/

/*=============================================
=            LAYOUT & CONTAINERS              =
=============================================*/
/* Page-level containers, background, layout flow */
/* Sub-sections:
   - #site-container
   - .site-main
*/
#site-container {
	min-height: 100vh;
	background: var(--gradient-bg-radial);
	position: relative;
	/* overflow: hidden; */
	font-family: var(--font-sans);
}

.site-main {
	margin-left: 200px;
	padding-left: 0;
	padding: var(--spacing-md);
	background: var(--gradient-container-radial-dark);
	min-height: 100vh;
	overflow: visible !important;
	overflow-x: hidden;
	z-index: 500;
	box-shadow: 0px 26px 40px rgba(0, 0, 0, 0.6) inset;
	word-break: break-word;
	overflow-wrap: anywhere;
	max-width: 100%;
	flex: 1 0 auto;
}

@media (max-width: 1000px) {
	.site-main {
		margin: 40px 0;
		padding: 0;
		box-shadow: none;
		/* overflow-y: auto; */
	}
}

/* ==========================================
   SOLID TOP BAND FOR iOS RUBBER-BAND
   ========================================== 
      - Creates a fixed strip at the very top
   - Stays solid even during overscroll
   */

@media (max-width: 1000px) {
	body::before {
		content: "";
		position: fixed;
		/* extend above and below the top edge */
		top: -60px;
		left: 0;
		right: 0;
		height: 100px;

		/* match your header / chrome color */
		background: #111; /* or var(--color-dark) */

		/* sit under header, above page content */
		z-index: 900;

		pointer-events: none; /* don't block taps/scroll */
	}
}

/*=============================================
=            COMPONENTS                       =
=============================================*/
/* Shared UI elements reused across site */
/* Sub-sections:
   - .site-header
   - .site-footer
   - #site-sidebar
   - .sidebar-menu, .site-links
   -  Mobile Gallery
*/

/*----------- Site Header -----------*/
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 40px;
	background: var(--gradient-bg-radial-2); /* desktop look */
	align-items: left;
	z-index: 999;
	display: none;
	flex-direction: column;
	box-sizing: border-box;
}

.site-title {
	display: block;
	align-content: center;
	margin: auto 0;
	padding: 0 var(--spacing-md);
}

.site-title a {
	color: var(--color-primary);
	font-weight: 900;
	font-size: 20px;
	font-family: var(--font-sans);
	text-decoration: none;
	display: inline-block;
}

@media (max-width: 1000px) {
	.site-header {
		display: flex;
		background: #202020; /* desktop look */
	}
}

/* ==========================================
   1) CORE STRUCTURE (SIDEBAR COLUMN + SCROLL)
========================================== */

/* Outer sidebar column */
#site-sidebar {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0; /* full height column */
	width: 200px;
	height: auto;
	box-sizing: border-box;
	padding: var(--spacing-md);
	background: var(--gradient-dark-vertical);
	z-index: 998;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: left;

	/* For container-query units (cqw) on titles */
	container-type: inline-size;
}

/* Inner layout:
   - logo at top
   - scrollable menus in the middle
*/
#site-sidebar .sidebar-inner {
	width: 100%;
	max-width: 240px; /* cap width so content doesn’t get too wide */
}

.sidebar-inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0; /* critical so .sidebar-scroll can actually scroll */
}

/* Scrollable menu area */
.sidebar-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding-bottom: var(--spacing-lg, 24px); /* space above socials */

	/* hide scrollbars */
	-ms-overflow-style: none; /* IE/Edge */
	scrollbar-width: none; /* Firefox */
}
.sidebar-scroll::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

/* Overlay used when closing header on desktop */
body.closing-header::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 998;
	background: transparent;
	pointer-events: all;
}

/* Mobile variant of core structure */
@media (max-width: 1000px) {
	/* Sidebar becomes slide-in from the right, under header, above toggle button */
	#site-sidebar {
		left: auto;
		right: 0;

		top: 40px; /* under header */
		bottom: 110px; /* above toggle button */
		height: auto;

		border-radius: 0 0 0px 18px;

		transform: translateX(100%);
		transition: transform 0.3s ease;
	}

	#site-sidebar.sidebar-active {
		transform: translateX(0);
	}

	/* On mobile, don't eat touches with the closing-header overlay */
	body.closing-header::after {
		pointer-events: none;
	}
}

/* ==========================================
   2) TOP LOGO AREA
========================================== */

.logo-container {
	width: 100%;
	text-align: center;
	display: block;
	margin-bottom: 10px;
	flex: 0 0 auto; /* don't shrink the logo */
}

.logo-img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* Mobile tweak: slightly smaller logo */
@media (max-width: 1000px) {
	.logo-img {
		width: 70%;
	}
}

/* ==========================================
   3) ACCORDIONS (PANELS OPEN/CLOSE)
========================================== */

.sidebar-panel {
	overflow: hidden; /* hide overflow while animating */
	max-height: 0; /* collapsed height */
	opacity: 0; /* fade out when closed */
	transition: max-height 0.45s ease, opacity 0.45s ease; /* slide + fade together */
}

.sidebar-section.open > .sidebar-panel {
	max-height: 1600px; /* generous cap to avoid clipping */
	opacity: 1; /* visible when open */
}

.sidebar-panel.animating {
	will-change: max-height, opacity; /* GPU hint */
}

/* Remove extra gap when a section is closed */
.sidebar-section:not(.open) .sidebar-menu {
	margin: 0;
}

/* ==========================================
   4) TITLES + TOGGLES + ARROW INDICATORS
========================================== */

/* Clickable section headers (EXPLORE / COLLECTIONS / etc.) */
.sidebar-toggle {
	cursor: pointer; /* shows interactivity */
	transition: color 0.15s ease, transform 0.15s ease; /* subtle feedback */
}

/* Only show hover feedback on devices that actually have hover */
@media (hover: hover) and (pointer: fine) {
	.sidebar-toggle:hover,
	.sidebar-toggle:focus {
		color: #fff; /* slight highlight */
		font-weight: 200;
		/* transform: translateX(2px); /* optional nudge right */
	}
}

/* Title text with arrow */
#site-sidebar .sidebar-menu-title {
	display: inline-flex; /* keeps text + arrow together inline */
	align-items: center;
	gap: 6px;
	max-width: 240px;

	/* container-width responsive font size via cqw */
	font-size: clamp(12px, 11cqw, 18px);

	font-family: var(--font-sans);
	font-weight: 800;
	margin-bottom: var(--spacing-sm);
	color: #fff;
	align-self: center;
	min-width: 0;
	white-space: normal;
}

/* SIMPLE UNICODE ARROW INDICATORS
   Closed (default) = ▶  /  Open = ▼
*/
.sidebar-toggle::after {
	content: "\25BA"; /* ▶ */
	display: inline-block;
	flex-shrink: 0; /* don't shrink arrow, shrink the text */
	font-size: 16px;
	margin-left: 6px;
	line-height: 1;
	vertical-align: middle;
	transition: transform 0.25s ease;
	transform-origin: center;
	color: var(--color-primary);
}

.sidebar-section.open > .sidebar-toggle::after {
	transform: rotate(90deg); /* ▶ rotated downward */
}

/* ==========================================
   5) SUB ITEMS (MENU LISTS + HOVER/ACTIVE)
========================================== */

.sidebar-menu {
	width: 90%;
	max-width: 240px;
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: var(--font-sans);
	font-style: normal;
	font-size: 15px;
	color: #888;
	text-align: left;
	align-self: center;
}

.sidebar-menu li {
	margin-bottom: var(--spacing-sm);
}

.sidebar-menu li a {
	display: block;
	color: #888;
	text-decoration: none;
	font-size: 15px;
	padding: 4px 0;
	transition: color 0.2s ease, transform 0.2s ease;
}

/* Hover state: only on actual hover devices (no funky effects on mobile) */
@media (hover: hover) and (pointer: fine) {
	.sidebar-menu li a:hover {
		color: #fff;
		transform: translateX(5px); /* subtle slide on desktop */
	}
}

/* Active/Current menu items (WP + taxonomy helper)
   – still allowed to be shifted on all devices, since it's a state, not hover.
*/
.sidebar-menu .current-menu-item > a,
.sidebar-menu .current-menu-ancestor > a {
	color: #fff;
	font-weight: 400;
	transform: translateX(5px); /* subtle slide */
}

.sidebar-menu li.current-term > a {
	color: #fff;
	font-weight: 400;
	transform: translateX(5px); /* subtle slide */
}

/* ==========================================
   6) SOCIAL (BOTTOM LINKS)
========================================== */

.site-links {
	margin-top: auto; /* pushes it to the bottom of #site-sidebar */
	display: flex;
	gap: var(--spacing-sm);
	align-items: center;
	justify-content: center;
	font-family: var(--font-sans);
	font-weight: 800;
}

.site-links a {
	color: #444;
	font-weight: bold;
	font-size: 24px;
	text-decoration: none;
	padding: 0 var(--spacing-sm);
}

.site-links a:hover {
	text-decoration: underline;
}

/* ==========================================
   7) SIDEBAR TOGGLE (FAB BUTTON) + FOOTER WRAP
========================================== */

/* Circular FAB toggle button */
#sidebar-toggle {
	width: 70px;
	height: 70px;
	background: var(--color-primary);
	color: #fff;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 30px;
	box-sizing: border-box;
	margin: auto;
	padding: 0;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999;
}

/* Site footer container (used mainly on mobile to hold the FAB) */
.site-footer {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100px;
	height: 100px;
	color: #888;
	font-family: var(--font-sans);
	display: none;
	justify-content: space-between;
	align-items: center;
	padding: 0;
	z-index: 999;
	flex-direction: row;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease, visibility 1s ease;
}

/* Mobile behavior for footer + FAB container */
@media (max-width: 1000px) {
	.site-footer {
		display: flex;
		opacity: 0;
		visibility: hidden;
		animation: fadeInFooter 2s ease forwards;
		animation-delay: 0.3s;
	}
}

/* Fade-in animation for footer on mobile */
@keyframes fadeInFooter {
	to {
		opacity: 1;
		visibility: visible;
	}
}

/*----------- Mobile Gallery  -----------*/
.mobile-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	width: 100%;
	padding: 0;
}

/* @media (max-width: 300px) {
  .mobile-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
} */

.mobile-grid-thumb {
	display: block;
	width: 100%;
}

.thumb-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-height: 33vh;
	overflow: hidden;
	background: #000;
	outline: 2px solid var(--color-dark);
}

.thumb-wrapper img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*=============================================
=            SECTIONS                         =
=============================================*/
/* Page-specific or structured blocks of content */
/* Sub-sections (to be written out fully next):
   - Standard Page
   - Portfolio Grid
   - Portfolio Carousel
   - Portfolio Title / Subtitle
   - Portfolio Content
   - Featured Video
   - Related Posts
   - Single Post
   - Credits Section
*/

/*----------- Standard Page -----------*/
.page-content-wrapper {
	padding: var(--spacing-lg);
	color: #ccc;
}
.page-content {
	padding: var(--spacing-lg);
	color: #ccc;
}

/*----------- Portfolio Grid -----------*/
.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(
		3,
		minmax(0, 1fr)
	); /* adjust for breakpoints if needed */
	gap: 20px;
	padding: 0px;
}
@media (max-width: 1400px) {
	.portfolio-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 1000px) {
	.portfolio-grid {
		grid-template-columns: 1fr;
		padding: 0;
	}
}

.post-container {
	padding-bottom: 5px;
	color: #fff;
	/* background: var(--gradient-bg-radial-2); */
	box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.33);
	cursor: pointer;
	border: none;
	height: 100%;
	display: flex;
	flex-direction: column; /* z-index: 10; */
}

/*----------- Portfolio Carousel -----------*/
.portfolio-container {
	color: #fff;
	background: var(--gradient-bg-radial-2);
	box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.33);
	cursor: pointer;
	border: none;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* ==========================================
   Portfolio Glass Hover (Desktop Only)
   - Blue tint on ::before
   - Stronger top + right edges on ::after
   - Subtle flash, then settle
========================================== */
@media (hover: hover) and (pointer: fine) {
	.portfolio-container {
		position: relative; /* anchors overlays */
		overflow: hidden; /* keeps overlays inside */
		border-radius: 18px;
		transition: border-radius 1s ease;
	}

	/* ------------------------------------------
     ::before — Blue-tinted frosted glass wash
     ------------------------------------------ */
	.portfolio-container::before {
		content: "";
		position: absolute;
		inset: 0; /* cover entire card */
		border-radius: 18px;
		pointer-events: none;
		/* Start invisible – we fade it in smoothly */
		opacity: 0;
		/* backdrop-filter: blur(16px) saturate(130%); */
		-webkit-backdrop-filter: blur(16px) saturate(130%);
		/* Blue-tinted frosted glass wash - Increase first alpha for stronger tint - Shift RGB for more/less blue */
		background: linear-gradient(
			230deg,
			rgba(180, 210, 255, 0.216),
			rgba(255, 255, 255, 0.032)
		);

		/* How fast the tint fades in/out */
		transition: opacity 1.5s ease;
	}

	.portfolio-container:hover::before {
		/* Resting tint strength while hovered - Increase for more glass presence */
		opacity: 0.35;
	}

	.portfolio-container:hover {
		border-radius: 18px;
	}

	/* ------------------------------------------
     ::after — Top + right edge highlights
     ------------------------------------------ */
	.portfolio-container::after {
		content: "";
		position: absolute;
		inset: 0; /* so we can place edges via background-position */
		border-radius: 18px;
		pointer-events: none;
		opacity: 0; /* default: invisible until hover */

		/* 
      Multiple backgrounds:
      1) Top edge highlight (2px thick)
      2) Right edge highlight (1–2px wide)
    */
		background:
      /* Top edge highlight */ linear-gradient(
					90deg,
					transparent,
					rgba(215, 230, 255, 1),
					/* brighter so it pops */ transparent
				)
				top / 100% 2px no-repeat,
			/* Right edge highlight */
				linear-gradient(
					180deg,
					rgba(215, 230, 255, 0.98),
					/* strong at top */ rgba(180, 200, 240, 0.75),
					/* visible mid */ transparent /* fade near bottom */
				)
				right / 2px 100% no-repeat; /* widen to 2px for more presence */
	}

	.portfolio-container:hover::after {
		/* Stronger, independent flash for the edges */
		animation: glass-edge-flash 1.1s ease-out forwards;
	}
}

/* ==========================================
   Edge Flash Animation (for ::after only)
   - Controls how loud the top/right edges feel
========================================== */
@keyframes glass-edge-flash {
	0% {
		opacity: 0; /* initial flash intensity (lower for more subtle) */
	}
	70% {
		opacity: 0.35; /* dip: gives that calming feel */
	}
	100% {
		opacity: 0.2; /* resting edge strength while hovered */
	}
}

.portfolio-carousel-frame {
	position: relative;
	overflow: hidden;
	/* z-index: 10; */
	/* min-height: 100px; */
	max-height: 50vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.portfolio-carousel {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #000;
	border: none;
	overflow-x: scroll;
	overflow-y: hidden;
	display: flex;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	touch-action: auto;
	will-change: transform;
	scrollbar-width: none;
	touch-action: pan-y;
}
.portfolio-carousel::-webkit-scrollbar {
	display: none;
}
.portfolio-carousel-slide {
	flex: 0 0 auto;
	scroll-snap-align: start;
	max-width: 100%;
	width: 100%;
	pointer-events: auto;
}
.portfolio-carousel-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.carousel-prev,
.carousel-next {
	position: absolute;
	bottom: 18px;
	width: 25px;
	height: 25px;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease, visibility 0.6s ease;
}
.carousel-prev {
	left: 5px;
}
.carousel-next {
	right: 5px;
}
.portfolio-container:hover .carousel-prev,
.portfolio-container:hover .carousel-next {
	visibility: visible;
	opacity: 1;
}
@media (max-width: 1000px) {
	.carousel-prev,
	.carousel-next {
		display: none;
	}
	.portfolio-container {
		background: none;
		box-shadow: none;
	}
}
.carousel-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
}

.carousel-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #333;
	transition: background 0.3s ease;
	opacity: 0.5;
}

.carousel-dot.active {
	background: #ccc;
	opacity: 0.5;
}

.offset-anchor {
	/*scroll-margin-top: 40px;  height of your fixed header */
	scroll-margin-top: 30vh;
}

/*----------- Portfolio Title / Subtitle -----------*/
.portfolio-title-block {
	text-align: center;
	margin: 10px 0;
	position: relative;
}

.portfolio-featured-container .portfolio-title-block {
	text-align: center;
	margin: 20px 0;
	position: relative;
	padding-bottom: 0px;
}

.portfolio-title {
	font-family: var(--font-sans);
	font-size: clamp(36px, 2vw, 40px);
	font-weight: 900;
	color: #6e6e6e;
	margin: 0;
	position: relative;
	/* z-index: 2; */
	transition: color 0.6s ease;
}
.homepage .portfolio-title {
	color: var(--color-primary);
	margin: 0;
	position: relative;
	/* z-index: 2; */
	transition: color 0.6s ease;
}

.portfolio-title a,
.portfolio-title a:hover {
	color: inherit;
	text-decoration: none;
	color: var(--color-primary);
}
.portfolio-container:hover .portfolio-title {
	color: var(--color-primary);
}
.portfolio-subtitle {
	font-family: var(--font-deco);
	font-size: clamp(14px, 1.1vw, 25px);
	line-height: clamp(34px, 3vw, 25px);
	color: var(--color-accent);
	margin-top: -18px;
	position: relative;
	/* z-index: 3; */
	opacity: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 1400px) {
	.portfolio-subtitle {
		font-size: clamp(14px, 2vw, 25px);
	}
}
@media (max-width: 1000px) {
	.portfolio-title {
		font-size: clamp(25px, 2vw, 48px);
	}
	.portfolio-subtitle {
		margin-top: -18px;
		font-size: clamp(14px, 3vw, 33px);
	}
}
@media (max-width: 700px) {
	.portfolio-title block {
		margin-bottom: 0px;
	}
	.portfolio-title {
		font-size: clamp(25px, 2vw, 55px);
		color: var(--color-primary);
	}
	.portfolio-subtitle {
		margin-top: -5px;
		font-size: clamp(14px, 3vw, 33px);
		line-height: normal;
	}
}

/*----------- Portfolio Excerpt Style -----------*/
.portfolio-excerpt {
	list-style: none;
	font-family: var(--font-sans);
	font-style: normal;
	font-size: 15px;
	color: rgb(136, 136, 136);
	padding: 0 20px 15px;
	width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
	box-sizing: border-box;
	text-align: center; /* Center the text */
	transition: color 0.3s ease;
}
@media (max-width: 1000px) {
	.portfolio-excerpt {
		min-height: auto;
		padding: 0px 20px;
	}
}

/*----------- Portfolio Content -----------*/
.portfolio-content {
	font-size: 18px;
	line-height: 1.6;
	font-family: var(--font-sans);
	font-weight: 400;
	font-style: normal;
	padding-bottom: 0;
	color: #ccc;
	margin: 0 auto 60px;
	width: 100%;
}
.homepage .portfolio-content {
	margin: 0 auto 0px;
}
.has-text-align-center {
	text-align: center;
}
.portfolio-content p {
	max-width: 1300px;
	margin: 0 auto 20px;
	padding: 20px 20px;
}
.portfolio-content ul {
	max-width: 1200px;
	margin: 0 auto 0px;
	padding: 20px 40px;
}

.single-post-content p:empty,
.single-post-content blockquote:empty,
.single-post-content ul:empty,
.single-post-content ol:empty {
	display: none;
}

@media (max-width: 1000px) {
	.portfolio-content {
		font-size: 12px;
		margin-bottom: 0;
		padding: 10px 0 !important;
	}
	.homepage .portfolio-content {
		margin: 0px auto;
	}
	.portfolio-content p {
		padding: 0px 20px;
		margin: 0 0 10px;
		max-width: 100vw !important;
	}
	.portfolio-content ul {
		padding: 10px 40px;
	}
	.portfolio-content .wp-block-image {
		padding: 0 20px;
		margin: 0 0 10px;
	}

	.portfolio-content .wp-block-image img {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/*----------- Portfolio Image -----------*/

.portfolio-content .wp-block-image {
	max-width: 1300px;
	margin: 20px auto;
	padding: 0 20px;
	display: block;
}

.portfolio-content .wp-block-image img {
	width: 100% !important; /* force override */
	max-width: 100% !important;
	height: auto !important;
	display: block;
	box-sizing: border-box;
	margin: 0 auto;
}

.portfolio-content .wp-block-image.aligncenter {
	max-width: 1300px;
	width: 100%;
	margin: 20px auto;
	padding: 0 20px;
	text-align: center;
	display: block;
}

.portfolio-content .wp-block-image.aligncenter img {
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
	box-sizing: border-box;
}
@media (max-width: 1000px) {
	.portfolio-content .wp-block-image {
		padding: 0 20px;
		margin: 0 0 10px;
	}

	.portfolio-content .wp-block-image img {
		width: 100%;
		max-width: 100%;
	}
}

/*----------- Video Embeds -----------*/

.portfolio-content figure.wp-block-embed {
	max-width: 1300px;
	margin: 20px auto;
	padding: 20px;
}

.portfolio-content .wp-block-embed__wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 ratio */
	height: 0;
	overflow: hidden;
	max-width: 100%;
}

.portfolio-content .wp-block-embed__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media (max-width: 1000px) {
	.portfolio-content figure.wp-block-embed {
		padding: 0 0px;
		margin: 0 0 20px;
		max-width: 100%;
	}

	.portfolio-content .wp-block-embed__wrapper {
		padding-bottom: 56.25%; /* Maintain 16:9 aspect */
	}
}

/*----------- Featured Video -----------*/

@media (max-width: 1000px) {
	#hustlepeak-media .portfolio-content {
		margin: 0 auto;
		padding: 0 0 20px;
	}
}

.portfolio-featured-container {
	padding: 0px;
}

.portfolio-full-width {
	width: 100%;
	overflow-x: hidden;
}

.portfolio-full-width .portfolio-container {
	width: 100%;
	background: none;
	box-shadow: none;
	padding: 0;
}

.portfolio-full-width .portfolio-content {
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
	box-sizing: border-box;
}

.portfolio-featured-video {
	width: 100%;
	position: relative;
	background-color: #000;
	box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.33);

	/* Fallback for when JS doesn't run */
	aspect-ratio: 2.35 / 1;
}

.portfolio-featured-video iframe,
.portfolio-featured-video video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
}

@media (max-width: 1000px) {
	.portfolio-featured-container {
		padding: 0px;
	}

	.portfolio-featured-video {
		aspect-ratio: unset;
		height: 0;
		padding-top: 56.25%; /* Default to 16:9 until JS adjusts it */
		overflow: hidden;
	}

	.portfolio-featured-video iframe,
	.portfolio-featured-video video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

/* ==========================================
   SINGLE POST: Mobile sticky featured media
   - On mobile, featured area sticks to top
   - Content scrolls while media stays visible
========================================== */
@media (max-width: 700px) {
	.single-featured-wrap {
		position: sticky;
		top: 40px; /* your header height */
		z-index: 20;
		background: #000;
		box-sizing: border-box;
		box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.6);
		transition: transform 0.75s ease, opacity 3s ease;
	}

	/* When we "unstick" it via JS */
	.single-featured-wrap.single-featured-wrap--unstuck {
		position: static;
		top: auto;
	}

	.unstick-featured-btn {
		position: absolute;
		left: 20px; /* 20px in from the side */
		bottom: -23px; /* stuck to the bottom of the frame */
		height: 23px;
		width: 30px;
		padding: 4px 8px;
		font-size: 16px;
		line-height: 0.1;
		background: black; /* no background block */
		border-radius: 0 0 10px 10px;
		border: none; /* no border */
		color: #ffffff9a;
		cursor: pointer;
	}

	/* One-way: once unstuck, hide the button */
	.single-featured-wrap.single-featured-wrap--unstuck .unstick-featured-btn {
		display: none;
	}

	/* When closing: slide up and fade out */
	.single-featured-wrap.is-dismissing {
		transform: translateY(-110%);
		opacity: 0;
	}
}

/*----------- Featured Title -----------*/

.single .portfolio-full-width .portfolio-title-block {
	margin: 20px 0 0px;
	padding: 0;
}

.single .portfolio-full-width .portfolio-title {
	color: var(--color-primary);
	margin: 0;
	position: relative;
	/* z-index: 2; */
	transition: color 0.6s ease;
}

@media (max-width: 1000px) {
	.mobile-grid-thumb .portfolio-title-block {
		padding-bottom: 0;
		margin-bottom: 0;
	}

	.mobile-grid-thumb .portfolio-title {
		font-size: 35px;
		color: var(--color-primary);
	}
}

#hustlepeak-media .wp-block-quote {
	margin: 0;
}

#hustlepeak-media .portfolio-content {
	margin: 0;
}

/*----------- Featured Loading Effect -----------*/

.portfolio-featured-video::before {
	content: none;
}

.portfolio-featured-video:has(iframe)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: -1px; /* Extend 1px below to cover rounding error */
	background: rgba(7, 7, 7, 1);
	box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.7);
	z-index: 2;
	pointer-events: none;
	transition: opacity 2s ease-in-out;
	opacity: 1;
	box-sizing: border-box;
	display: block;
}

.portfolio-featured-video:has(iframe)::after {
	content: "";
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	transform: translateZ(0);
	background: var(--loading-gif) center center no-repeat;
	background-size: 250px 250px;
	z-index: 3;
	pointer-events: none;
	transition: opacity 2s ease-in-out, filter 2s ease-in-out;
	opacity: 1;
	filter: blur(0px);
}

@media (max-width: 700px) {
	.portfolio-featured-video:has(iframe)::after {
		background-size: 140px 140px;
	}
}

.portfolio-featured-video:has(iframe).loaded::before,
.portfolio-featured-video:has(iframe).click::before {
	opacity: 0;
}

.portfolio-featured-video:has(iframe).loaded::after,
.portfolio-featured-video:has(iframe).click::after {
	opacity: 0;
	filter: blur(50px);
}

/*----------- Related Posts -----------*/
.related-title {
	margin: 10px 0;
	text-align: center;
	color: var(--color-primary);
	letter-spacing: 0.5px;
	font-size: 18px;
	font-family: var(--font-sans);
	font-weight: 800;
}

.related-posts {
	padding-top: 100px;
}

.related-posts .portfolio-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	padding: 0;
}

.related-posts .portfolio-title {
	font-size: clamp(20px, 6cqw, 48px);
}

.related-posts .portfolio-subtitle {
	font-size: clamp(16px, 6cqw, 26px);
}

.related-posts .portfolio-container {
	background: var(--gradient-bg-radial-2);
	box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.33);
	height: 100%;
	display: flex;
	flex-direction: column;
	container-type: inline-size; /* 🔑 enable container queries */
	/* z-index: 10; */
}

.related-posts .portfolio-excerpt {
	padding: 0 20px 15px;
}

/* 🔥 Card-width-based behavior */
@container (max-width: 350px) {
	.portfolio-excerpt {
		display: none;
	}

	.portfolio-title-block {
		padding-bottom: 0px !important;
	}

	.carousel-dots {
		display: none;
	}
}

/* Viewport-based layout adjustments (columns, padding, type) */
@media (max-width: 1300px) {
	.related-posts .portfolio-grid {
		padding: 20px;
		grid-template-columns: repeat(2, 1fr);
	}
	.related-posts .portfolio-title-block {
		/* padding-bottom: 10px; */
	}
}

@media (max-width: 1000px) {
	.related-posts {
		margin-bottom: 60px;
		padding-top: 10px;
	}
	.related-posts .portfolio-grid {
		padding: 20px;
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.related-posts .portfolio-title {
		font-size: clamp(16px, 2vw, 26px);
	}
	.related-posts .portfolio-container {
		border-radius: 14px;
		overflow: hidden;
	}
	.related-posts .portfolio-grid {
		gap: 10px;
	}
	.portfolio-excerpt {
		display: none;
	}
}

/*----------- Single Post -----------*/
.single-post-header {
	text-align: center;
	margin: 30px 0 10px;
}

.single-post-title {
	font-family: var(--font-sans);
	font-size: 48px;
	font-weight: 900;
	color: var(--color-primary);
	margin: 0;
	position: relative;
	z-index: 2;
	transition: color 0.6s ease;
}

.single-post-content {
	font-family: var(--font-serif);
	font-size: 18px;
	line-height: 1.7;
	color: #ccc;
	max-width: 1300px;
	margin: 0 auto 60px;
	padding: 0;
}

.wp-block-pullquote {
	padding: var(--spacing-lg) 0;
	margin: 0;
}

.wp-block-pullquote cite {
	font-family: var(--font-deco);
	color: var(--color-accent);
	text-align: center;
}

blockquote {
	max-width: 100%;
	font-size: clamp(14px, 2vw, 18px);
	text-align: center;
	padding: var(--spacing-lg) 0;
	color: #fff;
	font-family: var(--font-sans);
	font-style: normal;
	box-sizing: border-box;
	margin: 0 0 1em;
	overflow-wrap: break-word;
}

blockquote p {
	padding-bottom: var(--spacing-md);
	text-align: center;
}

blockquote cite {
	font-family: var(--font-deco);
	color: var(--color-accent);
	text-align: center;
}

blockquote cite strong {
	font-weight: normal;
}

#hustlepeak-media .wp-block-quote {
	margin: 0;
	padding: 0 0 20px;
}

@media (max-width: 1000px) {
	#hustlepeak-media .wp-block-quote {
		margin: 0;
		padding: 0;
	}
}

/*----------- Credits Section -----------*/
.post-credits-section {
	margin: 40px auto;
	padding: 20px 0;
	background: radial-gradient(circle, #252525 0%, var(--color-bg) 100%);
	box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.33);
	color: #fff;
	font-family: var(--font-sans);
	max-width: 1350px;
}
.post-credits-title {
	font-size: 26px;
	font-weight: 900;
	margin: 0 0 10px 0;
	color: var(--color-primary);
	padding-left: 20px;
	display: none;
}
.post-credits-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 320px));
	gap: 10px 40px;
	padding: 20px;
	justify-content: space-between;
}
.credit-item {
	display: flex;
	align-items: center;
	font-size: 18px;
	line-height: 1.6;
	white-space: nowrap;
	font-family: var(--font-sans);
}
.credit-item strong {
	font-weight: 900;
	color: #fff;
	text-transform: uppercase;
	margin-right: 10px;
	flex-shrink: 0;
}
.credit-item span,
.credit-item span a {
	color: var(--color-accent);
	text-align: right;
	font-family: var(--font-deco);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	max-width: 100%;
}
.credit-item span a {
	text-decoration: none;
	display: inline-block;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 180px;
	flex-shrink: 1;
	font-size: clamp(12px, 2vw, 18px);
}
.dotted-line {
	content: "";
	flex-grow: 1;
	border-bottom: 2px dotted #444;
	margin: 0 10px;
	height: 18px;
}
@media (max-width: 1380px) {
	.post-credits-section {
		max-width: 100%;
	}
	.post-credits-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.credit-item strong {
		margin-bottom: 2px;
		font-size: 16px;
	}
}
@media (max-width: 800px) {
	.post-credits-section {
		margin: 0px 20px auto;
	}
	.credit-item span,
	.credit-item span a {
		text-align: center;
	}
	.post-credits-grid {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 0px 10px;
	}
	.post-credits-title {
		text-align: center;
		padding: 0;
	}
	.credit-item {
		flex-direction: column;
		align-items: center;
	}
	.credit-item strong {
		margin-bottom: 2px;
		font-size: 14px;
	}
	.credit-item span {
		text-align: center;
		width: 100%;
	}
	.dotted-line {
		display: none;
	}
}

/*=============================================
=            MODULES & UTILITIES              =
=============================================*/
/* Functional modules and reusable patterns
   - Lazyload
   - Scroll Gallery (1–3 row masonry)
   - Vertical Gallery
   - Masonry Gallery (horizontal JS layout)
   - Lightbox
   - Responsive tweaks
*/

/*----------- Lazyload -----------*/
.lazy-wrapper {
	background-color: #333;
	display: flex;
	width: 100%;
	/* no explicit width/height, let the img define it */
}

.lazy-fade {
	opacity: 0;
	filter: blur(6px);
	transition: opacity 0.75s ease-out, filter 0.75s ease-out;
	display: block;
	border: none;
}

.lazy-fade.lazyloaded {
	opacity: 1;
	filter: blur(0);
}

/*----------- Scroll Gallery (1–3 row masonry) -----------*/
.scroll-gallery {
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
}

.scroll-gallery-rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 0 0 auto; /* keeps the column from shrinking */
	width: max-content; /* keeps the horizontal scroll width */
}

.scroll-gallery-row {
	display: flex;
	gap: 10px;
	flex-wrap: nowrap;
}

.scroll-gallery-row img {
	height: 25vh; /* base height, overridden by style variants */
	width: auto;
	object-fit: contain;
	display: block;
	background-color: #000;
}

/* Height variants based on Gutenberg styles */
.is-style-masonry-scroll-2 .scroll-gallery-row img {
	height: 30vh;
}

.is-style-masonry-scroll-1 .scroll-gallery-row img {
	height: 50vh;
}

.scroll-gallery::-webkit-scrollbar {
	height: 6px;
}

.scroll-gallery::-webkit-scrollbar-thumb {
	background-color: #ccc;
	opacity: 0.5;
	border-radius: 3px;
}

.scroll-gallery::-webkit-scrollbar-track {
	background-color: transparent;
}

.scroll-gallery-hint {
	font-style: italic;
	font-size: 0.9rem;
	color: #444;
	margin: 5px 0 5px 10px;
}

/* Legacy true masonry helpers (if used elsewhere) */
@media (max-width: 1000px) {
	.true-masonry-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.true-masonry-rows {
		min-width: 100%;
		width: fit-content;
	}
}

/*----------- Vertical Gallery (column masonry) -----------*/
.vertical-gallery {
	column-count: 5;
	column-gap: 10px;
	padding: 20px 0;
	display: block; /* Override WordPress default grid */
}

.vertical-gallery a {
	display: inline-block;
	width: 100%;
	break-inside: avoid;
	margin-bottom: 10px;
}

.vertical-gallery img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	background: #000;
}

@media (max-width: 1800px) {
	.vertical-gallery {
		column-count: 4;
	}
}
@media (max-width: 1000px) {
	.vertical-gallery {
		column-count: 3;
	}
}
@media (max-width: 700px) {
	.vertical-gallery {
		column-count: 2;
	}
}

/*----------- Masonry Gallery (horizontal JS layout) -----------*/
.masonry-gallery {
	position: relative;
	width: 100%;
	margin: 20px 0;
	padding: 0;
}

/* Desktop (JS will position/size these anchors) */
.lightbox-link {
	width: auto;
	display: flex;
}

.masonry-gallery .lightbox-link {
	position: absolute;
	display: block;
	text-decoration: none;
	line-height: 0;
	overflow: hidden;
}

.masonry-gallery .lazy-wrapper {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.masonry-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	background: #000;
}

/*----------- Lightbox (shared across all galleries) -----------*/
#lightbox-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.95);
	z-index: 9999;
	justify-content: center;
	align-items: center;
	cursor: default;
	flex-direction: row;
}

#lightbox-overlay img {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	transition: opacity 0.3s ease;
}

.lightbox-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 3rem;
	color: #fff;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 10000;
	opacity: 0.6;
	padding: 3rem;
	user-select: none;
}

.lightbox-button:hover {
	opacity: 1;
}

.lightbox-button-prev {
	left: 10px;
}

.lightbox-button-next {
	right: 10px;
}

/* Mobile lightbox layout */
@media (max-width: 768px) {
	#lightbox-overlay {
		display: none;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	#lightbox-overlay img {
		position: relative;
		display: block;
		max-width: 90vw;
		max-height: 80vh;
	}

	.lightbox-button {
		position: absolute;
		bottom: -20px; /* 20px below the image */
		font-size: 2.2rem;
		background-color: rgba(0, 0, 0, 0);
		border-radius: 50%;
		padding: 0.5rem 1rem;
		opacity: 0.9;
	}

	.lightbox-button-prev {
		left: 5%;
	}

	.lightbox-button-next {
		right: 5%;
	}

	/* Mobile height tweaks for scroll gallery */
	.scroll-gallery-row img {
		height: 15vh;
	}

	.is-style-masonry-scroll-2 .scroll-gallery-row img {
		height: 20vh;
	}

	.is-style-masonry-scroll-1 .scroll-gallery-row img {
		height: 30vh;
	}
}