/* Adjust Creative modifications */
.explore-more-details-value,.explore-more-details-title,.explore-more-details-title:hover,.explore-more-details-value:hover
{
  font-size:.8em;
  color:var(--second-text-color);
}

.activity-card .img.more_details
{
  height:80px!important;
}

.activity-card .more_details img
{
  max-height:80px!important;
  min-height:80px!important;
}

.registration_deadline
{
  background-color:var(--explore-deadline-bg-color);
  color:var(--text-inverse-color);
  padding-top:2px;
  padding-bottom:2px;
  margin:5px 0;
}

.registration_deadline .explore-more-details-value
{
  color:var(--text-inverse-color);
}

.more_details_values
{
  line-height:1.3em;
  margin-top:5px!important;
}

/*
------------------------------------------------ 
Globals 
------------------------------------------------
*/
*
{
  outline:none;
}

.button,button
{
  border-radius:5px;
}

.content-section
{
  color:var(--main-heading-color);
  border-top: 1px solid var(--text-inverse-color);
}

.content-section header
{
  padding:40px;
  color:var(--text-inverse-color);
}

.content-section header p
{
  margin-bottom:0;
  font-size:1.2em;
  color:var(--text-inverse-color);
}

.load-more-row
{
  text-align:center;
}

@media (max-width:1000px) {
  .large-2.inline-col
  {
    width:50%;
    float:left!important;
    margin-top:10px;
  }
}

/*
------------------------------------------------
SEARCH BAR
------------------------------------------------
*/
#explore-search-container
{
  background:var(--explore-bg-color);
  margin:15px;
  /* width:auto is load-bearing for WCAG 1.4.4 Resize Text. Foundation's .columns
     sets width:100%, so the 15px margin above is ADDED to a box that already fills
     its track and the column ends up 30px wider than the row. At the default text
     size the row's negative gutters happen to absorb it; at 200% they no longer do,
     and /explore scrolled horizontally. width:auto lets the margin come out of the
     available width instead, at any text size. (The max-width:1020px block below
     already did this for the same reason.)
     Measured with: bundle exec rake wcag:reflow TARGET=... ZOOM=200 */
  width:auto;
  /* float:none is what makes the width:auto above mean "fill the row". Foundation's
     .columns floats this form, and a FLOATED box with width:auto is shrink-to-fit —
     it sizes to its contents, not to its container. So the bar was only as wide as
     the widgets inside it: 811px of a 1178px row with the options panel closed,
     then 1178px when the panel opened and its full-width content defined the
     shrink-to-fit width. That is why it looked correct only while open.

     The form is the sole column in its .row (nothing needs to sit beside it), so
     un-floating it costs nothing and lets width:auto resolve against the container
     the way the note above assumes. The alternative, width:calc(100% - 30px), would
     hard-code the 15px margin in a second place. */
  float:none;
  border-radius:5px;
  padding:20px;
  -webkit-user-select:none;
/* Chrome all / Safari all */
  -moz-user-select:none;
/* Firefox all */
  -ms-user-select:none;
/* IE 10+ */
}

#explore-search-container.sticky
{
  position:fixed;
  left:0;
  z-index:200;
  top:0;
  margin:0;
  box-shadow:0 0 10px;
  padding:5px 10px 5px 5px;
}

#explore-search
{
  position:relative;
}

#explore-search ul li
{
  list-style-type:none;
  display:inline-block;
}

.iminterested
{
  margin:0;
  line-height:51px;
  text-align:right;
}

/* SEARCH BAR + KEYBOARDS */
#explore-search .more-options:hover,  #explore-search .reset_button:hover
{
  background:var(--button-color);
  color:var(--text-inverse-color);
}

#explore-search .search-submit-btn
{
  background:var(--button-color);
}

/*
------------------------------------------------
MORE OPTIONS
------------------------------------------------
*/
#explore-search-more-options .more-inner > div:last-child
{
  padding-right:0;
}

/*
------------------------------------------------
TOPIC COLORS
------------------------------------------------
*/
#explore-topics-nav ul li.topic-6:hover,#explore-topics-nav ul li.topic-6.active,.activity-card .topic-icon.topic-icon-6:hover
{
  background-color:var(--coding-color);
}

.activity-card .topic-icon.topic-icon-6
{
  background:transparent;
  border:1px solid var(--coding-color);
  color:var(--coding-color);
}

#explore-topics-nav ul li.topic-4:hover,#explore-topics-nav ul li.topic-4.active,.activity-card .topic-icon.topic-icon-4:hover
{
  background-color:var(--community-color)!important;
}

.activity-card .topic-icon.topic-icon-4
{
  background:transparent;
  border:1px solid var(--community-color);
  color:var(--community-color);
}

#explore-topics-nav ul li.topic-2:hover,#explore-topics-nav ul li.topic-2.active,.activity-card .topic-icon.topic-icon-2:hover
{
  background-color:var(--designing-color)!important;
}

