/* TBC Event Radar page — hero section.
   Full-bleed background image (admin-configurable via ACF), same pattern as
   the Impact Lab page's .impact-hero — see section-hero.php for why. Falls
   back to the dark gradient below when no image is set in wp-admin yet. */

.tbc-event-radar__hero {
	position: relative;
	min-height: 30vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: linear-gradient(135deg, #0b0f2b 0%, #161c46 100%);
}

.tbc-event-radar__hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.tbc-event-radar__hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgba(11, 15, 43, 0.75) 0%, rgba(11, 15, 43, 0.35) 60%);
	pointer-events: none;
}

.tbc-event-radar__hero-content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 100%;
	padding: 4rem 15rem 5rem;
}

.tbc-event-radar__headline {
	font-family: BostonRegular;
	font-weight: 400;
	color: #fff;
	font-size: 4.375rem;
	line-height: 1.1;
	margin: 0 0 1.25rem;
}

.tbc-event-radar__subhead {
	color: #cfd3e6;
	max-width: none;
	white-space: nowrap;
	font-size: 1.75rem;
	margin: 0;
}

.tbc-event-radar__search-bar {
	display: flex;
	align-items: flex-end;
	gap: 1rem;
	background: #fff;
	border-radius: 1rem;
	padding: 1.25rem;
	flex-wrap: wrap;
}

.tbc-event-radar__search-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	flex: 1 1 180px;
}

/* Field names are shown on the control itself now — the multi-select
   dropdowns display their fixed name on the toggle button (e.g. "City ▾"),
   and Month's placeholder option reads "Any Month" — so the separate
   <label> above each field would just repeat that. Kept in the markup
   (not deleted) for accessibility/`for`-association, visually hidden here.
   Direct child only (>) — NOT a descendant selector — because
   event-radar.js appends each multi-select's checkbox-option <label>s
   (.tbc-event-radar__ms-option) inside this same .search-field wrapper;
   a plain descendant selector here would incorrectly clip their text too. */
.tbc-event-radar__search-field > label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tbc-event-radar__search-field select,
.tbc-event-radar__filter-bar select {
	border: 1px solid #d7d9ea;
	border-radius: 0.5rem;
	padding: 0.625rem 0.75rem;
	font-size: 0.9375rem;
	color: #1c1f3a;
	background: #f7f8fc;
}

