/* ===== Tour overview pages (alle-*-reisen.php) ===== */

/* Desktop: cards wrap into a grid instead of the horizontal scroll rail.
   Below 881px the mobile rail carousel from index.css/footer.php takes over. */
@media (min-width: 881px){
  .rail--grid{
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }
}
@media (min-width: 881px) and (max-width: 1080px){
  .rail--grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Section anchor pills under the hero */
.overview-nav{
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.overview-nav a{
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px; color: var(--brand);
  text-decoration: none; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(14,118,98,.25); background: #fff;
  transition: background .2s ease, color .2s ease;
}
.overview-nav a:hover{ background: var(--brand); color: #fff; }

/* Hero image fallback (used until a region video is delivered) */
.hero-video > img{
  width: 100%; border-radius: 18px; aspect-ratio: 16 / 9; object-fit: cover; display: block;
}

.section{
  content-visibility: auto;
  contain-intrinsic-size: 1px 760px;
}

/* Empty category state — shown until tours for the section are supplied */
.overview-empty{
  border: 1px dashed rgba(0,0,0,.15); border-radius: 16px;
  padding: 28px 20px; text-align: center; color: var(--muted); font-size: 14px;
  background: #fafbfc;
}

/* Photographer credit under card images */
.card-tour .image-credit{
  margin: 0; padding: 2px 14px 0; font-size: 10px; color: #9aa0a6; text-align: right;
}