/**
 * OT Portfolio — Base Grid Stylesheet
 *
 * Layout-specific rules use data-attribute selectors:
 *   .otpg-wrapper[data-layout="grid"]    — Uniform grid
 *   .otpg-wrapper[data-layout="masonry"] — CSS masonry columns
 *   .otpg-wrapper[data-layout="checkerboard"] — Snøhetta-style
 *   .otpg-wrapper[data-layout="editorial"]  — BIG-style
 *   .otpg-wrapper[data-layout="filmstrip"]  — Herzog & de Meuron-style
 *
 * Dynamic values (columns, gap, heights) are injected by PHP into
 * a scoped <style> block per instance. This file provides:
 *   1. Base/resets for all layouts
 *   2. Theme overrides for Archi theme's .projects-masonry (admin side)
 *   3. Shared utility classes
 */

/* =============================================
   BASE RESETS
   ============================================= */
.otpg-wrapper,
.otpg-wrapper * {
	box-sizing: border-box;
}

.otpg-wrapper ul,
.otpg-wrapper li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* =============================================
   LIGHTBOX
   ============================================= */
.otpg-lightbox {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: rgba(0, 0, 0, 0.92) !important;
	z-index: 10000 !important;
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
}

.otpg-lightbox.active {
	display: flex !important;
}

.otpg-lightbox img {
	max-width: 90% !important;
	max-height: 90% !important;
	border-radius: 4px !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
	cursor: default !important;
}

.otpg-lightbox .lb-close {
	position: absolute !important;
	top: 20px !important;
	right: 30px !important;
	color: #fff !important;
	font-size: 36px !important;
	cursor: pointer !important;
	line-height: 1 !important;
	transition: opacity 0.3s !important;
}

.otpg-lightbox .lb-close:hover {
	opacity: 0.6 !important;
}

/* =============================================
   THEME OVERRIDES — Archi theme .projects-masonry
   These must stay for the OT Portfolio Filter widget
   that uses the theme's classes.
   ============================================= */
@media (max-width: 767px) {
	.projects-masonry,
	.projects-masonry .projects-box,
	.projects-masonry .project-item {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		height: auto !important;
		float: none !important;
		clear: both !important;
		overflow: visible !important;
	}

	.projects-masonry .projects-thumbnail,
	.projects-masonry .projects-thumbnail figure {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		height: auto !important;
		overflow: hidden !important;
		min-height: 200px !important;
	}

	.projects-masonry .projects-thumbnail img,
	.projects-masonry .projects-thumbnail a {
		width: 100% !important;
		height: auto !important;
		min-height: 200px !important;
		max-height: 350px !important;
		object-fit: cover !important;
		display: block !important;
		position: relative !important;
	}

	.projects-masonry .overlay,
	.projects-masonry .overlay span.bg,
	.projects-masonry .overlay figcaption {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		z-index: 10 !important;
	}

	.projects-masonry .project-item {
		margin-bottom: 16px !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	.projects-masonry .projects-thumbnail img,
	.projects-masonry .projects-thumbnail a {
		min-height: 180px !important;
		max-height: 280px !important;
	}
}

/* =============================================
   SECTION TITLE
   ============================================= */
.ot-portfolio-section-title {
	font-size: 32px !important;
	font-weight: 700 !important;
	text-align: center !important;
	margin-bottom: 40px !important;
	color: #222 !important;
}

@media (max-width: 767px) {
	.ot-portfolio-section-title {
		font-size: 24px !important;
		margin-bottom: 24px !important;
	}
}

/* =============================================
   EMPTY STATE
   ============================================= */
.ot-portfolio-empty {
	text-align: center;
	padding: 40px;
	color: #666;
	font-size: 16px;
}

/* =============================================
   ALERTS — Pastel style with 50% opacity
   ============================================= */
.otpg-alert {
	padding: 14px 18px;
	border-radius: 8px;
	margin: 16px 0;
	font-size: 14px;
	line-height: 1.6;
	border-left: 4px solid;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.otpg-alert-icon {
	font-size: 18px;
	flex-shrink: 0;
	line-height: 1.4;
}

.otpg-alert p {
	margin: 0;
}

/* Info — soft blue */
.otpg-alert-info {
	background: rgba(96, 165, 250, 0.18);
	border-color: #3b82f6;
	color: #1e40af;
}

/* Success — soft green */
.otpg-alert-success {
	background: rgba(52, 211, 153, 0.18);
	border-color: #10b981;
	color: #065f46;
}

/* Warning — soft amber */
.otpg-alert-warning {
	background: rgba(251, 191, 36, 0.18);
	border-color: #f59e0b;
	color: #92400e;
}

/* Error — soft rose */
.otpg-alert-error {
	background: rgba(248, 113, 113, 0.18);
	border-color: #ef4444;
	color: #991b1b;
}

/* Tip — soft violet */
.otpg-alert-tip {
	background: rgba(167, 139, 250, 0.18);
	border-color: #8b5cf6;
	color: #4c1d95;
}

/* Inline alerts for use inside Elementor controls */
.elementor-control-description .otpg-alert,
.otpg-inline-alert {
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 12px;
	margin-top: 8px;
	border-left: 3px solid;
}