.tbc-event-radar__search-btn {
	background: linear-gradient(135deg, #f7941d, #f15a24);
	color: #fff;
	border: none;
	border-radius: 0.5rem;
	padding: 0.75rem 1.75rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.tbc-event-radar__search-btn:hover { opacity: 0.92; }

/* Listing section */

.tbc-event-radar__listing {
	padding: 3.5rem 0;
	background: #f6f5fa;
}

/* This page's own disclaimer block, sitting directly above the footer (see
   siteorigin_corp_child_event_radar_disclaimer() in functions.php). Reuses
   .footer-disclaimer's typography/sizing, but that class's text color
   (rgba(255,255,255,.55) — near-white) was tuned for the dark .site-footer
   background it normally lives inside; on this page it sits on the plain
   white page background instead, so without this override the text was
   rendering white-on-white and invisible. Scoped to this modifier class
   only — the sitewide footer instance is untouched. */
/* This page's body carries the parent theme's
   .page-layout-full-width-no-sidebar class, which has its own
   ".page-layout-full-width-no-sidebar .site-content .corp-container
   { padding: 0 }" rule (siteorigin-corp/style.min.css) — a 3-class
   descendant selector that outranks a plain ".corp-container" or even
   ".footer-disclaimer--event-radar" single/double-class rule regardless of
   load order, so setting padding-left/right on the modifier class alone
   (below) was silently overridden by that and never took effect, leaving
   the block flush against the browser edge. This selector matches that
   rule's own shape (theme class + .site-content + our class) so it wins on
   specificity — the actual body-class name is confirmed present via
   getComputedStyle in the browser, not guessed. */
.page-layout-full-width-no-sidebar .site-content .footer-disclaimer--event-radar {
	padding-left: 15rem;
	padding-right: 15rem;
	/* padding-bottom needs to be set here too, not on the plain
	   .footer-disclaimer--event-radar rule below — that rule's own
	   padding-bottom was being zeroed out by the same
	   .corp-container{padding:0} specificity fight described above (proven
	   live: computed padding-bottom came back 0px there despite the rule
	   setting 2rem). */
	padding-bottom: 2rem;
}

/* Matches the same 1190px breakpoint the .corp-container/.custom-container
   rules themselves switch to 15px at (style.css) — without this, the
   disclaimer would keep its wide 15rem padding below that width while every
   other section on the page had already dropped to the mobile/tablet gap. */
@media (max-width: 1190px) {
	.page-layout-full-width-no-sidebar .site-content .footer-disclaimer--event-radar {
		padding-left: 15px;
		padding-right: 15px;
	}
}

.footer-disclaimer--event-radar {
	/* No padding-top here — .footer-disclaimer p:first-child (style.css)
	   already adds its own 2rem padding-top + top border above the text,
	   so adding more on this wrapper too was stacking both (1.5rem + 2rem
	   = 3.5rem) above the text while only 2.5rem sat below it, reading as
	   lopsided/inconsistent. All padding (including padding-bottom, to
	   match that same 2rem) is set on the higher-specificity rule above
	   instead of here — this plain class rule gets silently zeroed out by
	   the parent theme's .page-layout-full-width-no-sidebar .site-content
	   .corp-container{padding:0} rule, which outranks it regardless of
	   load order (confirmed live via computed styles). */
	/* Matches .tbc-event-radar__listing's background so this block reads as
	   a continuation of that section instead of a stray white gap between
	   it and the footer — no background color was being set here before. */
	background: #f6f5fa;
}
.footer-disclaimer--event-radar p {
	color: #6b6f8a;
}
.footer-disclaimer--event-radar p:first-child {
	border-top-color: #e2e2ee;
}

.tbc-event-radar__listing .section-header {
	margin-bottom: 1.75rem;
}

.tbc-event-radar__filter-bar {
	display: flex;
	align-items: flex-end;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 2.5rem;
}

.tbc-event-radar__filter-bar .tbc-event-radar__search-field {
	flex: 1 1 200px;
}

/* Multi-select checkbox dropdown (City/Category/Expert, both the hero
   search bar and the listing filter bar). event-radar.js replaces every
   <select multiple> with this closed-by-default button + panel at page
   load — the original <select> stays in the DOM (display:none) as the
   source of truth, so it's still what fetchEvents()/renderActiveFilters()
   read from; this is purely a visual/interaction layer on top. */
.tbc-event-radar__ms {
	position: relative;
}

.tbc-event-radar__ms-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	border: 1px solid #d7d9ea;
	border-radius: 0.5rem;
	padding: 0.625rem 0.75rem;
	font-size: 0.9375rem;
	color: #6b6f8a;
	background: #f7f8fc;
	cursor: pointer;
	text-align: left;
}
.tbc-event-radar__ms-toggle.is-active {
	color: #1c1f3a;
	border-color: #f15a24;
}
/* The parent theme's global button:hover/:active/:focus rules set a red
   (#f14e4e-family) background and border — those pseudo-class selectors
   have slightly higher specificity than the plain .tbc-event-radar__ms-toggle
   class rule above, so hovering/clicking this button was overriding the
   intended light-gray look with red. Re-asserted explicitly for all three
   states (hover included — the parent theme has more than one button:hover
   rule targeting background/color/border-color, so all three properties
   are pinned here to make sure none of them wins). */
.tbc-event-radar__ms-toggle:focus,
.tbc-event-radar__ms-toggle:active,
.tbc-event-radar__ms-toggle:hover {
	background: #f7f8fc;
	color: #6b6f8a;
	outline: none;
	border-color: #d7d9ea;
}
.tbc-event-radar__ms-toggle.is-active:focus,
.tbc-event-radar__ms-toggle.is-active:active,
.tbc-event-radar__ms-toggle.is-active:hover {
	color: #1c1f3a;
	border-color: #f15a24;
}
.tbc-event-radar__ms-toggle-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tbc-event-radar__ms-toggle-arrow {
	flex: none;
	font-size: 0.75rem;
	color: #9497ac;
}

/* Detached to <body> by event-radar.js (position:fixed, top/left/width set
   inline per-open from the toggle button's own position) so it always
   escapes the hero section's overflow:hidden — see initCheckboxDropdowns()
   for why a normal position:absolute-in-parent panel doesn't work here. */
.tbc-event-radar__ms-panel {
	display: none;
	position: fixed;
	z-index: 1000;
	background: #fff;
	border: 1px solid #e2e2ee;
	border-radius: 0.5rem;
	box-shadow: 0 8px 24px rgba(20, 20, 50, 0.12);
	max-height: 17rem;
	padding: 0.5rem;
	/* Flex column so the search box (flex:none, added below) stays fixed
	   at the top while only .ms-options (the option list) scrolls — the
	   panel itself no longer scrolls as one block. */
	flex-direction: column;
}
.tbc-event-radar__ms-panel.is-open {
	display: flex;
}

.tbc-event-radar__ms-search {
	flex: none;
	width: 100%;
	border: 1px solid #e2e2ee;
	border-radius: 0.375rem;
	padding: 0.5rem 0.625rem;
	font-size: 0.875rem;
	color: #1c1f3a;
	margin-bottom: 0.5rem;
}
.tbc-event-radar__ms-search:focus {
	outline: none;
	border-color: #f15a24;
}

.tbc-event-radar__ms-options {
	overflow-y: auto;
}

.tbc-event-radar__ms-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.5rem;
	font-size: 0.9375rem;
	color: #33364f;
	border-radius: 0.375rem;
	cursor: pointer;
}
.tbc-event-radar__ms-option:hover {
	background: #f6f5fa;
}
.tbc-event-radar__ms-option input {
	accent-color: #f15a24;
	width: 1rem;
	height: 1rem;
}

