/* ==========================================================================
   Tapin Next — Producer Events Grid (האירועים שלי) — REDESIGN
   --------------------------------------------------------------------------
   Surface : [producer_events_grid] shortcode
   Renderer: src/Features/Shortcodes/ProducerEventsGrid.php
   Tokens  : assets/styles/tapin-design-tokens.css (loaded first)
   Base    : assets/styles/tapin-components.css    (loaded second)

   Visual goals (per brief):
     - Two-column responsive grid (single column under ~720px).
     - Cover image as strong visual anchor; gradient overlay so the title
       stays legible on any cover image.
     - Status badge pinned to the top-end corner.
     - Capacity progress bar at the bottom (CSS gradient + transform: scaleX).
     - Hover: image zooms inside a rounded, overflow-hidden card; meta row
       reveals quick actions.
     - Skeleton loading variant using .tapin-skeleton.

   Backward-compat:
     - All legacy classes preserved: .tapin-events-wrapper, .tapin-box,
       .tapin-section-title, .tapin-events-grid, .tapin-event-card,
       .tapin-event-card__image, .tapin-event-card__content,
       .tapin-event-card__title, .tapin-event-card__date,
       .tapin-event-card__date-icon, .tapin-no-events.
     - PortalCssInjector scopes its UM overrides on .tapin-events-wrapper —
       this redesign keeps that wrapper so legacy injection still applies if
       the user is viewing the UM profile.
     - Net-new BEM additions live under the same root: __image-wrap, __media,
       __overlay, __status, __body, __meta, __actions, __action,
       __progress, __progress-fill, __progress-label.

   RTL: every positional rule uses logical properties. The shortcode renders
   RTL on the wrapper (dir/text-align) and we add a defensive guarantee here.

   Animations: transform + opacity ONLY (GPU-accelerated). No width/height,
   no top/left, no box-shadow tween on hot paths.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Wrapper + section frame
   The legacy "box" pattern is preserved so PortalCssInjector overrides
   continue to land, but typography + spacing now read from tokens.
   -------------------------------------------------------------------------- */
.tapin-events-wrapper {
  direction: rtl;
  text-align: start;
  font-family: var(--tapin-font-sans);
  color: var(--tapin-color-text);
  display: flex;
  flex-direction: column;
  gap: var(--tapin-space-6);
}

.tapin-events-wrapper .tapin-box {
  background: var(--tapin-color-surface);
  border: 1px solid var(--tapin-color-border);
  border-radius: var(--tapin-radius-lg);
  padding: var(--tapin-space-5);
  box-shadow: var(--tapin-shadow-sm);
}

.tapin-events-wrapper .tapin-section-title {
  margin: 0 0 var(--tapin-space-4) 0;
  padding-block-end: var(--tapin-space-3);
  border-block-end: 1px solid var(--tapin-color-border-subtle);
  font-size: var(--tapin-font-size-lg);
  font-weight: var(--tapin-font-weight-bold);
  color: var(--tapin-color-text-strong);
  line-height: var(--tapin-line-height-snug);
  letter-spacing: var(--tapin-letter-spacing-tight);
  display: flex;
  align-items: center;
  gap: var(--tapin-space-2);
}

/* Subtle gradient pip in front of the section title (no extra DOM needed) */
.tapin-events-wrapper .tapin-section-title::before {
  content: '';
  display: inline-block;
  inline-size: 4px;
  block-size: 1.1em;
  border-radius: var(--tapin-radius-full);
  background: var(--tapin-gradient-primary);
  flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   2. Grid
   Two columns at the brief's target, single column under ~720px.
   We keep .tapin-events-grid for back-compat; the auto-fill fallback below
   is a safety net for embeds that load this CSS without the surrounding box.
   -------------------------------------------------------------------------- */
.tapin-events-wrapper .tapin-events-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tapin-space-4);
}

@media (max-width: 720px) {
  .tapin-events-wrapper .tapin-events-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tapin-space-3);
  }
}


/* --------------------------------------------------------------------------
   3. Event card
   - Cover image is the anchor; content slides over it on the same card.
   - The whole card is an <a>, so we use focus-visible for keyboard a11y.
   - overflow:hidden makes the inner image zoom on hover.
   -------------------------------------------------------------------------- */
