/*
 * Lapisan keterbacaan lintas halaman peran.
 * Diletakkan setelah CSS khusus agar label operasional tidak kembali terlalu kecil.
 */
.role-detail-page{
  overflow-x:clip;
}

/* Seluruh 40 halaman peran memakai gutter dan lebar konten yang sama. */
.role-detail-page .role-detail-shell{
  width:min(1180px,calc(100% - 40px));
  margin-inline:auto;
}

.role-detail-page .role-detail-nav,
.role-detail-page [class*=secondary]{
  position:sticky;
  top:0;
  z-index:900;
}

/* Brand dan CTA mengambil ruang yang sama sehingga menu selalu tepat di poros
   layar. Tautan yang panjang tetap dapat digulir, bukan terpotong di kiri. */
.role-detail-page .role-detail-nav{
  height:64px;
  min-height:64px;
  overflow:hidden;
  border-bottom:1px solid #d9e4f1;
  background:rgba(255,255,255,.97);
  box-shadow:0 8px 24px rgba(8,35,74,.06);
  backdrop-filter:blur(16px);
}

/* Kolom tengah `auto`, BUKAN lebar tetap. Dengan patokan 760px, daftar yang
   isinya hanya sedikit lebih panjang dari itu — Murid dan Alumni, dua yang
   paling pendek — tetap dipotong dan menempel ke kiri, sehingga terlihat tidak
   rata tengah padahal kotaknya di tengah. Kolom `auto` menyesuaikan isi: daftar
   pendek berhenti selebar isinya dan sisa ruang terbagi rata kiri-kanan (persis
   seperti .section-nav di halaman lain), daftar panjang menyusut sampai batas
   ruang lalu bergulir. Kedua kolom tepi tetap kembar sehingga tengahnya benar
   di poros halaman apa pun isinya; 150px cukup untuk tombol "Daftar Gratis",
   dan nama peran yang panjang sudah dipotong elipsis di bawah. */
.role-detail-page .role-detail-nav>.role-detail-shell{
  display:grid;
  width:min(1180px,calc(100% - 40px));
  height:100%;
  grid-template-columns:minmax(135px,1fr) minmax(0,auto) minmax(135px,1fr);
  gap:14px;
  align-items:center;
  overflow:visible;
}

.role-detail-page .role-detail-nav-scroll{
  grid-column:2;
  min-width:0;
  height:100%;
}

.role-detail-page .role-detail-nav-scroll .role-detail-links{
  display:flex;
  min-width:0;
  height:100%;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  overflow-x:auto;
  padding:0 8px;
  scrollbar-width:none;
}

.role-detail-page .role-detail-nav-scroll.is-idle .role-detail-links{
  justify-content:center;
}

.role-detail-page .role-detail-nav-scroll .role-detail-links::-webkit-scrollbar{
  display:none;
}

.role-detail-page .role-detail-links a{
  position:relative;
  display:flex;
  flex:0 0 auto;
  height:100%;
  align-items:center;
  padding-inline:12px;
  border-radius:8px;
  color:#5f7088;
  font-size:13px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  transition:color .18s ease,background-color .18s ease;
}

.role-detail-page .role-detail-links a:hover,
.role-detail-page .role-detail-links a:focus-visible{
  color:#176bff;
  background:#edf4ff;
  outline:none;
}

.role-detail-page .role-detail-links a.active::after{
  right:12px;
  bottom:0;
  left:12px;
  height:3px;
  border-radius:3px 3px 0 0;
  background:#176bff;
}

/* max-width WAJIB ada: `justify-self:start` membuat tautan ini selebar teksnya,
   dan tanpa batas terhadap kolomnya `overflow:hidden` tidak pernah bekerja —
   nama peran yang panjang menjulur ke kolom tengah dan menabrak tombol geser. */
