/* ============================================
   SINGLE PROJECT TEMPLATE STYLES
   3DAYS GC - Single Project Page
   ============================================ */

/* ============================================
   PROJECT HERO SECTION
   ============================================ */

.project-hero {
	position: relative;
	height: 60vh; /* h-[60vh] */
	width: 100%;
	overflow: hidden;
	z-index: 0; /* Asegurar que esté por debajo del contenido */
}

.hero-background {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Fallback si no hay imagen */
.hero-fallback {
	background: linear-gradient(
		135deg,
		rgb(var(--color-primary) / 0.3),
		rgb(var(--color-primary) / 0.6)
	) !important;
}

.hero-content-centered {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: rgb(var(--color-white));
	padding: var(--spacing-4);
}

.project-title {
	font-family: var(--font-display);
	font-size: var(--font-size-4xl); /* text-4xl */
	font-weight: var(--font-weight-bold);
	color: rgb(var(--color-white));
	text-align: center;
	max-width: 64rem; /* max-w-4xl */
	padding: 0 var(--spacing-4); /* px-4 */
	margin: 0;
}

@media (min-width: 768px) {
	.project-title {
		font-size: var(--font-size-5xl); /* md:text-5xl */
	}
}

.hero-divider {
	width: 5rem; /* w-20 = 80px */
	height: 0.25rem; /* h-1 = 4px */
	background-color: rgb(var(--color-primary)); /* bg-primary */
	margin-top: var(--spacing-6); /* mt-6 = 24px */
	margin-bottom: var(--spacing-4); /* mb-4 = 16px */
}

.project-subtitle {
	font-size: var(--font-size-xl); /* text-xl */
	color: rgba(255, 255, 255, 0.9); /* text-white/90 */
	text-align: center;
	max-width: 42rem; /* max-w-2xl */
	padding: 0 var(--spacing-4); /* px-4 */
	margin: 0;
}

/* ============================================
   BACK TO PORTFOLIO LINK (Inside Hero)
   ============================================ */

.hero-back-link {
	position: absolute;
	bottom: 2rem; /* bottom-8 = 32px */
	left: 1.5rem; /* left-6 = 24px */
}

@media (min-width: 768px) {
	.hero-back-link {
		left: 2.5rem; /* md:left-10 = 40px */
	}
}

.back-to-portfolio-link {
	display: flex;
	align-items: center;
	color: rgb(var(--color-white));
	text-decoration: none;
	transition: color var(--transition-base) var(--ease-in-out);
}

.back-to-portfolio-link:hover {
	color: rgb(var(--color-primary) / 0.9); /* hover:text-primary/90 */
}

.back-icon {
	width: 1em;
	height: 1em;
	margin-right: var(--spacing-2); /* mr-2 */
}

/* ============================================
   PROJECT CONTENT AREA
   ============================================ */

.project-content {
	padding-top: var(--spacing-3xl);
	padding-bottom: var(--spacing-5xl);
	position: relative; /* Asegurar que el sticky funcione correctamente */
	z-index: 1; /* Asegurar que esté por encima del hero */
}

.project-content .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--spacing-lg);
}

.project-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--spacing-3xl);
	align-items: start;
}

/* ============================================
   LEFT COLUMN - PROJECT SECTIONS
   ============================================ */

.project-left-column {
	/* Container para las secciones principales */
}

.project-section {
	margin-bottom: var(--spacing-3xl);
}

.section-title {
	font-family: var(--font-display);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: rgb(var(--color-dark));
	margin-bottom: var(--spacing-lg);
	text-align: center;
}

/* ============================================
   PROJECT OVERVIEW
   ============================================ */

.overview-content {
	line-height: 1.8;
	color: rgb(var(--gray-700));
	font-size: var(--font-size-base);
	text-align: left;
	margin-top: var(--spacing-lg);
}

.overview-content p {
	margin-bottom: var(--spacing-md);
}

.overview-content p:last-child {
	margin-bottom: 0;
}

/* ============================================
   FEATURED ELEMENTS
   ============================================ */

.elements-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
	margin-top: var(--spacing-lg);
}

.element-tag {
	padding: var(--spacing-3) var(--spacing-5);
	background-color: rgb(var(--color-primary) / 0.1);
	color: rgb(var(--color-primary));
	border-radius: var(--radius);
	font-weight: var(--font-weight-medium);
	border: 1px solid rgb(var(--color-primary) / 0.2);
	font-size: var(--font-size-sm);
	transition: all var(--transition-base) var(--ease-in-out);
}

.element-tag:hover {
	background-color: rgb(var(--color-primary) / 0.15);
	transform: translateY(-2px);
}

/* ============================================
   BEFORE/AFTER TRANSFORMATION
   ============================================ */

.before-after-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-xl);
	margin-top: var(--spacing-lg);
}

