/*!
 * Hello Elementor Child — Track Record widget
 * --------------------------------------------------------------
 * Layout:
 *   - First post  → `.plate.hec-plate` (featured sheet, lines 341-383 of index.html)
 *   - Posts 2..N  → `.pi-item` cards inside `.plate-index > .hec-ap-pi-items`
 *                   (lines 386-422 of index.html)
 * Element-level overrides set in Elementor's Style tab inject inline
 * styles on `{{WRAPPER}}`, which beat anything in this file.
 */

/* ───────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ─────────────────────────────────────────────────────────────── */

.hec-ap-wrap{
	--hec-gold:#C9A84C;
	--hec-gold-bright:#D4B060;
	--hec-gold-line:rgba(201,168,76,.35);
	--hec-gold-faint:rgba(201,168,76,.15);
	--hec-navy:#0F1620;
	--hec-txt-dim:rgba(255,255,255,.58);
	--hec-display:'Playfair Display', Georgia, serif;
	--hec-mono:'JetBrains Mono','SF Mono',Consolas,monospace;
}

/* ───────────────────────────────────────────────────────────────
   FEATURED PLATE (post 1)
   ─────────────────────────────────────────────────────────────── */

.hec-ap-wrap .plate{
	position:relative;
	display:var(--hec-plate-display, block);
	flex-direction:var(--hec-plate-dir, row);
	width:100%;
	text-decoration:none;
	color:inherit;
	border:1px solid var(--hec-gold-faint);
	background:var(--hec-navy);
	transition:border-color .4s ease;
}
.hec-ap-wrap .plate:hover{border-color:var(--hec-gold);}

.hec-ap-wrap .plate-img{
	position:relative;
	width:var(--hec-plate-img-w, 100%);
	aspect-ratio:var(--hec-plate-img-aspect, 16/5.5);
	overflow:hidden;
	background:var(--hec-navy);
	flex-shrink:0;
}
.hec-ap-wrap .plate-img img{
	width:100%;
	height:100%;
	object-fit:cover;
	filter:brightness(.88) contrast(1.06);
	transition:transform 1s ease-out, filter .4s ease;
}
.hec-ap-wrap .plate:hover .plate-img img{
	transform:scale(1.03);
	filter:brightness(1) contrast(1.06);
}

/* Decorative crosshairs */
.hec-ap-wrap .plate-crosshair{
	position:absolute;
	width:14px;
	height:14px;
	z-index:3;
	opacity:.75;
}
.hec-ap-wrap .plate-crosshair::before,
.hec-ap-wrap .plate-crosshair::after{
	content:"";
	position:absolute;
	background:var(--hec-gold);
}
.hec-ap-wrap .plate-crosshair::before{width:14px;height:1px;top:6.5px;left:0;}
.hec-ap-wrap .plate-crosshair::after{width:1px;height:14px;left:6.5px;top:0;}
.hec-ap-wrap .plate-ch-tl{top:14px;left:14px;}
.hec-ap-wrap .plate-ch-tr{top:14px;right:14px;}
.hec-ap-wrap .plate-ch-bl{bottom:14px;left:14px;}
.hec-ap-wrap .plate-ch-br{bottom:14px;right:14px;}