.role-detail-page .role-detail-brand{
  grid-column:1;
  justify-self:start;
  max-width:100%;
  overflow:hidden;
  color:#102744;
  font-size:15px;
  font-weight:850;
  text-decoration:none;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.role-detail-page .role-detail-cta{
  grid-column:3;
  justify-self:end;
  padding:10px 14px;
  border-radius:9px;
  color:#fff;
  background:#176bff;
  font-size:12px;
  font-weight:850;
  text-decoration:none;
  white-space:nowrap;
}

.role-detail-page .role-detail-back{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:7px 11px;
  border:1px solid rgba(173,204,248,.28);
  border-radius:9px;
  color:#d6e5fb;
  background:rgba(255,255,255,.06);
  font-size:14px;
  font-weight:800;
  text-decoration:none;
}

.role-detail-page .role-detail-back:hover{
  color:#fff;
  background:rgba(255,255,255,.12);
}

.role-detail-page .role-detail-brand{font-size:15px}
.role-detail-page .role-detail-links a{font-size:13px}
.role-detail-page .role-detail-cta{font-size:12px}
.role-detail-page .role-detail-kicker{font-size:12px}
.role-detail-page .role-detail-back{font-size:14px}

/* Naikkan komposisi hero tanpa mengubah karakter layout tiap peran. */
.role-detail-page main>section:first-child{
  padding-top:50px!important;
}

.role-detail-page main>section:first-child .role-detail-back{
  margin-bottom:20px;
}

/* Jaga judul Komite tetap utuh tanpa memasuki area visual hero. */
.role-detail-page[data-role-page=komite] .context-hero__copy h1{
  max-width:100%;
  font-size:clamp(44px,4vw,62px);
  overflow-wrap:anywhere;
  hyphens:auto;
}

.role-detail-page[data-role-page=komite] .context-hero__copy h1 span{
  display:inline;
  margin:0;
  font-size:.9em!important;
  line-height:1.02;
}

.role-detail-page main small{font-size:11px}

.role-detail-page main [class*=console] p,
.role-detail-page main [class*=board] p,
.role-detail-page main [class*=card] p,
.role-detail-page main [class*=flow] p,
.role-detail-page main [class*=list] p,
.role-detail-page main [class*=catalog] p,
.role-detail-page main [class*=matrix] p,
.role-detail-page main [class*=grid]>article>p{
  font-size:13px;
  line-height:1.65;
}

.role-detail-page main [class*=console] span,
.role-detail-page main [class*=console] em,
.role-detail-page main [class*=board] span,
.role-detail-page main [class*=board] em,
.role-detail-page main [class*=card] span,
.role-detail-page main [class*=card] em,
.role-detail-page main [class*=flow] span,
.role-detail-page main [class*=list] span,
.role-detail-page main [class*=catalog] span,
.role-detail-page main [class*=matrix] span{
  font-size:11px;
}

/* Label kecil pada konsol tidak boleh mengecilkan fragmen judul section. */
.role-detail-page main h1 span,
.role-detail-page main h2 span{
  font-size:inherit!important;
  line-height:inherit;
}

.role-detail-page [class*=secondary] a.active,
.role-detail-page .role-detail-links a.active{
  color:#176bff;
}

@media(max-width:850px){
  .role-detail-page .role-detail-nav,
  .role-detail-page [class*=secondary]{top:60px}
  .role-detail-page .role-detail-shell{width:calc(100% - 28px)}
  .role-detail-page .role-detail-nav{height:56px;min-height:56px}
  .role-detail-page .role-detail-nav>.role-detail-shell{
    width:100%;
    grid-template-columns:minmax(0,1fr);
    gap:0;
  }
  .role-detail-page .role-detail-brand,
  .role-detail-page .role-detail-cta{display:none}
  .role-detail-page .role-detail-nav-scroll{grid-column:1}
  .role-detail-page .role-detail-nav-scroll,
  .role-detail-page .role-detail-nav-scroll.has-controls,
  .role-detail-page .role-detail-nav-scroll.is-idle{grid-template-columns:minmax(0,1fr)}
  .role-detail-page .role-detail-nav-scroll .role-detail-nav-arrow{display:none}
  .role-detail-page .role-detail-nav-scroll .role-detail-links{padding-inline:10px}
  .role-detail-page .role-detail-links a{padding-inline:11px}
  .role-detail-page .role-detail-links a.active::after{right:11px;left:11px}
  .role-detail-page main>section:first-child{padding-top:44px!important}
  .role-detail-page[data-role-page=komite] .context-hero__copy h1{font-size:39px}
  .role-detail-page[data-role-page=komite] .context-hero__copy h1 span{font-size:.9em!important}
}