/* OCH Card Tags v1.0.0 — photo on top, text below. No text on images.
   Root cause: theme prints <span class="chip absolute top-4 left-4|right-4|top-5 left-5"> inside the
   image link/wrapper (aspect-[4/3] / aspect-video, overflow-hidden), so chips sit ON the photo. */

/* 1. Image wrapper that holds a chip: let it grow, image keeps its ratio, chips flow below it */
main :is(a,div).relative.overflow-hidden:has(> img + .chip.absolute, > img ~ .chip.absolute) {
  aspect-ratio: auto !important;
  height: auto !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: 0 0 .75rem 0;
  background: #FFFFFF;
}
main :is(a,div).relative.overflow-hidden:has(> img ~ .chip.absolute) > img {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 100%;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
main a.aspect-video:has(> img ~ .chip.absolute) > img,
main div.relative.overflow-hidden:has(> .chip.absolute):not(a) > img { aspect-ratio: 16 / 9; }
/* decorative gradient/tint layers would now also cover the chip row — drop them on these wrappers */
main :is(a,div).relative.overflow-hidden:has(> img ~ .chip.absolute) > div.absolute.inset-0 { display: none !important; }

/* 2. The chips themselves: static, in the text area under the photo */
main :is(a,div).relative.overflow-hidden > .chip.absolute {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0;
  z-index: auto;
}
main :is(a,div).relative.overflow-hidden > img ~ .chip.absolute:first-of-type { margin-left: 1.5rem; }
main :is(a,div).relative.overflow-hidden > .chip.absolute:not(.bg-green-500):not(.bg-secondary-900) {
  background: #FFF7EB !important; color: #0B1A2B !important; border: 2px solid #FFBA00;
}
main :is(a,div).relative.overflow-hidden > .chip.absolute.bg-green-500 {
  background: #FFA94D !important; color: #0B1A2B !important; border: 2px solid #FFA94D;
}
main :is(a,div).relative.overflow-hidden > .chip.absolute.bg-secondary-900 {
  background: #0B1A2B !important; color: #FFBA00 !important;
}
/* the card body that follows already has p-6; tighten so chip row + title read as one block */
main a.relative.overflow-hidden:has(> img ~ .chip.absolute) + div.p-6 { padding-top: .75rem; }

/* 3. Day labels (Friday / Saturday / Sunday) that straddle the card's top photo edge */
main .och-wk-day > .relative > .chip.absolute.-top-3 {
  position: static !important; display: inline-block; margin: 0 0 .5rem 1.5rem;
}