/* Revertible mobile card layout experiment. Desktop remains on the existing layout. */

 .event-card.mobile-card{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-rows:auto auto auto auto;gap:6px 10px;padding:14px 16px;border-radius:22px;align-items:center;margin-bottom:12px}
 .event-card.mobile-card .card-body,.event-card.mobile-card .event-booking{display:contents}
 .event-card.mobile-card .event-time{grid-column:1/4;grid-row:1;display:flex;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:10px;padding:0;font-size:21px;line-height:1.2;letter-spacing:-.5px}
 .event-card.mobile-card .event-time .duration{font-size:14px;font-weight:400;letter-spacing:0}
 .event-card.mobile-card h2{grid-column:1/-1;grid-row:2;font-size:19px;font-weight:650;line-height:1.3;letter-spacing:-.45px;margin:0;white-space:normal;overflow:visible;display:block;-webkit-line-clamp:unset}
 .event-card.mobile-card .venue-group{grid-column:1/-1;grid-row:3;margin:0;min-width:0}
 .event-card.mobile-card .venue{display:block;font-size:14px;line-height:1.5;padding-left:21px;position:relative}
 .event-card.mobile-card .venue::before{content:'\e316';font-family:PhosphorBold!important;position:absolute;left:0;top:0;font-size:17px;font-weight:400}
 .event-card.mobile-card .venue-name{white-space:normal;overflow:visible}
 .event-card.mobile-card .event-booking .roster{grid-column:4;grid-row:1;justify-self:end;width:auto;min-width:0;margin:0}
 .event-card.mobile-card .event-booking .roster-count{display:inline-flex;gap:0;font-size:16px;line-height:1.2;font-weight:600;color:var(--secondary)}
 .event-card.mobile-card .event-booking .roster-count>*{font-size:inherit;font-weight:inherit;color:inherit;letter-spacing:0}
 .event-card.mobile-card .event-booking .metric-level{grid-column:1;grid-row:4;padding:6px 9px;min-height:0;border-radius:9px;white-space:nowrap}
 .event-card.mobile-card .event-booking .metric-level strong{font-size:13px;font-weight:600}
 .event-card.mobile-card .event-booking .metric-level:not(.metric-missing) strong::before{content:'Level '}
 .event-card.mobile-card .event-booking .metric-price{grid-column:2;grid-row:4;font-size:15px;font-weight:650;padding:0;white-space:nowrap}
 .event-card.mobile-card .event-booking .event-provider{grid-column:3;grid-row:4;justify-self:end;margin:0;min-width:0}
 .event-card.mobile-card .event-booking .event-actions{grid-column:4;grid-row:4;display:flex;align-items:center;gap:5px;justify-self:end}
 .event-card.mobile-card .event-actions .event-more{width:28px;min-width:28px;height:44px;padding:0}
 .event-card.mobile-card .event-actions .book{width:44px;min-width:44px;height:44px;padding:0;border:1px solid #cdd3dd;border-radius:13px;background:transparent;box-shadow:none;color:#0066cc}
 .event-card.mobile-card .event-actions .book-icon{width:21px;height:21px;filter:brightness(0) saturate(100%) invert(27%) sepia(91%) saturate(2082%) hue-rotate(196deg)}
 .event-card.mobile-card .event-booking .metric-missing{display:none}
 .event-card.mobile-card:has(.metric-level.metric-missing) .event-booking .metric-price{grid-column:1}
 .event-card.mobile-card .availability-note{grid-column:1/-1;grid-row:5}
 html[data-theme=dark] .event-card.mobile-card .event-actions .book{background:transparent;border-color:#ffffff26;color:#8bb2ff;box-shadow:none}
 html[data-theme=dark] .event-card.mobile-card .event-actions .book-icon{filter:brightness(0) saturate(100%) invert(71%) sepia(25%) saturate(1200%) hue-rotate(185deg)}
 html[data-theme=dark] .event-card.mobile-card .event-booking .roster-count{color:var(--secondary)}

@media(max-width:360px){.event-card{padding:12px;column-gap:7px}.event-card .event-booking .metric-level strong{font-size:12px}.event-card .event-booking .metric-price{font-size:14px}.event-card .event-actions .book{width:40px;min-width:40px;height:42px}.event-card .event-booking .event-actions{gap:2px}}

/* Shared menu interaction state for both card layouts. */
html[data-theme=dark] .event-card .event-actions .event-more:is(:hover,:active,[aria-expanded=true]){background:rgb(255 255 255 / 9%)}

/* Compact cards share these foundations at any viewport width. */
.event-card.mobile-card .event-time{align-self:center}
.event-card.mobile-card h2{align-self:center}
.event-card.mobile-card .venue{margin:0}
.event-card.mobile-card .event-booking .metric-level{background:#eee7ff;border:1px solid #e5dbff;color:#6341aa;justify-self:start}
.event-card.mobile-card .event-booking .metric-level strong{color:inherit}
.event-card.mobile-card .event-booking .metric-price{background:none;color:var(--text,#1d1d1f);justify-self:start}
.event-card.mobile-card .event-booking .provider-padelmates{max-width:36px;max-height:25px}
.event-card.mobile-card .event-booking .provider-court22{width:32px;max-height:15px}
.event-card.mobile-card .event-booking .provider-matchi{width:18px;height:18px;max-height:18px}
html[data-theme=dark] .event-card.mobile-card .event-booking .metric-level{background:#38294f;border-color:#503967;color:#c7a7f4}