/* ── Eventcard Large (.po.ncard-lg) ──────────────────────────────
 * Full-width image, two-column content body below.
 * Matches createCardLargeHTML(). Reference: eventcards/eventcard-large.html
 * Shared visuals live in eventcard-base.css — this file is layout only.
 *
 * DOM order is media→body. Desktop: flex column-reverse → image at the
 * bottom, content on top. Mobile (≤640px): plain column → image on top.
 *
 *   .po.ncard-lg              flex column (mobile) / column-reverse (desktop)
 *     ├─ .nc-media            image area (relative)
 *     │   ├─ img.event-poster cover image
 *     │   ├─ .nc-cat          category badge (base)
 *     │   ├─ .image-copyright  bottom-right credit
 *     │   └─ .ec-ticket       ticket overlay (absolute — scoped here)
 *     └─ .nc-body-lg          flex row, gap 32, pad 16
 *         ├─ .nc-lg-left      title / desc / meta (typography in base)
 *         └─ .nc-lg-right     attendees + actions
 * ──────────────────────────────────────────────────────────────── */

/* ── Card shell ──
 * The large card carries the shared `.po` class (needed for the card-click
 * handler), which brings a whole legacy card look — resting shadow,
 * overflow:hidden and a `.po:hover` that lifts + whitens the background.
 * We neutralise all of it here so the large card hovers exactly like the
 * medium/small cards: shadow only, category tint preserved. */
/* @penpot cmp.eventcard-large */
.po.ncard-lg {
  display: flex;
  flex-direction: column-reverse;
  overflow: visible;            /* let the open attendance dropdown escape
                                   (overrides the legacy .po overflow:hidden) */
  border: none;                 /* override the legacy .po 1px border */
}

/* Category tint carried in a variable so it survives the legacy .po and
 * .po:hover background overrides, in both light and dark mode. */
.po.ncard-lg               { --ec-card-bg: var(--cat-default); }
.po.ncard-lg.cat-music     { --ec-card-bg: var(--cat-music); }
.po.ncard-lg.cat-film      { --ec-card-bg: var(--cat-film); }
.po.ncard-lg.cat-community { --ec-card-bg: var(--cat-community); }
.po.ncard-lg.cat-arts      { --ec-card-bg: var(--cat-arts); }
.po.ncard-lg.cat-tech      { --ec-card-bg: var(--cat-tech); }
.po.ncard-lg.cat-nightlife { --ec-card-bg: var(--cat-nightlife); }
.po.ncard-lg.cat-food      { --ec-card-bg: var(--cat-food); }
.po.ncard-lg.cat-kinder    { --ec-card-bg: var(--cat-kinder); }
.po.ncard-lg.cat-education { --ec-card-bg: var(--cat-education); }
.po.ncard-lg.cat-sports    { --ec-card-bg: var(--cat-sports); }

/* Hold that tint + flat border across rest/hover in light and dark — so the
 * hover changes nothing but the shadow. Specificity is set to win over the
 * legacy .po:hover (light) and body.dark .po:hover (dark). */
.po.ncard-lg,
.po.ncard-lg:hover,
body.dark .po.ncard-lg,
body.dark .po.ncard-lg:hover {
  background: var(--ec-card-bg);
}

/* @penpot cmp.eventcard-large-media */
.ncard-lg .nc-media {
  position: relative;
  width: 100%;
  height: 440px;
  overflow: hidden;
  /* Desktop: image sits at the BOTTOM of the card (column-reverse: content on
   * top), so round the bottom corners. Card itself is overflow:visible so the
   * attendance dropdown in the body can escape the card bounds. Mobile flips
   * the image to the top (see 640px media query below). */
  border-radius: 0 0 var(--ec-radius) var(--ec-radius);
}

.ncard-lg .nc-media .event-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 0 var(--ec-radius) var(--ec-radius);
}

.ncard-lg .image-copyright {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  pointer-events: none;
}

/* Ticket overlay — bottom-right on the image (base gives the pill look) */
.ncard-lg .nc-media .ec-ticket {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
}

/* @penpot cmp.eventcard-large-body */
.nc-body-lg {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  padding: var(--ec-pad);
}

/* @penpot cmp.eventcard-large-left */
.nc-lg-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* @penpot cmp.eventcard-large-right */
.nc-lg-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  width: 248px;
  flex-shrink: 0;
}

.nc-lg-attendees {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nc-lg-attendees .ms {
  display: flex;
  align-items: center;
  position: relative;
}

.nc-lg-attendees .mav-lg {
  position: relative;
  width: 48px;
  height: 48px;
  margin-left: -12px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c2);
  font-size: 16px;
  font-weight: 700;
  color: var(--t);
}

.nc-lg-attendees .mav-lg:first-child {
  margin-left: 0;
}

.nc-lg-right .c-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* ════════════════════════════════════════════════════════════════
 * Responsive
 * ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .nc-body-lg {
    flex-direction: column;
    gap: clamp(12px, 3vw, 16px);
    padding: clamp(10px, 2.5vw, 14px);
  }
  .nc-lg-right {
    width: 100%;
    flex-direction: row;
    gap: 12px;
  }
  /* Mobile: image back on top (DOM order media→body) — desktop keeps the
   * content-first column-reverse layout. */
  .po.ncard-lg {
    flex-direction: column;
  }
  .ncard-lg .nc-media {
    height: clamp(160px, 35vw, 240px);
    border-radius: var(--ec-radius) var(--ec-radius) 0 0;
  }
  .ncard-lg .nc-media .event-poster {
    border-radius: var(--ec-radius) var(--ec-radius) 0 0;
  }
  .nc-lg-left .nc-title {
    font-size: clamp(18px, 4.5vw, 22px);
    line-height: clamp(20px, 4.5vw, 24px);
  }
  .nc-lg-left .nc-desc {
    font-size: clamp(12px, 3vw, 14px);
    line-height: clamp(14px, 3.5vw, 17px);
  }
  .nc-lg-attendees .mav-lg {
    width: clamp(28px, 6vw, 36px);
    height: clamp(28px, 6vw, 36px);
    margin-left: calc(clamp(28px, 6vw, 36px) * -0.25);
  }
  .nc-lg-right .att-dropdown-btn,
  .nc-lg-right .cact {
    font-size: clamp(11px, 2.5vw, 13px);
    padding: 6px 10px;
  }
  .ncard-lg .nc-media .ec-ticket {
    right: 12px;
    bottom: 12px;
    font-size: clamp(11px, 2.5vw, 13px);
    padding: 6px 12px;
  }
}

@media (max-width: 480px) {
  .ncard-lg .nc-media {
    height: clamp(140px, 45vw, 200px);
  }
  .nc-lg-left .nc-title {
    font-size: 24px;
    line-height: 24px;
  }
  .nc-lg-left .nc-desc {
    font-size: 16px;
    line-height: 20px;
  }
  .nc-lg-attendees .mav-lg {
    width: 28px;
    height: 28px;
    margin-left: -10px;
  }
}

/* Wider title on large screens */
@media (min-width: 1024px) {
  .nc-lg-left .nc-title {
    font-size: 32px;
    line-height: 32px;
  }
  .nc-body-lg {
    padding: 22px 26px 24px;
  }
}