/* Data panel (bottom-right overlay on featured plate) */
.hec-ap-wrap .plate-panel{
	position:var(--hec-plate-panel-pos, absolute);
	right:0;
	bottom:0;
	z-index:4;
	width:var(--hec-plate-panel-w, min(400px, 42%));
	padding:22px 26px 24px;
	background:rgba(15,22,32,.92);
	backdrop-filter:blur(10px);
	border-left:1px solid var(--hec-gold-line);
	border-top:1px solid var(--hec-gold-line);
	container-type:inline-size;
	flex-shrink:0;
	box-sizing:border-box;
}
.hec-ap-wrap .plate-panel-head{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:18px;
}
.hec-ap-wrap .pp-sheet{
	font-family:var(--hec-mono);
	font-size:.62rem;
	color:var(--hec-gold);
	letter-spacing:.16em;
	background:rgba(201,168,76,.1);
	border:1px solid var(--hec-gold-faint);
	padding:3px 8px;
}
.hec-ap-wrap .pp-dash{
	--hec-dash-color:var(--hec-gold);
	flex:1;
	height:1px;
	background:repeating-linear-gradient(to right, var(--hec-dash-color) 0, var(--hec-dash-color) 4px, transparent 4px, transparent 8px);
	opacity:.4;
}
.hec-ap-wrap .pp-label{
	font-family:var(--hec-mono);
	font-size:.6rem;
	color:var(--hec-gold);
	letter-spacing:.2em;
	text-transform:uppercase;
	opacity:.85;
}

.hec-ap-wrap .hec-plate-title{
	font-family:var(--hec-display);
	font-size:clamp(1.5rem, 2.2vw, 2rem);
	font-weight:500;
	color:#fff;
	line-height:1.15;
	margin:0 0 10px;
	letter-spacing:-.01em;
}

.hec-ap-wrap .pp-place{
	font-size:.88rem;
	color:var(--hec-txt-dim);
	margin-bottom:18px;
	font-style:italic;
	font-family:var(--hec-display);
}

.hec-ap-wrap .pp-rule{
	--hec-dash-color:var(--hec-gold);
	height:1px;
	background:repeating-linear-gradient(to right, var(--hec-dash-color) 0, var(--hec-dash-color) 4px, transparent 4px, transparent 8px);
	opacity:.45;
	margin-bottom:18px;
}

.hec-ap-wrap .pp-dims{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(0,1fr));
	gap:20px 24px;
	margin-bottom:24px;
}
.hec-ap-wrap .pp-dim{
	display:flex;
	flex-direction:column;
	gap:4px;
	min-width:0;
}
.hec-ap-wrap .pp-dim-lbl{
	font-family:var(--hec-mono);
	font-size:.56rem;
	color:var(--hec-gold);
	letter-spacing:.2em;
	text-transform:uppercase;
	opacity:.85;
}
.hec-ap-wrap .pp-dim-val{
	font-size:.96rem;
	color:#fff;
	font-weight:400;
	word-wrap:break-word;
	overflow-wrap:break-word;
	hyphens:auto;
}
/* Removed the .pp-dims-4 nowrap rule — it forced long stat values like
 * "Flex Industrial + Retail" to overflow horizontally on the featured plate.
 * Long values are expected to wrap; the base .pp-dim-val rules above
 * (word-wrap / overflow-wrap / hyphens) handle wrapping for every case. */
@container (max-width: 540px){
	.hec-ap-wrap .pp-dims-4{grid-template-columns:repeat(2,1fr);}
}

.hec-ap-wrap .pp-link{
	display:inline-flex;
	align-items:center;
	gap:10px;
	font-family:var(--hec-mono);
	font-size:.72rem;
	font-weight:500;
	color:var(--hec-gold);
	letter-spacing:.14em;
	text-transform:uppercase;
	padding-bottom:4px;
	border-bottom:1px solid var(--hec-gold);
	transition:gap .3s ease, color .3s ease, border-bottom-color .3s ease;
}
.hec-ap-wrap .pp-link .arr{display:inline-flex;align-items:center;}
.hec-ap-wrap .pp-link .arr svg{width:12px;height:12px;}
.hec-ap-wrap .plate:hover .pp-link{
	color:var(--hec-gold-bright);
	border-bottom-color:var(--hec-gold-bright);
	gap:14px;
}

/* Plate layout fallback — only fires below 900px for legacy widgets that
   have no Featured Plate Layout / Aspect Ratio set. Elementor's
   per-breakpoint controls beat this (higher specificity) at any size. */
