/* eGov Hub_events — default card grid. Deliberately minimal and easy to
   override from a theme (low-specificity selectors, no !important) since
   every WordPress site this loads on already has its own design system. */

/* A theme's own page template usually pads its content column — but a
   full-width block/row (no such padding) is common enough that the
   plugin needs its own baseline horizontal breathing room rather than
   ever rendering flush against the browser edge. box-sizing keeps this
   padding from pushing a 100%-width container wider than its parent. */
.egov-hub-events-wrap {
  box-sizing: border-box;
  width: 100%;
  padding: 0 24px;
}

/* Upcoming/Past tabs — only present on the unified [egov_hub_events]
   shortcode, not the single-view view="upcoming"/view="past" ones. A
   thin baseline spans the full row; the active tab's own bottom border
   is thicker and colored, overlapping that baseline right under its
   label — never a filled pill, so it reads as primary navigation sitting
   above the toolbar rather than competing with it. */
.egov-hub-events-tabs {
  display: flex;
  gap: 48px;
  margin-top: 24px;
  border-bottom: 1px solid #cfe8ec;
}

.egov-hub-events-tab {
  margin-bottom: -1px;
  padding: 0 0 14px;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #16324f;
  cursor: pointer;
}

.egov-hub-events-tab:hover {
  color: #1ca7be;
}

.egov-hub-events-tab--active {
  border-bottom-color: #1ca7be;
  color: #1ca7be;
}

/* Toolbar — search box + filter dropdown above the grid. Purely
   client-side (assets/filters.js) — never triggers a new fetch. */
.egov-hub-events-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
}

/* Tabs already carry their own top margin/border — the toolbar right
   after them just needs breathing room below, not another 24px above. */
.egov-hub-events-tabs + .egov-hub-events-toolbar {
  margin-top: 16px;
}

.egov-hub-events-search {
  position: relative;
  flex: 1;
  max-width: 320px;
}

.egov-hub-events-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}

/* Same theme-override problem as the site-logo badge below: a theme's own
   global `input[type="search"]` reset (different padding, content-box
   sizing, or its own native search-field appearance) can win over a plain
   padding-left here and push text back under the icon. !important +
   explicit box-sizing/appearance pins it regardless of theme. */
.egov-hub-events-search__input {
  width: 100% !important;
  padding: 9px 12px 9px 34px !important;
  box-sizing: border-box !important;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13.5px;
  color: #1a2550;
}

.egov-hub-events-search__input:focus {
  outline: none;
  border-color: #283a7b;
}

.egov-hub-events-filter {
  position: relative;
}

.egov-hub-events-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: #1a2550;
  cursor: pointer;
}

.egov-hub-events-filter__toggle svg {
  width: 16px;
  height: 16px;
  color: #6b7280;
}

.egov-hub-events-filter__toggle:hover {
  border-color: #283a7b;
}

.egov-hub-events-filter__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 10;
  display: flex;
  min-width: 140px;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(26, 37, 80, 0.12);
}

.egov-hub-events-filter__panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1a2550;
  cursor: pointer;
}

/* A vertical list of horizontal cards (image left, content right) rather
   than a multi-column grid — a horizontal card needs real width to have
   somewhere to put the image beside the text, so packing several per row
   the way the old vertical-card grid did isn't workable here. */
.egov-hub-events {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 0 24px;
}

