/* ============================================================
   home-extra.css — начална страница (body.hv3): дясната колона
   Слага се последен <link> в <head>, след a11y.css.
   Пипа само дясната колона на .grid; home-v3.css / app.css /
   app.js / index.html остават непокътнати.
   ============================================================ */

body.hv3{
  --he-rail: 296px;                        /* ширина на дясната колона (както в home-v3.css) */
  --he-top: 84px;                          /* лепкаво отстояние: хедър 74 + 10 */
  --he-card: clamp(430px, 52vh, 520px);    /* височина на картата с колелото */
}

/* ------------------------------------------------------------
   1. Колелото е лепкаво до края на четенето
   ------------------------------------------------------------ */
body.hv3 #view-spin .grid > .wheelpanel{
  position: sticky;
  top: var(--he-top);
  align-self: start;
  z-index: 4;
}

/* ...и диша малко повече вертикално: глава отгоре, колело по
   средата, превключвателят долу — без да се разтяга картата */
body.hv3 #view-spin .grid > .wheelpanel{
  display: flex;
  flex-direction: column;
  min-height: var(--he-card);
}

body.hv3 #view-spin .grid > .wheelpanel .wheelwrap{
  margin-top: auto;
  margin-bottom: auto;
}

/* ------------------------------------------------------------
   2. Празното под колелото става светлина и база, не дупка
   Отлив, който тръгва изпод картата и гасне към дъното, плюс къса
   месингова чертичка на базата. Нищо не се подменя и не се разтяга.
   ------------------------------------------------------------ */
body.hv3 #view-spin .grid{position: relative}

body.hv3 #view-spin .grid::after{
  content: "";
  position: absolute;
  top: var(--he-card);
  bottom: 0;
  right: 0;
  width: var(--he-rail);
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(95% 120% at 50% 0%,
      rgba(201, 162, 39, .075) 0%,
      rgba(201, 162, 39, 0) 62%),
    linear-gradient(180deg,
      rgba(25, 34, 28, .34) 0%,
      rgba(19, 26, 21, .16) 40%,
      rgba(13, 17, 14, .05) 74%,
      rgba(10, 13, 11, 0) 100%);
}

/* долен завършек на колоната — къса месингова чертичка, за да не
   изтича в нищото */
body.hv3 #view-spin .grid::before{
  content: "";
  position: absolute;
  bottom: 26px;
  right: calc(var(--he-rail) / 2 - 34px);
  width: 68px;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(201, 162, 39, 0) 0%,
    rgba(201, 162, 39, .38) 50%,
    rgba(201, 162, 39, 0) 100%);
}

/* ------------------------------------------------------------
   3. Ако .statpanel / .paths / .steps някога станат директни
   деца на .grid (днес са в .rightcol), стоят в дясната колона
   под колелото — подредени, без разтягане.
   ------------------------------------------------------------ */
body.hv3 #view-spin .grid > .statpanel,
body.hv3 #view-spin .grid > .paths,
body.hv3 #view-spin .grid > .steps{
  grid-column: 2;
  align-self: start;
}

/* ------------------------------------------------------------
   4. Под 1100px колоните се събират в една — витрината пада
   ------------------------------------------------------------ */
@media (max-width: 1100px){
  body.hv3 #view-spin .grid > .wheelpanel{
    position: static;
    display: block;
    min-height: 0;
  }
  body.hv3 #view-spin .grid > .wheelpanel .wheelwrap{
    margin-top: 0;
    margin-bottom: 0;
  }
  body.hv3 #view-spin .grid::after,
  body.hv3 #view-spin .grid::before{display: none}
}