@media (max-width: 900px){
	.hec-ap-wrap .plate{
		--hec-plate-display:flex;
		--hec-plate-dir:column;
		--hec-plate-img-w:100%;
		--hec-plate-img-aspect:16/9;
		--hec-plate-panel-pos:relative;
		--hec-plate-panel-w:100%;
	}
	.hec-ap-wrap .plate-panel{border-left:none;}
}

/* ───────────────────────────────────────────────────────────────
   INDEX STRIP (posts 2..N)
   ─────────────────────────────────────────────────────────────── */

.hec-ap-wrap .plate-index{
	margin-top:0;
	position:relative;
}

.hec-ap-wrap .pi-head{
	display:flex;
	align-items:center;
	gap:16px;
	padding:14px 22px;
	border:1px solid var(--hec-gold-faint);
	border-bottom:none;
	background:rgba(201,168,76,.05);
}
.hec-ap-wrap .pih-label{
	font-family:var(--hec-mono);
	font-size:.62rem;
	color:var(--hec-gold);
	letter-spacing:.22em;
	text-transform:uppercase;
	line-height:normal;
}
.hec-ap-wrap .pih-dash{
	flex:1;
	height:1px;
	background:repeating-linear-gradient(to right, var(--hec-gold) 0, var(--hec-gold) 5px, transparent 5px, transparent 10px);
	opacity:.4;
}
.hec-ap-wrap .pih-count{
	font-family:var(--hec-mono);
	font-size:.58rem;
	color:var(--hec-gold);
	letter-spacing:.16em;
	opacity:.85;
	line-height:normal;
}

/* Index strip grid — `grid-template-columns` is set per-breakpoint by Elementor's
   responsive Columns control. Default 1 col for mobile-first. */
.hec-ap-pi-items{
	display:grid;
	grid-template-columns:1fr;
	gap:0;
	border:1px solid var(--hec-gold-faint);
	background:var(--hec-navy);
}

/* pi-item — direction + alignment + thumb width are driven by the responsive
   "Item Layout" control via CSS custom properties (set on .hec-ap-pi-items).
   Defaults below match the Horizontal layout (image left, body right). */
.hec-ap-wrap .pi-item{
	display:flex;
	flex-direction:var(--hec-pi-dir, row);
	align-items:var(--hec-pi-align, center);
	gap:32px;
	padding:32px;
	text-decoration:none;
	color:inherit;
	background:transparent;
	transition:background .3s ease;
	position:relative;
	min-width:0;
	border-right:1px solid var(--hec-gold-faint);
	border-bottom:1px solid var(--hec-gold-faint);
}
.hec-ap-wrap .pi-item:hover{background:rgba(201,168,76,.04);}

.hec-ap-wrap .pi-thumb{
	width:var(--hec-pi-thumb-w, 300px);
	height:220px;
	flex-shrink:0;
	overflow:hidden;
	background:var(--hec-navy);
	border:1px solid var(--hec-gold-faint);
}
.hec-ap-wrap .pi-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	filter:brightness(.9);
	transition:transform .6s ease, filter .3s ease;
	display:block;
}
.hec-ap-wrap .pi-item:hover .pi-thumb img{
	transform:scale(1.05);
	filter:brightness(1);
}

.hec-ap-wrap .pi-body{
	flex:1 1 auto;
	min-width:0;
	display:flex;
	flex-direction:column;
}

/* Container queries — fine-tune type + spacing when each card itself is
   narrow. They DON'T override the user's Item Layout choice (which sets
   the flex direction + thumb width via CSS custom properties). */
.hec-ap-pi-items{container-type:inline-size;}

@container (max-width: 600px){
	.hec-ap-wrap .pi-item{gap:22px;padding:28px;}
	.hec-ap-wrap .pi-title{font-size:1.6rem;}
	.hec-ap-wrap .pi-dims-4{grid-template-columns:repeat(2,1fr);gap:14px 20px;}
}
@container (max-width: 380px){
	.hec-ap-wrap .pi-thumb{height:170px;}
	.hec-ap-wrap .pi-title{font-size:1.4rem;}
	.hec-ap-wrap .pi-dims,
	.hec-ap-wrap .pi-dims-3,
	.hec-ap-wrap .pi-dims-4{grid-template-columns:repeat(2,1fr);gap:14px 20px;}
}

