/**
 * @file
 * Front: homepage-only section layouts (Most Recent, News, Columns, Literature, Interviews).
 *
 * Homepage composition grids from design/nellu.css, with tablet breakpoints
 * restored so layouts collapse before mobile (prototype had gaps at ~992px).
 */

.top50 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.top70 {
  display: grid;
  grid-template-columns: 70% 30%;
  gap: 20px;
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.grid6 {
  display: grid;
  /* Homepage Columns grids render 5 cards; keep class name for markup stability. */
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.top50 > *,
.top70 > *,
.grid3 > *,
.grid4 > *,
.grid6 > *,
.videos > * {
  min-width: 0;
}

/* Large Desktop — from design/nellu.css */
@media (max-width: 1400px) {
  .grid6 {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Tablet — from design/nellu.css + missing homepage grid collapses */
@media (max-width: 992px) {
  .top50,
  .top70 {
    grid-template-columns: 1fr;
  }

  .grid3,
  .videos {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile — from design/nellu.css */
@media (max-width: 768px) {
  .top50,
  .top70,
  .grid3,
  .videos {
    grid-template-columns: 1fr;
  }

  .grid4 {
    grid-template-columns: 1fr;
  }

  .grid6 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Most Recent lower grids — desktop/tablet only */
  .most-recent-grids {
    display: none;
  }
}

/* Small Mobile — from design/nellu.css */
@media (max-width: 480px) {
  .grid6 {
    grid-template-columns: 1fr;
  }
}