/* Pattern 2 only: compact mobile filters and a two-column event list. */

.mobile2-filter-select {
  display: none;
}

@media (max-width: 640px) {
  #filters {
    overflow: visible;
    padding: 28px 0 22px;
  }

  #filters .chip {
    display: none;
  }

  #filters .mobile2-filter-select {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 8px 14px;
    color: var(--ink);
    background-color: var(--white);
    border: 2px solid var(--ink);
    border-radius: 11px;
    box-shadow: 3px 3px 0 var(--ink);
    font-family: "M PLUS Rounded 1c", "Noto Sans SC", "PingFang SC", sans-serif;
    font-weight: 800;
    line-height: 1.2;
  }

  #filters .mobile2-filter-select:focus-visible {
    outline: 3px solid var(--pink);
    outline-offset: 3px;
  }

  #grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
  }

  #grid .cover {
    min-height: 154px;
    padding: 12px;
  }

  #grid .cover .cover-tag {
    top: 9px;
    left: 9px;
    padding: 3px 7px;
    font-size: 10px;
  }

  #grid .card-body {
    min-height: 220px;
    padding: 12px 11px 11px;
  }

  #grid .card-body h3 {
    margin-bottom: 9px;
    font-size: 14px;
    line-height: 1.5;
  }

  #grid .reward-row {
    gap: 5px;
    padding: 9px 0;
  }

  #grid .reward-row .amt {
    font-size: 21px;
  }

  #grid .reward-row .amt-label {
    font-size: 10px;
  }

  #grid .points-back {
    margin-left: 0;
    padding: 2px 6px;
    font-size: 9px;
    line-height: 1.35;
  }

  #grid .card-meta {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
  }

  #grid .card-meta .time {
    font-size: 9px;
    line-height: 1.5;
  }

  #grid .card-meta .btn {
    width: 100%;
    min-height: 34px;
    padding: 6px 7px;
    font-size: 10px;
    line-height: 1.25;
    white-space: normal;
  }
}

@media (max-width: 420px) {
  #grid {
    gap: 13px 9px;
  }

  #grid .cover {
    min-height: 128px;
  }

  #grid .card-body {
    min-height: 212px;
    padding-inline: 9px;
  }

  #grid .card-body h3 {
    font-size: 13px;
  }

  #grid .reward-row .amt {
    font-size: 19px;
  }

  #grid .card-meta .time {
    font-size: 8.5px;
  }
}