.before-after-item {
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	display: flex;
	flex-direction: column;
	background: rgb(var(--color-white));
}

.before-after-item > * {
	flex-shrink: 0;
}

/* Before/After Slider */
.before-after-slider {
	margin-top: var(--spacing-lg);
}

.ba-slider-container {
	position: relative;
	width: 100%;
	height: 500px;
	max-height: 500px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	background: rgb(var(--color-white));
}

.ba-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
	display: flex;
	flex-direction: column;
}

.ba-slide.active {
	opacity: 1;
	visibility: visible;
}

.ba-gradient-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 150px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
	z-index: 1;
	pointer-events: none;
}

.ba-slide .ba-label {
	position: absolute;
	top: var(--spacing-lg);
	left: 50%;
	transform: translateX(-50%);
	padding: var(--spacing-3) var(--spacing-6);
	text-align: center;
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-lg);
	border-radius: var(--radius);
	z-index: 2;
	color: rgb(var(--color-white));
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(4px);
}

.ba-slide-before .ba-label {
	/* Mantener estilo consistente */
}

.ba-slide-after .ba-label {
	/* Mantener estilo consistente */
}

.ba-slide .ba-image {
	width: 100%;
	height: 100%;
	max-height: 500px;
	display: block;
	object-fit: cover;
	object-position: center;
}

.ba-slider-controls {
	position: absolute;
	bottom: var(--spacing-lg);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: var(--spacing-md);
	z-index: 10;
	background: transparent;
	padding: 0;
}

.ba-slider-btn {
	background: rgba(0, 0, 0, 0.5);
	border: none;
	color: rgb(var(--color-white));
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: all var(--transition-base) var(--ease-in-out);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	backdrop-filter: blur(4px);
}

.ba-slider-btn:hover {
	background: rgba(0, 0, 0, 0.7);
}

.ba-slider-btn.active {
	background: rgba(0, 0, 0, 0.7);
	color: rgb(var(--color-white));
}

.ba-caret-icon {
	width: 20px;
	height: 20px;
	display: block;
}

.ba-caret-left {
	/* Flecha izquierda */
}

.ba-caret-right {
	/* Flecha derecha */
}

.ba-label {
	padding: var(--spacing-md);
	text-align: center;
	font-weight: var(--font-weight-semibold);
	border-radius: var(--radius) var(--radius) 0 0;
}

.ba-label-before {
	background-color: rgb(var(--gray-50));
	color: rgb(var(--gray-700));
}

.ba-label-after {
	background-color: rgb(var(--color-primary));
	color: rgb(var(--color-primary-foreground));
}

.ba-image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	object-fit: cover;
}

.ba-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	object-fit: cover;
}

/* ============================================
   PROJECT GALLERY
   ============================================ */

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-lg);
	margin-top: var(--spacing-lg);
}

.gallery-item {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-lg);
	aspect-ratio: 4/3;
	box-shadow: var(--shadow-md);
	transition: all var(--transition-base) var(--ease-in-out);
	position: relative;
}

.gallery-item-hidden {
	display: none;
}

.gallery-item:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}

.gallery-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow) var(--ease-in-out);
}

.gallery-item:hover .gallery-image {
	transform: scale(1.1);
}

/* Gallery Pagination */
.gallery-pagination {
	margin-top: var(--spacing-2xl);
	text-align: center;
}

.btn-load-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-2);
	padding: var(--spacing-4) var(--spacing-8);
	background-color: rgb(var(--color-primary));
	color: rgb(var(--color-white));
	border: none;
	border-radius: var(--radius-lg);
	font-family: var(--font-display);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-base);
	cursor: pointer;
	transition: all var(--transition-base) var(--ease-in-out);
	box-shadow: var(--shadow-md);
}

.btn-load-more:hover {
	background-color: rgb(var(--color-primary) / 0.9);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.btn-load-more:active {
	transform: translateY(0);
}

.btn-load-more-text {
	display: inline-block;
}

.btn-load-more-count {
	display: inline-block;
	opacity: 0.9;
	font-size: var(--font-size-sm);
}

/* ============================================
   RIGHT COLUMN - PROJECT DETAILS & SIDEBAR
   ============================================ */

.project-right-column {
	position: sticky;
	top: 8rem; /* top-32 = 128px */
}

/* ============================================
   PROJECT DETAILS BOX
   ============================================ */

.project-details-box {
	background-color: rgb(var(--gray-50));
	padding: 2rem; /* p-8 = 32px */
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

.details-title {
	font-family: var(--font-display);
	font-size: var(--font-size-2xl); /* text-2xl */
	font-weight: var(--font-weight-semibold); /* font-semibold */
	color: rgb(var(--color-dark));
	margin-bottom: var(--spacing-6); /* mb-6 = 24px */
}

.details-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6); /* space-y-6 = 24px */
}

