/* ================================================================
   PRIYO STORY — STICKY SIDEBARS

   On desktop and tablet the left and right columns stay put while
   only the middle feed scrolls. Below 880px the left column turns
   back into the slide-in drawer, so the sticky rules stop there.
   ================================================================ */

@media (min-width:881px){

  /* The grid must not stretch its children to full height, or sticky
     has nothing to travel inside. And main must not span extra rows,
     or the sidebars' grid area ends up shorter than the feed. */
  .layout{ align-items:start; }
  .layout > main{ grid-row:auto; }
  .left-sidebar,
  .right-sidebar{ align-self:start; }

  /* a full-width banner sitting inside the grid (blood-donor,
     missing-alert) must span every column, or it steals a cell
     from the sidebars */
  .layout > .notice-row{ grid-column:1 / -1; }

  .left-sidebar,
  .right-sidebar{
    position:sticky;
    top:calc(var(--header-h, 64px) + 20px);
    max-height:calc(100vh - var(--header-h, 64px) - 40px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-right:2px;                  /* room for the scrollbar */

    scrollbar-width:thin;
    scrollbar-color:transparent transparent;
    transition:scrollbar-color .2s ease;
  }

  /* the sidebar scrollbar only appears while the pointer is there */
  .left-sidebar:hover,
  .right-sidebar:hover{
    scrollbar-color:#c9d4ce transparent;
  }
  .left-sidebar::-webkit-scrollbar,
  .right-sidebar::-webkit-scrollbar{ width:8px; }
  .left-sidebar::-webkit-scrollbar-track,
  .right-sidebar::-webkit-scrollbar-track{ background:transparent; }
  .left-sidebar::-webkit-scrollbar-thumb,
  .right-sidebar::-webkit-scrollbar-thumb{
    background:transparent;
    border-radius:8px;
    border:2px solid transparent;
    background-clip:content-box;
  }
  .left-sidebar:hover::-webkit-scrollbar-thumb,
  .right-sidebar:hover::-webkit-scrollbar-thumb{
    background:#c9d4ce;
    background-clip:content-box;
  }

  /* the centre column is the one that scrolls with the page */
  main{ min-width:0; }
}

/* On short screens a tall sidebar would be stuck half-visible.
   Letting it scroll internally keeps everything reachable. */
@media (min-width:881px) and (max-height:620px){
  .left-sidebar,
  .right-sidebar{
    top:calc(var(--header-h, 64px) + 10px);
    max-height:calc(100vh - var(--header-h, 64px) - 20px);
  }
}

@media (prefers-reduced-motion:reduce){
  .left-sidebar,
  .right-sidebar{ transition:none; }
}