/*
================================================================================
RESULT CARDS — the shared public "gcard" card design
================================================================================
One card design, used by every public surface that lists activities:

  * /explore  — cards rendered CLIENT-side by explore_results_views.js from the
                Handlebars templates in
                app/ui/components/explore_results_component/_handlebars_templates.html.erb
  * the featured shelf and the legacy server-rendered search branch — the same
    markup rendered SERVER-side by the ERB partials in
    app/ui/components/explore_results_component/

These rules used to live in explore.css, scoped to `#activity-cards`. That id is
on the explore results grid only, so the featured-items widget — which renders
the very same cards through the very same partials — matched none of them and
fell back to the legacy `.activity-card` theme rules in col_theme.css
(float:left, width:260px, text-align:center, no height). The visible result was
a floated staircase of ragged-height cards: measured at 268 / 361 / 286 / 588px
on the same shelf, clipped by `.featured-wrapper`'s fixed height.

So the scope is now a CLASS, `.result-cards`, which any container carrying these
cards opts into:

  * `#activity-cards` (app/ui/components/explore_component.html.erb)
  * `.fc-track`       (the featured carousel, below)

This file is loaded by the public LAYOUT, not by a page, because the featured
widget can be embedded in any CMS page.

Specificity note: `.result-cards .gcard` is (0,2,0), which still beats the
legacy `.activity-card` rules at (0,1,0) that these overrides exist to defeat —
the same job the old (1,1,0) id scope did. Where a col_theme rule uses
`!important` (`.activity-card img { min-height:100px!important }`) the override
below answers in kind.
================================================================================
*/

.result-cards .gcard
{
  float: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  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;
  cursor: pointer;
}

.result-cards .gcard:hover
{
  box-shadow: 0 4px 6px rgba(0,0,0,.18);
}

.result-cards .gcard > a.explore-result-card
{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

.result-cards .gcard-head
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px;
}

.result-cards .gcard img.gcard-logo
{
  width: 40px;
  height: 40px;
  max-height: 40px;
  min-height: 0 !important; /* beats .activity-card img { min-height:100px!important } */
  object-fit: contain;
  border-radius: 4px;
}