.tapin-events-wrapper .tapin-event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--tapin-color-surface);
  border: 1px solid var(--tapin-color-border);
  border-radius: var(--tapin-radius-lg);
  overflow: hidden;
  isolation: isolate; /* keeps the progress bar / overlay z-stack local */
  box-shadow: var(--tapin-shadow-sm);
  transition:
    transform var(--tapin-transition-base),
    box-shadow var(--tapin-transition-base),
    border-color var(--tapin-transition-base);
  will-change: transform;
}

.tapin-events-wrapper .tapin-event-card:hover,
.tapin-events-wrapper .tapin-event-card:focus-visible {
  outline: none;
  transform: translateY(-3px);
  border-color: var(--tapin-color-border-strong);
  box-shadow: var(--tapin-shadow-lg);
}

.tapin-events-wrapper .tapin-event-card:focus-visible {
  box-shadow: var(--tapin-shadow-focus-ring);
  border-color: var(--tapin-color-primary);
}


/* --------------------------------------------------------------------------
   4. Cover media
   The image lives inside a fixed-aspect wrap so the grid is rhythmic.
   We use aspect-ratio (no width/height animation) and transform: scale on
   the image for the hover zoom — pure GPU.
   -------------------------------------------------------------------------- */
.tapin-events-wrapper .tapin-event-card__image-wrap {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  background: var(--tapin-color-bg-muted);
  overflow: hidden;
}

.tapin-events-wrapper .tapin-event-card__image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  /* legacy rule forced height:72px — explicit reset for the redesigned card */
  height: 100%;
  transform: scale(1);
  transition: transform var(--tapin-transition-slow);
  will-change: transform;
}

.tapin-events-wrapper .tapin-event-card:hover .tapin-event-card__image,
.tapin-events-wrapper .tapin-event-card:focus-visible .tapin-event-card__image {
  transform: scale(1.04);
}

/* Gradient overlay — keeps any future title-over-image variant legible.
   Today the title sits below the image, but the overlay sells the
   visual depth and lets a future variant show the title on the cover. */
.tapin-events-wrapper .tapin-event-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0) 0%,
    rgba(15, 23, 42, 0) 45%,
    rgba(15, 23, 42, 0.55) 100%
  );
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   5. Status badge (top-end corner)
   Uses the .tapin-badge component contract so colours stay in tokens.
   We add modifiers for the four states the brief lists. The PHP renderer
   today only ships "published" implicitly (by virtue of post_status), so
   the modifier class is optional — markup still works without it.
   -------------------------------------------------------------------------- */
.tapin-events-wrapper .tapin-event-card__status {
  position: absolute;
  inset-block-start: var(--tapin-space-3);
  inset-inline-end: var(--tapin-space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--tapin-space-1);
  padding: var(--tapin-space-1) var(--tapin-space-3);
  border-radius: var(--tapin-radius-full);
  font-size: var(--tapin-font-size-xs);
  font-weight: var(--tapin-font-weight-semibold);
  line-height: 1;
  background: var(--tapin-color-bg);
  color: var(--tapin-color-text-strong);
  box-shadow: var(--tapin-shadow-sm);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.tapin-events-wrapper .tapin-event-card__status--published {
  background: var(--tapin-color-success-bg);
  color: var(--tapin-color-success-fg);
}
.tapin-events-wrapper .tapin-event-card__status--draft {
  background: var(--tapin-color-bg-muted);
  color: var(--tapin-color-text-muted);
}
.tapin-events-wrapper .tapin-event-card__status--soldout {
  background: var(--tapin-color-danger-bg);
  color: var(--tapin-color-danger-fg);
}
.tapin-events-wrapper .tapin-event-card__status--ended {
  background: var(--tapin-color-warning-bg);
  color: var(--tapin-color-warning-fg);
}
.tapin-events-wrapper .tapin-event-card__status--paused {
  background: var(--tapin-color-info-bg);
  color: var(--tapin-color-info-fg);
}


/* --------------------------------------------------------------------------
   6. Card body (content area below the cover)
   -------------------------------------------------------------------------- */
.tapin-events-wrapper .tapin-event-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--tapin-space-2);
  padding: var(--tapin-space-4);
  flex: 1 1 auto;
}

