/**
 * Events — The Events Calendar views in the Home 4 design.
 *
 * Loaded on event views only, after the plugin's own stylesheets (see
 * kmadang_events_assets() in functions.php).
 *
 * template-parts/home4/events-hero.php and events-past.php frame the plugin's
 * views; tribe/events/v2/list/event.php and tribe-events/single-event.php in the
 * theme replace its list item and single event markup. The rules below also
 * bring the plugin's own search bar, top bar, navigation and month grid onto
 * the site's type and colours.
 */

.events-main .page-content.events-content{padding:44px 0 72px}

/* The plugin's type and accent. */
.tribe-common{--tec-font-family-sans-serif:"DM Sans",sans-serif;--tec-font-family-base:"DM Sans",sans-serif;--tec-color-accent-primary:#CD2E3A;--tec-color-accent-primary-hover:#e53b48;--tec-color-link-accent:#0047A0;--tec-color-text-primary:#11131a;--tec-color-border-active:#0047A0}
.tribe-common,.tribe-common .tribe-common-b1,.tribe-common .tribe-common-b2,.tribe-common .tribe-common-b3{font-family:var(--body)}
.tribe-common .tribe-common-h1,.tribe-common .tribe-common-h2,.tribe-common .tribe-common-h3,.tribe-common .tribe-common-h4,.tribe-common .tribe-common-h5,.tribe-common .tribe-common-h6,.tribe-common .tribe-common-h7,.tribe-common .tribe-common-h8{font-family:var(--km-display)}

/* ---------- Hero ---------- */
.ev-page-hero{position:relative;isolation:isolate;overflow:hidden;padding:46px 0 64px;color:#fff;background:linear-gradient(120deg,#0a1a33 0%,#0047A0 58%,#7d1b26 100%)}
.ev-page-hero:after{content:"";position:absolute;right:-6%;top:-30%;z-index:-1;width:52%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(205,46,58,.35) 0%,rgba(205,46,58,0) 70%)}
.ev-page-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:56px;align-items:center}
.ev-page-intro .crumbs{color:#cfe0f5}
.ev-page-intro .kicker{margin-top:30px}
.ev-page-intro h1{margin:16px 0 14px;font:800 clamp(3.2rem,6.4vw,5.6rem)/.9 var(--km-display);letter-spacing:-.06em}
.ev-page-intro>p{max-width:520px;margin:0;font-size:1.08rem;line-height:1.7;color:#dbe7f7}
.ev-stats{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2)}
.ev-stats b{display:block;font:800 2.3rem/1 var(--km-display)}
.ev-stats span{display:block;margin-top:6px;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#b8d5f6}

.ev-next{display:grid;grid-template-columns:200px minmax(0,1fr);overflow:hidden;background:#fff;color:var(--ink);border-radius:16px;box-shadow:0 34px 80px rgba(0,0,0,.35)}
.ev-next__poster{position:relative;display:block;min-height:300px;background:#0b1b33}
.ev-next__poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.ev-next__badge{position:absolute;left:12px;top:12px;padding:6px 11px;border-radius:999px;background:var(--red);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 6px 16px rgba(205,46,58,.4)}
.ev-next__body{display:flex;flex-direction:column;padding:26px 26px 24px}
.ev-next__body>small{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.ev-next__body h2{margin:8px 0 14px;font:800 1.45rem/1.15 var(--km-display);letter-spacing:-.03em}
.ev-next__body h2 a:hover{color:var(--blue)}
.ev-next__body>p{margin:0 0 18px;color:var(--muted)}
.ev-next__actions{display:flex;gap:8px;margin-top:auto;padding-top:14px}
.ev-next__actions .button{flex:1;min-height:44px;padding:0 14px;border-radius:8px}
.ev-next--empty{grid-template-columns:1fr}

/* Shared meta rows (list cards and the Next up card). */
.km-event__meta{display:grid;gap:8px;margin:0 0 14px;padding:0;list-style:none;font-size:.94rem;line-height:1.45;color:#3e4654}
.km-event__meta li{display:flex;align-items:flex-start;gap:10px}
.km-event__meta svg{flex:none;width:18px;height:18px;margin-top:1px;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.km-event__meta b{font-weight:700;color:var(--ink)}

/* ---------- Search bar and views ---------- */
.tribe-events .tribe-events-header{margin-bottom:26px}
.tribe-events .tribe-events-c-events-bar--border{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 14px 40px rgba(0,71,160,.08)}
.tribe-common .tribe-common-c-btn.tribe-events-c-search__button,.tribe-common button.tribe-common-c-btn.tribe-events-c-search__button{border-radius:8px;background:var(--red);font:800 .78rem var(--body);letter-spacing:.06em;text-transform:uppercase}
.tribe-common .tribe-common-c-btn.tribe-events-c-search__button:hover{background:#e53b48}
.tribe-events .tribe-events-c-view-selector__list-item-text{font-family:var(--body);font-weight:700}
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link:after{background-color:var(--red)}
.tribe-events .tribe-events-c-top-bar__datepicker-button{font:800 1.7rem/1.1 var(--km-display);letter-spacing:-.03em;color:var(--ink)}
.tribe-common .tribe-common-c-btn-border-small,.tribe-common a.tribe-common-c-btn-border-small{border-radius:8px;font-family:var(--body);font-weight:700}

/* ---------- List ---------- */
.tribe-events .tribe-events-calendar-list__month-separator{margin:10px 0 18px}
.tribe-events .tribe-events-calendar-list__month-separator-text{font:800 .72rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.tribe-events .tribe-events-calendar-list__month-separator:after{background-color:var(--line)}
.tribe-events .tribe-events-calendar-list__event-row.km-event-row{display:block;margin:0 0 20px}

/* The card keeps the plugin's tribe-events-calendar-list__event class (its
   scripts look for it), and the plugin styles that class as a flex row with
   gutters — so the card rules carry the plugin's prefixes to outrank it. */
.tribe-events .tribe-events-calendar-list article.km-event,.km-event{display:grid;grid-template-columns:230px minmax(0,1fr) 210px;gap:0;margin:0;padding:0;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:14px;transition:box-shadow .2s,transform .2s}
.tribe-events .tribe-events-calendar-list article.km-event>*{flex:none;width:auto;max-width:none;margin:0}
.km-event:hover{transform:translateY(-2px);box-shadow:0 20px 48px rgba(0,71,160,.12)}
.km-event__poster{position:relative;display:block;min-height:250px;background:#0b1b33}
.km-event__poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.km-event:hover .km-event__poster img{transform:scale(1.04)}
.km-event__date{position:absolute;left:14px;top:14px;display:grid;justify-items:center;min-width:64px;padding:8px 8px 7px;background:#fff;border-radius:10px;box-shadow:0 8px 20px rgba(4,16,35,.25)}
.km-event__date span{font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.km-event__date span:last-child{color:var(--muted)}
.km-event__date b{font:800 1.9rem/1 var(--km-display);color:var(--ink)}
.km-event__body{padding:26px 28px}
.km-event__chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.km-chip{padding:5px 10px;border-radius:999px;background:#eef4fc;color:var(--blue);font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.km-chip--live{background:#fff1f2;color:var(--red)}
.km-chip--past{background:#eef2f7;color:var(--muted)}
.tribe-common .km-event__title,.km-event__title{margin:0 0 12px;font:800 1.55rem/1.15 var(--km-display);letter-spacing:-.03em}
.km-event__title a{color:var(--ink)}
.km-event__title a:hover{color:var(--blue)}
.km-event__excerpt{margin:0;font-size:.92rem;line-height:1.6;color:var(--muted)}
.km-event__actions{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:26px;background:#fbfcff;border-left:1px solid var(--line)}
.km-event__actions .button{width:100%;min-height:46px;padding:0 14px;border-radius:8px}
.button.outline{background:#fff;color:var(--blue);box-shadow:inset 0 0 0 1px #bcd0ea}
.button.outline:hover{background:#eef4fc}

/* Navigation and subscribe */
.tribe-events .tribe-events-c-nav{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.tribe-events .tribe-events-c-nav__prev,.tribe-events .tribe-events-c-nav__next,.tribe-events .tribe-events-c-nav__today{font-family:var(--body);font-weight:700}
.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button{border-radius:8px}

/* Month and day views */
.tribe-events .tribe-events-calendar-month__day-date-daynum{font-family:var(--km-display);font-weight:800}
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date,.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-link{color:var(--red)}
.tribe-events .tribe-events-calendar-month__calendar-event-title-link,.tribe-events .tribe-events-calendar-day__event-title-link{font-family:var(--km-display);font-weight:800;color:var(--ink)}
.tribe-events .tribe-events-calendar-month__header-column-title{font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- Past events grid ---------- */
.ev-past{padding:80px 0;background:#f4f8fd}
.ev-past-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.ev-past-card{display:block}
.ev-past-card__img{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:12px;background:#0b1b33;box-shadow:0 14px 34px rgba(4,16,35,.14)}
.ev-past-card__img img{width:100%;height:100%;object-fit:cover;object-position:top;filter:saturate(.9);transition:transform .5s,filter .3s}
.ev-past-card:hover .ev-past-card__img img{transform:scale(1.05);filter:none}
.ev-past-card__img>span{position:absolute;left:10px;bottom:10px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.95);font-size:.68rem;font-weight:800;letter-spacing:.08em;color:var(--ink)}
.ev-past-card>b{display:block;margin:14px 0 4px;font:800 1rem/1.3 var(--km-display);color:var(--ink)}
.ev-past-card:hover>b{color:var(--blue)}
.ev-past-card>small{font-size:.8rem;color:var(--muted)}

/* ---------- Single event ---------- */
.km-single .ev-hero{padding:40px 0 64px}
/* Top-aligned: centring the copy against a tall portrait poster left a large
   empty band above the breadcrumb. */
.km-single .ev-hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:start}
.km-single .ev-poster{width:100%;max-width:380px;justify-self:end;margin:0 18px 0 0}
.km-single .ev-poster img{display:block;width:100%;height:auto;max-height:560px;aspect-ratio:auto;object-fit:contain;background:#0b1b33}
.km-single .ev-hero h1{font-size:clamp(2.4rem,4.4vw,4rem);line-height:1}
.km-single .ev-hero .hero-actions .button{border-radius:8px}
.km-single .ev-hero .hero-actions .button.ghost{border-color:#9fb6d6;color:var(--blue)}
.km-single .ev-hero .hero-actions .button.ghost:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.badge--muted{background:#4a5261}
.km-prose p{margin:0 0 16px;font-size:1.04rem;line-height:1.8;color:#3e4654}
.km-prose ul{padding-left:20px}
.ev-venue--solo{grid-template-columns:1fr}
.ev-venue--solo .ev-venue-copy .inline-link{display:inline-block;margin-top:18px}
.km-single .ticket-card .button{border-radius:8px}
.km-single .ticket-card .button+.button{margin-top:10px}
.km-single-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 0 64px}
.km-single-nav a{font-weight:700;color:var(--blue)}
.km-single-nav a:hover{text-decoration:underline}
.km-single-nav__all{padding:10px 18px;border:1px solid #bcd0ea;border-radius:999px;font-size:.84rem}
.km-single-nav__next{text-align:right}

.km-mini{display:block;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:12px;transition:box-shadow .2s,transform .2s}
.km-mini:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,71,160,.12)}
.km-mini__img{display:block;aspect-ratio:16/10;overflow:hidden;background:#0b1b33}
.km-mini__img img{width:100%;height:100%;object-fit:cover;object-position:top}
.km-mini__body{display:block;padding:18px 20px 20px}
.km-mini__body small{display:block;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.km-mini__body b{display:block;margin:6px 0 4px;font:800 1.08rem/1.25 var(--km-display);color:var(--ink)}
.km-mini__body span{font-size:.86rem;color:var(--muted)}

@media(max-width:1100px){
	.km-event{grid-template-columns:200px minmax(0,1fr)}
	.km-event__actions{grid-column:1/-1;flex-direction:row;padding:16px 20px;border-left:0;border-top:1px solid var(--line)}
	.km-event__actions .button{width:auto;flex:1}
	.ev-past-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:980px){
	.ev-page-grid{grid-template-columns:1fr;gap:36px}
	.km-single .ev-hero-grid{grid-template-columns:1fr}
	.km-single .ev-poster{justify-self:start;order:-1;width:min(320px,70%)}
}
@media(max-width:600px){
	.ev-page-hero{padding:32px 0 44px}
	.ev-next{grid-template-columns:1fr}
	.ev-next__poster{min-height:0;aspect-ratio:16/10}
	.km-event{grid-template-columns:1fr}
	.km-event__poster{min-height:0;aspect-ratio:16/10}
	.km-event__body{padding:20px}
	.km-event__actions{flex-direction:column}
	.km-event__actions .button{width:100%}
	.ev-past-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
	.km-single-nav{grid-template-columns:1fr;text-align:center}
	.km-single-nav__next{text-align:center}
}

/* The plugin pads and aligns list children through its own column classes;
   restate the card body and actions spacing at the same depth. */
.tribe-events .tribe-events-calendar-list article.km-event>.km-event__body{padding:26px 28px}
.tribe-events .tribe-events-calendar-list article.km-event>.km-event__actions{padding:26px}
@media(max-width:600px){.tribe-events .tribe-events-calendar-list article.km-event>.km-event__body{padding:20px}}

/* ---------- Booking section (#tickets) ----------
   Event Tickets' RSVP and ticket forms, on the site's type, colours and radius. */
.km-booking{scroll-margin-top:calc(var(--h4-pinned, 79px) + 24px)}
.km-booking__lead{margin:0 0 20px;color:var(--muted)}
.km-booking .tribe-common{font-family:var(--body)}
.km-booking .tribe-tickets__tickets-wrapper,.km-booking .tribe-tickets__rsvp-wrapper{max-width:none;margin:0 0 18px}
.km-booking .tribe-tickets__tickets-form,.km-booking .tribe-tickets__rsvp{border:1px solid var(--line)!important;border-radius:14px!important;background:#fff!important;box-shadow:0 14px 36px rgba(0,71,160,.07)}
.km-booking .tribe-tickets__tickets-title,.km-booking .tribe-tickets__rsvp-title{font:800 1.25rem/1.2 var(--km-display)!important;color:var(--ink)}
.km-booking .tribe-tickets__tickets-item-content-title{font:800 1rem/1.3 var(--km-display)!important;color:var(--ink)}
.km-booking .tribe-tickets__tickets-sale-price{font-family:var(--km-display);font-weight:800;color:var(--ink)}
.km-booking .tribe-common .tribe-common-c-btn,.km-booking .tribe-common a.tribe-common-c-btn,.km-booking .tribe-common button.tribe-common-c-btn{border-radius:8px;background-color:var(--red);font:800 .8rem/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase}
.km-booking .tribe-common .tribe-common-c-btn:hover{background-color:#e53b48}
.km-booking .tribe-tickets__rsvp-actions-button-not-going{color:var(--blue)!important}
.km-single .ev-hero .hero-actions .button.primary{min-width:170px}

/* List cards, responsive. These repeat the plugin-prefixed selector of the
   desktop card rule; the plain .km-event media rules above lose to it, which
   left three columns on phones and broke titles into single letters. */
@media(max-width:1100px){
	.tribe-events .tribe-events-calendar-list article.km-event{grid-template-columns:200px minmax(0,1fr)}
	.tribe-events .tribe-events-calendar-list article.km-event>.km-event__actions{grid-column:1/-1;flex-direction:row;padding:16px 20px;border-left:0;border-top:1px solid var(--line)}
	.tribe-events .tribe-events-calendar-list article.km-event>.km-event__actions .button{width:auto;flex:1}
}
@media(max-width:600px){
	.tribe-events .tribe-events-calendar-list article.km-event{grid-template-columns:1fr}
	.tribe-events .tribe-events-calendar-list article.km-event>.km-event__poster{min-height:0;aspect-ratio:16/10}
	.tribe-events .tribe-events-calendar-list article.km-event>.km-event__body{padding:20px}
	.tribe-events .tribe-events-calendar-list article.km-event>.km-event__actions{flex-direction:column;padding:16px 20px 20px}
	.tribe-events .tribe-events-calendar-list article.km-event>.km-event__actions .button{width:100%}
	.km-event__title{font-size:1.3rem}
}

/* List card posters always fill their frame (the plugin's image rules could
   otherwise leave the poster at its natural width on phones). */
.tribe-events .tribe-events-calendar-list article.km-event .km-event__poster img{position:absolute;inset:0;width:100%!important;max-width:none!important;height:100%!important;object-fit:cover;object-position:top}

/* "Next up" card when the event has no poster: its date on a brand panel. */
.ev-next__date{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;background:linear-gradient(135deg,#0047A0 0%,#0a1a33 70%,#7d1b26 100%);color:#fff}
.ev-next__date small{font-size:.8rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#b8d5f6}
.ev-next__date b{font:800 4.2rem/1 var(--km-display);letter-spacing:-.04em}
@media(max-width:600px){.ev-next__date b{font-size:3.2rem}}

/* A list card for an event without a poster shows its date on a brand panel. */
.km-event__poster:not(:has(img)){background:linear-gradient(135deg,#0047A0 0%,#0a1a33 70%,#7d1b26 100%)}

/* ---------- The blank band before "Past events" ----------
   The Events Calendar's own list container reserves 160px under its last row
   (the "Subscribe to calendar" button sits in that space), which left an empty
   run between the calendar and the theme's past-events section. The section
   below it brings its own 80px of top padding, so this only needs enough to
   clear the subscribe button. */
.events-main .tribe-events-view .tribe-events-l-container{padding-bottom:0}
.events-main .page-content.events-content{padding-bottom:8px}

/* Ticket buttons: white label on the red fill, wherever they appear. The
   plugin's own link colours apply inside .tribe-common, so these restate it. */
.events-main .button.primary,
.events-main .button.primary:hover,
.events-main .button.primary:focus,
.km-single .button.primary,
.km-single .button.primary:hover,
.km-single .button.primary:focus,
.ev-next .button.primary,
.km-event__actions .button.primary{color:#fff}

/* ---------- Events filter bar ----------
   template-parts/home4/events-filters.php — keyword, city and date range, the
   same three the home page asks for, so a search made there arrives here filled
   in. The plugin's own search collapses behind a magnifier, which hid the term
   that had just been searched for, so that half of its bar is hidden and this
   replaces it. Its view switcher (List / Month / Day) is untouched. */
.events-main .tribe-events-c-events-bar__search-button,
.events-main .tribe-events-c-events-bar__search-container{display:none!important}

.ev-filters{padding:22px 0 0}
.ev-filters__form{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:end;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 14px 40px rgba(0,71,160,.06)}
.ev-filters__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ev-filters__field>span{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.ev-filters__field input,.ev-filters__field select{width:100%;height:46px;padding:0 14px;border:1px solid #dde3ec;border-radius:10px;background:#f8fafd;color:var(--ink);font:400 .95rem var(--body)}
.ev-filters__field input:focus,.ev-filters__field select:focus{outline:0;background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,71,160,.13)}
.ev-filters__submit{height:46px;min-height:0;padding:0 22px;border:0;border-radius:10px;cursor:pointer;font-family:var(--body)}

.ev-filters__active{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0;font-size:.88rem;color:var(--muted)}
.ev-filters__chip{padding:5px 12px;border-radius:999px;background:#eef4fc;font-weight:700;color:var(--blue)}
.ev-filters__clear{margin-left:4px;font-weight:700;color:var(--red)}
.ev-filters__clear:hover{text-decoration:underline}

@media(max-width:900px){
	.ev-filters__form{grid-template-columns:1fr 1fr;gap:10px}
	.ev-filters__field:first-child{grid-column:1/-1}
	.ev-filters__submit{grid-column:1/-1;width:100%}
}
@media(max-width:560px){
	.ev-filters__form{grid-template-columns:1fr}
}

/* With the plugin's search hidden, its bar is an empty bordered strip above the
   view switcher, and the header it sits in keeps the spacing of a two-row bar —
   about 100px of nothing between the filters and the first event. Collapse the
   empty half and let the view switcher stand on its own. */
.events-main .tribe-events-c-events-bar{margin-bottom:12px;border:0!important;box-shadow:none!important;background:transparent!important}
.events-main .tribe-events-c-events-bar--border{border:0!important}
.events-main .tribe-events-header{gap:0}
.events-main .tribe-events-c-events-bar__views{margin-left:0}

/* The filter bar now sits directly above the calendar, so the plugin container's
   96px of top padding (plus the wrapper's 44px) left a long empty run between
   the chips and the List / Month / Day strip. The bottom padding was already
   trimmed for the past-events band further down this file. */
.events-main .tribe-events-view .tribe-events-l-container{padding-top:8px}
.events-main .page-content.events-content{padding-top:10px}

/* List / Month / Day sits on the same row as "Upcoming" and the date arrows,
   right-aligned, rather than on a band of its own above them — the plugin
   stacks them, which cost a full row now that its search half is hidden. */
.events-main .tribe-events-header{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px}
.events-main .tribe-events-header__content-title{display:none}
.events-main .tribe-events-header__top-bar{order:1;flex:1 1 320px;margin-bottom:0!important}
.events-main .tribe-events-header__events-bar{order:2;flex:0 0 auto;width:auto;margin:0 0 0 auto!important}
.events-main .tribe-events-c-events-bar__views{margin-left:auto}
.events-main .tribe-events-c-view-selector{width:auto}

@media(max-width:760px){
	.events-main .tribe-events-header{gap:8px}
	.events-main .tribe-events-header__top-bar{flex:1 1 100%}
	.events-main .tribe-events-header__events-bar{margin:0!important}
}

/* The plugin gives its events bar the full row width, so "flex: 0 0 auto" alone
   left it wrapping under the top bar instead of beside it. Pin both to their
   content width and let the top bar take the slack. */
.events-main .tribe-events-header__top-bar{flex:1 1 auto!important;width:auto!important;min-width:0}
.events-main .tribe-events-header__events-bar{flex:0 0 auto!important;width:auto!important;max-width:max-content;margin:0 0 0 auto!important}
.events-main .tribe-events-c-events-bar__views{width:auto!important;flex:0 0 auto}
.events-main .tribe-events-c-view-selector{width:auto!important}
.events-main .tribe-events-c-view-selector__list{display:flex;gap:4px}

/* ---------- "No events match" ----------
   tribe/events/v2/components/messages.php replaces the plugin's grey
   "There were no results found." strip for the notice type: a card that names
   what was searched for and offers the way back. */
.events-main .tribe-events-header__messages{display:block;width:100%;margin:0 0 18px;padding:0;background:none;order:0}
.km-noresults{display:flex;align-items:flex-start;gap:18px;padding:26px 28px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 14px 40px rgba(0,71,160,.06)}
.km-noresults__mark{flex:none;display:grid;place-content:center;width:52px;height:52px;border-radius:14px;background:#eef4fc}
.km-noresults__mark svg{width:26px;height:26px;fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.km-noresults__body{min-width:0}
.km-noresults h2{margin:0 0 6px;font:800 1.32rem/1.25 var(--km-display);letter-spacing:-.02em;color:var(--ink)}
.km-noresults p{margin:0 0 16px;font-size:.96rem;line-height:1.6;color:var(--muted)}
.km-noresults__actions{display:flex;flex-wrap:wrap;gap:10px}
.km-noresults__actions .button{min-height:44px;padding:0 20px;border-radius:10px}
.km-noresults__actions .button.outline{border:1px solid #dfe5ee;background:#fff;color:var(--ink)}
.km-noresults__actions .button.outline:hover{background:#f4f8fd;border-color:#c3cfde}

@media(max-width:600px){
	.km-noresults{flex-direction:column;gap:14px;padding:22px}
	.km-noresults h2{font-size:1.15rem}
	.km-noresults__actions .button{width:100%;justify-content:center}
}

/* The empty state reads as a centred panel rather than a wide banner: the icon
   sits above a short headline, the query is quoted on its own line, and the two
   ways out are centred under it. */
.km-noresults{flex-direction:column;align-items:center;gap:0;max-width:620px;margin:0 auto;padding:40px 32px;text-align:center}
.km-noresults__mark{width:64px;height:64px;margin-bottom:18px;border-radius:50%}
.km-noresults__mark svg{width:30px;height:30px}
.km-noresults h2{margin:0 0 10px;font-size:1.5rem}
.km-noresults__query{margin:0 0 6px;font-size:1rem;color:var(--ink)}
.km-noresults__query strong{color:var(--blue)}
.km-noresults p{margin:0 0 18px;max-width:46ch}
.km-noresults__actions{justify-content:center}

@media(max-width:600px){
	.km-noresults{padding:30px 22px}
	.km-noresults__mark{width:56px;height:56px}
}

/* The Events Calendar renders its messages block twice (components/header.php:
   once plain, once as --mobile) and shows one per breakpoint. Forcing both to
   display, which is what my first attempt at the mobile empty state did, put
   two "No events found" cards on the page. Each copy is shown at its own
   width instead. */
.events-main .tribe-events-header__messages{display:block}
.events-main .tribe-events-header__messages--mobile{display:none}

@media(max-width:760px){
	.events-main .tribe-events-header__messages{display:none}
	.events-main .tribe-events-header__messages--mobile{display:block;width:100%;margin:0 0 16px}
}

/* The messages wrapper is a flex child of the header, so "margin: 0 auto" on the
   card centred it inside that child rather than across the content column.
   Give the wrapper the full row and centre the card within it. */
.events-main .tribe-events-header__messages{flex:1 1 100%;width:100%}
.events-main .km-noresults{margin-left:auto;margin-right:auto}

/* The empty state fills the content column rather than sitting as a narrow
   panel in the middle of it, with room inside the box and clear space around
   it. The content stays centred within the wider box. */
.events-main .km-noresults{max-width:none;width:auto;margin:14px 0 28px;padding:56px 48px}
.events-main .km-noresults p{max-width:52ch}

@media(max-width:760px){
	.events-main .km-noresults{margin:10px 0 20px;padding:34px 22px}
}

/* Pulling the box out to the filter bar's edges with negative margins made it
   asymmetric — the left stayed put while the right overhung — so it simply
   fills the calendar container, lining up with the event cards below it. */

/* ---------- Events page layout, in the Elementor editor ----------
   The Events Listing widget (inc/widgets/class-events-listing.php) shows this
   note where the calendar goes, on the "Events page layout" page. */
.km-events-listing-note{display:flex;flex-direction:column;gap:6px;padding:48px 32px;border:2px dashed #c9d6ea;border-radius:12px;background:#fff;text-align:center;color:var(--muted)}
.km-events-listing-note b{font:800 1.2rem var(--km-display);color:var(--ink)}