/*!
 * Hello Elementor Child — Projects widget (merged AP + PA)
 * --------------------------------------------------------------
 * Two layouts via `data-layout` on .hp-wrap:
 *   stack → vertical plate-style column (Active Projects look)
 *   grid  → 1..4 column card grid       (Project Archive look)
 *
 * Inline overrides from Elementor's Style tab inject styles on
 * `{{WRAPPER}}`, which beat anything in this file.
 */

/* ───────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ─────────────────────────────────────────────────────────────── */
.hp-wrap{
	--hp-gold:#C9A84C;
	--hp-gold-soft:#AA7E37;
	--hp-mesa:#E8D9C5;
	--hp-saddle:#A66A3D;
	--hp-warm-line:rgba(166,106,61,.32);
	--hp-warm-line-strong:rgba(232,217,197,.3);
	--hp-warm-bg:rgba(90,62,43,.4);
	--hp-warm-bg-strong:rgba(90,62,43,.92);
	--hp-navy:#0F1620;
	--hp-display:'Playfair Display', Georgia, serif;
	--hp-mono:'JetBrains Mono','SF Mono', Consolas, monospace;
	--hp-body:'Outfit','Helvetica Neue', sans-serif;
}

/* ───────────────────────────────────────────────────────────────
   LAYOUT — single CSS grid; columns control drives the count
   (columns=1 = vertical stack visually; >1 = grid)
   `align-items:stretch` keeps every card the same height as the
   tallest in its row, regardless of content variation.
   ─────────────────────────────────────────────────────────────── */
.hp-wrap .hp-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:32px;
	align-items:stretch;
}

/* ───────────────────────────────────────────────────────────────
   CARD
   ─────────────────────────────────────────────────────────────── */
.hp-wrap .hp-card{
	position:relative;
	display:var(--hp-display, block);
	flex-direction:var(--hp-dir, row);
	height:100%; /* fill the grid cell — equalises cards in 2+ column rows */
	text-decoration:none;
	color:inherit;
	border:1px solid var(--hp-warm-line);
	background:var(--hp-warm-bg);
	transition:border-color .4s ease;
	overflow:hidden;
}
.hp-wrap .hp-card:hover{border-color:var(--hp-saddle);}

.hp-wrap .hp-card-img{
	position:relative;
	width:var(--hp-img-w, 100%);
	aspect-ratio:var(--hp-img-aspect, 16/6.5);
	overflow:hidden;
	background:var(--hp-navy);
	flex-shrink:0;
}
.hp-wrap .hp-card-img img{
	width:100%;
	height:100%;
	object-fit:cover;
	filter:brightness(.92) contrast(1.04);
	transition:transform 1s ease-out, filter .4s ease;
	display:block;
}
.hp-wrap .hp-card:hover .hp-card-img img{
	transform:scale(1.03);
	filter:brightness(1) contrast(1.05);
}

/* ───────────────────────────────────────────────────────────────
   PLATE BADGE — AP-style overlay chip on image
   (Restored to match the original Active Projects design exactly.)
   ─────────────────────────────────────────────────────────────── */
.hp-wrap .hp-badge{
	position:absolute;
	top:24px;
	left:24px;
	z-index:5;
	background:#FFFFFF;
	color:var(--hp-gold-soft);
	font-family:var(--hp-mono);
	font-size:.62rem;
	font-weight:600;
	letter-spacing:.2em;
	text-transform:uppercase;
	padding:8px 14px;
	border:1px solid var(--hp-gold-soft);
	border-radius:6px;
	box-shadow:0 2px 8px rgba(15,22,32,.2);
	line-height:1;
}

/* ───────────────────────────────────────────────────────────────
   CROSSHAIR CORNERS
   ─────────────────────────────────────────────────────────────── */
.hp-wrap .hp-card-ch{
	position:absolute;
	width:14px;
	height:14px;
	z-index:3;
	opacity:.7;
}
.hp-wrap .hp-card-ch::before,
.hp-wrap .hp-card-ch::after{
	content:"";
	position:absolute;
	background:var(--hp-mesa);
}
.hp-wrap .hp-card-ch::before{width:14px;height:1px;top:6.5px;left:0;}
.hp-wrap .hp-card-ch::after{width:1px;height:14px;left:6.5px;top:0;}
.hp-wrap .hp-card-ch-tl{top:14px;left:14px;}
.hp-wrap .hp-card-ch-tr{top:14px;right:14px;}
.hp-wrap .hp-card-ch-bl{bottom:14px;left:14px;}
.hp-wrap .hp-card-ch-br{bottom:14px;right:14px;}

/* ───────────────────────────────────────────────────────────────
   DATA PANEL — defaults to bottom-right anchor (AP default).
   panel_anchor control overrides top/right/bottom/left + border-width
   via selectors_dictionary in PHP.
   ─────────────────────────────────────────────────────────────── */