.tapin-events-wrapper .tapin-event-card__title {
  margin: 0;
  font-size: var(--tapin-font-size-base);
  font-weight: var(--tapin-font-weight-semibold);
  color: var(--tapin-color-text-strong);
  line-height: var(--tapin-line-height-snug);
  letter-spacing: var(--tapin-letter-spacing-tight);
  /* Clamp to 2 lines so cards stay rhythmic regardless of title length */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.tapin-events-wrapper .tapin-event-card__date {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--tapin-space-2);
  font-size: var(--tapin-font-size-sm);
  color: var(--tapin-color-text-muted);
  line-height: var(--tapin-line-height-snug);
}

.tapin-events-wrapper .tapin-event-card__date-icon {
  inline-size: 1em;
  block-size: 1em;
  flex-shrink: 0;
  opacity: 0.7;
}


/* --------------------------------------------------------------------------
   7. Meta row + quick actions
   The meta row reserves space so the row doesn't jump on hover.
   The quick-action pills fade in via opacity + translateY — no layout shift.
   The <a class="tapin-event-card"> wraps everything in legacy markup; the
   redesign keeps that contract (the action buttons here are visual cues
   for the producer view — the parent <a> still routes to the event page).
   -------------------------------------------------------------------------- */
.tapin-events-wrapper .tapin-event-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tapin-space-3);
  margin-block-start: auto; /* push meta + progress to the card bottom */
  padding-block-start: var(--tapin-space-2);
  min-block-size: var(--tapin-control-height-sm);
}

.tapin-events-wrapper .tapin-event-card__meta-info {
  display: inline-flex;
  align-items: center;
  gap: var(--tapin-space-2);
  font-size: var(--tapin-font-size-xs);
  color: var(--tapin-color-text-muted);
  font-variant-numeric: tabular-nums;
}

.tapin-events-wrapper .tapin-event-card__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--tapin-space-1);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--tapin-transition-base),
    transform var(--tapin-transition-base);
  pointer-events: none; /* hidden state — keep the parent <a> clickable */
}

.tapin-events-wrapper .tapin-event-card:hover .tapin-event-card__actions,
.tapin-events-wrapper .tapin-event-card:focus-within .tapin-event-card__actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Quick-action pill — a tiny .tapin-btn-ish chip that doesn't collide with
   the parent link's click target. Always shows on touch devices (no hover). */
.tapin-events-wrapper .tapin-event-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--tapin-control-height-sm);
  block-size: var(--tapin-control-height-sm);
  border-radius: var(--tapin-radius-full);
  background: var(--tapin-color-bg-soft);
  color: var(--tapin-color-text-muted);
  border: 1px solid var(--tapin-color-border-subtle);
  text-decoration: none;
  transition:
    background-color var(--tapin-transition-base),
    color var(--tapin-transition-base),
    transform var(--tapin-transition-fast);
}
.tapin-events-wrapper .tapin-event-card__action:hover {
  background: var(--tapin-color-primary-soft);
  color: var(--tapin-color-primary);
  transform: translateY(-1px);
}
.tapin-events-wrapper .tapin-event-card__action:focus-visible {
  outline: none;
  box-shadow: var(--tapin-shadow-focus-ring);
}
.tapin-events-wrapper .tapin-event-card__action > svg {
  inline-size: 1rem;
  block-size: 1rem;
}

/* Touch / coarse-pointer devices: actions stay visible (no hover affordance) */
@media (hover: none) {
  .tapin-events-wrapper .tapin-event-card__actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}


/* --------------------------------------------------------------------------
   8. Capacity progress bar
   - Track is a 1-of-2-stop gradient so colors come from tokens only.
   - Fill is a child element with transform-origin: inline-start and
     transform: scaleX(var(--tapin-progress, 0)) — driven by an inline style
     on the element. Pure GPU, no width animation.
   -------------------------------------------------------------------------- */
.tapin-events-wrapper .tapin-event-card__progress {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 6px;
  border-radius: var(--tapin-radius-full);
  background: var(--tapin-color-bg-muted);
  overflow: hidden;
}

.tapin-events-wrapper .tapin-event-card__progress-fill {
  position: absolute;
  inset: 0;
  background: var(--tapin-gradient-primary);
  border-radius: inherit;
  transform-origin: inline-start;
  transform: scaleX(var(--tapin-progress, 0));
  transition: transform var(--tapin-transition-slow);
  will-change: transform;
}

