/*
  Home page layout. Loaded only on the home page.
  Components own their internal spacing. This file places them.
*/

@layer pages {

  .home-front {
    padding-top: 28px;
  }
  .home-front .story-lead { grid-column: span 8; }
  .home-front .rail { grid-column: span 4; }

  /* The lead sets the row height. The rail fills it: the feed list scrolls
     inside its box and the poll stays pinned to the bottom edge. */
  .home-front .rail { min-height: 0; }
  .home-front .feed-block { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
  .home-front .feed-block .feed { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; border-bottom: var(--line); }
  .home-front .feed-block .feed-item:last-child { border-bottom: 0; }
  .home-front .poll { flex: 0 0 auto; margin-top: auto; }

  .home-tier { margin-top: 40px; }
  .home-catalog { margin-top: 44px; }
  .home-newsletter { margin-top: 44px; }

  @media (max-width: 1100px) {
    .home-front .story-lead { grid-column: span 7; }
    .home-front .rail { grid-column: span 5; }
  }

  @media (max-width: 720px) {
    .home-front { padding-top: 20px; gap: 28px; }
    .home-front .story-lead, .home-front .rail { grid-column: auto; }
    .home-front .feed-block { flex: 0 0 auto; }
    .home-front .feed-block .feed { overflow: visible; }
    .home-front .poll { margin-top: 0; }
    .home-tier, .home-catalog, .home-newsletter { margin-top: 28px; }
  }
}