/* --- Masonry layout --- */
/*.moon-grid {*/
/*  column-count: 4;*/
/*  column-gap: 1.5rem;*/
/*  margin: 2rem 0;*/
/*}*/
/*@media (max-width: 1024px) { .moon-grid { column-count: 3; } }*/
/*@media (max-width: 768px) { .moon-grid { column-count: 2; } }*/
/*@media (max-width: 480px) { .moon-grid { column-count: 1; } }*/


/*@media (max-width: 640px) {*/
/*  .moon-grid > *:nth-child(n+9) { */
/*    display: none !important; */
/*  }*/
  /* If you prefer to be explicit: */
/*  .moon-grid > .moon-card__link:nth-child(n+9),*/
/*  .moon-grid > .moon-card:nth-child(n+9) {*/
/*    display: none !important;*/
/*  }*/
/*}*/


/* Grid layout (keeps DOM order visually) */
.moon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

@media (max-width: 1024px) { .moon-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .moon-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .moon-grid { grid-template-columns: 1fr; } }

/* No need for masonry rules in grid */
.moon-card {
  margin: 0;
  break-inside: auto;
}


/* --- Review card --- */
.moon-card {
  display: inline-block;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  margin: 0 0 1.5rem;
  width: 100%;
  break-inside: avoid;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.moon-card:hover {
  transform: translateY(-4px);
 box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}


/* --- Header --- */
.moon-card__header {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #eee;
}
.moon-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 1rem;
  object-fit: cover;
}
.moon-card__meta {
  flex: 1;
}
.moon-card__buyer {
  font-weight: 700;
  margin: 0;
  font-size: 1rem;
}
.moon-card__date {
  font-size: 0.85rem;
  color: #777;
  margin: 0.25rem 0;
}
.moon-card__stars {
  color: #f5b50a;
  font-size: 1.1rem;
  letter-spacing: 2px;
}

/* --- Body & footer --- */
.moon-card__body {
  padding: 1rem 1.25rem;
}
.moon-card__text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #222;
  margin: 0;
}
.moon-card__footer {
  padding: 0.75rem 1.25rem 1.25rem;
  border-top: 1px solid #eee;
  font-weight: 600;
  font-size: 0.9rem;
  color: #444;
}
.moon-card__avatar--initial {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #b1c7dd;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  margin-right: 1rem;
}



/* Single-listing row: no wrap, left-aligned */
.moon-grid--listing {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: flex-start;
  align-items: stretch;
}

/* Make the direct children (either <a.moon-card__link> or .moon-card) fixed-width flex items */
.moon-grid--listing > .moon-card__link,
.moon-grid--listing > .moon-card {
  flex: 0 0 300px;   /* fixed column width */
  max-width: 300px;
  min-width: 300px;
}

/* Ensure the actual card fills its flex item cleanly */
.moon-grid--listing .moon-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* If you want a slightly tighter layout, you can change 300px to 280px */



/* Remove hover animation when not linked */
.moon-card__link:hover .moon-card {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.moon-grid--listing .moon-card {
  transform: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  cursor: default;
}