.egov-hub-events--empty,
.egov-hub-events__no-results,
.egov-hub-events__empty-panel {
  padding: 32px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

.egov-hub-events__month-heading {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9199b3;
}

.egov-hub-events__month-heading:first-child {
  margin-top: 0;
}

.egov-hub-event-card {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(26, 37, 80, 0.06);
}

/* aspect-ratio is the DEFAULT size (a short, un-truncated card sits at a
   clean 4:3), not a hard cap — the card is a row-direction flex container
   with the default `align-items: stretch`, so once the body's content
   (e.g. an expanded "Read More" description) needs more height than that,
   the banner still stretches to match it, "zooming" the image taller.
   Collapsing the description back drops the row height back down, and the
   banner shrinks back to its 4:3 default with it — no JS involved, this
   is plain flex/aspect-ratio behavior. */
.egov-hub-event-card__banner {
  position: relative;
  flex: 0 0 450px;
  max-width: 450px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f4f7fb;
}

/* object-fit: cover — fills the box exactly (no letterboxing gaps) and,
   because the card stretches this box taller whenever Read More expands
   the body, actually "zooms" to fill the new height instead of just
   padding around a static-size image the way `contain` would. 4:3 is
   close enough to most banner images' own ratio that this crops very
   little in practice. */
.egov-hub-event-card__banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Below this, a side-by-side row has no room left for both an image and
   readable text — stack back to a vertical card instead. */
@media (max-width: 640px) {
  .egov-hub-events-wrap {
    padding: 0 16px;
  }

  .egov-hub-events-tabs {
    gap: 24px;
  }

  .egov-hub-event-card {
    flex-direction: column;
  }

  .egov-hub-event-card__banner {
    flex: none;
    max-width: none;
    width: 100%;
    aspect-ratio: 4 / 3;
  }
}

.egov-hub-event-card__day-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 5px 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(26, 37, 80, 0.15);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1a2550;
}

.egov-hub-event-card__body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  /* Extra left padding — more breathing room off the banner now that it's
     wider (450px) than the body's own edge padding would otherwise give it. */
  padding: 20px 20px 20px 30px;
}

.egov-hub-event-card__pill {
  display: inline-flex;
  width: fit-content;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.egov-hub-event-card__pill--webinar {
  background: rgba(40, 58, 123, 0.1);
  color: #283a7b;
}

.egov-hub-event-card__pill--event {
  background: rgba(245, 133, 34, 0.12);
  color: #f58522;
}

.egov-hub-event-card__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #1a2550;
}

.egov-hub-event-card__date {
  font-size: 13px;
  font-weight: 600;
  color: #283a7b;
}

.egov-hub-event-card__description {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #4b5066;
  flex: 1;
}

/* Left as a normal inline element (button's UA default is already
   inline-block) deliberately — assets/filters.js appends this right after
   the description text in the same DOM flow, so it wraps to wherever the
   text naturally ends, landing at the end of the last visible line next
   to the "…" instead of dropping to a line of its own. */
.egov-hub-event-card__read-more {
  padding: 0;
  border: none;
  background: none;
  font-size: 12.5px;
  font-weight: 700;
  color: #283a7b;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  cursor: pointer;
}

.egov-hub-event-card__read-more:hover {
  color: #1a2550;
}

.egov-hub-event-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}

.egov-hub-event-card__cta {
  display: inline-block;
  width: fit-content;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.egov-hub-event-card__cta--register {
  background: #1a2550;
  color: #fff;
}

.egov-hub-event-card__cta--register:hover {
  background: #283a7b;
  color: #fff;
}

.egov-hub-event-card__cta--recording {
  background: #f58522;
  color: #1a2550;
}

.egov-hub-event-card__cta--recording:hover {
  background: #d97418;
  color: #1a2550;
}

.egov-hub-event-card__cta-text {
  font-size: 12.5px;
  font-weight: 600;
  color: #9ca3af;
}

.egov-hub-event-card__learn-more {
  font-size: 13px;
  font-weight: 600;
  color: #283a7b;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.egov-hub-event-card__learn-more:hover {
  color: #1a2550;
}

/* Language and the site badge sit together as two icon+label chips in the
   same row, not spread to opposite edges. */
.egov-hub-event-card__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid #f1f3f8;
}

.egov-hub-event-card__footer-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.egov-hub-event-card__footer-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #9ca3af;
}

/* !important here is a deliberate, narrow exception to this file's usual
   "no !important" rule: several host themes ship a global `img { max-width:
   100%; height: auto }` reset (Elementor's own `.elementor img` among them)
   that otherwise overrides the plain height rule and blows this logo up to
   the card's full width. Paired with the explicit height="15" attribute in
   shortcode.php (belt and suspenders — the HTML attribute alone isn't
   always enough against a theme's own width:100% rule either). No
   max-width/max-height needed on top of this — height + width:auto already
   fully determines the box from the image's own aspect ratio. */
.egov-hub-event-card__footer-logo {
  height: 15px !important;
  width: auto !important;
  object-fit: contain;
}