.activity-card .topic-icon.topic-icon-2
{
  background:transparent;
  border:1px solid var(--designing-color);
  color:var(--designing-color);
}

#explore-topics-nav ul li.topic-1:hover,#explore-topics-nav ul li.topic-1.active,.activity-card .topic-icon.topic-icon-1:hover
{
  background-color:var(--earth-color);
}

.activity-card .topic-icon.topic-icon-1
{
  background:transparent;
  border:1px solid var(--earth-color);
  color:var(--earth-color);
}

#explore-topics-nav ul li.topic-7:hover,#explore-topics-nav ul li.topic-7.active,.activity-card .topic-icon.topic-icon-7:hover
{
  background-color:var(--media-color)!important;
}

.activity-card .topic-icon.topic-icon-7
{
  background:transparent;
  border:1px solid var(--media-color);
  color:var(--media-color);
}

#explore-topics-nav ul li.topic-11:hover,#explore-topics-nav ul li.topic-11.active,.activity-card .topic-icon.topic-icon-11:hover
{
  background-color:var(--numbers-color);
}

.activity-card .topic-icon.topic-icon-11
{
  background:transparent;
  border:1px solid var(--numbers-color);
  color:var(--numbers-color);
}

#explore-topics-nav ul li.topic-8:hover,#explore-topics-nav ul li.topic-8.active,.activity-card .topic-icon.topic-icon-8:hover
{
  background-color:var(--performance-color)!important;
}

.activity-card .topic-icon.topic-icon-8
{
  background:transparent;
  border:1px solid var(--performance-color);
  color:var(--performance-color);
}

#explore-topics-nav ul li.topic-5:hover,#explore-topics-nav ul li.topic-5.active,.activity-card .topic-icon.topic-icon-5:hover
{
  background-color:var(--sports-color);
}

.activity-card .topic-icon.topic-icon-5
{
  background:transparent;
  border:1px solid var(--sports-color);
  color:var(--sports-color);
}

#explore-topics-nav ul li.topic-9:hover,#explore-topics-nav ul li.topic-9.active,.activity-card .topic-icon.topic-icon-9:hover
{
  background-color:var(--storytelling-color)!important;
}

.activity-card .topic-icon.topic-icon-9
{
  background:transparent;
  border:1px solid var(--storytelling-color);
  color:var(--storytelling-color);
}

#explore-topics-nav ul li.topic-3:hover,#explore-topics-nav ul li.topic-3.active,.activity-card .topic-icon.topic-icon-3:hover
{
  background-color:var(--work-color)!important;
}

.activity-card .topic-icon.topic-icon-3
{
  background:transparent;
  border:1px solid var(--work-color);
  color:var(--work-color);
}

#explore-topics-nav ul li.topic-10:hover,#explore-topics-nav ul li.topic-10.active,.activity-card .topic-icon.topic-icon-10:hover
{
  background-color:var(--zoology-color)!important;
}

.activity-card .topic-icon.topic-icon-10
{
  background:transparent;
  border:1px solid var(--zoology-color);
  color:var(--zoology-color);
}


/*
------------------------------------------------
TOPIC NAV
------------------------------------------------
*/
#explore-topics-nav
{
  border-radius:5px;
  background:var(--main-bg-color);
  font-family:inherit;
  box-shadow: 6px 6px 6px var(--signup-step-design-box-shadow-color);
}

#explore-topics-nav ul
{
  margin:0;
  padding:1px;
}

#explore-topics-nav ul li:hover, #explore-topics-nav ul li.active,
#explore-topics-nav ul li:hover .topic-icons, #explore-topics-nav ul li.active .topic-icons,
.activity-card .topic-icon:hover
{
  background:var(--button-color) !important;
  color:var(--text-inverse-color) !important;
}

#explore-topics-nav .topic-icons
{
  margin-right:10px;
  font-size:18px!important;
}

#explore-topics-nav .txt.is-tool-tip
{
  z-index:99;
}

/*
------------------------------------------------
RESULTS CARDS
------------------------------------------------
*/
.activity-card
{
  height:320px;
  border:1px solid var(--activity-and-sub-top-border-color);
}

.activity-card hr {
  margin: 0.5em;
}

div.img
{
  height:150px;
}

.activity-card img
{
  min-height:100px!important;
}

.activity-card .info
{
  font-weight:700;
  margin-top:10px;
  min-height:1.5em;
  overflow:hidden;
  font-size: 0.9em;
  display: -webkit-box; /* For Webkit browsers */
  -webkit-line-clamp: 2; /* Limit to 3 lines */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis; /* Fallback for browsers that don't fully support line-clamp */

}


.activity-card-v2 .info
{
  font-weight: 700;
  margin-top: 10px;
  min-height: 1em;
  overflow:hidden;
  font-size: 0.9em;
  display: -webkit-box; /* For Webkit browsers */
  -webkit-line-clamp: 1; /* Limit to 3 lines */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis; /* Fallback for browsers that don't fully support line-clamp */

}

.activity-card-v2 .pill_info_container {
  margin-top: 1em;
}