/* Modifier when the event is at/over capacity — switch the gradient stop. */
.tapin-events-wrapper .tapin-event-card__progress--full
  .tapin-event-card__progress-fill {
  background: linear-gradient(
    135deg,
    var(--tapin-color-danger) 0%,
    var(--tapin-color-primary) 100%
  );
}

.tapin-events-wrapper .tapin-event-card__progress-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tapin-space-2);
  margin-block-start: var(--tapin-space-1);
  font-size: var(--tapin-font-size-xs);
  color: var(--tapin-color-text-muted);
  font-variant-numeric: tabular-nums;
}
.tapin-events-wrapper .tapin-event-card__progress-label > strong {
  font-weight: var(--tapin-font-weight-semibold);
  color: var(--tapin-color-text-strong);
}


/* --------------------------------------------------------------------------
   9. Empty state
   Replaces the bald grey rectangle with a tokenized empty pattern.
   Re-uses the same .tapin-no-events hook so PortalCssInjector overrides
   keep landing where they did.
   -------------------------------------------------------------------------- */
.tapin-events-wrapper .tapin-no-events {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tapin-space-2);
  padding: var(--tapin-space-10) var(--tapin-space-6);
  margin: 0;
  text-align: center;
  background: var(--tapin-color-bg-soft);
  border: 1px dashed var(--tapin-color-border);
  border-radius: var(--tapin-radius-lg);
  color: var(--tapin-color-text-muted);
  font-size: var(--tapin-font-size-sm);
  line-height: var(--tapin-line-height-relaxed);
}


/* --------------------------------------------------------------------------
   10. Skeleton variant
   When PHP can't fetch yet (or wants to show a placeholder), render
   .tapin-event-card.tapin-event-card--skeleton — every internal element
   becomes a shimmer block via the shared .tapin-skeleton component.
   This file does NOT add new keyframes (those live in tapin-components.css).
   -------------------------------------------------------------------------- */
.tapin-events-wrapper .tapin-event-card--skeleton {
  pointer-events: none;
  cursor: default;
}
.tapin-events-wrapper .tapin-event-card--skeleton:hover,
.tapin-events-wrapper .tapin-event-card--skeleton:focus-visible {
  transform: none;
  box-shadow: var(--tapin-shadow-sm);
  border-color: var(--tapin-color-border);
}
.tapin-events-wrapper .tapin-event-card--skeleton .tapin-event-card__image-wrap {
  background: var(--tapin-color-bg-muted);
}
.tapin-events-wrapper .tapin-event-card--skeleton .tapin-event-card__image {
  visibility: hidden;
}
/* Reuse the shimmer effect on the image-wrap when in skeleton mode */
.tapin-events-wrapper .tapin-event-card--skeleton .tapin-event-card__image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  animation: tapin-shimmer 1.4s var(--tapin-easing-out) infinite;
  will-change: transform;
}
@media (prefers-color-scheme: dark) {
  .tapin-events-wrapper .tapin-event-card--skeleton .tapin-event-card__image-wrap::after {
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 50%,
      transparent 100%
    );
  }
}


/* --------------------------------------------------------------------------
   11. Tablet polish + reduced-motion safety
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .tapin-events-wrapper .tapin-box { padding: var(--tapin-space-4); }
  .tapin-events-wrapper .tapin-event-card__content {
    padding: var(--tapin-space-3);
    gap: var(--tapin-space-2);
  }
  .tapin-events-wrapper .tapin-event-card__title {
    font-size: var(--tapin-font-size-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tapin-events-wrapper .tapin-event-card,
  .tapin-events-wrapper .tapin-event-card__image,
  .tapin-events-wrapper .tapin-event-card__actions,
  .tapin-events-wrapper .tapin-event-card__progress-fill {
    transition-duration: 0ms;
  }
  .tapin-events-wrapper .tapin-event-card:hover,
  .tapin-events-wrapper .tapin-event-card:focus-visible {
    transform: none;
  }
  .tapin-events-wrapper .tapin-event-card:hover .tapin-event-card__image,
  .tapin-events-wrapper .tapin-event-card:focus-visible .tapin-event-card__image {
    transform: none;
  }
}