@import url("./root.css");


/* Masonry Grid */
.tour-masonry-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-rows: var(--tour-row-size, 200px);
  grid-auto-flow: dense;
}

/* On small screens normalize if you want */
@media (min-width: 575.98px) {
  .tour-masonry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* More columns on bigger screens */
@media (min-width: 768px) {
  .tour-masonry-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .tour-masonry-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Compact layout on laptop so the full highlight grid feels lighter and fits better */
@media (min-width: 992px) and (max-width: 1440px) {
  .tour-masonry-grid {
    gap: 8px;
    grid-auto-rows: var(--tour-row-size-laptop, 155px);
  }

  .tour-card-overlay {
    padding: 0.9rem;
  }

  .tour-title {
    font-size: 0.88rem;
  }

  .tour-price {
    font-size: 0.5rem;
  }

  .tour-card--description .tour-excerpt {
    font-size: 0.78rem;
  }
}

/* Base card */
.tour-card {
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

/* Sizes driven by row/column span, not aspect-ratio */

/* 1×1 */
.tour-card--default {
  grid-column: span 1;
  grid-row: span 1;
}

/* 2×1 (wide) */
.tour-card--large-width {
  grid-column: span 2;
  grid-row: span 1;
}

/* 1×2 (tall) */
.tour-card--large-height {
  grid-column: span 1;
  grid-row: span 2;
}

/* 2×2 (big square) */
.tour-card--large-both {
  grid-column: span 2;
  grid-row: span 2;
}

/* Image fill + hover */
.tour-card-image,
.tour-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.tour-card:hover img {
  transform: scale(1.07);
}

/* Overlay - always visible */
.tour-card-overlay {
  position: absolute;
  inset: 0;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.05) 0%,
      rgba(0, 0, 0, 0.7) 100%);
  opacity: 1; /* Always visible */
  transition: opacity .3s ease;
}

/* Typography */
.tour-title {
  font-size: .95rem;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: .03em;
  margin-bottom: 0;
  transform: translateY(0); /* Always in final position */
  transition: transform .3s ease;
}

.tour-price {
  font-size: .7rem;
  font-weight:300;
  transform: translateY(0); /* Always in final position */
  transition: transform .3s ease;
  transition-delay: .1s; /* Staggered animation */
}

/* Text already in final position */
.tour-card:hover .tour-title,
.tour-card:hover .tour-price {
  transform: translateY(0);
}

/* Special styling for description cards */
.tour-card--description .tour-excerpt {
  font-size: .85rem;
  max-width: 90%;
  opacity: .95;
  transform: translateY(0);
  transition: transform .3s ease;
  transition-delay: .2s;
}

.tour-card--description .btn {
  transform: translateY(0);
  transition: transform .3s ease;
  transition-delay: .3s;
}

.tour-card:hover .tour-card--description .tour-excerpt,
.tour-card:hover .tour-card--description .btn {
  transform: translateY(0);
}

/* Remove underline */
.tour-card-link {
  color: inherit;
  text-decoration: none;
}

/* Mobile responsiveness */
/* @media (max-width: 575.98px) {
  .tour-card,
  .tour-card--default,
  .tour-card--large-width,
  .tour-card--large-height,
  .tour-card--large-both {
    grid-column: span 1 !important;
    grid-row: auto !important;
    aspect-ratio: 1 / 1;
  } */
  
  /* On mobile, you might want the overlay to be always visible or have different behavior */
  /* Uncomment below if you want overlay always visible on mobile */
  /*
  .tour-card-overlay {
    opacity: 1;
  }
  .tour-title,
  .tour-price {
    transform: translateY(0);
  }
  */
/* } */