.limit_1 {
  overflow:hidden;
  display: -webkit-box; /* For Webkit browsers */
  -webkit-line-clamp: 1; /* Limit to 3 lines */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis; /* Fallback for browsers that don't fully support line-clamp */
}

.pill_info {
  background-color:  var(--explore-pill-bg-color,  #283562);
  font-size: 0.8em;
  color: var(--text-inverse-color);
  border-radius: 1em;
  padding: 0.5em 0.5em;
}

.pill_info_container {
  padding: 10px 0;
}

.activity-card .detailed_info
{
  font-weight:700;
  margin-top:5px;
  min-height:1.5em;
  overflow:hidden;
  font-size: 0.8em;

}

.activity-card .detailed_info
{
  font-weight:700;
  margin-top:5px;
  min-height:1.5em;
  overflow:hidden;
  font-size: 0.8em;

}

.activity-card .external-activity-label {
  font-size: 0.8em;
}

.activity-card .org-name
{
  overflow:hidden;
  line-height:16px;
  max-height:32px;
  position:absolute;
  bottom:9px;
  right:10%;
  left:10%;

  display: -webkit-box; /* For Webkit browsers */
  -webkit-line-clamp: 3; /* Limit to 3 lines */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis; /* Fallback for browsers that don't fully support line-clamp */

}

.activity-card-v2 .org-name
{
  overflow:hidden;
  line-height:16px;
  max-height:32px;
  position:absolute;
  bottom:9px;
  right:10%;
  left:10%;

  display: -webkit-box; /* For Webkit browsers */
  -webkit-line-clamp: 1; /* Limit to 3 lines */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis; /* Fallback for browsers that don't fully support line-clamp */

}


#card-icon-hover-tooltip
{
  z-index:99;
}

@media (max-width:1020px) {
  #explore-topics-nav
  {
    display:inline-block;
    position:absolute;
    width:auto;
    z-index:98;
  }
  
  #explore-topics-nav .topic-icons
  {
    margin:0;
  }
  
  #explore-topics-nav .txt
  {
    display:none;
  }
  
  #explore-topics-nav .first-element:after
  {
    content:"All";
    display:inline-block;
  }
  
  /* An empty #explore-results rule sat here, holding a commented-out
     "padding-left:0" — half an attempt at cancelling col_theme's 110px indent at
     this breakpoint, disabled and so doing nothing. The indent is gone from
     col_theme itself now (see the note there), and zeroing the padding would
     have been wrong anyway: it would have dropped the column's gutter to 0
     rather than restoring it. */

  #explore-results > div h4
  {
    display:block;
  }
  
  #explore-search-container
  {
    width: auto;
    margin: 1em;
    padding: 15px;
  }
  
  .iminterested
  {
    text-align:left;
    padding-left: 1.5em;
    line-height:40px;
  }
}

/*
------------------------------------------------
ORGs
------------------------------------------------
*/
#content-orgs
{
  background:var(--content-orgs-bg-color);
  padding-bottom:0;
  padding-top:20px;
}

/*
------------------------------------------------ 
ORG Featured
------------------------------------------------
*/
#activity-cards-filters
{
  position:relative;
}

#activity-cards-filters ul
{
  margin:0;
  position:absolute;
  top:-80px;
  left:0;
  border-radius:5px;
  border-bottom-right-radius:0;
  border-bottom-left-radius:0;
}

/*
------------------------------------------------
ORG Cards
------------------------------------------------
*/
.org-card h1
{
  font-weight:700;
}

.org-card h2
{
  font-weight:400;
}

/*
------------------------------------------------
ORG Featured
------------------------------------------------
*/
#org-activities
{
  background:var(--main-bg-color);
}

#activity-cards-filters ul
{
  background-color:var(--wrapper-alert-and-footer-bg-color);
}

#activity-cards-filters ul li
{
  color:var(--org-tab-color);
}

#activity-cards-filters ul li.active
{
  background-color:var(--main-bg-color);
  color:var(--main-heading-color);
}

/*
------------------------------------------------
ORG Badges
------------------------------------------------
*/
.badge-card
{
  height:400px;
  overflow:hidden;
}

.badge-card .info
{
  height:56px;
  overflow:hidden;
}

.bookmark
{
  display:inline-block;
  float:right;
  margin-right:-21px;
  margin-top:-20px;
}

.bookmark .fa {
  margin-top: 4px !important;
  margin-right: 4px !important;
  font-size: 9px;
}

.bookmark .marked
{
  display:none;
}

.bookmark .unmarked
{
  display:inline-block!important;
  opacity:0.9;
  background-size:30px;
  min-width:30px;
  min-height:29px;
/* background-image: url("../images/bookmark_unselected_clean.png"); */
}

.bookmark .unmarked:hover
{
  opacity:1.0;
}

.bookmark .marked.selected
{
  display:inline-block!important;
  background-size:30px;
  min-width:30px;
  min-height:29px;
  background-image:url("../images/bookmark_selected_clean.png");
}

.bookmark .unmarked.selected
{
  display:none!important;
}

span.bookmark
{
  position:relative;
  display:inline-block;
  width:30px;
  text-align:right;
}

span.bookmark:after
{
  content:"";
  position:absolute;
  border-top:1px solid var(--explore-bookmark-after-border-color);
  width:42px;
  top:0;
  left:0;
  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  transform-origin:0 0;
  -webkit-transform-origin:0 0;
}

.bookmark .marked .fa-star
{
  color:var(--text-inverse-color);
}

.bookmark .unmarked .fa-star-o
{
  color:var(--h1-and-links-color);
  zoom:0.9;
  margin-right:.15em;
  opacity:0.5;
}

.showcase-detail
{
  margin-top:20px;
  font-size:.8em;
  color:var(--second-text-color);
  overflow:hidden;
  line-height:16px;
}

/*
----- Quick search ----
*/

.quick_search_button, .online_text {
    background-color: var(--main-bg-color);
    border-radius: 5px;
    color:var(--main-color);
}

.quick_search_button.active {
    background:var(--topic-icon-hover-bg-color);
    color:var(--text-inverse-color);
}

.online_text img {
  background: url("../images/online-grey.png") no-repeat;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 
  width: 2em; /* Width of new image */
  height: 2em; /* Height of new image */
}

.drop_in_text img {
  background: url("../images/open-door-grey.png") no-repeat;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 
  width: 2em; /* Width of new image */
  height: 2em; /* Height of new image */
}

.coding_text img {
  background: url("../images/coding-grey.png") no-repeat;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 
  width: 2em; /* Width of new image */
  height: 2em; /* Height of new image */
}

.meal_text img {
  background: url("../images/meal-grey.png") no-repeat;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 
  width: 2em; /* Width of new image */
  height: 2em; /* Height of new image */
}


.drop_in_text img {
  background: url("../images/open-door-grey.png") no-repeat;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 
  width: 2em; /* Width of new image */
  height: 2em; /* Height of new image */
}

.coding_text img {
  background: url("../images/coding-grey.png") no-repeat;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 
  width: 2em; /* Width of new image */
  height: 2em; /* Height of new image */
}

.meal_text img {
  background: url("../images/meal-grey.png") no-repeat;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 
  width: 2em; /* Width of new image */
  height: 2em; /* Height of new image */
}

#message_panel {
  margin-top: 1em;
  margin-bottom: 0!important;
  background: none;
  border: none;
  padding: 0.5em;
}