.gcard-actions
{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Bookmark star — prototype-style plain star button.
   The global span.bookmark rules (explore.css above) style the OLD card's
   corner ribbon: a rotated :after border (the "slash"), negative margins and
   a 9px star riding on the ribbon line. Inside the new results presentation
   we neutralise all of that and show a single 18px star: gray outline when
   unbookmarked, solid yellow when bookmarked (the .marked div now carries a
   real fas fa-star glyph instead of the old PNG background). */
.gcard-actions .bookmark,
.list-cell-star .bookmark
{
  float: none;
  position: relative;
  margin: 0;
  width: auto;
  text-align: center;
  line-height: 1;
}

.gcard-actions .bookmark:after,
.list-cell-star .bookmark:after
{
  content: none; /* the corner-ribbon "slash" */
}

.gcard-actions .bookmark .unmarked,
.list-cell-star .bookmark .unmarked,
.gcard-actions .bookmark .marked.selected,
.list-cell-star .bookmark .marked.selected
{
  min-width: 0;
  min-height: 0;
  background-image: none; /* old PNG ribbon star */
  border-bottom: none;    /* Foundation .has-tip dotted underline */
  cursor: pointer;
}

.gcard-actions .bookmark i,
.list-cell-star .bookmark i
{
  font-size: 18px;
  margin: 0 !important;
}

.gcard-actions .bookmark .unmarked i,
.list-cell-star .bookmark .unmarked i
{
  color: var(--gray-400, #9ca3af);
}

.gcard-actions .bookmark .unmarked:hover i,
.list-cell-star .bookmark .unmarked:hover i
{
  color: #facc15;
}

.gcard-actions .bookmark .marked i.fa-star,
.list-cell-star .bookmark .marked i.fa-star
{
  color: #facc15; /* overrides .bookmark .marked .fa-star (inverse/white) */
}

.gcard-network-icon
{
  color: var(--second-text-color, #6b7280);
}

.result-cards .gcard-body
{
  padding: 0 16px 12px;
  flex: 1 1 auto;
}

.result-cards .gcard .gcard-title
{
  font-weight: 600;
  font-size: 0.95em;
  line-height: 1.35;
  margin: 0 0 4px;
  min-height: 0;
  color: var(--main-heading-color, #111827);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gcard-org
{
  font-size: 0.8em;
  color: var(--second-text-color, #6b7280);
  margin: 0 0 12px;
}

.gcard-pills
{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.gcard-pills .label
{
  font-size: 0.7em;
  border-radius: 999px;
  padding: 2px 8px;
}

/* Category icons row — neutralise the theme's absolute bottom positioning */
.result-cards .gcard .topic-icons.gcard-cats
{
  position: static;
  bottom: auto;
  left: auto;
  right: auto;
  margin: 0 0 8px;
  text-align: left;
}

.result-cards .gcard-foot
{
  border-top: 1px solid var(--activity-and-sub-top-border-color, #f3f4f6);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8em;
  color: var(--second-text-color, #4b5563);
}

.gcard-foot .line,
.list-row .meta
{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.gcard-foot .line > i,
.gcard-foot .line > .fas,
.gcard-foot .line > .far
{
  color: var(--gray-400, #9ca3af);
  flex-shrink: 0;
  margin-top: 2px;
}

.gcard-foot .truncate
{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gcard-foot .dual
{
  display: flex;
  align-items: center;
  gap: 16px;
}

.gcard-type-label
{
  font-size: 1em;
  color: var(--second-text-color, #6b7280);
}

.cost-free { color: #16a34a; font-weight: 600; }
.cost-paid { color: var(--main-heading-color, #374151); font-weight: 600; }
.cost-free em, .cost-paid em { font-style: normal; }

/* Playlist "stacked paper" pseudo-elements + absolute overlay <a> conflict
   with the flex gcard — flatten the playlist card in all views. */
.result-cards .gcard.playlist-card > a
{
  position: static;
  height: auto;
  width: auto;
  padding: 0;
  border: 0;
}

.result-cards .gcard.playlist-card:before,
.result-cards .gcard.playlist-card:after
{
  display: none;
}


/*
================================================================================
FEATURED SHELF — horizontal carousel
================================================================================
The featured widget shows ONE row of the cards above, scrolled horizontally,
rather than a wrapping float grid clipped by a fixed-height container.

Uniform height is the whole point and it comes from flexbox, not from a magic
number: `.fc-track` is a flex row with the default `align-items:stretch`, so
every `.gcard` in it is laid out at the height of the tallest one. Inside a
card, `.gcard-body { flex:1 1 auto }` (above) absorbs the slack, which keeps
each card's footer meta lines aligned across the row.

Scrolling is native — `overflow-x:auto` plus scroll-snap on the viewport — so
touch, trackpad, shift+wheel and keyboard all work with no JavaScript at all.
featured_carousel.js only adds the two arrow buttons and their enabled state;
with JS off you get a plain scrollable shelf.
================================================================================
*/

/* The MODX widget was a slick slider of 222px "sets", so the theme pinned the
   wrapper to exactly two of them (444px) and hid the rest. The port renders
   cards instead, whose height depends on their content, and that fixed height
   is what was clipping the tallest card. Height now comes from the cards. */
.featured-wrapper
{
  height: auto;
  overflow: visible;
  padding-bottom: 1.5em;
}

.featured-carousel
{
  position: relative;
}

/* Horizontal scroller. scroll-padding keeps a snapped card clear of the left
   arrow, and the bottom padding leaves room for the cards' box-shadow, which
   overflow:hidden on the x-axis would otherwise crop. */
.fc-viewport
{
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-left: 4px;
  padding: 4px 4px 12px;
  -webkit-overflow-scrolling: touch;
}

/* Firefox / standards thin scrollbar; WebKit gets the ::-webkit rules below. */
.fc-viewport
{
  scrollbar-width: thin;
  scrollbar-color: var(--gray-400, #9ca3af) transparent;
}

.fc-viewport::-webkit-scrollbar { height: 8px; }
.fc-viewport::-webkit-scrollbar-track { background: transparent; }

.fc-viewport::-webkit-scrollbar-thumb
{
  background: var(--gray-400, #9ca3af);
  border-radius: 4px;
}

/* One row, uniform height (align-items defaults to stretch — do not override). */
.fc-track
{
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Fixed-basis cards: flex-shrink 0 so they keep their width and the row scrolls
   instead of squeezing. 280px matches the explore grid's card width at its
   widest breakpoint, so a card looks the same on both surfaces. */
.fc-track > .gcard
{
  flex: 0 0 280px;
  max-width: 280px;
  scroll-snap-align: start;
}

/* `.featured-items li { background:none!important }` in col_theme targets the
   old markup; the track is a plain div now, but a card could still inherit the
   theme's list styling if a site's CSS re-adds it. Keep the cards neutral. */
.fc-track > .gcard::marker { content: none; }

/* ── Arrows ───────────────────────────────────────────────────────────────
   Vertically centred over the viewport's card area, not the whole wrapper, so
   they do not drift when the heading or scrollbar height changes. 40px square
   clears WCAG 2.5.8 (24px minimum target size) with room to spare. Hidden by
   default: featured_carousel.js reveals them only when the row actually
   overflows, so a two-card shelf gets no dead controls. */
.fc-arrow
{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--activity-and-sub-top-border-color, #e5e7eb);
  border-radius: 50%;
  background: var(--main-bg-color, #fff);
  color: var(--main-heading-color, #111827);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  cursor: pointer;
  line-height: 1;
  font-size: 16px;
}

.featured-carousel.fc-scrollable .fc-arrow { display: block; }

.fc-arrow:hover:not(:disabled)
{
  background: var(--button-color, #283562);
  color: var(--text-inverse-color, #fff);
}

/* Keep the focus ring visible against the dark featured background —
   WCAG 2.4.11 Focus Not Obscured / 2.4.13 Focus Appearance. */
.fc-arrow:focus-visible
{
  outline: 3px solid var(--text-inverse-color, #fff);
  outline-offset: 2px;
}

/* At either end the button stays in place but reads as unavailable, so the row
   does not reflow as you scroll. */
.fc-arrow:disabled
{
  opacity: .35;
  cursor: default;
}

.fc-prev { left: -20px; }
.fc-next { right: -20px; }

/* On narrow screens there is no gutter outside the centred column to hang the
   arrows in, so tuck them inside the viewport edge. */
@media only screen and (max-width: 40em)
{
  .fc-prev { left: 0; }
  .fc-next { right: 0; }

  .fc-track > .gcard
  {
    flex-basis: 240px;
    max-width: 240px;
  }
}

/* The heading and, when present, a "view all" link share a row above the cards. */
.featured-head
{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
}

.featured-head h3 { margin-bottom: .3em; }