/* pi-item content */
.hec-ap-wrap .pi-sheet{
	display:inline-block;
	align-self:flex-start;
	font-family:var(--hec-mono);
	font-size:.7rem;
	color:var(--hec-gold);
	letter-spacing:.18em;
	background:rgba(201,168,76,.1);
	border:1px solid var(--hec-gold-faint);
	padding:4px 11px;
	margin-bottom:16px;
}
.hec-ap-wrap .pi-title{
	font-family:var(--hec-display);
	font-size:2rem;
	font-weight:500;
	color:#fff;
	line-height:1.2;
	margin:0 0 10px;
	letter-spacing:-.015em;
}
.hec-ap-wrap .pi-place{
	font-family:var(--hec-display);
	font-size:1rem;
	color:var(--hec-gold);
	font-style:italic;
	margin-bottom:20px;
	padding-bottom:18px;
	border-bottom:1px dashed rgba(201,168,76,.22);
}
.hec-ap-wrap .pi-dims{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:18px 24px;
	margin-bottom:24px;
}
.hec-ap-wrap .pi-dims-1{grid-template-columns:1fr;}
.hec-ap-wrap .pi-dims-2{grid-template-columns:repeat(2,1fr);}
.hec-ap-wrap .pi-dims-3,
.hec-ap-wrap .pi-dims-4{grid-template-columns:repeat(3,1fr);}
.hec-ap-wrap .pi-dim{
	display:flex;
	flex-direction:column;
	gap:3px;
	min-width:0;
}
.hec-ap-wrap .pi-dim-lbl{
	font-family:var(--hec-mono);
	font-size:.58rem;
	color:var(--hec-gold);
	letter-spacing:.2em;
	text-transform:uppercase;
	opacity:.85;
	line-height:normal;
}
.hec-ap-wrap .pi-dim-val{
	font-size:.98rem;
	color:#fff;
	font-weight:400;
	word-wrap:break-word;
	overflow-wrap:break-word;
	line-height:normal;
}
.hec-ap-wrap .pi-link{
	display:inline-flex;
	align-self:flex-start;
	align-items:center;
	gap:10px;
	font-family:var(--hec-mono);
	font-size:.72rem;
	font-weight:500;
	color:var(--hec-gold);
	letter-spacing:.14em;
	text-transform:uppercase;
	padding-bottom:4px;
	border-bottom:1px solid var(--hec-gold);
	transition:gap .3s ease, color .3s ease, border-bottom-color .3s ease;
}
.hec-ap-wrap .pi-link .arr{display:inline-flex;align-items:center;}
.hec-ap-wrap .pi-link .arr svg{width:12px;height:12px;}
.hec-ap-wrap .pi-item:hover .pi-link{
	color:var(--hec-gold-bright);
	border-bottom-color:var(--hec-gold-bright);
	gap:14px;
}

/* Mobile fallback for pi-items in any column count */
@media (max-width:767px){
	.hec-ap-wrap .pi-item{gap:16px;padding:20px;}
	.hec-ap-wrap .pi-thumb{height:200px;}
	.hec-ap-wrap .pi-title{font-size:1.5rem;}
	.hec-ap-wrap .pi-dims,
	.hec-ap-wrap .pi-dims-3,
	.hec-ap-wrap .pi-dims-4{grid-template-columns:repeat(2,1fr);gap:14px 20px;}
}

/* Empty state */
.hec-ap-wrap .hec-ap-empty,
.hec-ap-empty{
	padding:24px;
	background:#f4efe6;
	color:#5a4630;
	text-align:center;
	border-radius:4px;
}