/* ===== Simple, clean frontpage slider ===== */
:root {
  --fpns-blue: #1e3a8a;      /* change this to your preferred blue */
  --fpns-blue-soft: #e8eefc; /* subtle hover/active */
  --fpns-border: #dfe3f0;
  --fpns-radius: 10px;
  --fpns-gap: 20px;
  --fpns-padding: 12px;
  --fpns-text: #1f2937;      /* base text color (used only where needed) */
}

/* Layout: 70% image / 30% titles */
.fpns {
  display: grid;
  grid-template-columns: 90% 10%;
  gap: var(--fpns-gap);
  align-items: start;
}

/* Left (image) — keep a steady ratio for simplicity */
.fpns-left {
  position: relative;
  overflow: hidden;
  border-radius: var(--fpns-radius);
  aspect-ratio: 16 / 9;              /* no JS height sync needed */
  background: #f3f4f6;
}
.fpns-slide { display: none; }
.fpns-slide.is-active { display: block; }
.fpns-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fpns-caption {
  position: absolute; inset: auto 0 0 0;
  padding: 10px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  color: #fff;
}
.fpns-title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
}

/* Right (titles) */
.fpns-right { display: flex; flex-direction: column; gap: var(--fpns-gap); }
.fpns-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.fpns-item {
  width: 100%;
  display: grid; grid-template-columns: 26px 1fr; gap: 10px;
  align-items: start;
  padding: var(--fpns-padding);
  border: 1px solid var(--fpns-border);
  border-radius: var(--fpns-radius);
  background: #fff;
  cursor: pointer;
}
.fpns-item:focus-visible { outline: 2px solid var(--fpns-blue); outline-offset: 2px; }
.fpns-item:hover,
.fpns-item.is-active {
  background: var(--fpns-blue-soft);
  border-color: var(--fpns-blue);
}
.fpns-index {
  font-weight: 700;
  color: var(--fpns-blue);
}
.fpns-headline {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--fpns-blue);           /* blue text as requested */
}

/* Controls */
.fpns-controls { display: flex; gap: 8px; }
.fpns-controls button {
  padding: 8px 10px;
  border-radius: var(--fpns-radius);
  border: 1px solid var(--fpns-bord