/*!
 * Hello Elementor Child — Track Record Archive widget
 * --------------------------------------------------------------
 * Layout adapted from html/02-Track Record Index Page/index.html:
 *   - First post  → `.tra-plate` (full-width lead plate)
 *   - Posts 2..N  → 2-up grid of `.tra-cell` items
 *
 * Element-level overrides set in Elementor's Style tab inject
 * inline styles on `{{WRAPPER}}`, which beat anything in this file.
 */

/* ───────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ─────────────────────────────────────────────────────────────── */
.tra-wrap{
	--tra-gold:#C9A84C;
	--tra-gold-bright:#D4B060;
	--tra-gold-soft:#AA7E37;
	--tra-gold-line:rgba(201,168,76,.35);
	--tra-gold-faint:rgba(201,168,76,.15);
	--tra-saddle:#A66A3D;
	--tra-mesa:#E8D9C5;
	--tra-navy:#1E2A38;
	--tra-navy-deeper:#0F1620;
	--tra-cream:#FAF9F6;
	--tra-warm-line:rgba(166,106,61,.32);
	--tra-warm-line-strong:rgba(232,217,197,.3);
	--tra-display:'Playfair Display', Georgia, serif;
	--tra-body:'Outfit','Helvetica Neue', sans-serif;
	--tra-mono:'JetBrains Mono','SF Mono', Consolas, monospace;
}

/* ───────────────────────────────────────────────────────────────
   FILTER BAR (asset types)
   ─────────────────────────────────────────────────────────────── */
.tra-wrap .tra-filter{
	--tra-dash-color:var(--tra-warm-line);
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:0;
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom:1px dashed var(--tra-dash-color);
}
.tra-wrap .tra-flbl{
	font-family:var(--tra-mono);
	font-size:.58rem;
	color:var(--tra-gold-soft);
	letter-spacing:.22em;
	text-transform:uppercase;
	margin-right:28px;
	opacity:.85;
	line-height:normal;
}
.tra-wrap .tra-fi{
	position:relative;
	font-family:var(--tra-body);
	font-size:.74rem;
	font-weight:500;
	color:rgba(30,42,56,.55);
	letter-spacing:.14em;
	text-transform:uppercase;
	padding:8px 14px;
	text-decoration:none;
	transition:color .25s ease;
	cursor:pointer;
	line-height:1;
}
.tra-wrap .tra-fi::after{
	content:"";
	position:absolute;
	bottom:2px;
	left:14px;
	width:0;
	height:2px;
	background:var(--tra-gold-soft);
	transition:width .3s ease;
	border-radius:1px;
}
.tra-wrap .tra-fi:hover,
.tra-wrap .tra-fi.on{color:var(--tra-navy);}
.tra-wrap .tra-fi:hover::after,
.tra-wrap .tra-fi.on::after{width:24px;}

/* ───────────────────────────────────────────────────────────────
   GRID — lead plate sits above the 2-up cells block
   ─────────────────────────────────────────────────────────────── */
.tra-wrap .tra-grid{
	display:flex;
	flex-direction:column;
	gap:24px;
}
.tra-wrap .tra-cells{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:24px;
}

/* ───────────────────────────────────────────────────────────────
   LEAD PLATE (post 1)
   ─────────────────────────────────────────────────────────────── */
.tra-wrap .tra-plate{
	position:relative;
	display:var(--tra-plate-display, block);
	flex-direction:var(--tra-plate-dir, row);
	width:100%;
	text-decoration:none;
	color:inherit;
	border:1px solid var(--tra-gold-faint);
	background:var(--tra-navy-deeper);
	transition:border-color .4s ease;
	overflow:hidden;
}
.tra-wrap .tra-plate:hover{border-color:var(--tra-gold);}

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

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