#message_panel a {
  text-decoration: underline;
}

.content-section header {
  padding:10px; 
  min-height:20px
}

/* WCAG 1.4.4 Resize Text: this padding must be expressed in the SAME unit as
   Foundation's grid gutter, and be at least as large.
   #explore-search and .more-inner are nested Foundation .rows, which bleed into
   their container's padding with margin: -0.9375rem. That is a rem, so at 200% text
   it becomes -30px — while a fixed 10px/15px padding stays put, and the search bar
   pushed 35px past the viewport. 0.9375rem cancels the bleed exactly at every text
   size. (This rule wins over the padding in col_theme.css by source order.)
   Measured with: bundle exec rake wcag:reflow TARGET=... ZOOM=200 */
#explore-search-container {
  padding: 0.9375rem;
  box-shadow: 6px 6px 6px var(--signup-step-design-box-shadow-color);
}

#explore-search-more-options {
  padding:0.9375rem;
  margin-top:10px
}

#explore-search-more-options .more-inner > div {
  padding-bottom:0
}

#explore-search-more-options input[type="checkbox"] {
  margin-bottom: 2px;
  vertical-align: middle;
}

.more-option-header { 
  vertical-align: top; 
  margin-right: 5px; 
  margin: 0px 10px 10px 5px; 
  display: block !important; 
}

@media only screen and (max-width:40em) {
  .more-option-header { 
    display: none !important;
  }
  .activity-card {
    float: none;
    margin: 1em auto;
  }

  #explore-search-more-options {
    padding-left:25px; 
  }

  #activity-cards {
    margin-top: 1em;
  }

  #age_options_trigger {
    margin-top: 1em;
  }

  #explore-results > div h4 {
    margin-right: 0;
  }
}

@media only screen and (min-width:1024px) {
  .large-auto {
    width: auto;
  }
}

@media only screen and (max-width:420px) {
  #explore-search .more-options.active:after {
    top: 60px;
    height: 20px;
  }
}

#explore-search-container select {
  background-color: var(--main-bg-color);
}

.playlist-card {
  z-index: 100;
  border: none;
}

.playlist-card > a {
  z-index: 102;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border: 1px solid var(--activity-and-sub-top-border-color);
  border-radius: 5px;
  padding: 20px;
}
.playlist-card > .playlist_detail {
  z-index: 102;
  position: sticky;
}
.playlist-card:before, .playlist-card:after {
  content: "";
  position: absolute;
  background: var(--main-bg-color);
  border-radius: 5px;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-right: 1px solid var(--activity-and-sub-top-border-color);
  border-bottom: 1px solid var(--activity-and-sub-top-border-color);
}

