/* ==========================================================
   VIRELION_OS — MANAGED PUBLIC CONTENT CHAMBER
========================================================== */

#vosManagedModal {
  position:fixed;

  inset:0;

  z-index:9000;

  display:grid;

  place-items:center;

  padding:
    clamp(14px,3vw,32px);
}


#vosManagedModal[hidden] {
  display:none;
}


.vos-managed-backdrop {
  position:absolute;

  inset:0;

  background:
    rgba(3,4,11,.74);

  backdrop-filter:
    blur(14px)
    saturate(115%);

  -webkit-backdrop-filter:
    blur(14px)
    saturate(115%);
}


.vos-managed-panel {
  position:relative;

  z-index:2;

  width:
    min(920px,100%);

  max-height:
    min(760px,88svh);

  overflow:auto;

  padding:
    clamp(22px,4vw,38px);

  border:
    1px solid
    rgba(212,175,122,.30);

  border-radius:
    26px;

  background:
    linear-gradient(
      145deg,
      rgba(24,27,51,.96),
      rgba(7,9,21,.97)
    );

  box-shadow:
    0 38px 110px
    rgba(0,0,0,.58),

    inset 0 1px 0
    rgba(255,255,255,.07),

    0 0 38px
    rgba(91,45,142,.10);

  color:
    #f1edf7;
}


.vos-managed-close {
  position:absolute;

  top:14px;
  right:14px;

  width:38px;
  height:38px;

  display:grid;

  place-items:center;

  padding:0;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:
    50%;

  background:
    rgba(5,7,16,.64);

  color:
    rgba(255,255,255,.82);

  font-size:
    1.35rem;

  cursor:pointer;
}


.vos-managed-kicker {
  margin-bottom:
    7px;

  color:
    #65d7f2;

  font:
    650 .65rem/1.2
    ui-monospace,
    monospace;

  letter-spacing:
    .18em;

  text-transform:
    uppercase;
}


.vos-managed-panel h2 {
  margin:
    0 52px 8px 0;

  font:
    600 clamp(2rem,5vw,3.3rem)/1
    Georgia,
    serif;
}


.vos-managed-subtitle {
  margin:
    0 0 18px;

  color:
    rgba(232,228,240,.64);

  font-size:
    .83rem;

  letter-spacing:
    .025em;
}


.vos-managed-description,
.vos-managed-body {
  color:
    rgba(232,228,240,.72);

  line-height:
    1.7;
}


.vos-managed-body {
  margin-top:
    18px;

  padding:
    18px;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius:
    17px;

  background:
    rgba(255,255,255,.024);
}


.vos-managed-actions {
  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:
    22px;
}


.vos-managed-action {
  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-height:
    42px;

  padding:
    0 17px;

  border:
    1px solid
    rgba(90,216,244,.34);

  border-radius:
    999px;

  background:
    linear-gradient(
      135deg,
      rgba(48,155,196,.15),
      rgba(91,45,142,.18)
    );

  color:white;

  font-size:
    .78rem;

  font-weight:
    650;

  text-decoration:none;
}


.vos-managed-grid {
  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(220px,1fr)
    );

  gap:
    14px;

  margin-top:
    22px;
}


.vos-managed-item {
  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:
    18px;

  background:
    rgba(255,255,255,.027);
}


.vos-managed-media {
  height:
    160px;

  display:grid;

  place-items:center;

  overflow:hidden;

  background:
    rgba(2,4,12,.64);
}


.vos-managed-media img,
.vos-managed-media video {
  width:100%;
  height:100%;

  object-fit:cover;
}


.vos-managed-media-placeholder {
  color:
    rgba(232,228,240,.28);

  font:
    .64rem/1.3
    ui-monospace,
    monospace;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}


.vos-managed-item-body {
  padding:
    15px;
}


.vos-managed-item-body h3 {
  margin:
    0 0 7px;

  font:
    600 1.08rem/1.2
    Georgia,
    serif;
}


.vos-managed-item-body p {
  margin:
    0;

  color:
    rgba(232,228,240,.58);

  font-size:
    .76rem;

  line-height:
    1.55;
}


.vos-managed-platform {
  display:inline-block;

  margin-bottom:
    8px;

  color:
    rgba(90,216,244,.72);

  font:
    .58rem/1
    ui-monospace,
    monospace;

  letter-spacing:
    .10em;

  text-transform:
    uppercase;
}


body.vos-managed-modal-open {
  overflow:hidden !important;
}


@media(max-width:620px) {

  .vos-managed-panel {
    border-radius:
      20px;

    padding:
      22px 18px;
  }


  .vos-managed-grid {
    grid-template-columns:
      1fr;
  }

}


/* ==========================================================
   MANAGED SLIDING RAIL + CUBIC ENGINES
========================================================== */

.vos-managed-carousel {
  margin-top:22px;
}


.vos-managed-carousel-head {
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:14px;

  margin-bottom:11px;

  color:
    rgba(232,228,240,.54);

  font:
    600 .62rem/1.2
    ui-monospace,
    monospace;

  letter-spacing:.12em;

  text-transform:uppercase;
}


.vos-managed-carousel-controls {
  display:flex;

  gap:7px;
}


.vos-managed-arrow {
  width:38px;
  height:38px;

  display:grid;

  place-items:center;

  padding:0;

  border:
    1px solid
    rgba(90,216,244,.30);

  border-radius:50%;

  background:
    rgba(7,10,22,.72);

  color:white;

  cursor:pointer;

  font-size:1rem;

  transition:
    opacity .2s ease,
    border-color .2s ease,
    transform .2s ease;
}


.vos-managed-arrow:not(:disabled):hover {
  border-color:
    rgba(90,216,244,.65);

  transform:
    translateY(-1px);
}


.vos-managed-arrow:disabled {
  opacity:.24;

  cursor:default;
}


.vos-managed-rail {
  display:flex;

  gap:14px;

  overflow-x:auto;
  overflow-y:hidden;

  padding:
    2px 2px 10px;

  scroll-behavior:smooth;

  scroll-snap-type:
    x mandatory;

  overscroll-behavior-inline:
    contain;

  scrollbar-width:none;

  -webkit-overflow-scrolling:
    touch;
}


.vos-managed-rail::-webkit-scrollbar {
  display:none;
}


.vos-managed-rail > .vos-managed-item {
  flex:
    0 0
    calc(
      (100% - 14px)
      / 2
    );

  min-width:0;

  scroll-snap-align:start;
  scroll-snap-stop:normal;
}


.vos-managed-engine-section {
  margin-top:26px;

  padding-top:22px;

  border-top:
    1px solid
    rgba(255,255,255,.075);
}


.vos-managed-engine-heading h3 {
  margin:
    5px 0 0;

  font:
    600 1.35rem/1.2
    Georgia,
    serif;
}


@media(max-width:900px) {

  .vos-managed-rail > .vos-managed-item {
    flex-basis:
      72%;
  }

}


@media(max-width:620px) {

  .vos-managed-rail > .vos-managed-item {
    flex-basis:
      88%;
  }


  .vos-managed-arrow {
    width:42px;
    height:42px;
  }

}