/* EVENT INFO PAGE, SECTION 11: YOU MAY ALSO LIKE (Bible §9).
   The prototype's rules, from oep/oep.css lines 60, 84, 90 and 119. The
   heading and subtitle (.evp-also, .evp-also h2, .evp-also .sub) are already
   in the shell's event-page.css, as the design's event-page.css has them.

   Scoped under .oep-also: the site's ".o5 a" (0,1,1) beats a bare class on a
   link, and every card here is a link. Logical properties only; nothing here
   needs a side. line-height is set where text is sized, because the shell's
   body line-height is 28px and the prototype's root is normal. */

.oep-also {
  margin-block-start: 30px;
}

/* MEASURED, 2026-10-12: the heading took Bootstrap's 1.1 (31px tall, the
   design's is 35) and the subtitle the shell's 28px body line (29px tall, the
   design's is 18), which put every card 7px low. The prototype's root is
   line-height normal; these two are restored to it. */
.oep-also h2,
.oep-also .sub {
  line-height: normal;
}

.oep-also .oep-also-g {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.oep-also .oep-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  font-family: var(--o5-display);
  line-height: normal;
}

.oep-also .oep-card-img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  block-size: auto;
  object-fit: cover;
  /* TOP-ANCHORED CROP (window 14, 2026-10-13). The design draws gradients, so
     it says nothing about cropping, and the real artwork is PORTRAIT: every
     card image measured on production is 1127 x 1600 (0.704). A 4:3 box keeps
     about 53% of that height; centred, it cut the title off the top of every
     poster. Anchored to the top, the title stays and the bottom is what goes. */
  object-position: center top;
  border-radius: var(--o5-r);
  margin-block-end: 8px;
}

/* No artwork: the same box, so the row keeps its rhythm. */
.oep-also .oep-card-img.is-empty {
  background: var(--o5-surface-2);
}

.oep-also .oep-card b {
  font-size: 15px;
  color: var(--o5-ink);
}

.oep-also .oep-card span {
  font-size: 13px;
  color: var(--o5-ink2);
}

.oep-also .oep-card em {
  font-style: normal;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--o5-ink);
}

/* No from-price: the line keeps its height and shows nothing, so the card is
   as tall as its neighbours (Mac's feedback, 2026-10-13). */
.oep-also .oep-card em.is-none {
  visibility: hidden;
}

@media (max-width: 1024px) {
  .oep-also .oep-also-g {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .oep-also .oep-also-g {
    grid-template-columns: minmax(0, 1fr);
  }
}