/* Mobile event card compaction — CSS only, no HTML/JS changes */
@media (max-width: 430px) {

  /* Card shell */
  .event-card {
    margin: 12px 12px 16px;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
  }

  /* Hero image: reduce fixed 280px height; stay responsive */
  .event-card .card-img-top {
    height: clamp(170px, 42vw, 200px);
    object-fit: cover;
    border-radius: 14px;
  }

  /* Inner spacing */
  .event-card .card-body {
    padding: 1.1rem 1rem 1.15rem;   /* down from 2rem */
  }

  /* Title: slightly smaller + tighter leading */
  .event-card .card-title {
    font-size: clamp(1.05rem, 5.1vw, 1.25rem);
    line-height: 1.25;
    margin-bottom: 0.5rem;
    display: -webkit-box;            /* prevent long titles from blowing height */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  /* Body copy / meta */
  .event-card .card-text {
    font-size: clamp(0.82rem, 3.7vw, 0.9rem);
    line-height: 1.4;
    margin-bottom: 0.75rem;          /* down from 1.5rem */
  }
  .event-meta {
    margin-bottom: 0.75rem;          /* down from 1.25rem */
  }
  .event-meta .event-date {
    padding: 6px 10px;
    font-size: 0.82rem;
  }

  /* Price + count */
  .ticket-count,
  .ticket-price {
    font-size: clamp(0.9rem, 3.6vw, 0.95rem);
  }

  /* Primary CTA: preserve tap target */
  .event-card .btn.btn-primary.w-100 {
    min-height: 44px;
    padding: 12px 14px;
    font-size: 1rem;
    border-radius: 14px;
  }

  /* Optimize reserve button for mobile */
  .ticket-form .btn.btn-primary.btn-lg {
    padding: 14px 20px;          /* Reduce from default btn-lg padding */
    font-size: 1rem;             /* Reduce from btn-lg font-size (1.25rem) */
    font-weight: 600;
    border-radius: 12px;         /* Slightly reduce border radius */
    min-height: 50px;            /* Ensure touch target remains accessible */
    line-height: 1.3;            /* Tighter line height for multi-line text */
  }
  
  /* Tighten form spacing around button */
  .ticket-form {
    padding: 1rem;               /* Reduce form container padding */
  }
  
  .ticket-form .btn + p.small {
    margin-top: 0.75rem;         /* Reduce spacing after button */
    font-size: 0.8rem;
  }
}


/* (Optional emergency hotfix) — keep commented at bottom for instant rollback:

@media (max-width: 430px) {
  .event-card { transform: scale(.92); transform-origin: top center; }
  .event-card .btn.btn-primary.w-100 { transform: scale(1.09); transform-origin: center; min-height: 44px; }
} */