/* =========================================================
   Dephant Logo Portfolio - Estilos frontend (mobile-first)
   ========================================================= */

.dlp-portfolio { width: 100%; }

/* --- Filtros --- */
.dlp-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.dlp-filter-btn {
	border: 1px solid #ddd;
	background: #fff;
	color: #222;
	padding: 6px 16px;
	border-radius: 999px;
	font-size: 13px;
	line-height: 1.6;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.dlp-filter-btn:hover { border-color: #999; }
.dlp-filter-btn.is-active { background: #111; color: #fff; border-color: #111; }

/* --- Grid (mobile first: 2 columnas por defecto, sobreescrito por
       el control responsivo "columns" de Elementor) --- */
.dlp-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.dlp-empty { grid-column: 1 / -1; text-align: center; color: #777; }

/* --- Card --- */
.dlp-card-wrap { opacity: 1; }

.dlp-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 120px;
	width: 100%;
	border-radius: 12px;
	padding: 24px;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
/* background-color explícito (no shorthand) para no perder especificidad
   frente a reglas del tema que puedan pisar "background" */
.dlp-card.dlp-bg-light { background-color: #ffffff !important; }
.dlp-card.dlp-bg-dark  { background-color: #111111 !important; }
.dlp-card.dlp-clickable { cursor: pointer; }
.dlp-card.dlp-clickable:hover,
.dlp-card.dlp-clickable:focus-visible { transform: translateY(-4px); }
.dlp-card.dlp-clickable:focus-visible { outline: 2px solid #4a90e2; outline-offset: 2px; }

.dlp-card-img {
	max-width: 100%;
	height: auto;
	display: block;
	transition: filter .3s ease;
}

/* Imagen principal + secundaria apiladas (crossfade al hover/focus) */
.dlp-img-stack {
	display: grid;
	width: 100%;
}
.dlp-img-stack > img {
	grid-area: 1 / 1;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	transition: opacity .3s ease;
}
.dlp-img-stack .dlp-img-secondary { opacity: 0; }
.dlp-card.dlp-has-alt:hover .dlp-img-primary,
.dlp-card.dlp-has-alt:focus-visible .dlp-img-primary { opacity: 0; }
.dlp-card.dlp-has-alt:hover .dlp-img-secondary,
.dlp-card.dlp-has-alt:focus-visible .dlp-img-secondary { opacity: 1; }

/* Escala de grises -> color al pasar el mouse (CSS puro, sin JS extra).
   Solo aplica a cards con una única imagen (sin secundaria cargada). */
.dlp-grayscale-hover .dlp-card-img { filter: grayscale(1); }
.dlp-grayscale-hover .dlp-card:hover .dlp-card-img,
.dlp-grayscale-hover .dlp-card:focus-visible .dlp-card-img { filter: grayscale(0); }

/* Ocultas por el filtro de industria */
.dlp-card-wrap.dlp-filtered-out { display: none; }

/* --- Animaciones de entrada (activadas por JS al hacer visible la card) --- */
.dlp-portfolio.dlp-anim-none .dlp-card-wrap { opacity: 1; transform: none; }

.dlp-portfolio.dlp-anim-fade .dlp-card-wrap { opacity: 0; transition-property: opacity; }
.dlp-portfolio.dlp-anim-fade .dlp-card-wrap.dlp-visible { opacity: 1; }

.dlp-portfolio.dlp-anim-fade-up .dlp-card-wrap { opacity: 0; transform: translateY(24px); transition-property: opacity, transform; }
.dlp-portfolio.dlp-anim-fade-up .dlp-card-wrap.dlp-visible { opacity: 1; transform: translateY(0); }

.dlp-portfolio.dlp-anim-zoom .dlp-card-wrap { opacity: 0; transform: scale(.85); transition-property: opacity, transform; }
.dlp-portfolio.dlp-anim-zoom .dlp-card-wrap.dlp-visible { opacity: 1; transform: scale(1); }

.dlp-portfolio.dlp-anim-slide-left .dlp-card-wrap { opacity: 0; transform: translateX(-40px); transition-property: opacity, transform; }
.dlp-portfolio.dlp-anim-slide-left .dlp-card-wrap.dlp-visible { opacity: 1; transform: translateX(0); }

.dlp-card-wrap { transition-timing-function: ease-out; }

/* Accesibilidad: respeta la preferencia del usuario de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
	.dlp-card-wrap { opacity: 1 !important; transform: none !important; transition: none !important; }
	.dlp-card-img { transition: none !important; }
	.dlp-img-stack > img { transition: none !important; }
}

/* --- Cargar más --- */
.dlp-load-more-wrap { text-align: center; margin-top: 28px; }
.dlp-load-more-btn {
	border: 1px solid #111;
	background: transparent;
	color: #111;
	padding: 10px 28px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 14px;
	transition: background .2s ease, color .2s ease;
}
.dlp-load-more-btn:hover { background: #111; color: #fff; }
.dlp-load-more-btn.is-loading { opacity: .6; pointer-events: none; }

/* --- Modal / Lightbox --- */
.dlp-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.dlp-modal.is-open { display: flex; }
.dlp-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.dlp-modal-content {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 32px 24px;
	max-width: 480px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	text-align: center;
}
.dlp-modal-images {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}
.dlp-modal-img { max-width: 100%; max-height: 220px; object-fit: contain; }
.dlp-modal-title { margin: 0 0 6px; font-size: 18px; }
.dlp-modal-meta { color: #666; font-size: 14px; margin-bottom: 16px; }
.dlp-modal-description { color: #444; font-size: 14px; line-height: 1.6; margin: 0 0 16px; text-align: left; }
.dlp-modal-link { display: inline-block; font-size: 14px; text-decoration: underline; }
.dlp-modal-link[href="#"] { display: none; }
.dlp-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #333;
}

@media (min-width: 768px) {
	.dlp-modal-content { padding: 40px; }
	.dlp-modal-images { flex-direction: row; justify-content: center; }
	.dlp-modal-img { max-width: 45%; }
}