.detail-item {
	display: flex;
	align-items: start;
}

.detail-icon {
	width: 1em;
	height: 1em;
	color: rgb(var(--color-primary)); /* text-primary */
	flex-shrink: 0;
	margin-top: 0.25rem; /* mt-1 */
	margin-right: var(--spacing-4); /* mr-4 = 16px */
	font-size: var(--font-size-xl); /* text-xl */
}

.detail-icon svg {
	width: 100%;
	height: 100%;
}

.detail-content {
	flex: 1;
}

.detail-label {
	font-family: var(--font-display);
	font-weight: var(--font-weight-medium); /* font-medium */
	font-size: var(--font-size-lg); /* text-lg */
	color: rgb(var(--color-dark));
	margin-bottom: 0;
}

.detail-value {
	font-weight: normal; /* No bold */
	color: rgb(var(--gray-600)); /* text-gray-600 */
	font-size: var(--font-size-base);
	margin: 0;
	padding: 0;
}

.detail-value p {
	margin: 0;
	padding: 0;
	color: rgb(var(--gray-600));
}

/* ============================================
   SERVICES PROVIDED SECTION (Inside Details Box)
   ============================================ */

.services-in-details {
	margin-top: 0;
}

.service-detail-title {
	font-family: var(--font-display);
	font-weight: var(--font-weight-medium); /* font-medium */
	font-size: var(--font-size-lg); /* text-lg */
	color: rgb(var(--color-dark));
	margin-bottom: var(--spacing-2); /* mb-2 = 8px */
}

.services-list-inline {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2); /* space-y-2 = 8px */
}

.service-item-inline {
	display: flex;
	align-items: center;
}

.service-icon-inline {
	width: 1em;
	height: 1em;
	color: rgb(var(--color-primary)); /* text-primary */
	flex-shrink: 0;
	margin-right: var(--spacing-2); /* mr-2 = 8px */
}

.service-icon-inline svg {
	width: 100%;
	height: 100%;
	font-size: var(--font-size-sm); /* text-sm */
}

.service-name-inline {
	color: rgb(var(--gray-600)); /* text-gray-600 */
	font-size: var(--font-size-base);
}

/* ============================================
   PROJECT ACTION BUTTONS (Inside Details Box)
   ============================================ */

.project-actions-in-details {
	margin-top: 2.5rem; /* mt-10 = 40px */
}

.btn-details-primary {
	display: block;
	width: 100%;
	background-color: rgb(var(--color-primary));
	color: rgb(var(--color-white));
	text-align: center;
	font-family: var(--font-display);
	font-weight: var(--font-weight-bold); /* font-bold */
	padding: var(--spacing-3) var(--spacing-6); /* py-3 px-6 */
	border-radius: var(--radius);
	text-decoration: none;
	transition: background-color var(--transition-base) var(--ease-in-out);
}

.btn-details-primary:hover {
	background-color: rgb(var(--color-primary) / 0.9); /* hover:bg-primary/90 */
}

.btn-details-secondary {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: var(--spacing-4); /* mt-4 = 16px */
	color: rgb(var(--color-primary));
	font-family: var(--font-display);
	font-weight: var(--font-weight-medium); /* font-medium */
	text-decoration: none;
	transition: color var(--transition-base) var(--ease-in-out);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-1);
}

.btn-details-secondary:hover {
	color: rgb(var(--color-primary) / 0.8); /* hover:text-primary/80 */
}

.btn-icon-inline {
	width: 1em;
	height: 1em;
	margin-left: var(--spacing-1); /* ml-1 */
	display: inline-block;
}

/* ============================================
   CTA SECTION - READY TO START
   ============================================ */

.project-cta-section {
	background-color: rgb(var(--color-primary));
	padding: var(--spacing-5xl) 0;
	margin-top: var(--spacing-4xl);
}

.project-cta-section .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--spacing-lg);
}

.cta-content {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
	color: rgb(var(--color-white));
}

.cta-title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--spacing-lg);
	color: rgb(var(--color-white));
}

.cta-text {
	font-size: var(--font-size-lg);
	margin-bottom: var(--spacing-xl);
	margin-top: var(--spacing-lg);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.95);
}

.cta-buttons {
	display: flex;
	gap: var(--spacing-4);
	justify-content: center;
	flex-wrap: wrap;
	margin-top: var(--spacing-lg);
}

.btn-cta-primary {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	padding: var(--spacing-5) var(--spacing-8);
	background-color: rgb(var(--color-white));
	color: rgb(var(--color-primary));
	border-radius: var(--radius-lg);
	text-decoration: none;
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-lg);
	transition: all var(--transition-base) var(--ease-in-out);
	box-shadow: var(--shadow-xl);
	border: none;
}

