/* === Card Component (Card.Base from Figma 106:1202) ===
 *
 * Reusable card layout for archive grids.
 * Structure: media (image + overlays) → body (meta + title + excerpt) → actions
 *
 * Uses --current-section from TermColorCollector for themed accents.
 */

/* --- Card container --- */

.lfdk-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-color: var(--wp--preset--color--current-outline, var(--wp--preset--color--primary-2));
  border-style: solid;
  border-width: 1px;
  border-radius: 16px;
  background-color: var(--wp--preset--color--base);
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* --- Media wrapper (image + overlays) ---
 *
 * With image: reserves a 4:3 slot, paints the placeholder background,
 * and absolutely positions the overlay chips + booking status on top.
 *
 * Without image: collapses to chips' natural height. No aspect lock,
 * no placeholder color, chips flow at the top of the card (matches
 * Figma "MetaTop_NoImage" 1564:15595). Booking status is hidden — it
 * only conveys information that pairs with an image preview.
 */

.lfdk-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}

.lfdk-card__media:has(img) {
  aspect-ratio: 4 / 3;
  background-color: var(--wp--preset--color--primary-3);
}

.lfdk-card__media > .wp-block-post-featured-image {
  margin: 0;
  line-height: 0;
  width: 100%;
  height: 100%;
}

.lfdk-card__media > .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay chips: absolute over image, relative-flow when no image */

.lfdk-card__overlay-chips {
  position: relative;
  padding: 16px;
  z-index: 1;
}

.lfdk-card__media:has(img) .lfdk-card__overlay-chips {
  position: absolute;
  top: 0;
  left: 0;
}

/* Booking status overlay: only meaningful over the image */

.lfdk-card__status {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(250, 250, 250, 0.7);
  text-transform: uppercase;
  z-index: 1;
  margin: 0;
}

.lfdk-card__media:not(:has(img)) .lfdk-card__status {
  display: none;
}

/* --- Body --- */

.lfdk-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.lfdk-card__body > :where(.lfdk-chip, .lfdk-chip--outline) {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Title: prevent hyphenation in card titles */

.lfdk-card__body .wp-block-post-title {
  hyphens: none;
  -webkit-hyphens: none;
}

.lfdk-card__body .wp-block-post-title a {
  text-decoration: none;
}

.lfdk-card__body .wp-block-post-title a:hover {
  text-decoration: underline;
}

/* Excerpt: prevent growing beyond card body */

.lfdk-card__body .wp-block-post-excerpt {
  flex: 0;
}

/* --- Actions (arrow) --- */

.lfdk-card__actions {
  margin-top: auto;
}

/* Arrow link hover */

.lfdk-card__actions a {
  text-decoration: none;
  transition: transform 0.2s ease;
  display: inline-block;
}

.lfdk-card:hover .lfdk-card__actions a {
  transform: translateX(4px);
}

/* --- Card grid container --- */

.wp-block-post-template.is-layout-grid:has(.lfdk-card) {
  max-width: 1600px;
  margin-inline: auto;
}

/* --- Filter bar --- */

.lfdk-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lfdk-filter-search {
  max-width: 300px;
}

/* --- Status modifiers on card --- */

/* Sold out: dim the image */
.lfdk-card:has(.lfdk-event-status--sold-out) .lfdk-card__media > .wp-block-post-featured-image {
  opacity: 0.75;
}