/* =====================================================================
   CHAVANS — Perspectives landing · horizontal slider (all articles)
   Loads after resources-detail.css. Prefix: .rsx-sl
   Canvas unit --u = 100vw/1600 (from applied-ai.css), same as the listing.
===================================================================== */
.rsx-slider{
  height: auto; background: #fff; color: #000;
  padding: calc(var(--u) * 90) 0 calc(var(--u) * 120) calc(var(--u) * 101.7);
  border-top: 1.25px solid var(--rsx-rule, #D9D9D9);
}
.rsx-sl-head{
  display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--u) * 40);
  padding-right: calc(var(--u) * 106);
}
.rsx-sl-h{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(var(--u) * 30); line-height: calc(var(--u) * 40);
  color: #000; padding-left: calc(var(--u) * 6.5);
}
.rsx-sl-sub{
  margin-top: calc(var(--u) * 8); padding-left: calc(var(--u) * 6.5);
  font-family: var(--mono); font-size: calc(var(--u) * 13.4); letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink-65);
}
.rsx-sl-ctrl{ display: flex; gap: calc(var(--u) * 12); flex: none; }
.rsx-sl-btn{
  width: calc(var(--u) * 52); height: calc(var(--u) * 52); min-width: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.67px solid #000; border-radius: 50%; background: transparent; color: #000; cursor: pointer;
  transition: background .25s, color .25s, opacity .25s;
}
.rsx-sl-btn svg{ width: 45%; height: auto; display: block; }
.rsx-sl-btn:hover:not(:disabled){ background: #000; color: #fff; }
.rsx-sl-btn:disabled{ opacity: .28; cursor: default; }
.rsx-sl-btn:focus-visible, .rsx-sl-card:focus-visible{ outline: 2px solid #000; outline-offset: 3px; }

.rsx-sl-track{
  margin-top: calc(var(--u) * 36);
  display: flex; gap: calc(var(--u) * 28);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  padding: calc(var(--u) * 10) calc(var(--u) * 106) calc(var(--u) * 18) calc(var(--u) * 13.3);
  margin-left: 0; scrollbar-width: none;
  scroll-padding-left: calc(var(--u) * 13.3);
}
.rsx-sl-track::-webkit-scrollbar{ display: none; }
.rsx-sl-card{
  flex: none; scroll-snap-align: start;
  width: calc(var(--u) * 400); min-height: calc(var(--u) * 430);
  display: flex; flex-direction: column;
  padding: calc(var(--u) * 34) calc(var(--u) * 32) calc(var(--u) * 34);
  background: var(--rsx-card, #D9D9D9); border-radius: calc(var(--u) * 22); color: #000;
  transition: background .35s, transform .5s cubic-bezier(.2,.7,.2,1);
}
.rsx-sl-card:hover{ background: #CFCFCF; transform: translateY(calc(var(--u) * -6)); }
.rsx-sl-pills{ display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); }
.rsx-sl-card .rsx-pill{ align-self: auto; }
.rsx-sl-card .rsx-card-t{ font-size: calc(var(--u) * 24); line-height: calc(var(--u) * 29); }
.rsx-sl-card .rsx-card-d{ margin-top: calc(var(--u) * 18); font-size: calc(var(--u) * 17); line-height: calc(var(--u) * 21); }
.rsx-sl-card:hover .rsx-arrow svg{ width: calc(var(--u) * 64); }
.rsx-sl-bar{
  margin: calc(var(--u) * 26) calc(var(--u) * 106) 0 calc(var(--u) * 6.5);
  height: 2px; background: var(--rsx-rule, #D9D9D9); position: relative; overflow: hidden;
}
.rsx-sl-bar i{ position: absolute; left: 0; top: 0; height: 100%; width: 20%; background: #000; transition: left .15s linear, width .15s linear; }

@media (max-width: 900px){
  .rsx-slider{ padding: 14vw 0 14vw var(--g); }
  .rsx-sl-head{ padding-right: var(--g); align-items: flex-start; flex-direction: column; gap: 5vw; }
  .rsx-sl-h{ font-size: 6.6vw; line-height: 1.2; padding-left: 0; }
  .rsx-sl-sub{ font-size: 0.75rem; padding-left: 0; margin-top: 2vw; }
  .rsx-sl-btn{ width: 44px; height: 44px; }
  .rsx-sl-ctrl{ gap: 10px; }
  .rsx-sl-track{ gap: 4vw; margin-top: 6vw; padding: 6px var(--g) 12px 0; scroll-padding-left: 0; }
  .rsx-sl-card{ width: 78vw; min-height: 0; padding: 7vw 6vw; border-radius: 16px; }
  .rsx-sl-card .rsx-card-t{ font-size: 5.6vw; line-height: 1.22; }
  .rsx-sl-card .rsx-card-d{ font-size: 1rem; line-height: 1.45; margin-top: 4vw; }
  .rsx-sl-bar{ margin: 6vw var(--g) 0 0; }
}
@media (prefers-reduced-motion: reduce){ .rsx-sl-track{ scroll-behavior: auto; } .rsx-sl-card{ transition: none; } }