/* Data panel (bottom-LEFT overlay — matches HTML mockup) */
.tra-wrap .tra-plate-panel{
	position:var(--tra-plate-panel-pos, absolute);
	left:0;
	bottom:0;
	z-index:4;
	width:var(--tra-plate-panel-w, min(580px, 58%));
	padding:22px 26px 24px;
	background:rgba(15,22,32,.94);
	backdrop-filter:blur(10px);
	border-right:1px solid var(--tra-gold-line);
	border-top:1px solid var(--tra-gold-line);
	flex-shrink:0;
	box-sizing:border-box;
}
.tra-wrap .tra-plate-head{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:18px;
}
.tra-wrap .tra-pp-sheet{
	font-family:var(--tra-mono);
	font-size:.62rem;
	color:var(--tra-gold);
	letter-spacing:.16em;
	background:rgba(201,168,76,.1);
	border:1px solid var(--tra-gold-faint);
	padding:3px 8px;
	line-height:normal;
}
.tra-wrap .tra-pp-dash{
	--tra-dash-color:var(--tra-gold);
	flex:1;
	height:1px;
	background:repeating-linear-gradient(to right, var(--tra-dash-color) 0, var(--tra-dash-color) 4px, transparent 4px, transparent 8px);
	opacity:.4;
}
.tra-wrap .tra-pp-label{
	font-family:var(--tra-mono);
	font-size:.6rem;
	color:var(--tra-gold);
	letter-spacing:.2em;
	text-transform:uppercase;
	opacity:.85;
	line-height:normal;
}
.tra-wrap .tra-plate-title{
	font-family:var(--tra-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;
}
.tra-wrap .tra-pp-place{
	font-size:.92rem;
	color:rgba(255,255,255,.7);
	font-style:italic;
	font-family:var(--tra-display);
	margin-bottom:18px;
}
.tra-wrap .tra-pp-rule{
	--tra-dash-color:var(--tra-gold);
	height:1px;
	background:repeating-linear-gradient(to right, var(--tra-dash-color) 0, var(--tra-dash-color) 4px, transparent 4px, transparent 8px);
	opacity:.45;
	margin-bottom:18px;
}
.tra-wrap .tra-pp-dims{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:18px;
	margin-bottom:0;
}
.tra-wrap .tra-pp-dim{
	display:flex;
	flex-direction:column;
	gap:4px;
	min-width:0;
}
.tra-wrap .tra-pp-dim-lbl{
	font-family:var(--tra-mono);
	font-size:.56rem;
	color:var(--tra-gold);
	letter-spacing:.2em;
	text-transform:uppercase;
	opacity:.85;
	line-height:normal;
}
.tra-wrap .tra-pp-dim-val{
	font-size:.92rem;
	color:#fff;
	font-weight:400;
	word-wrap:break-word;
	overflow-wrap:break-word;
	hyphens:auto;
	line-height:normal;
}
.tra-wrap .tra-pp-link{
	display:inline-flex;
	align-items:center;
	gap:10px;
	font-family:var(--tra-mono);
	font-size:.72rem;
	font-weight:500;
	color:var(--tra-gold);
	letter-spacing:.14em;
	text-transform:uppercase;
	padding-bottom:4px;
	border-bottom:1px solid var(--tra-gold);
	transition:gap .3s ease, color .3s ease, border-bottom-color .3s ease;
	margin-top:18px;
}
.tra-wrap .tra-pp-link .arr{display:inline-flex;align-items:center;}
.tra-wrap .tra-pp-link .arr svg{width:12px;height:12px;}
.tra-wrap .tra-plate:hover .tra-pp-link{
	color:var(--tra-gold-bright);
	border-bottom-color:var(--tra-gold-bright);
	gap:14px;
}

/* ───────────────────────────────────────────────────────────────
   CELLS (posts 2..N — 2-up grid by default)
   ─────────────────────────────────────────────────────────────── */
.tra-wrap .tra-cell{
	/* Layout variant vars — defaults match "overlay" (the legacy layout).
	 * Overridden per breakpoint by the Cell Layout responsive control
	 * (overlay / split / stacked) via selectors_dictionary. */
	--tra-cell-display: block;
	--tra-cell-dir: column;
	--tra-cell-img-w: 100%;
	--tra-cell-img-aspect: 16/10;
	--tra-cell-panel-pos: absolute;
	--tra-cell-panel-w: 60%;
	/* Mask, vbtn pill, and the plate's top/right gold borders are part of the
	 * overlay design ONLY — the panel floats over a darkened image and the
	 * borders define its floating edges. In split/stacked the panel sits in
	 * flow next to/below the image, so these defaults are NONE/0 and the
	 * overlay variant explicitly turns them back on via selectors_dictionary.
	 * This keeps the artifact strip out of the boundary between image and
	 * panel in non-overlay variants even if Elementor hasn't applied the
	 * responsive override yet. */
	--tra-cell-mask-display: none;
	--tra-cell-panel-bt: 0;
	--tra-cell-panel-br: 0;

	position:relative;
	display: var(--tra-cell-display);
	flex-direction: var(--tra-cell-dir);
	text-decoration:none;
	color:inherit;
	border:1px solid var(--tra-warm-line);
	background:transparent;
	transition:border-color .4s ease;
	overflow:hidden;
	/* In split/stacked variants the cell becomes a flex container — let it
	 * absorb the grid row stretch so sibling cards in the same row align to
	 * the same bottom. The plate flex:1 1 auto rule below grows to fill the
	 * leftover space. Overlay variant uses display:block so this has no
	 * effect there. */
	height:100%;
}
.tra-wrap .tra-cell:hover{border-color:var(--tra-saddle);}

.tra-wrap .tra-cell-img{
	position:relative;
	width: var(--tra-cell-img-w);
	aspect-ratio: var(--tra-cell-img-aspect);
	overflow:hidden;
	background:var(--tra-navy-deeper);
	flex-shrink:0;
}
.tra-wrap .tra-cell-img img{
	width:100%;
	height:100%;
	object-fit:cover;
	filter:brightness(.9) contrast(1.05);
	transition:transform 1s ease-out, filter .4s ease;
	display:block;
}
.tra-wrap .tra-cell:hover .tra-cell-img img{
	transform:scale(1.04);
	filter:brightness(1) contrast(1.05);
}
.tra-wrap .tra-cell-mask{
	display: var(--tra-cell-mask-display);
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:55%;
	background:linear-gradient(180deg, transparent 0%, rgba(15,22,32,.7) 100%);
	pointer-events:none;
	z-index:2;
}

/* Crosshair corners on cells (top-left + bottom-left as in mockup) */
.tra-wrap .tra-cell-ch{
	position:absolute;
	width:10px;
	height:10px;
	z-index:3;
	opacity:.65;
}
.tra-wrap .tra-cell-ch::before,
.tra-wrap .tra-cell-ch::after{
	content:"";
	position:absolute;
	background:var(--tra-gold);
}
.tra-wrap .tra-cell-ch::before{width:10px;height:1px;top:4.5px;left:0;}
.tra-wrap .tra-cell-ch::after{width:1px;height:10px;left:4.5px;top:0;}
.tra-wrap .tra-cell-ch-tl{top:10px;left:10px;}
.tra-wrap .tra-cell-ch-tr{top:10px;right:10px;}
.tra-wrap .tra-cell-ch-bl{bottom:10px;left:10px;}
.tra-wrap .tra-cell-ch-br{bottom:10px;right:10px;}

/* View pill — top-right of the image. Visible in every cell-layout variant
 * (the show_view_pill toggle still controls global on/off). */
.tra-wrap .tra-vbtn{
	position:absolute;
	top:14px;
	right:14px;
	z-index:5;
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-family:var(--tra-mono);
	font-size:.6rem;
	font-weight:500;
	color:var(--tra-gold);
	background:rgba(15,22,32,.85);
	border:1px solid var(--tra-gold-line);
	padding:6px 12px;
	letter-spacing:.18em;
	text-transform:uppercase;
	backdrop-filter:blur(6px);
	transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.tra-wrap .tra-vbtn .arr{display:inline-flex;align-items:center;}
.tra-wrap .tra-vbtn .arr svg{width:11px;height:11px;transition:transform .3s ease;}
.tra-wrap .tra-cell:hover .tra-vbtn{
	background:var(--tra-gold-soft);
	border-color:var(--tra-gold-soft);
	color:#fff;
}
.tra-wrap .tra-cell:hover .tra-vbtn .arr svg{transform:translateX(2px);}

/* Cell data panel — position + width driven by --tra-cell-panel-* vars
 * (overlay = absolute bottom-left, split = relative side column,
 *  stacked = relative below image). The flex:1 1 auto lets the panel grow
 * to fill the leftover cell height in split/stacked so a row of cards in
 * the grid all align to the same bottom edge regardless of how much text
 * each one carries. Has no effect in overlay (position:absolute strips
 * the element from flex flow). */
.tra-wrap .tra-cell-plate{
	position: var(--tra-cell-panel-pos);
	left:0;
	bottom:0;
	width: var(--tra-cell-panel-w);
	z-index:4;
	padding:16px 20px;
	background:rgba(15,22,32,.94);
	backdrop-filter:blur(10px);
	border-right: var(--tra-cell-panel-br, 1px solid var(--tra-gold-line));
	border-top: var(--tra-cell-panel-bt, 1px solid var(--tra-gold-line));
	box-sizing:border-box;
	flex:1 1 auto;
}
.tra-wrap .tra-cell-head{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:10px;
}
.tra-wrap .tra-cell-type{
	font-family:var(--tra-mono);
	font-size:.58rem;
	color:var(--tra-gold);
	letter-spacing:.18em;
	text-transform:uppercase;
	opacity:.95;
	line-height:normal;
}
.tra-wrap .tra-cell-title{
	font-family:var(--tra-display);
	font-size:1.4rem;
	font-weight:500;
	color:#fff;
	line-height:1.15;
	margin:0 0 4px;
	letter-spacing:-.01em;
	word-wrap:break-word;
	overflow-wrap:break-word;
}
.tra-wrap .tra-cell-place{
	font-size:.84rem;
	color:rgba(255,255,255,.7);
	font-style:italic;
	font-family:var(--tra-display);
	margin-bottom:12px;
}
.tra-wrap .tra-cell-rule{
	--tra-dash-color:var(--tra-gold);
	height:1px;
	background:repeating-linear-gradient(to right, var(--tra-dash-color) 0, var(--tra-dash-color) 4px, transparent 4px, transparent 8px);
	opacity:.45;
	margin-bottom:12px;
}
.tra-wrap .tra-cell-dims{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:14px;
}
.tra-wrap .tra-cell-dim{
	display:flex;
	flex-direction:column;
	gap:3px;
	min-width:0;
}
.tra-wrap .tra-cell-dim-lbl{
	font-family:var(--tra-mono);
	font-size:.54rem;
	color:var(--tra-gold);
	letter-spacing:.18em;
	text-transform:uppercase;
	opacity:.9;
	line-height:normal;
}
.tra-wrap .tra-cell-dim-val{
	font-size:.84rem;
	color:#fff;
	font-weight:400;
	word-wrap:break-word;
	overflow-wrap:break-word;
	line-height:normal;
}

/* ───────────────────────────────────────────────────────────────
   RESPONSIVE FALLBACK — kicks in below 1024 px when the user has
   NOT picked a Plate Layout / Cell Layout for that breakpoint.
   Elementor's responsive control output uses `.elementor-element-XXX
   .tra-cell { ... }` which has higher specificity than our `.tra-wrap
   .tra-cell` rule, so any explicit tablet/mobile pick overrides
   these vars.
   ─────────────────────────────────────────────────────────────── */
@media (max-width:1024px){
	.tra-wrap .tra-plate{
		--tra-plate-display:flex;
		--tra-plate-dir:column;
		--tra-plate-img-w:100%;
		--tra-plate-panel-pos:relative;
		--tra-plate-panel-w:100%;
	}
	.tra-wrap .tra-plate-panel{
		border-right:none;
	}
	.tra-wrap .tra-cells{grid-template-columns:1fr;}
	.tra-wrap .tra-cell{
		/* Force every cell-layout var to the "stacked" variant so existing
		 * widgets (saved before the Cell Layout control existed) still get
		 * a sensible tablet/mobile render. */
		--tra-cell-display: flex;
		--tra-cell-dir: column;
		--tra-cell-img-w: 100%;
		--tra-cell-img-aspect: 16/9;
		--tra-cell-panel-pos: relative;
		--tra-cell-panel-w: 100%;
		--tra-cell-mask-display: none;
		--tra-cell-panel-bt: 0;
		--tra-cell-panel-br: 0;
	}
}
@media (max-width:640px){
	.tra-wrap .tra-pp-dims{grid-template-columns:repeat(2, minmax(0, 1fr));}
	.tra-wrap .tra-cell-dims{grid-template-columns:repeat(2, minmax(0, 1fr));}
	.tra-wrap .tra-filter{padding-bottom:24px;}
	.tra-wrap .tra-flbl{
		flex-basis:100%;
		text-align:center;
		margin:0 0 12px;
	}
}

/* ───────────────────────────────────────────────────────────────
   LOAD MORE BUTTON (AJAX)
   ─────────────────────────────────────────────────────────────── */
.tra-loadmore-wrap{
	display:flex;
	justify-content:center;
	margin-top:32px;
	padding-top:36px;
	border-top:1px dashed var(--tra-warm-line);
}
.tra-loadmore{
	display:inline-flex;
	align-items:center;
	gap:12px;
	font-family:var(--tra-mono);
	font-size:.78rem;
	font-weight:500;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--tra-gold-soft);
	background:transparent;
	border:1px solid var(--tra-gold-soft);
	padding:18px 40px;
	cursor:pointer;
	transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.tra-loadmore:hover{
	background:var(--tra-gold-soft);
	border-color:var(--tra-gold-soft);
	color:#fff;
}
.tra-loadmore .arr{display:inline-flex;align-items:center;}
.tra-loadmore .arr svg{width:14px;height:14px;transition:transform .3s ease;}
.tra-loadmore:hover .arr svg{transform:translateY(4px);}
.tra-loadmore.is-loading,
.tra-loadmore[disabled]{
	opacity:.65;
	cursor:default;
}
.tra-loadmore.is-loading::after{
	content:"";
	width:12px;
	height:12px;
	border:2px solid currentColor;
	border-right-color:transparent;
	border-radius:50%;
	display:inline-block;
	animation:tra-spin .8s linear infinite;
	margin-left:6px;
}
@keyframes tra-spin{ to{ transform:rotate(360deg); } }

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