/* "Active filters" row — appears under the filter bar only once something
   is selected. Each chip mirrors one selected <option> (label text) with
   its own × remove button; "Clear all" sits at the end. */
.tbc-event-radar__active-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2rem;
	padding-top: 1rem;
	border-top: 1px solid #e2e2ee;
}
/* The `hidden` attribute normally hides an element via the browser's UA
   stylesheet (`[hidden]{display:none}`), but that only wins by specificity
   over a plain class selector with no explicit `display` — here `display:
   flex` above always overrode it, so the row stayed visible even when
   event-radar.js set `hidden`. This rule re-asserts display:none whenever
   `hidden` is present, regardless of the class rule's own display value. */
.tbc-event-radar__active-filters[hidden] {
	display: none;
}

.tbc-event-radar__active-filters-label {
	font-size: 0.8125rem;
	color: #6b6f8a;
	font-weight: 600;
}

.tbc-event-radar__active-filters-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tbc-event-radar__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: #fdf1ea;
	border: 1px solid #f7c9a6;
	color: #b23d10;
	border-radius: 999px;
	padding: 0.3rem 0.4rem 0.3rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
}

.tbc-event-radar__chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	color: #f15a24;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}
.tbc-event-radar__chip-remove:hover { color: #b23d10; }

.tbc-event-radar__filter-clear-all {
	background: none;
	border: none;
	color: #f15a24;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	padding: 0.3rem 0;
}
.tbc-event-radar__filter-clear-all:hover { opacity: 0.8; }

.tbc-event-radar__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}
.tbc-event-radar__grid.is-loading { opacity: 0.5; pointer-events: none; }

.tbc-event-radar__card {
	background: #ffffff;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(20, 20, 50, 0.06);
	display: flex;
	flex-direction: column;
	/* min/max, not a fixed height. CSS Grid's default row sizing already
	   makes every card WITHIN one grid row match the row's tallest card
	   (grid items stretch to the row height, min/max included in that
	   calc) — a fixed height wasn't buying extra alignment over that, it
	   was just forcing every row on the page to the same height even when
	   a whole row's cards all had short descriptions. min-height keeps a
	   short-content row visually compact; max-height still caps how tall
	   a long-content row (or an expanded "Read more" card) can grow before
	   .card-description-wrap's own scroll (below) takes over instead of
	   the card growing further. */
	min-height: 32em;
	/* Raised from 29rem — a 2-line title (long event name + host, e.g.
	   "Technology Sabha — Indian Express Group") plus a full 3-line
	   description no longer fit in 29rem once both happen on the same
	   card, so the last line of the description was getting sliced off
	   by .card-body's overflow:hidden even though the description's own
	   clamp wasn't the thing overflowing. Raised again (31.5rem → 34.5rem)
	   together with min-height, per explicit request for taller cards —
	   both bumped by the same 3rem so the min/max relationship (and the
	   room the description/date/venue text needs) stays proportionate. */
	max-height: 35.5rem;
	/* The whole card is a single <a> to the external event URL now — this
	   is what makes it look/behave like a clickable card (no underline,
	   inherits text color, subtle lift on hover) rather than a plain link. */
	color: inherit;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.3s ease;
}
/* Matches the Impact Lab pillar card's hover feel (.impact-pillars__card in
   impact-lab.css) — same warm orange-tinted background wash and title color
   shift — minus its left accent border, which wasn't wanted here. */