.playlist-card:before {
  top: 5px;
  left: 5px;
  z-index: 101;
}

.playlist-card:after
{
  top: 10px;
  left: 10px;
  z-index: 100;
}

#explore-search-keyword-bar .searchbar, #explore-search-input
{
  width: 100% !important;
}

.ui-datepicker {
  z-index: 999 !important;
}
.ui-datepicker {
  z-index: 999 !important;
}

/*
------------------------------------------------
Topics to Explore — horizontal bar (collapsed/expanded)
Replaces the old sidebar layout at all viewport sizes.
The existing @media (max-width:1020px) block is preserved above;
these global rules take effect via document order and override it
where needed.
------------------------------------------------
*/

/* Header: title + toggle arrow in one row */
.explore-topics-header
{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Toggle button — borderless icon button */
.explore-topics-toggle
{
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font-size: 18px;
  padding: 0 4px;
  line-height: 1;
}

/* Chevron rotation on expand */
.explore-topics-toggle .fa-chevron-down
{
  display: inline-block;
  transition: transform .15s linear;
}

#explore-topics.expanded .explore-topics-toggle .fa-chevron-down
{
  transform: rotate(180deg);
}

/* Horizontal nav at ALL viewport sizes (overrides desktop block default
   and neutralises the position:absolute set in the <=1020px media query) */
#explore-topics-nav
{
  display: block;
  position: static;
  width: 100%;
}

#explore-topics-nav ul
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* ---- COLLAPSED (default) ---- */

/* Hide text labels but leave .is-tool-tip visible
   (col_theme.css gives it display:inline-block!important; we must not fight that) */
#explore-topics:not(.expanded) #explore-topics-nav .txt:not(.is-tool-tip)
{
  display: none;
}

/* "All" pseudo-label for the first-element (no icon) in collapsed mode */
#explore-topics-nav .first-element:after
{
  content: "All";
  display: inline-block;
}

/* Remove the icon margin when collapsed so chips are compact */
#explore-topics:not(.expanded) #explore-topics-nav .topic-icons
{
  margin: 0;
}

/* ---- EXPANDED ---- */

/* Show text labels alongside icons */
#explore-topics.expanded #explore-topics-nav .txt:not(.is-tool-tip)
{
  display: inline;
}

/* Restore icon spacing in expanded mode */
#explore-topics.expanded #explore-topics-nav .topic-icons
{
  margin-right: 10px;
}

/* Hide the pseudo "All" label when expanded — the real .txt is showing */
#explore-topics.expanded #explore-topics-nav .first-element:after
{
  content: "";
  display: none;
}

/* Results stack full-width below the topics bar */
/*
------------------------------------------------
RESULTS TOOLBAR (view switcher + group-by + count)
No Tailwind — plain CSS using existing CSS custom properties.
------------------------------------------------
*/
.explore-results-toolbar
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 0.5em 0 0.75em 0;
}

