/*!
 * moments-masonry.css
 *
 * Shared tier rules for every Moments grid. Each tile carries
 * `data-grow="1|2|3"`; the tier determines column span, aspect ratio,
 * and a hard max-height cap (prevents the "infinite-tall image" bug
 * we hit before — portrait photos can't stretch past 60vh on any tier).
 *
 * Per-page CSS still controls:
 *   - the grid container's column count / gap / display
 *   - tile-internal styling (borders, shadows, hover states)
 *
 * Only the tier box geometry is standardised here.
 */

/* ── Tiered growth — subtle by design.
   Every tile stays 1 column wide so the grid reads as clean editorial
   masonry without a tile suddenly doubling width and pushing neighbours
   around. Height varies gently between tiers. The transition animates
   aspect-ratio so growth looks like a little pop, not a jump. ── */
.moments-card,
.moments-tile,
.media-card {
  aspect-ratio: 3 / 4;             /* base portrait */
  max-height: 40vh;
  grid-column: span 1;
  transition: aspect-ratio 0.45s cubic-bezier(.22, .68, 0, 1.2),
              max-height  0.45s cubic-bezier(.22, .68, 0, 1.2),
              transform   0.22s ease;
}

/* Tier 2 — slightly taller, same width. ~12% more vertical room. */
.moments-card[data-grow="2"],
.moments-tile[data-grow="2"],
.media-card[data-grow="2"] {
  aspect-ratio: 5 / 7;
  max-height: 46vh;
}

/* Tier 3 — noticeably taller but still 1 col. ~25% taller than base. */
.moments-card[data-grow="3"],
.moments-tile[data-grow="3"],
.media-card[data-grow="3"] {
  aspect-ratio: 3 / 5;
  max-height: 54vh;
}

/* Safety net: ANY tile without a data-grow gets tier 1 behaviour so
   unseeded tiles (e.g. rendered via HTMX partial) don't collapse.
   Redundant with the default above but explicit for clarity. */
.moments-card:not([data-grow]),
.moments-tile:not([data-grow]),
.media-card:not([data-grow]) {
  aspect-ratio: 3 / 4;
  max-height: 38vh;
}

/* Hard stop — images inside a tile must fill the tile, never push it
   taller than the aspect ratio allows. */
.moments-card img,
.moments-tile img,
.media-card img,
.moments-card .moments-img-wrap img,
.moments-tile .moments-img-wrap img,
.media-card .media-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Absolute image wraps (overlay-style overlay buttons) — let the tile
   define height, the wrap fills it. */
.moments-card .moments-img-wrap,
.moments-tile .moments-img-wrap,
.media-card .media-img-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════
   HETEROGENEOUS CARDS — mix non-image tiles into the Moments grid.
   A card can be an image (default), a venue pin, a featured artist,
   an event promo, or a message note. All of them obey the same
   data-grow tier sizing above. Type is set via data-card-type.
   ══════════════════════════════════════════════════════════════════ */

.moments-card[data-card-type] {
  /* Non-image cards render their own body; no absolute image wrap. */
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  color: #fff;
  text-decoration: none;
}

/* Venue card — teal tint, pin icon, brand name + neighbourhood */
.moments-card[data-card-type="venue"] {
  background: linear-gradient(145deg, #0d7377 0%, #14b8a6 100%);
  border: 1px solid rgba(255,255,255,0.14);
}
.moments-card[data-card-type="venue"] .mc-icon {
  position: absolute; top: .75rem; left: .75rem;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  color: #fff;
}

/* Artist card — purple gradient, avatar, name + role */
.moments-card[data-card-type="artist"] {
  background: linear-gradient(145deg, #4c1d95 0%, #7c3aed 100%);
  border: 1px solid rgba(255,255,255,0.14);
}
.moments-card[data-card-type="artist"] .mc-avatar {
  position: absolute; top: .75rem; left: .75rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.25);
  overflow: hidden;
}
.moments-card[data-card-type="artist"] .mc-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Event card — orange gradient, date block + title */
.moments-card[data-card-type="event"] {
  background: linear-gradient(145deg, #7c2d12 0%, #f97316 100%);
  border: 1px solid rgba(255,255,255,0.14);
}
.moments-card[data-card-type="event"] .mc-date {
  position: absolute; top: .75rem; right: .75rem;
  padding: .3rem .55rem;
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  font-family: 'Epilogue', 'Bebas Neue', sans-serif;
  font-size: .7rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
  text-align: center;
}

/* Message card — soft slate, large quote mark */
.moments-card[data-card-type="message"] {
  background: linear-gradient(145deg, #1e293b 0%, #334155 100%);
  border: 1px solid rgba(255,255,255,0.10);
}
.moments-card[data-card-type="message"]::before {
  content: '"';
  position: absolute; top: -.4rem; left: .5rem;
  font-family: 'Epilogue', serif;
  font-size: 5.5rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,0.08);
  pointer-events: none;
}

/* Shared title + subtitle for all non-image cards */
.moments-card[data-card-type] .mc-title {
  font-family: 'Epilogue', 'Bebas Neue', sans-serif;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 .25rem;
}
.moments-card[data-card-type] .mc-sub {
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  margin: 0;
}
.moments-card[data-card-type] .mc-cta {
  display: inline-flex;
  align-items: center; gap: .3rem;
  margin-top: .6rem;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  width: fit-content;
  text-decoration: none;
}
.moments-card[data-card-type]:hover .mc-cta {
  background: rgba(255,255,255,0.22);
}
/* When a non-image card is a link, hover still bumps slightly */
.moments-card[data-card-type]:hover {
  transform: translateY(-2px);
  transition: transform .2s ease;
}