.hp-wrap .hp-card-panel{
	position:var(--hp-panel-pos, absolute);
	right:0;
	bottom:0;
	width:var(--hp-panel-w, min(580px, 58%));
	z-index:4;
	padding:22px 26px 24px;
	background:var(--hp-warm-bg-strong);
	backdrop-filter:blur(10px);
	border-style:solid;
	border-color:var(--hp-warm-line-strong);
	border-width:1px 0 0 1px;  /* default = bottom-right anchor → top + left borders */
	box-sizing:border-box;
	flex-shrink:0;
}

/* ───────────────────────────────────────────────────────────────
   PANEL HEAD — Project Code · dotted dash · Status Label
   ─────────────────────────────────────────────────────────────── */
.hp-wrap .plate-panel-head{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:18px;
	width:100%;
}
.hp-wrap .pp-sheet{
	font-family:var(--hp-mono);
	font-size:.62rem;
	color:var(--hp-mesa);
	letter-spacing:.16em;
	background:rgba(232,217,197,.1);
	border:1px solid var(--hp-warm-line-strong);
	padding:3px 8px;
	flex-shrink:0;
	line-height:normal;
}
.hp-wrap .pp-dash{
	--hp-dash-color:var(--hp-mesa);
	flex:1 1 0;
	min-width:0;
	height:1px;
	background:repeating-linear-gradient(to right, var(--hp-dash-color) 0, var(--hp-dash-color) 4px, transparent 4px, transparent 8px);
	opacity:.5;
}
.hp-wrap .pp-dash:last-child{
	flex-grow:1;
	flex-basis:0;
}
.hp-wrap .pp-label{
	font-family:var(--hp-mono);
	font-size:.6rem;
	color:var(--hp-mesa);
	letter-spacing:.2em;
	text-transform:uppercase;
	opacity:.85;
	flex-shrink:0;
	line-height:normal;
}

/* ───────────────────────────────────────────────────────────────
   PANEL HEAD — Asset Type mode (alternative to Code + Status Label)
   Matches html/04-Active Projects Index Page/.../active-projects-index.css
   .ap-card-head + .ap-card-type — plain mono text, no chip box.
   ─────────────────────────────────────────────────────────────── */
.hp-wrap .hp-asset-head{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:14px;
	flex-wrap:wrap;
}
.hp-wrap .hp-asset-type{
	font-family:var(--hp-mono);
	font-size:.6rem;
	color:var(--hp-mesa);
	letter-spacing:.18em;
	text-transform:uppercase;
	opacity:.95;
	flex-shrink:0;
	line-height:normal;
}

/* ───────────────────────────────────────────────────────────────
   TITLE / LOCATION / RULE
   ─────────────────────────────────────────────────────────────── */
.hp-wrap .hp-card-title{
	font-family:var(--hp-display);
	font-size:clamp(1.5rem, 2.2vw, 2rem);
	font-weight:500;
	color:#fff;
	line-height:1.15;
	margin:0 0 8px;
	letter-spacing:-.01em;
	word-wrap:break-word;
	overflow-wrap:break-word;
}
.hp-wrap .hp-card-place{
	font-size:.92rem;
	color:rgba(232,217,197,.85);
	font-style:italic;
	font-family:var(--hp-display);
	margin-bottom:18px;
	word-wrap:break-word;
	overflow-wrap:break-word;
	line-height:normal;
}
.hp-wrap .hp-card-rule{
	--hp-rule-color:var(--hp-mesa);
	height:1px;
	background:repeating-linear-gradient(to right, var(--hp-rule-color) 0, var(--hp-rule-color) 4px, transparent 4px, transparent 8px);
	opacity:.45;
	margin-bottom:18px;
}

/* ───────────────────────────────────────────────────────────────
   STATS
   ─────────────────────────────────────────────────────────────── */
.hp-wrap .hp-card-dims{
	display:grid;
	grid-template-columns:repeat(var(--hp-stat-cols, 4), minmax(0, 1fr));
	gap:18px;
	margin-bottom:0;
}
.hp-wrap .hp-card-dim{
	display:flex;
	flex-direction:column;
	gap:4px;
	min-width:0;
}
.hp-wrap .hp-card-dim-lbl{
	font-family:var(--hp-mono);
	font-size:.56rem;
	color:var(--hp-mesa);
	letter-spacing:.2em;
	text-transform:uppercase;
	opacity:.85;
	line-height:normal;
}
.hp-wrap .hp-card-dim-val{
	font-size:.92rem;
	color:#fff;
	font-weight:400;
	word-wrap:break-word;
	overflow-wrap:break-word;
	hyphens:auto;
	line-height:normal;
}

/* ───────────────────────────────────────────────────────────────
   VIEW LINK
   ─────────────────────────────────────────────────────────────── */