.tbc-event-radar__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(20, 20, 50, 0.12);
	background: rgba(240, 89, 40, 0.06);
	color: inherit;
}

.tbc-event-radar__card-image {
	position: relative;
	/* A fixed height, not aspect-ratio — .card-image is a flex item inside
	   .card's column flex context, and Chromium doesn't reliably resolve
	   aspect-ratio into a flex-basis there when the child <img> has its own
	   height:100% (a tall-source image, e.g. a 768x1708 portrait upload,
	   rendered at its native ~0.45 ratio instead of 4:3 — confirmed via
	   getComputedStyle: aspect-ratio read back correctly as "4 / 3" but the
	   actual box height was 554px at 249px width, nowhere near 4:3). That
	   let .card-image balloon to fill almost the whole fixed-height card,
	   squeezing .card-body (flex:1) down to ~29px — title/date/description
	   all effectively invisible. A concrete height sidesteps the aspect-
	   ratio/flex-basis interaction entirely and is honored consistently.
	   Raised from 12.5rem to 15rem alongside the card's own min/max-height
	   increase above, so the extra room is shared between image and
	   .card-body instead of all going to the text content. */
	height: 12.5rem;
	background: #e6e6ef;
	flex: none;
}
.tbc-event-radar__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tbc-event-radar__card-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	background: #f15a24;
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
}

.tbc-event-radar__card-body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
	/* Fills whatever height .tbc-event-radar__card's fixed height leaves
	   after the image — content beyond that (a long expanded description)
	   scrolls inside the card instead of growing it. */
	min-height: 0;
	overflow: hidden;
}

.tbc-event-radar__card-title {
	font-size: 1.1625rem;
	font-weight: 700;
	color: #1c1f3a;
	margin: 0;
	transition: color 0.3s ease;
	/* Every direct sibling row in .card-body EXCEPT the description-wrap
	   gets flex-shrink:0 (title, categories, date, venue below) — without
	   it, expanding the description ("Read more") made flexbox squeeze
	   THESE rows instead of just letting the description's own wrap
	   scroll, since only the description itself was protected with
	   flex-shrink:0. Now nothing above the description can be compressed;
	   only .card-description-wrap grows/scrolls when expanded. */
	flex-shrink: 0;
	/* Capped to 2 lines (line-height + max-height, same reliable pattern
	   as .card-description below — not -webkit-line-clamp, see that
	   rule's comment for why) so a long event name + host combo can't keep
	   growing the title area and re-eating into the description's own
	   room every time a longer title gets entered. */
	line-height: 1.3;
	max-height: 2.6em;
	overflow: hidden;
}
/* Matches .impact-pillars__card:hover .impact-pillars__title in
   impact-lab.css — title shifts to the brand orange on card hover, same as
   the pillar card. */
.tbc-event-radar__card:hover .tbc-event-radar__card-title {
	color: var(--primary);
}
.tbc-event-radar__card-host {
	font-weight: 500;
	color: #565a78;
}

.tbc-event-radar__card-categories {
	display: flex;
	flex-shrink: 0;
	/* No wrap — capped to 2 pills + "+N more" in the template (see
	   card-event.php) specifically so this row can never grow past one
	   line and push the description out of the card's fixed height. */
	flex-wrap: nowrap;
	overflow: hidden;
	gap: 0.375rem;
}
.tbc-event-radar__card-category {
	flex: none;
	font-size: 0.85rem;
	font-weight: 600;
	color: #f15a24;
	background: #fdece2;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 11rem;
	transition: background 0.3s ease, color 0.3s ease;
}
/* The card's own hover background (.tbc-event-radar__card:hover above) is a
   light orange wash, close enough to this pill's own light-orange
   background/orange text that the pill was nearly disappearing into the
   card on hover. Solid white on hover only keeps the pill visibly distinct
   against that wash without changing its look anywhere else. Text switches
   from orange to black on hover too, per explicit request. */
