/* ── FHA Projects pages shared styles ── */
.fha-page { max-width: 1160px; margin: 0 auto; padding: 0 16px 64px; }

/* Hero */
.fha-hero { display:flex; align-items:center; gap:24px; padding:36px 0 28px; border-bottom:2px solid var(--color-bg-h2); margin-bottom:32px; flex-wrap:wrap; }
.fha-hero-text h1 { font-size:1.75rem; font-weight:800; margin-bottom:4px; }
.fha-hero-text p  { color:var(--color-dark-grey); font-size:0.92rem; margin:0; max-width:640px; }
.fha-badge        { display:inline-flex; align-items:center; gap:6px; background:var(--color-bg-h2); color:var(--color-h2pp); font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:4px 12px; border-radius:20px; margin-top:8px; }

/* Stats */
.fha-stats { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.fha-stat  { background:var(--color-surface); border-radius:10px; padding:10px 18px; box-shadow:0 2px 8px color-mix(in srgb, var(--color-shade-base) 6%, transparent); text-align:center; min-width:84px; }
.fha-stat-num { font-size:1.4rem; font-weight:800; }
.fha-stat-lbl { font-size:0.68rem; color:var(--color-text-muted); text-transform:uppercase; letter-spacing:.05em; }

/* Filters */
.fha-filters      { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; align-items:center; }
.fha-filter-label { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-muted); margin-right:4px; }
.fha-filter-btn   { padding:5px 14px; border-radius:20px; border:1.5px solid var(--color-border-light); background:var(--color-surface); font-size:0.78rem; font-weight:600; cursor:pointer; color:var(--color-dark-grey); transition:all .15s; }
.fha-filter-btn:hover  { border-color:var(--fha-accent,var(--color-h2pp)); color:var(--fha-accent,var(--color-h2pp)); }
.fha-filter-btn.active { background:var(--fha-accent,var(--color-h2pp)); border-color:var(--fha-accent,var(--color-h2pp)); color:var(--color-text-on-color); }

/* Grid */
.fha-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }

/* Cards */
.fha-card { background:var(--color-surface); border-radius:14px; box-shadow:0 3px 12px color-mix(in srgb, var(--color-shade-base) 7%, transparent); overflow:hidden; display:flex; flex-direction:column; transition:transform .15s,box-shadow .15s; border-top:4px solid var(--fha-accent,var(--color-h2pp)); text-decoration:none; color:inherit; }
.fha-card:hover   { transform:translateY(-3px); box-shadow:0 8px 24px color-mix(in srgb, var(--color-shade-base) 13%, transparent); color:inherit; text-decoration:none; }

/* Card top colour by category */
.fha-card[data-cat="electro"]   { border-top-color:var(--color-h2); }
.fha-card[data-cat="underground"]{ border-top-color:var(--color-underground); }
.fha-card[data-cat="infra"]     { border-top-color:var(--color-storage); }
.fha-card[data-cat="safety"]    { border-top-color:var(--color-heat); }
.fha-card[data-cat="mobility"]  { border-top-color:var(--color-uses); }
.fha-card[data-cat="industry"]  { border-top-color:var(--color-transport); }
.fha-card[data-cat="valley"]    { border-top-color:var(--color-power); }
.fha-card[data-cat="energy"]    { border-top-color:var(--color-financial); }
.fha-card[data-cat="metering"]  { border-top-color:var(--color-border-strong); }
.fha-card[data-cat="thermo"]    { border-top-color:color-mix(in srgb, var(--color-standards) 70%, var(--color-shade-base)); }
.fha-card[data-cat="modeling"]  { border-top-color:var(--color-storage); }

