/* ==========================================================================
   single-blog.php — Page Layout CSS
   Hero image · Blog sidebar · End CTA strip · Sidebar projects
   ========================================================================== */


/* ------------------------------------------------------------------
   Hero image block
   ------------------------------------------------------------------ */

.rep-blog-hero {
	position: relative;
	border-radius: var(--rep-radius-lg);
	overflow: hidden;
	margin-bottom: var(--rep-gap-lg);
	/* Fixed aspect ratio so the image never distorts */
	aspect-ratio: 16 / 6;
	background: var(--rep-dark);
}

.rep-blog-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* slight zoom on load */
	animation: rep-hero-zoom 8s ease forwards;
}

@keyframes rep-hero-zoom {
	from { transform: scale(1.04); }
	to   { transform: scale(1); }
}

/* Dark gradient overlay — bottom to 60% */
.rep-blog-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(10, 20, 35, .82) 0%,
		rgba(10, 20, 35, .35) 55%,
		transparent 100%
	);
	pointer-events: none;
}

.rep-blog-hero__overlay {
	position: absolute;
	bottom: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	padding: 1.5rem 1.75rem;
	z-index: 1;
}

/* Category badges */
.rep-blog-hero__cats {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-bottom: .65rem;
}

.rep-blog-hero__cat {
	display: inline-block;
	background: rgba(255, 255, 255, .18);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 20px;
	padding: .2rem .75rem;
	font-size: .78rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	transition: background .2s;
}

.rep-blog-hero__cat:hover {
	background: rgba(255, 255, 255, .3);
	color: #fff;
}

/* Title */
.rep-blog-hero__title {
	font-size: clamp(1.25rem, 2.8vw, 1.9rem);
	font-weight: 700;
	color: #fff;
	margin: 0 0 .6rem;
	line-height: 1.3;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

/* Meta row */
.rep-blog-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem .6rem;
	font-size: .82rem;
	color: rgba(255, 255, 255, .8);
}

.rep-blog-hero__meta span {
	display: flex;
	align-items: center;
	gap: 4px;
}

.rep-blog-hero__meta svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	opacity: .85;
}

.rep-blog-hero__sep { opacity: .5; }

/* No-thumbnail fallback header */
.rep-blog-header-nothumb {
	padding: var(--rep-gap) 0 var(--rep-gap-lg);
}


/* ------------------------------------------------------------------
   Main layout tweak — blog-specific column ratio
   Uses the existing .rep-single__layout grid but overrides the
   sidebar column width slightly narrower for reading comfort.
   ------------------------------------------------------------------ */

.rep-blog-layout {
	grid-template-columns: minmax(0, 1fr) 300px;
}

@media (max-width: 1100px) {
	.rep-blog-layout { grid-template-columns: minmax(0, 1fr) 260px; }
}

@media (max-width: 960px) {
	.rep-blog-layout { grid-template-columns: 1fr; }
	/* On mobile, sidebar comes after main */
	.rep-blog-sidebar { order: 2; }
	.rep-blog-main    { order: 1; }
}


/* ------------------------------------------------------------------
   Blog section spacing helper (applied to every block in main col)
   ------------------------------------------------------------------ */

.rep-blog-section {
	margin-top: var(--rep-gap-xl, 2.5rem);
}


/* ------------------------------------------------------------------
   Sidebar form wrapper — small visual separation
   ------------------------------------------------------------------ */

.rep-blog-sidebar-form {
	margin-bottom: var(--rep-gap-lg);
}

/* Override contact box title color to match blog theme */
.rep-blog-sidebar-form .rep-contact-box__title {
	color: var(--rep-primary);
}


/* ------------------------------------------------------------------
   Sidebar projects list
   ------------------------------------------------------------------ */

.rep-blog-sidebar-projects {
	background: var(--rep-bg);
	border: 1px solid var(--rep-border);
	border-radius: var(--rep-radius-lg);
	padding: 1rem 1.1rem;
}

.rep-blog-sidebar-projects__title {
	font-size: .95rem;
	font-weight: 600;
	color: var(--rep-text);
	margin: 0 0 .75rem;
	padding-bottom: .6rem;
	border-bottom: 1px solid var(--rep-border-light);
}

.rep-blog-sidebar-projects__list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Each project row */
.rep-blog-sb-proj {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .7rem 0;
	border-bottom: 1px solid var(--rep-border-light);
	text-decoration: none;
	color: inherit;
	transition: background .15s;
	border-radius: 6px;
	padding-inline: .4rem;
}

.rep-blog-sb-proj:last-child { border-bottom: none; }

.rep-blog-sb-proj:hover {
	background: var(--rep-bg-alt);
}

.rep-blog-sb-proj__thumb {
	width: 56px;
	height: 56px;
	border-radius: 6px;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--rep-bg-alt);
}

.rep-blog-sb-proj__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rep-blog-sb-proj__body { min-width: 0; }

.rep-blog-sb-proj__name {
	font-size: .85rem;
	font-weight: 600;
	color: var(--rep-text);
	margin: 0 0 .2rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rep-blog-sb-proj__loc {
	font-size: .76rem;
	color: var(--rep-text-muted);
	margin: 0 0 .15rem;
	display: flex;
	align-items: center;
	gap: 3px;
}

.rep-blog-sb-proj__loc svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

.rep-blog-sb-proj__price {
	font-size: .78rem;
	font-weight: 600;
	color: var(--rep-primary);
	margin: 0;
}


/* ------------------------------------------------------------------
   Related blog posts section — reuses .rep-grid--3
   Give it some top separation so it reads as a distinct unit
   ------------------------------------------------------------------ */

.rep-blog-related .rep-section__title,
.rep-blog-related .rep-single__section-title {
	margin-bottom: var(--rep-gap);
}