.tbc-event-radar__card:hover .tbc-event-radar__card-category {
	background: #fff;
	color: #1c1f3a;
}
.tbc-event-radar__card-category--more {
	color: #565a78;
	background: #eceef5;
	max-width: none;
}
.tbc-event-radar__card:hover .tbc-event-radar__card-category--more {
	background: #fff;
}

.tbc-event-radar__card-date,
.tbc-event-radar__card-venue {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	/* Bumped from 0.875rem — client specifically asked for date/venue to
	   read larger now that the card itself has more height to spend. */
	font-size: 1.0rem;
	font-weight: 500;
	color: #565a78;
	margin: 0;
	flex-shrink: 0;
}
.tbc-event-radar__card-icon {
	flex: none;
	color: #9497ac;
	/* Sized off the icon's own SVG width/height attributes (card-event.php)
	   before, so it didn't grow with the date/venue text bump above and
	   started looking small/misaligned next to the larger text. Scaled up
	   to match. */
	width: 1rem;
	height: 1rem;
}

.tbc-event-radar__card-description-wrap {
	min-height: 0;
	/* Was `hidden` — .card-description below has flex-shrink:0 (it must
	   never shrink below its own natural/clamped height), but THIS wrap has
	   flex-shrink:1 with no min-height floor, so when .card-body ran out of
	   room flexbox shrank the wrap smaller than its non-shrinking child,
	   and `hidden` clipped the difference instead of showing it — the
	   description's own overflow-y:auto never got a chance to engage
	   because its parent cut it off first. `auto` here means if the wrap
	   itself ever ends up shorter than its content (which flexbox can still
	   do), the wrap scrolls instead of silently clipping text off the
	   bottom of the card. */
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	/* The one sibling in .card-body allowed to shrink/scroll — everything
	   above it (title, categories, date, venue) is flex-shrink:0, so extra
	   card height goes to this row, and any description too long even for
	   that gets its own internal scrollbar (see .card-description below)
	   rather than the rest of the card being squeezed. */
	flex-shrink: 1;
}

.tbc-event-radar__card-description {
	font-size: 0.925rem;
	color: #33364f;
	margin: 0.25rem 0 0.5rem;
	line-height: 1.5;
	/* No more "Read more" — instead of clamping to a fixed line count and
	   hiding the rest, this scrolls internally once content exceeds
	   max-height. A description that fits within max-height renders with
	   no visible scrollbar at all (that's just how a scrollable container
	   with under-height content behaves), so short descriptions look
	   exactly like plain unclamped text; only longer ones get a scrollbar. */
	max-height: 15em;
	overflow-y: auto;
	/* This is a flex item inside .card-description-wrap (display:flex), and
	   a flex item's default min-height:auto lets the browser shrink it well
	   below its own content/max-height when the flex container itself is
	   height-constrained (.card-body has overflow:hidden + a fixed-height
	   ancestor) — measured clientHeight came back 0px despite max-height
	   being correctly computed. flex-shrink:0 stops the flex algorithm from
	   collapsing it, so it renders at its actual (clamped) content height. */
	flex-shrink: 0;
}

/* Kept in the markup per explicit request (not deleted) but visually
   hidden — the whole card is the click target now, this inner link is
   redundant and, being a second <a>, would be invalid nested-link markup
   if left visible/interactive inside the card's own <a>. aria-hidden +
   tabindex="-1" in the template keep it out of the tab order/AT tree too. */
.tbc-event-radar__card-cta {
	display: none;
}

.tbc-event-radar__no-results {
	grid-column: 1 / -1;
	text-align: center;
	color: #565a78;
	padding: 2.5rem 0;
}

/* Sticky "List your event" button — a collapsed circular icon at rest
   (same footprint as the sitewide WhatsApp button next to it), expanding
   into a pill that reveals its label on hover (desktop) or tap (mobile,
   via .is-open — see event-radar.js). Icon + label are both always in the
   DOM; only the label's max-width/opacity/margin animate, so this is a
   pure CSS transition, no JS-driven layout changes. */