.btn-cta-primary:hover {
	background-color: #f5f5f0;
	transform: translateY(-2px);
	box-shadow: var(--shadow-xl);
}

.btn-cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	padding: var(--spacing-5) var(--spacing-8);
	background-color: rgb(var(--color-primary));
	color: rgb(var(--color-white));
	border: 2px solid rgb(var(--color-white));
	border-radius: var(--radius-lg);
	text-decoration: none;
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-lg);
	transition: all var(--transition-base) var(--ease-in-out);
	box-shadow: var(--shadow-md);
}

.btn-cta-secondary:hover {
	background-color: rgb(var(--color-primary-hover));
	border-color: rgb(var(--color-primary-hover));
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

/* ============================================
   PROJECT NAVIGATION - PREVIOUS/NEXT
   ============================================ */

.project-navigation {
	background-color: rgb(var(--gray-50));
	padding: var(--spacing-2xl) 0;
}

.project-navigation .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--spacing-lg);
}

.nav-wrapper {
	display: flex;
	justify-content: space-between;
	gap: var(--spacing-md);
}

.nav-link {
	flex: 1;
	padding: var(--spacing-lg);
	background-color: rgb(var(--color-white));
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: rgb(var(--color-text));
	transition: all var(--transition-base) var(--ease-in-out);
	box-shadow: var(--shadow-sm);
}

.nav-link:hover {
	background-color: rgb(var(--color-primary) / 0.1);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.nav-prev {
	text-align: left;
}

.nav-next {
	text-align: right;
}

.nav-label {
	font-size: var(--font-size-sm);
	color: rgb(var(--gray-600));
	margin-bottom: var(--spacing-2);
	display: flex;
	align-items: center;
	gap: var(--spacing-1);
}

.nav-next .nav-label {
	justify-content: flex-end;
}

.nav-icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: middle;
}

.nav-title {
	font-weight: var(--font-weight-semibold);
	color: rgb(var(--color-dark));
	font-size: var(--font-size-base);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablets y menos - 992px */
@media (max-width: 992px) {
	.project-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-2xl);
	}

	.project-right-column {
		position: static;
	}

	.project-title {
		font-size: var(--font-size-4xl); /* Mantener text-4xl en tablets */
	}

	.cta-title {
		font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	}
}

/* Mobile - 768px */
@media (max-width: 768px) {
	.project-hero {
		height: 60vh; /* Mantener 60vh en móviles también */
		min-height: 300px; /* Altura mínima para evitar que sea muy pequeño */
	}

	.project-content {
		padding-top: var(--spacing-2xl);
		padding-bottom: var(--spacing-3xl);
	}

	.before-after-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	.ba-slider-container {
		height: 400px;
		max-height: 400px;
	}

	.ba-slide .ba-image {
		max-height: 400px;
	}

	.ba-gradient-overlay {
		height: 120px;
	}

	.ba-slide .ba-label {
		top: var(--spacing-md);
		padding: var(--spacing-2) var(--spacing-5);
		font-size: var(--font-size-base);
	}

	.ba-slider-controls {
		bottom: var(--spacing-md);
		padding: 0;
		gap: var(--spacing-2);
	}

	.ba-slider-btn {
		width: 40px;
		height: 40px;
		padding: 0;
	}

	.ba-caret-icon {
		width: 18px;
		height: 18px;
	}

	.gallery-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}

	.project-cta-section {
		padding: var(--spacing-3xl) 0;
	}

	.cta-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.btn-cta-primary,
	.btn-cta-secondary {
		width: 100%;
	}

	.nav-wrapper {
		flex-direction: column;
	}

	.nav-link {
		text-align: center;
	}

	.nav-label {
		justify-content: center;
	}

	.nav-next .nav-label {
		justify-content: center;
	}
}

/* Small Mobile - 480px */
@media (max-width: 480px) {
	.back-to-portfolio-section .container,
	.project-content .container,
	.project-cta-section .container,
	.project-navigation .container {
		padding: 0 var(--spacing-md);
	}

	.project-title {
		font-size: clamp(1.75rem, 3.5vw, 2.25rem);
	}

	.section-title {
		font-size: var(--font-size-xl);
	}

	.details-title,
	.services-title {
		font-size: var(--font-size-lg);
	}

	.cta-title {
		font-size: clamp(1.5rem, 3vw, 2rem);
	}
}

/* ============================================
   UTILIDADES
   ============================================ */

/* Asegurar que las imágenes de WP no tengan márgenes */
.single-project img {
	max-width: 100%;
	height: auto;
}

/* Resetear contenido de WordPress */
.single-project .entry-content,
.single-project .entry-header,
.single-project .entry-footer {
	margin: 0;
	padding: 0;
}

/* Ocultar breadcrumbs si existen */
.single-project .breadcrumb,
.single-project .breadcrumbs {
	display: none;
}