.hp-wrap .hp-vlink{
	display:inline-flex;
	align-items:center;
	align-self:flex-start;
	gap:10px;
	font-family:var(--hp-mono);
	font-size:.72rem;
	font-weight:500;
	color:var(--hp-mesa);
	letter-spacing:.14em;
	text-transform:uppercase;
	padding-bottom:4px;
	border-bottom:1px solid var(--hp-mesa);
	transition:gap .3s ease, color .3s ease, border-bottom-color .3s ease, background-color .3s ease;
	margin-top:20px;
	line-height:normal;
}
.hp-wrap .hp-vlink .arr{display:inline-flex;align-items:center;}
.hp-wrap .hp-vlink .arr svg{width:12px;height:12px;}
.hp-wrap .hp-card:hover .hp-vlink{
	color:#fff;
	border-bottom-color:#fff;
	gap:14px;
}

/* ───────────────────────────────────────────────────────────────
   RESPONSIVE FALLBACK
   ─────────────────────────────────────────────────────────────── */
@media (max-width:1024px){
	.hp-wrap .hp-card{
		--hp-display:flex;
		--hp-dir:column;
		--hp-img-w:100%;
		--hp-panel-pos:relative;
		--hp-panel-w:100%;
	}
	.hp-wrap .hp-card-img{flex-shrink:0;} /* image never compresses */
	.hp-wrap .hp-card-panel{
		top:auto;
		right:auto;
		bottom:auto;
		left:auto;
		border-width:1px 0 0 0;
		flex:1 1 auto; /* panel grows to fill remaining card height — keeps grid cards equal */
	}
	.hp-wrap .hp-card-dims{grid-template-columns:repeat(2, minmax(0, 1fr));}
	.hp-wrap .hp-grid{grid-template-columns:1fr;}
}

/* Split / Stacked card layouts at desktop also use flex — equalise the
   panel height there so cards in a 2+ column row align cleanly. */
.hp-wrap .hp-card[style*="--hp-display:flex"] .hp-card-img,
.hp-wrap .hp-card[style*="--hp-display: flex"] .hp-card-img{
	flex-shrink:0;
}
.hp-wrap .hp-card[style*="--hp-display:flex"] .hp-card-panel,
.hp-wrap .hp-card[style*="--hp-display: flex"] .hp-card-panel{
	flex:1 1 auto;
}

/* ───────────────────────────────────────────────────────────────
   PAGINATION (numbers / prev_next)
   ─────────────────────────────────────────────────────────────── */
.hp-pagination{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:48px;
	justify-content:center;
}
.hp-pagination .page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:40px;
	height:40px;
	padding:0 14px;
	border-radius:2px;
	font-family:var(--hp-mono,'JetBrains Mono','SF Mono',Consolas,monospace);
	font-size:.78rem;
	font-weight:500;
	text-decoration:none;
	color:#E8D9C5;
	background:rgba(232,217,197,.06);
	border:1px solid rgba(232,217,197,.3);
	letter-spacing:.06em;
	transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.hp-pagination .page-numbers:hover{
	background:rgba(232,217,197,.14);
	color:#fff;
}
.hp-pagination .page-numbers.current{
	background:#A66A3D;
	color:#fff;
	border-color:#A66A3D;
	cursor:default;
}
.hp-pagination .page-numbers.dots{
	background:transparent;
	border-color:transparent;
	pointer-events:none;
}

/* ───────────────────────────────────────────────────────────────
   LOAD MORE BUTTON (AJAX)
   ─────────────────────────────────────────────────────────────── */
.hp-loadmore-wrap{
	display:flex;
	justify-content:center;
	margin-top:48px;
}
.hp-loadmore{
	display:inline-flex;
	align-items:center;
	gap:10px;
	font-family:var(--hp-mono,'JetBrains Mono','SF Mono',Consolas,monospace);
	font-size:.78rem;
	font-weight:500;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:#E8D9C5;
	background:transparent;
	border:1px solid #E8D9C5;
	padding:14px 28px;
	cursor:pointer;
	transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.hp-loadmore:hover{
	background:#E8D9C5;
	color:#0F1620;
}
.hp-loadmore.is-loading,
.hp-loadmore[disabled]{
	opacity:.65;
	cursor:default;
}
.hp-loadmore.is-loading::after{
	content:"";
	width:12px;
	height:12px;
	border:2px solid currentColor;
	border-right-color:transparent;
	border-radius:50%;
	display:inline-block;
	animation:hp-spin .8s linear infinite;
	margin-left:6px;
}
@keyframes hp-spin{ to{ transform:rotate(360deg); } }

/* ───────────────────────────────────────────────────────────────
   EMPTY STATE
   ─────────────────────────────────────────────────────────────── */
.hp-wrap .hp-empty,
.hp-empty{
	padding:24px;
	background:#f4efe6;
	color:#5a4630;
	text-align:center;
	border-radius:4px;
}