/* ═══════════════════════════════════════════════════════════════════════════
   ESBART — Sub-navegació de pàgina (shared/components/Subnav.jsx)
   Rail lateral (desktop >1100px) + barra editorial sticky (<1100px).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Offset d'àncora per a nav fixa + barra */
.pk-section[id], section[id], .act-row[id], .act-block[id] {
  scroll-margin-top: 130px;
}

/* ─── Barra editorial sticky (pantalles petites) ───────────────────────── */
.esubnav-bar {
  position: sticky; top: 73px; z-index: 40;
  background: rgba(250, 245, 236, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.esubnav-bar .inner {
  display: flex; align-items: stretch; gap: 10px;
  overflow-x: auto; scrollbar-width: none;
}
.esubnav-bar .inner::-webkit-scrollbar { display: none; }
.esubnav-bar a {
  position: relative; flex: 0 0 auto;
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 15px 16px;
  text-decoration: none;
  white-space: nowrap;
}
.esubnav-bar a .n {
  font-family: var(--ff-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .12em; color: var(--burgundy); opacity: .45;
  transition: opacity .25s;
}
.esubnav-bar a .t {
  font-family: var(--ff-display); font-size: 17.5px; color: var(--mute);
  transition: color .25s;
}
.esubnav-bar a:hover .t { color: var(--ink); }
.esubnav-bar a.active .t { color: var(--burgundy); font-style: italic; }
.esubnav-bar a.active .n { opacity: 1; }
.esubnav-bar .fade {
  position: absolute; top: 0; bottom: 0; width: 64px;
  pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 2;
}
.esubnav-bar .fade.l { left: 0; background: linear-gradient(to right, var(--cream), transparent); }
.esubnav-bar .fade.r { right: 0; background: linear-gradient(to left, var(--cream), transparent); }
.esubnav-bar.can-l .fade.l, .esubnav-bar.can-r .fade.r { opacity: 1; }
.esubnav-bar .more {
  position: absolute; right: 10px; top: 50%; z-index: 3;
  transform: translateY(-50%);
  font-family: var(--ff-mono); font-size: 15px; color: var(--burgundy);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.esubnav-bar.can-r .more { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .esubnav-bar.can-r .more { animation: esubnavNudge 1.6s ease-in-out infinite; }
}
@keyframes esubnavNudge {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(5px); }
}
.esubnav-bar .progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--burgundy); z-index: 3;
}
@media (min-width: 1100px) { .esubnav-bar { display: none; } }

/* ─── Rail lateral fix (desktop) ───────────────────────────────────────── */
.esubnav-rail {
  position: fixed; right: 36px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column;
}
.esubnav-rail a {
  position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding: 11px 0; text-decoration: none;
}
.esubnav-rail .lbl {
  font-family: var(--ff-display); font-style: italic; font-size: 15.5px;
  color: var(--cream); background: rgba(26, 16, 18, 0.88);
  padding: 7px 15px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  opacity: 0; transform: translateX(8px);
  transition: opacity .3s, transform .3s, color .3s, background .3s;
  white-space: nowrap;
}
.esubnav-rail .node {
  flex: 0 0 auto; width: 28px; height: 2px;
  background: rgba(26, 16, 18, 0.4);
  box-shadow: 0 0 0 1px rgba(250, 245, 236, 0.45);
  transition: width .3s ease, background .3s ease;
}
.esubnav-rail a:hover .lbl, .esubnav-rail a.active .lbl { opacity: 1; transform: translateX(0); }
.esubnav-rail a.active .lbl { background: var(--burgundy); color: var(--cream); }
.esubnav-rail a.active .node {
  width: 44px; background: var(--burgundy);
  box-shadow: 0 0 0 1px rgba(250, 245, 236, 0.7);
}
.esubnav-rail a:hover .node { background: var(--burgundy-light, var(--burgundy)); }
@media (max-width: 1099.98px) { .esubnav-rail { display: none; } }