/* ============================================
   PORTFOLIO PAGE STYLES
   3DAYS GC - Portfolio Page
   ============================================ */

/* ============================================
   PORTFOLIO HEADER
   ============================================ */

.portfolio-header {
	position: relative;
	padding: 6rem 0; /* py-24 = 96px */
	background-color: rgb(var(--gray-100)); /* bg-gray-100 */
}

.portfolio-header .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--spacing-4); /* px-4 = 16px */
}

.portfolio-header .container > div {
	max-width: 48rem; /* max-w-3xl = 768px */
	margin: 0 auto;
	text-align: center;
}

.portfolio-title {
	font-family: var(--font-display);
	font-size: var(--font-size-4xl); /* text-4xl = 36px */
	font-weight: var(--font-weight-bold);
	color: rgb(var(--color-dark));
	margin-bottom: var(--spacing-6); /* mb-6 = 24px */
	text-align: center;
}

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

.portfolio-divider {
	width: 5rem; /* w-20 = 80px */
	height: 0.25rem; /* h-1 = 4px */
	background-color: rgb(var(--color-primary)); /* bg-primary */
	margin: 0 auto var(--spacing-6); /* mx-auto mb-6 = 24px */
}

.portfolio-description {
	font-size: var(--font-size-xl); /* text-xl = 20px */
	color: rgb(var(--gray-600)); /* text-gray-600 */
	text-align: center;
	margin: 0;
}

/* ============================================
   PORTFOLIO FILTERS
   ============================================ */

.portfolio-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-3);
	justify-content: center;
	margin-bottom: var(--spacing-4xl);
}

.portfolio-filter-btn {
	padding: var(--spacing-2) var(--spacing-4);
	background-color: rgb(var(--gray-100));
	color: rgb(var(--color-text));
	border-radius: var(--radius);
	text-decoration: none;
	font-weight: var(--font-weight-medium);
	transition: all var(--transition-base) var(--ease-in-out);
	cursor: pointer;
	font-family: var(--font-display);
	font-size: var(--font-size-base);
	border: none;
}

.portfolio-filter-btn.active {
	background-color: rgb(var(--color-primary));
	color: rgb(var(--color-white));
}

.portfolio-filter-btn:not(.active):hover {
	background-color: rgb(var(--color-primary) / 0.2);
	color: rgb(var(--color-primary));
}

/* ============================================
   PORTFOLIO CONTENT SECTION
   ============================================ */

.portfolio-content {
	padding: var(--spacing-5xl) 0;
}

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

/* ============================================
   PORTFOLIO LOADING & COUNT
   ============================================ */

.portfolio-loading {
	display: none;
	text-align: center;
	padding: var(--spacing-4xl);
}

.portfolio-loading i {
	font-size: 3rem;
	color: rgb(var(--color-primary));
}

.portfolio-loading p {
	margin-top: var(--spacing-md);
	color: rgb(var(--gray-600));
}

.portfolio-count {
	text-align: center;
	margin-bottom: var(--spacing-lg);
	color: rgb(var(--gray-600));
	font-size: var(--font-size-sm);
}

/* ============================================
   PORTFOLIO GRID
   ============================================ */

.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-2xl);
}

/* Responsive: 2 columnas en tablets */
@media (max-width: 992px) {
	.portfolio-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-xl);
	}
}

/* Responsive: 1 columna en móviles */
@media (max-width: 768px) {
	.portfolio-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}
}

/* ============================================
   PORTFOLIO CTA SECTION
   ============================================ */

.portfolio-cta {
	background-color: rgb(var(--gray-50));
	padding: var(--spacing-4xl) 0;
	text-align: center;
}

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

.portfolio-cta-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-md);
	text-align: center;
}

.portfolio-cta-text {
	color: rgb(var(--gray-600));
	font-size: var(--font-size-lg);
	margin-bottom: var(--spacing-lg);
	line-height: 1.6;
	text-align: center;
}

.portfolio-cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-4) var(--spacing-8);
	background-color: rgb(var(--color-primary));
	color: rgb(var(--color-white));
	border-radius: var(--radius);
	text-decoration: none;
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-lg);
	font-family: var(--font-display);
	transition: all var(--transition-base) var(--ease-in-out);
	box-shadow: var(--shadow-md);
}

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

/* ============================================
   PORTFOLIO NO RESULTS
   ============================================ */

.portfolio-no-results {
	text-align: center;
	padding: var(--spacing-5xl);
}

.portfolio-no-results i {
	font-size: 6rem;
	color: rgb(var(--gray-400));
	margin-bottom: var(--spacing-md);
}

.portfolio-no-results h2 {
	font-family: var(--font-display);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--spacing-md);
	color: rgb(var(--color-dark));
}

.portfolio-no-results p {
	color: rgb(var(--gray-600));
	margin-bottom: var(--spacing-lg);
}

.portfolio-no-results-actions {
	display: flex;
	gap: var(--spacing-3);
	justify-content: center;
	flex-wrap: wrap;
}

.portfolio-no-results-actions .btn {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	padding: var(--spacing-3) var(--spacing-5);
	border-radius: var(--radius);
	text-decoration: none;
	font-weight: var(--font-weight-medium);
	transition: all var(--transition-base) var(--ease-in-out);
}

.portfolio-no-results-actions .btn-primary {
	background-color: rgb(var(--color-primary));
	color: rgb(var(--color-white));
}

.portfolio-no-results-actions .btn-secondary {
	background-color: rgb(var(--gray-100));
	color: rgb(var(--color-text));
}

.portfolio-no-results-actions .btn:hover {
	opacity: 0.9;
	transform: translateY(-2px);
}

/* ============================================
   PORTFOLIO PAGINATION
   ============================================ */

.portfolio-pagination {
	margin-top: var(--spacing-4xl);
	text-align: center;
}

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

@media (max-width: 768px) {
	.portfolio-header {
		padding: var(--spacing-3xl) 0 var(--spacing-2xl);
	}

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

	.portfolio-filters {
		gap: var(--spacing-2);
		margin-bottom: var(--spacing-3xl);
	}

	.portfolio-filter-btn {
		padding: var(--spacing-2) var(--spacing-3);
		font-size: var(--font-size-sm);
	}

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

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

	.portfolio-cta-text {
		font-size: var(--font-size-base);
	}
}