.explore-results-toolbar-left
{
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.explore-results-count
{
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  line-height: 1.1;
}

.explore-results-count-num
{
  font-size: 1.75em;
  font-weight: 800;
  color: var(--button-color, #283562);
  letter-spacing: -0.01em;
}

.explore-results-count-label
{
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--second-text-color, #555);
}

.explore-results-toolbar-right
{
  display: flex;
  align-items: center;
  gap: 0.75em;
  flex-wrap: wrap;
}

.explore-group-label
{
  font-size: 0.875em;
  margin: 0;
}

.explore-group-select
{
  font-size: 0.875em;
  padding: 0.25em 0.5em;
  border: 1px solid var(--activity-and-sub-top-border-color, #ccc);
  border-radius: 4px;
  background: var(--main-bg-color, #fff);
  color: var(--main-heading-color, #333);
  margin: 0;
  height: auto;
}

/*
------------------------------------------------
VIEW SWITCHER BUTTONS
------------------------------------------------
*/
.explore-view-switcher
{
  display: flex;
  gap: 2px;
}

.explore-view-btn
{
  background: var(--main-bg-color, #fff);
  border: 1px solid var(--activity-and-sub-top-border-color, #ccc);
  color: var(--main-heading-color, #555);
  padding: 0.3em 0.6em;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.9em;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.explore-view-btn:first-child { border-radius: 4px 0 0 4px; }
.explore-view-btn:last-child  { border-radius: 0 4px 4px 0; }
.explore-view-btn:not(:first-child):not(:last-child) { border-radius: 0; }

.explore-view-btn:hover,
.explore-view-btn.active
{
  background: var(--button-color, #283562);
  color: var(--text-inverse-color, #fff);
  border-color: var(--button-color, #283562);
}

/* The icon has to be coloured on the ICON, not left to inherit the button's
   `color`. col_theme.css carries a global

     button > .fa { color: var(--text-inverse-color) }

   which assumes any icon inside a <button> sits on a filled, coloured button.
   These three buttons are only filled when selected, so the two unselected ones
   were painting a white icon on their white background — invisible, leaving a
   pair of empty boxes beside the selected view.

   Unselected reads as the button colour, so the switcher looks like the control
   it is; selected keeps the inverse colour against the filled background.
   `.explore-view-btn > .fa` is (0,2,1) against that global's (0,1,1), so it wins
   on specificity and needs no !important. */
.explore-view-btn > .fa
{
  color: var(--button-color, #283562);
  /* The same global gives every .fa a 10px right gutter for icon-then-label
     buttons. These are icon-only, so it just shoves the glyph off-centre — which
     nobody could see while the glyph was invisible. */
  margin-right: 0;
}

.explore-view-btn:hover > .fa,
.explore-view-btn.active > .fa
{
  color: var(--text-inverse-color, #fff);
}
/*
------------------------------------------------
RESULT CARDS — moved out of this file
The "gcard" card design now lives in ui/public/result_cards.css, scoped to the
`.result-cards` CLASS instead of the `#activity-cards` id, so the featured-items
widget renders identical cards on pages that do not load explore.css. That file
is loaded by the public layout. The grid/list VIEW rules below stay here: they
are explore-only.
------------------------------------------------
*/

/*
------------------------------------------------
GRID VIEW — responsive card grid (1/2/3/4 columns)
------------------------------------------------
*/
#activity-cards.view-grid
{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Non-card children (group wrap, "searching…" message) span the full row */
#activity-cards.view-grid > div
{
  grid-column: 1 / -1;
}

@media (min-width: 640px)  { #activity-cards.view-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { #activity-cards.view-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { #activity-cards.view-grid { grid-template-columns: repeat(4, 1fr); } }

/*
------------------------------------------------
LIST VIEW — prototype table-style rows
(star | org logo | activity | date | details | location)
Rendered from #hbs-list-head / #hbs-list-row inside a .list-wrap card.
------------------------------------------------
*/
#activity-cards.view-list
{
  display: block;
}

.list-wrap
{
  background: var(--main-bg-color, #fff);
  border: 1px solid var(--activity-and-sub-top-border-color, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  overflow: hidden;
}

.list-head,
#activity-cards .list-row
{
  display: grid;
  grid-template-columns: 1fr 1fr 3fr 2fr 2fr 3fr;
  gap: 16px;
  padding: 12px 24px;
  align-items: start;
}

.list-head
{
  background: var(--wrapper-alert-and-footer-bg-color, #f3f4f6);
  border-bottom: 1px solid var(--activity-and-sub-top-border-color, #e5e7eb);
  font-weight: 600;
  font-size: 0.8em;
  color: var(--second-text-color, #374151);
}

/* Row — reset the legacy .activity-card theme rules */
#activity-cards .list-row
{
  float: none;
  width: auto;
  height: auto;
  margin: 0;
  text-align: left;
  position: relative;
  padding: 16px 24px;
  background: var(--main-bg-color, #fff);
  border: 0;
  border-bottom: 1px solid var(--activity-and-sub-top-border-color, #e5e7eb);
  border-radius: 0;
  cursor: pointer;
}

#activity-cards .list-row:last-child
{
  border-bottom: 0;
}

#activity-cards .list-row:hover
{
  background: var(--explore-bg-color, #f9fafb);
  box-shadow: none;
}

.list-row .col-title h3
{
  font-weight: 600;
  margin: 0 0 4px;
  font-size: 0.95em;
  color: var(--main-heading-color, #111827);
}

.list-row .col-title h3 a
{
  color: inherit;
  text-decoration: none;
}

.list-row .col-title p
{
  font-size: 0.8em;
  color: var(--second-text-color, #4b5563);
  margin: 0;
}

.list-row .meta
{
  font-size: 0.85em;
  color: var(--second-text-color, #374151);
}

.list-row .meta + .meta
{
  margin-top: 8px;
}

#activity-cards .list-row img.orglogo
{
  width: 48px;
  height: 48px;
  max-height: 48px;
  min-height: 0 !important;
  object-fit: contain;
}

.icon-sm
{
  color: var(--gray-400, #9ca3af);
  flex-shrink: 0;
  margin-top: 2px;
}

.list-cell-star .bookmark
{
  margin: 0;
}

.list-row .register_button
{
  margin-top: 8px;
  padding: 0.4em;
}

.list-type-label
{
  font-style: italic;
}

/* Mobile: collapse the table into stacked card-like rows (prototype) */
@media (max-width: 768px)
{
  .list-head { display: none; }

  #activity-cards .list-row
  {
    grid-template-columns: 44px 1fr auto;
    gap: 6px 12px;
    padding: 14px 16px;
  }

  .list-row .list-cell-logo { grid-row: 1 / span 4; grid-column: 1; }
  .list-row .list-cell-star { grid-row: 1; grid-column: 3; justify-self: end; }
  .list-row .col-title      { grid-row: 1; grid-column: 2; }
  .list-row .col-date       { grid-row: 2; grid-column: 2 / -1; }
  .list-row .col-details    { grid-row: 3; grid-column: 2 / -1; }
  .list-row .col-location   { grid-row: 4; grid-column: 2 / -1; }

  .list-row .col-details .meta { display: inline-flex; margin-right: 16px; }
  .list-row .col-details .meta + .meta { margin-top: 0; }

  #activity-cards .list-row img.orglogo { width: 40px; height: 40px; }
  .list-row .col-title h3 { font-size: 0.9em; }
}

/*
------------------------------------------------
GROUPED VIEW — collapsible groups (prototype)
Header: icon (org logo / calendar / pin) + label + "N activities" + chevron.
Body: card grid or list rows depending on the active view.
------------------------------------------------
*/
.group-wrap
{
  display: flex;
  flex-direction: column;
  gap: 16px;
  clear: both;
}

#activity-cards .group
{
  background: var(--main-bg-color, #fff);
  border: 1px solid var(--activity-and-sub-top-border-color, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  overflow: hidden;
}

.group-head
{
  width: 100%;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  margin: 0;
}

.group-head:hover
{
  background: var(--explore-bg-color, #f9fafb);
}

.gh-left
{
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.group-head img.gh-logo
{
  width: 48px;
  height: 48px;
  max-height: 48px;
  min-height: 0;
  object-fit: contain;
  flex-shrink: 0;
}

.gh-icon
{
  font-size: 2em;
  color: var(--button-color, #283562);
  flex-shrink: 0;
}

.gh-text { min-width: 0; }

.gh-text h3.explore-group-header-title
{
  font-size: 1.1em;
  font-weight: 700;
  color: var(--main-heading-color, #111827);
  margin: 0;
  padding: 0;
  border: 0;
  text-transform: none;
  letter-spacing: normal;
}

.gh-text p
{
  font-size: 0.8em;
  color: var(--second-text-color, #4b5563);
  margin: 0;
}

.gh-chevron
{
  color: var(--second-text-color, #4b5563);
  flex-shrink: 0;
}

.group-body-grid
{
  padding: 16px 24px 24px;
  border-top: 1px solid var(--activity-and-sub-top-border-color, #e5e7eb);
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px)  { .group-body-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .group-body-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .group-body-grid { grid-template-columns: repeat(4, 1fr); } }

.group-body-list.list-wrap
{
  border: 0;
  border-top: 1px solid var(--activity-and-sub-top-border-color, #e5e7eb);
  border-radius: 0;
  box-shadow: none;
}

/*
------------------------------------------------
MAP VIEW — Leaflet + markercluster, prototype layout:
mobile tab bar / map box with overlay legend / side panel
(detail slot + in-view count + side list).
------------------------------------------------
*/
#explore-results-map
{
  display: block;
}

.explore-map-tabs
{
  display: none; /* mobile only */
  margin-bottom: 12px;
  border: 1px solid var(--activity-and-sub-top-border-color, #d1d5db);
  border-radius: 6px;
  overflow: hidden;
}

.explore-map-tabs button
{
  flex: 1;
  padding: 10px;
  background: var(--main-bg-color, #fff);
  border: none;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 500;
  color: var(--second-text-color, #4b5563);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.explore-map-tabs button.active
{
  background: var(--button-color, #283562);
  color: var(--text-inverse-color, #fff);
}

.explore-map-layout
{
  display: flex;
  gap: 16px;
  height: 620px;
}

.explore-map-box
{
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  border: 1px solid var(--activity-and-sub-top-border-color, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

#explore-map-canvas
{
  width: 100%;
  height: 100%;
  background: #e8e8e8;
}

.explore-map-tile-error
{
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  background: #fee2e2;
  color: #991b1b;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  max-width: 90%;
  text-align: center;
}

/* Legend — overlay bottom-left of the map (prototype) */
.explore-map-legend
{
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  padding: 8px 12px;
  z-index: 1000;
  font-size: 0.75em;
  line-height: 1.8;
  color: #374151;
}

.explore-map-legend-item
{
  display: flex;
  align-items: center;
  gap: 8px;
}

.explore-map-legend-dot
{
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.explore-map-legend-dot-free  { background: #16a34a; }
.explore-map-legend-dot-paid  { background: #7c3aed; }
.explore-map-legend-dot-multi { background: #2563eb; }

.explore-map-legend-hex
{
  display: inline-block;
  width: 13px;
  height: 13px;
  background: #f59e0b;
  clip-path: polygon(50% 0%, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
  flex-shrink: 0;
}

/* Side panel — stacked cards on the right (prototype) */
#explore-map-panel
{
  flex: 0 0 300px;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  background: transparent;
  border: 0;
}

#explore-map-panel-detail
{
  background: var(--main-bg-color, #fff);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  border-left: 4px solid var(--button-color, #7c3aed);
  padding: 16px;
  position: relative;
  flex-shrink: 0;
}

#explore-map-panel-detail.multi
{
  border-left-color: #2563eb;
}

.explore-map-panel-close
{
  position: absolute;
  top: 0.4em;
  right: 0.4em;
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
  color: var(--second-text-color, #555);
  line-height: 1;
  padding: 0 0.2em;
}

.explore-map-panel-close:hover { color: var(--button-color, #333); }

.explore-map-detail-logo
{
  max-width: 100%;
  max-height: 40px;
  display: block;
  margin: 0 0 0.5em;
  object-fit: contain;
}

.explore-map-detail-title
{
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 1.2em 0.25em 0;
}

.explore-map-detail-title a { color: var(--h1-and-links-color, #283562); }

.explore-map-detail-org
{
  font-size: 0.8em;
  margin: 0 0 0.75em;
  color: var(--second-text-color, #555);
}

.explore-map-detail-lines
{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.explore-map-detail-lines .line
{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8em;
  margin: 0;
  color: var(--second-text-color, #555);
}

.explore-map-detail-lines .line .fas,
.explore-map-detail-lines .line .far
{
  color: var(--gray-400, #9ca3af);
  flex-shrink: 0;
  margin-top: 2px;
}

.explore-map-detail-hint
{
  font-size: 0.75em;
  color: #2563eb;
  font-style: italic;
  margin: 8px 0 0;
}

.explore-map-side-count
{
  font-size: 0.75em;
  color: var(--second-text-color, #6b7280);
  text-align: center;
  margin: 0;
  flex-shrink: 0;
}

#explore-map-panel-list
{
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Explains why the map's count differs from the toolbar's (unmappable results)
   and/or that the marker cap truncated the set. */
.explore-map-coverage-note
{
  background: var(--main-bg-color, #fff);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  border-left: 4px solid var(--explore-pill-bg-color, #2563eb);
  padding: 10px 12px;
  margin: 0;
  font-size: 0.75em;
  line-height: 1.5;
  color: var(--second-text-color, #4b5563);
  flex-shrink: 0;
}

.explore-map-side-hint
{
  background: var(--main-bg-color, #fff);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  padding: 16px;
  font-size: 0.85em;
  color: var(--gray-400, #9ca3af);
  text-align: center;
  font-style: italic;
  margin: 0;
  flex-shrink: 0;
}

.explore-map-side-item
{
  width: 100%;
  text-align: left;
  background: var(--main-bg-color, #fff);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  padding: 12px;
  cursor: pointer;
  border: none;
  border-left: 4px solid transparent;
  flex-shrink: 0;
}

.explore-map-side-item:hover
{
  box-shadow: 0 4px 6px rgba(0,0,0,.15);
}

.explore-map-side-item.active
{
  border-left-color: var(--button-color, #7c3aed);
}

.explore-map-side-item .si-inner
{
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.explore-map-side-item img
{
  width: 32px;
  height: 32px;
  max-height: 32px;
  min-height: 0;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}

.explore-map-side-item .si-text
{
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.explore-map-side-item .si-title
{
  font-size: 0.8em;
  font-weight: 600;
  color: var(--main-heading-color, #111827);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.explore-map-side-item .si-loc
{
  font-size: 0.75em;
  color: var(--second-text-color, #6b7280);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.explore-map-side-item .si-meta
{
  font-size: 0.75em;
  margin-top: 4px;
}

.explore-map-load-more
{
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: var(--button-color, #283562);
  color: var(--text-inverse-color, #fff);
  font-size: 0.85em;
  font-weight: 500;
  cursor: pointer;
  margin-top: 4px;
  flex-shrink: 0;
}

.explore-map-load-more:hover
{
  opacity: 0.9;
}

.explore-map-no-results
{
  padding: 1em;
  font-size: 0.85em;
  color: var(--second-text-color, #555);
  text-align: center;
}

.explore-map-extent-btn
{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4b5563;
}

/* Responsive: tab bar + one pane at a time on narrow screens (prototype) */
@media (max-width: 768px)
{
  .explore-map-tabs { display: flex; }

  .explore-map-layout
  {
    flex-direction: column;
    height: auto;
    gap: 0;
  }

  .explore-map-box
  {
    height: 60vh;
    min-height: 340px;
    width: 100%;
  }

  #explore-map-panel
  {
    flex: 1 1 auto;
    width: 100%;
    max-height: none;
    margin-top: 12px;
  }

  .explore-map-legend
  {
    font-size: 0.7em;
    padding: 6px 8px;
    bottom: 8px;
    left: 8px;
  }

  .explore-map-layout.show-list .explore-map-box { display: none; }
  .explore-map-layout.show-list #explore-map-panel { display: flex; }
  .explore-map-layout.show-map #explore-map-panel { display: none; }
  .explore-map-layout.show-map .explore-map-box { display: block; height: 70vh; }
}

@media (min-width: 769px)
{
  /* Desktop always shows both map panes regardless of the mobile toggle class */
  .explore-map-layout .explore-map-box { display: block !important; }
  .explore-map-layout #explore-map-panel { display: flex !important; }
}