/* ==========================================================================
   page-home.css — owned by templates/video_app/home.html

   Everything structural already exists: .yt-grid and its forced column ladder
   (components.css), .yt-shelf, .yt-queue-banner, .yt-empty, .yt-btn,
   .yt-chips. This file adds ONLY what is specific to the home feed:

     1. the vertical rhythm of the interleaved bands
     2. the gutter the queue banner needs below 792px, where .yt-page drops
        its own horizontal padding
     3. the "Load more" control and its idle / busy / error faces
     4. the infinite-scroll sentinel and the fade-in of appended cards

   Non-token literals here, and why (no token exists for them):
     40px / 24px / 16px   spacing, matching components.css's shelf rhythm
     13px                 the pagination note, one step under .yt-t-meta
     220px                a minimum width for the Load more button so its
                          label can change length without the button resizing
     .6 / .7 / 6px / .28s opacity, travel and duration of the two animations
   ========================================================================== */

.yt-home {
  min-width: 0;
}

/* -- 1. Interleaved bands --------------------------------------------------
   A band is MARGIN ONLY. .yt-grid supplies its own padding-inline at ≤792px
   and deliberately drops to 0 with full-bleed thumbnails at ≤659px, so a
   padded wrapper here would double the gutter and break mobile full bleed. */

.yt-home__band {
  min-width: 0;
  margin-bottom: 40px;
}

/* -- 2. Queue banner gutter ----------------------------------------------- */

.yt-home__banner {
  min-width: 0;
}

@media (max-width: 792px) {
  .yt-home__banner { padding-inline: 16px; }
}

/* -- 3. Load more ---------------------------------------------------------
   Visible with or without JS: with JS off it is a plain link to the next full
   page, with JS on home.js hijacks the click and the sentinel drives it. */

.yt-home__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  text-align: center;
}

@media (max-width: 792px) {
  .yt-home__more { padding-inline: 16px; }
}

.yt-home__more-btn {
  min-width: 220px;
  max-width: 100%;
}

.yt-home__more-note {
  color: var(--yt-fg-secondary);
  font-size: 13px;
  line-height: 1.4;
}

/* The three icon faces are all in the markup; only one is ever shown, so the
   swap needs no JS beyond setting data-state (and never innerHTML). */
.yt-home__more-busy,
.yt-home__more-retry {
  display: none;
}

.yt-home__more-idle {
  display: inline-flex;
}

.yt-home__more[data-state="busy"] .yt-home__more-idle,
.yt-home__more[data-state="error"] .yt-home__more-idle {
  display: none;
}

.yt-home__more[data-state="busy"] .yt-home__more-busy {
  display: inline-flex;
  animation: yt-home-spin 1.1s linear infinite;
}

.yt-home__more[data-state="error"] .yt-home__more-retry {
  display: inline-flex;
}

/* A fetch is in flight: the control stays visible and legible, but a second
   click cannot queue a duplicate page. */
.yt-home__more[data-state="busy"] .yt-home__more-btn {
  opacity: .7;
  pointer-events: none;
}

.yt-home__more[data-state="error"] .yt-home__more-btn {
  border-color: var(--yt-danger);
  color: var(--yt-danger);
}

@keyframes yt-home-spin {
  to { transform: rotate(360deg); }
}

/* -- 4. Sentinel and appended cards --------------------------------------- */

/* Zero-height marker the IntersectionObserver watches. It carries no content
   and no pointer surface, so it can never cover a card. */
.yt-home__sentinel {
  width: 100%;
  height: 1px;
  pointer-events: none;
}

/* Added by home.js to each newly appended card. tokens.css already neutralises
   every animation under prefers-reduced-motion; the explicit rule below keeps
   that true even if this file is ever read on its own. */
.yt-home__appear {
  animation: yt-home-appear .28s ease both;
}

@keyframes yt-home-appear {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .yt-home__appear { animation: none; }
  .yt-home__more[data-state="busy"] .yt-home__more-busy { animation: none; }
}