/*
  TruePriceTix mobile event card compaction
  Mobile-only. Desktop/tablet layout remains unchanged.
*/

@media (max-width: 640px) {
  /*
    Target the individual event/season pass cards conservatively by using the
    visible event list patterns rather than relying on brittle class names.
  */

  body {
    --tpt-mobile-card-pad: 10px;
    --tpt-mobile-card-gap: 8px;
    --tpt-mobile-thumb: 72px;
    --tpt-mobile-small-text: 11px;
    --tpt-mobile-body-text: 12px;
    --tpt-mobile-title-text: 13px;
  }

  /* Overall event list cards */
  div:has(> input[type="radio"]):has(img),
  label:has(> input[type="radio"]):has(img),
  article:has(input[type="radio"]):has(img),
  section:has(input[type="radio"]):has(img) {
    min-height: 0 !important;
    padding: var(--tpt-mobile-card-pad) !important;
    gap: var(--tpt-mobile-card-gap) !important;
  }

  /* The card in the screenshot has radio + image + content + right-side action. */
  div:has(input[type="radio"]):has(img):has(button),
  label:has(input[type="radio"]):has(img):has(button),
  article:has(input[type="radio"]):has(img):has(button),
  section:has(input[type="radio"]):has(img):has(button) {
    align-items: center !important;
  }

  /* Event thumbnails */
  div:has(input[type="radio"]) img,
  label:has(input[type="radio"]) img,
  article:has(input[type="radio"]) img,
  section:has(input[type="radio"]) img {
    width: var(--tpt-mobile-thumb) !important;
    height: 56px !important;
    min-width: var(--tpt-mobile-thumb) !important;
    max-width: var(--tpt-mobile-thumb) !important;
    border-radius: 8px !important;
    object-fit: cover !important;
  }

  /* Event title and body text */
  div:has(input[type="radio"]):has(img) strong,
  label:has(input[type="radio"]):has(img) strong,
  article:has(input[type="radio"]):has(img) strong,
  section:has(input[type="radio"]):has(img) strong,
  div:has(input[type="radio"]):has(img) h3,
  label:has(input[type="radio"]):has(img) h3,
  article:has(input[type="radio"]):has(img) h3,
  section:has(input[type="radio"]):has(img) h3 {
    font-size: var(--tpt-mobile-title-text) !important;
    line-height: 1.15 !important;
    margin-bottom: 2px !important;
  }

  div:has(input[type="radio"]):has(img) p,
  label:has(input[type="radio"]):has(img) p,
  article:has(input[type="radio"]):has(img) p,
  section:has(input[type="radio"]):has(img) p,
  div:has(input[type="radio"]):has(img) span,
  label:has(input[type="radio"]):has(img) span,
  article:has(input[type="radio"]):has(img) span,
  section:has(input[type="radio"]):has(img) span {
    line-height: 1.2 !important;
  }

  /* Venue/date blocks in event cards */
  div:has(input[type="radio"]):has(img) svg,
  label:has(input[type="radio"]):has(img) svg,
  article:has(input[type="radio"]):has(img) svg,
  section:has(input[type="radio"]):has(img) svg {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
  }

  /* Tighten the metadata area without hiding useful info. */
  div:has(input[type="radio"]):has(img) [class*="gap"],
  label:has(input[type="radio"]):has(img) [class*="gap"],
  article:has(input[type="radio"]):has(img) [class*="gap"],
  section:has(input[type="radio"]):has(img) [class*="gap"] {
    gap: 4px !important;
  }

  /* Select / Added buttons in the event cards */
  div:has(input[type="radio"]):has(img) button,
  label:has(input[type="radio"]):has(img) button,
  article:has(input[type="radio"]):has(img) button,
  section:has(input[type="radio"]):has(img) button {
    min-height: 26px !important;
    height: 26px !important;
    padding: 3px 12px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  /* Right-side status text like "No tickets added" / "1 ticket in queue" */
  div:has(input[type="radio"]):has(img) small,
  label:has(input[type="radio"]):has(img) small,
  article:has(input[type="radio"]):has(img) small,
  section:has(input[type="radio"]):has(img) small {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  /*
    Very small phones: allow event text to stay compact and prevent oversized
    date/venue columns from making the card tall.
  */
  @media (max-width: 430px) {
    body {
      --tpt-mobile-thumb: 64px;
      --tpt-mobile-card-pad: 9px;
    }

    div:has(input[type="radio"]):has(img),
    label:has(input[type="radio"]):has(img),
    article:has(input[type="radio"]):has(img),
    section:has(input[type="radio"]):has(img) {
      font-size: var(--tpt-mobile-body-text) !important;
    }

    div:has(input[type="radio"]):has(img) img,
    label:has(input[type="radio"]):has(img) img,
    article:has(input[type="radio"]):has(img) img,
    section:has(input[type="radio"]):has(img) img {
      height: 52px !important;
    }

    /* Reduce verbose descriptions on mobile only, but keep titles/date/venue visible. */
    div:has(input[type="radio"]):has(img) p,
    label:has(input[type="radio"]):has(img) p,
    article:has(input[type="radio"]):has(img) p,
    section:has(input[type="radio"]):has(img) p {
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
    }
  }
}