.tbc-event-radar-float {
	position: fixed;
	bottom: 160px;
	right: 20px;
	z-index: 101;
	display: inline-flex;
	align-items: center;
	background: linear-gradient(135deg, #f7941d, #f15a24);
	color: #fff !important;
	text-decoration: none;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(241, 90, 36, 0.35);
	/* Collapsed size matches .whatsapp-float's fixed 56x56px circle
	   exactly (style.css). Uses width (not a fixed width AND max-width
	   together — a plain `width` always wins over a larger `max-width`,
	   which silently capped this at 56px forever and broke the hover
	   expand) so the :hover rule below can override it by itself. */
	width: 56px;
	height: 56px;
	justify-content: center;
	padding: 0;
	overflow: hidden;
	transition: width 0.3s ease, padding 0.3s ease;
}
.tbc-event-radar-float:visited,
.tbc-event-radar-float:focus,
.tbc-event-radar-float:active,
.tbc-event-radar-float:hover {
	color: #fff !important;
}
.tbc-event-radar-float:hover,
.tbc-event-radar-float:focus-visible,
.tbc-event-radar-float.is-open {
	justify-content: flex-start;
	align-items: center;
	width: auto;
	max-width: 300px;
	border-radius: 28px;
	padding: 0.75rem 1.1rem;
}

.tbc-event-radar-float__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 28x28 — matches the WhatsApp button's own SVG size (functions.php). */
	width: 28px;
	height: 28px;
}

.tbc-event-radar-float__label {
	flex: 1 1 auto;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	/* Wraps onto 2 lines rather than being forced to fit on one — the full
	   text ("Hosting an upcoming event? List it on TBC Event Radar.") at
	   this size doesn't fit a single-line pill without either truncating
	   it or making the button uncomfortably wide; wrapping matches how
	   this button looked before it was made collapsible. */
	white-space: normal;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-width 0.3s ease, opacity 0.2s ease, margin-left 0.3s ease;
}
.tbc-event-radar-float:hover .tbc-event-radar-float__label,
.tbc-event-radar-float:focus-visible .tbc-event-radar-float__label,
.tbc-event-radar-float.is-open .tbc-event-radar-float__label {
	max-width: 220px;
	opacity: 1;
	margin-left: 0.6rem;
}

@media (max-width: 1200px) {
	.tbc-event-radar__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1190px) {
	.tbc-event-radar__hero-content {
		padding-left: 15px;
		padding-right: 15px;
	}
}

@media (max-width: 992px) {
	.tbc-event-radar__grid { grid-template-columns: repeat(2, 1fr); }
	.tbc-event-radar__headline { font-size: 2.6rem; }
	.tbc-event-radar__subhead { font-size: 1.25rem; white-space: normal; max-width: 42rem; }
}

@media (max-width: 782px) {
	.tbc-event-radar__hero { min-height: 30vh; }
	.tbc-event-radar__hero-content {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	.tbc-event-radar__headline { font-size: 2.25rem; }
	.tbc-event-radar__search-bar { flex-direction: column; align-items: stretch; }
	/* .search-field's flex: 1 1 180px is a MIN-WIDTH hint for the desktop
	   horizontal row above — flex-basis follows the main axis, so once
	   .search-bar switches to flex-direction:column here, that same 180px
	   silently becomes a min-HEIGHT instead, stretching every field
	   (including plain single-selects like Month, not just the checkbox-
	   dropdown fields) to 180px tall and blowing a large empty gap into the
	   hero's mobile layout. flex-basis:auto lets each field size to its
	   real (one-line) content height on mobile. */
	.tbc-event-radar__search-field { flex-basis: auto; }
	.tbc-event-radar__search-btn { width: 100%; }
	/* Stays icon-only at rest on mobile too (matches the WhatsApp button's
	   footprint here, including its 48x48px mobile size — see
	   .whatsapp-float's own 782px override in style.css) — only the bottom
	   offset shifts up slightly to clear this breakpoint's shorter
	   WhatsApp/scroll-to-top spacing. No forced full-width text override
	   any more; expansion is tap-driven (.is-open, see event-radar.js),
	   same mechanism as desktop hover. */
	.tbc-event-radar-float {
		bottom: 150px;
		right: 12px;
		width: 48px;
		height: 48px;
	}
	.tbc-event-radar-float.is-open {
		width: auto;
		max-width: calc(100vw - 24px);
	}
}

@media (max-width: 576px) {
	.tbc-event-radar__grid { grid-template-columns: 1fr; }
}