.fha-card-head    { padding:18px 18px 10px; display:flex; flex-direction:column; gap:6px; flex:1; }
.fha-card-acronym { font-size:1rem; font-weight:800; color:var(--color-ink); letter-spacing:.01em; }
.fha-card-title   { font-size:0.78rem; color:var(--color-dark-grey); line-height:1.5; }
.fha-card-desc    { font-size:0.75rem; color:var(--color-dark-grey); line-height:1.55; margin-top:4px; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.fha-card-footer  { padding:10px 18px 14px; border-top:1px solid var(--color-light-grey); display:flex; flex-direction:column; gap:5px; }
.fha-meta-row     { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:0.72rem; }
.fha-meta-key     { color:var(--color-border-strong); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.fha-meta-val     { color:var(--color-dark-grey); font-weight:500; text-align:right; max-width:200px; }
.fha-fha-role     { font-size:0.7rem; color:var(--color-h2pp); font-style:italic; margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.fha-tags         { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
.fha-tag          { font-size:0.65rem; font-weight:600; padding:2px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:.04em; }
.fha-tag-eu       { background:var(--color-bg-h2); color:var(--color-h2); }
.fha-tag-national { background:color-mix(in srgb, var(--color-uses) 12%, var(--color-tint-base)); color:color-mix(in srgb, var(--color-uses) 70%, var(--color-shade-base)); }
.fha-tag-regional { background:color-mix(in srgb, var(--color-power) 12%, var(--color-tint-base)); color:var(--color-transport); }
.fha-tag-active   { background:var(--color-bg-h2); color:color-mix(in srgb, var(--color-standards) 70%, var(--color-shade-base)); }
.fha-tag-upcoming { background:color-mix(in srgb, var(--color-storage) 12%, var(--color-tint-base)); color:var(--color-storage); }
.fha-tag-completed{ background:var(--color-light-grey); color:var(--color-text-muted); }
.fha-tag-cat      { background:color-mix(in srgb, var(--color-admin) 12%, var(--color-tint-base)); color:var(--color-admin); }
.fha-tag-coord    { background:color-mix(in srgb, var(--color-financial) 20%, var(--color-tint-base)); color:var(--color-underground); }

.fha-card.fha-hidden { display:none; }
#fhaEmpty { display:none; text-align:center; padding:48px; color:var(--color-border-strong); grid-column:1/-1; }

/* Year range filter */
.fha-year-filter {
  margin-bottom: 20px;
  background: var(--color-surface);
  border-radius: 12px;
  padding: 14px 20px 12px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-shade-base) 6%, transparent);
}
.fha-year-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.fha-year-display {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-light-grey);
  padding: 3px 14px;
  border-radius: 20px;
  letter-spacing: .03em;
}
.fha-year-hint {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--color-border-strong);
  font-style: italic;
}
.fha-dual-range {
  position: relative;
  height: 24px;
  margin: 0 9px;
}
.fha-year-track {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  height: 5px;
  background: var(--color-border-light);
  border-radius: 3px;
  pointer-events: none;
}
.fha-year-track-fill {
  position: absolute;
  height: 100%;
  background: var(--fha-accent, var(--color-h2pp));
  opacity: 0.65;
  border-radius: 3px;
  transition: left .04s, width .04s;
}
.fha-dual-range input[type=range] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none;
  outline: none;
  margin: 0;
  padding: 0;
}
.fha-dual-range input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fha-accent, var(--color-h2pp));
  border: 2.5px solid var(--color-surface);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--color-shade-base) 28%, transparent);
  cursor: pointer;
  pointer-events: all;
  transition: transform .1s;
}
.fha-dual-range input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.fha-dual-range input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fha-accent, var(--color-h2pp));
  border: 2.5px solid var(--color-surface);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--color-shade-base) 28%, transparent);
  cursor: pointer;
  pointer-events: all;
}
.fha-dual-range input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 5px; }
.fha-dual-range input[type=range]::-moz-range-track { background: transparent; height: 5px; }
.fha-year-ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--color-border-strong);
  margin: 5px 9px 0;
  user-select: none;
}

/* FHA role badge top right */
.fha-coord-badge {
  display:inline-block; font-size:0.62rem; font-weight:700; background:color-mix(in srgb, var(--color-financial) 20%, var(--color-tint-base)); color:var(--color-underground);
  padding:2px 7px; border-radius:8px; vertical-align:middle; margin-left:6px; var(--color-surface)-space:nowrap;
}