/**
 * RP Projects — front-end styles.
 * Built to sit on top of Bootstrap 5. Override any of this in your theme's
 * stylesheet, or tweak --rp-accent from Settings > RP Projects.
 */

:root {
	--rp-accent: #6b7c3d;
	--rp-dark: #1a1a1a;
}

/* -------------------------------------------------------------
 * Filter navigation
 * ----------------------------------------------------------- */
.rp-projects-filter-label {
	color: #6b6b6b;
	letter-spacing: 0.06em;
	margin-right: 1.75rem;
}

.rp-projects-filter-label::after {
	content: '';
	display: block;
	width: 32px;
	height: 2px;
	background: var(--rp-accent);
	margin-top: 8px;
}

.rp-projects-filter-buttons {
	/* Dividers below are positioned in this gap between buttons. */
	column-gap: 1.5rem;
}

.rp-filter-btn {
	position: relative;
	background: transparent;
	border: none;
	padding: 0.4rem 0.75rem;
	letter-spacing: 0.04em;
	color: var(--rp-dark);
	border-radius: 2px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.rp-filter-btn:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

.rp-filter-btn.active {
	background-color: var(--rp-accent) !important;
	color: #fff !important;
}

/* Thin divider line between each filter button (not after the last one). */
.rp-projects-filter-buttons .rp-filter-btn:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -0.75rem;
	transform: translateY(-50%);
	width: 1px;
	height: 16px;
	background: #d9d9d9;
}

.rp-filter-clear {
	color: #6b6b6b;
	letter-spacing: 0.04em;
	margin-left: 1.5rem;
}

.rp-filter-clear:hover {
	color: var(--rp-dark);
}

/* -------------------------------------------------------------
 * Project grid cards
 * ----------------------------------------------------------- */
.rp-projects-grid-container {
	position: relative;
	min-height: 200px;
}

.rp-projects-wrap.rp-loading .rp-projects-grid-container {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.rp-project-card {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 2px;
	background: #000;
}

.rp-project-card-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.rp-project-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
	display: block;
}

.rp-project-card:hover .rp-project-card-img img {
	transform: scale(1.06);
}

.rp-project-card-overlay {
	padding: 1rem 1.25rem 1.1rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
}

.rp-project-card-cat {
	color: var(--rp-accent);
	letter-spacing: 0.05em;
	font-size: 0.72rem;
	margin-bottom: 0.25rem;
}

.rp-project-card-title {
	color: #fff;
	font-size: 1.05rem;
	font-weight: 600;
}

.rp-project-card-arrow {
	color: var(--rp-accent);
	transition: transform 0.2s ease;
}

.rp-project-card:hover .rp-project-card-arrow {
	transform: translateX(4px);
}

.rp-projects-empty {
	color: #6b6b6b;
}

/* -------------------------------------------------------------
 * Pagination
 * ----------------------------------------------------------- */
.rp-projects-pagination .page-link {
	color: var(--rp-dark);
	border-color: #e2e2e2;
}

.rp-projects-pagination .page-item.active .page-link {
	background-color: var(--rp-accent);
	border-color: var(--rp-accent);
	color: #fff;
}

/* -------------------------------------------------------------
 * Single project header
 * ----------------------------------------------------------- */
.rp-project-header {
	position: relative;
	width: 100%;
	min-height: 60vh;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	color: #fff;
}

.rp-project-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0.3) 100%);
}

.rp-project-header-content {
	position: relative;
	z-index: 1;
	padding: 3rem 1rem;
	width: 100%;
}

.rp-project-header-cat {
	display: inline-block;
	color: var(--rp-accent);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.rp-project-header-title {
	font-weight: 700;
	margin: 0;
}

.rp-project-header--fallback {
	background-color: var(--rp-dark);
	min-height: 30vh;
}

/* -------------------------------------------------------------
 * Single project meta + gallery
 * ----------------------------------------------------------- */
.rp-project-address {
	color: #6b6b6b;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.85rem;
	font-weight: 600;
}

.rp-project-address .dashicons,
.rp-project-address svg {
	color: var(--rp-accent);
}

.rp-project-meta-line {
	color: #6b6b6b;
	letter-spacing: 0.04em;
	font-size: 0.85rem;
}

.rp-project-gallery-heading {
	font-weight: 700;
	margin-bottom: 1.5rem;
}

.rp-gallery-thumb {
	display: block;
	overflow: hidden;
	border-radius: 2px;
	cursor: pointer;
	position: relative;
}

.rp-gallery-thumb img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.35s ease;
	display: block;
}

.rp-gallery-thumb:hover img {
	transform: scale(1.05);
}

/* -------------------------------------------------------------
 * Lightbox modal
 *
 * These base positioning rules are included even though Bootstrap's own
 * modal CSS normally provides them, so the lightbox still displays
 * correctly as a centered overlay if a theme only loads Bootstrap's JS
 * (or neither), not just when full Bootstrap CSS is present.
 * ----------------------------------------------------------- */
#rpProjectLightbox {
	position: fixed;
	inset: 0;
	z-index: 1060;
	display: none;
	outline: 0;
}

#rpProjectLightbox.show {
	display: block;
}

.rp-lightbox-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1055;
	background-color: rgba(0, 0, 0, 0.85);
}

#rpProjectLightbox .modal-dialog {
	position: relative;
	z-index: 1061;
	max-width: 90vw;
	margin: 2rem auto;
}

#rpProjectLightbox .modal-content {
	background: transparent;
	border: none;
}

#rpProjectLightbox .modal-body {
	position: relative;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
}

.rp-lightbox-image {
	max-width: 100%;
	max-height: 85vh;
	object-fit: contain;
	margin: 0 auto;
	display: block;
}

.rp-lightbox-caption {
	color: #fff;
	text-align: center;
	margin-top: 0.75rem;
	font-size: 0.9rem;
}

.rp-lightbox-prev,
.rp-lightbox-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.5);
	border: none;
	color: #fff;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 1.4rem;
	line-height: 1;
	z-index: 2;
}

.rp-lightbox-prev { left: -10px; }
.rp-lightbox-next { right: -10px; }

#rpProjectLightbox .btn-close {
	filter: invert(1);
	opacity: 0.9;
}