/* ============================================================
   Akdeniz — кабинеты системы: переключатель ролей.
   Скриншотов нет намеренно: внутри реальные данные клуба.
   ============================================================ */

.roles{
  display:grid;
  gap:clamp(16px,2.4vw,28px);
  max-width:1100px; margin:0 auto; padding:0 clamp(20px,5vw,40px);
}

/* ---------- левая колонка: список ролей ---------- */
.roles__list{ display:flex; flex-direction:column; gap:8px; }
.roles__tab{
  position:relative;
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  gap:2px 12px; align-items:center;
  padding:14px 16px; border:0; border-radius:14px;
  background:rgba(10,33,53,.5); color:var(--foam);
  font:inherit; text-align:left; cursor:pointer;
  transition:background .25s, translate .25s var(--ease-out);
}
.roles__tab:hover{ background:rgba(16,48,74,.7); translate:2px 0; }
.roles__num{
  grid-row:1 / span 2;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:var(--foam-dim);
}
.roles__name{ font-size:16px; font-weight:700; letter-spacing:-.02em; }
.roles__hint{ font-size:12.5px; color:var(--foam-dim); }

/* выбранная роль подсвечивается своим цветом */
.roles__tab.is-on{
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--role) 20%, transparent), transparent 70%),
    rgba(10,33,53,.6);
}
.roles__tab.is-on::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px;
  width:3px; border-radius:0 3px 3px 0; background:var(--role);
}
.roles__tab.is-on .roles__num{ color:var(--role); }
.roles__tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- правая колонка: возможности ---------- */
.roles__panels{ position:relative; }
.roles__panel{
  padding:clamp(22px,3vw,32px);
  border-radius:18px 38px 18px 18px;
  background:
    radial-gradient(58% 42% at 100% 0%, color-mix(in srgb, var(--role) 55%, transparent) 0%, transparent 72%),
    linear-gradient(158deg, rgba(22,60,88,.5), rgba(7,27,44,.42));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(234,246,251,.07), 0 14px 38px rgba(2,10,18,.45);
  animation:role-in .35s var(--ease-out);
}
@keyframes role-in{ from{ opacity:0; transform:translateY(8px); } }

.roles__panel h3{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:0 0 20px; font-size:clamp(20px,2.4vw,26px); letter-spacing:-.025em;
}
.roles__panel h3 i{
  font-style:normal; font-family:var(--mono); font-size:12.5px;
  letter-spacing:.06em; color:var(--role);
}

.roles__feats{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px; }
.roles__feats li{
  position:relative; padding:11px 0 11px 30px;
  font-size:15px; line-height:1.55; color:#c3d8e4;
  border-top:1px solid var(--hair);
}
.roles__feats li:first-child{ border-top:0; }
/* галочка рисуется двумя линиями, без шрифта иконок */
.roles__feats li::before,
.roles__feats li::after{
  content:""; position:absolute; background:var(--role); border-radius:2px;
}
.roles__feats li::before{ left:3px;  top:21px; width:6px;  height:2px; rotate:45deg; }
.roles__feats li::after{  left:6px;  top:19px; width:11px; height:2px; rotate:-45deg; }

/* ---------- без JS показываем всё сразу ----------
   класс is-live ставит сам скрипт: пока его нет, переключать нечем */
.roles{ grid-template-columns:1fr; }
.roles__list{ display:none; }
.roles__panel{ margin-bottom:16px; animation:none; }
.roles__panel[hidden]{ display:block; }

.roles.is-live{ grid-template-columns:minmax(230px,290px) 1fr; }
.roles.is-live .roles__list{ display:flex; }
.roles.is-live .roles__panel{ margin-bottom:0; animation:role-in .35s var(--ease-out); }
.roles.is-live .roles__panel[hidden]{ display:none; }

@media (max-width:860px){
  .roles.is-live{ grid-template-columns:1fr; }
  .roles.is-live .roles__list{
    flex-direction:row; gap:8px;
    overflow-x:auto; padding-bottom:4px;
    scrollbar-width:none;
  }
  .roles__list::-webkit-scrollbar{ display:none; }
  .roles__tab{
    flex:none; grid-template-columns:auto; grid-template-rows:auto;
    padding:10px 15px; border-radius:100px;
  }
  .roles__tab:hover{ translate:none; }
  .roles__num,.roles__hint{ display:none; }
  .roles__tab.is-on::before{ display:none; }
  .roles__tab.is-on{ background:color-mix(in srgb, var(--role) 22%, rgba(10,33,53,.6)); }
}
@media (prefers-reduced-motion:reduce){
  .roles__panel{ animation:none; }
  .roles__tab:hover{ translate:none; }
}