/* ================================================================
   GhanaTRVL — Full-Text Search Results Addon Stylesheet
   fulltext-search-addon-v4.css

   /?FullText=... (_fulltext_body.php) - compact list rows, not the
   big card grid other result pages use (Marcel, 2026-08-30: "simple
   and straightforward listing... not like what we have at the
   moment in big card in v1"). Colour-differentiated per result via
   FT_COLOR_CODE, set inline per row as --ftr-accent rather than
   generating a class per possible colour value.

   Loaded AFTER custom-v4.css and result-pages-addon-v4.css (reuses
   .fpill for pagination, .rp-wrap for the page shell - not
   redefined a third time).

   Sections:
   01. Results list (.ftr-list / .ftr-list-item)
   02. Pagination (.ftr-pagination)
   03. Empty state (.ftr-empty-state)
================================================================ */

/* ================================================================
   01. RESULTS LIST
================================================================ */
.ftr-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Colour lives in exactly one deliberate place per row (.ftr-list-item-badge) plus the hover
   state - deliberately NOT also on the border or category text (2026-08-31: Marcel found the
   original three-places-at-once treatment read as "erratic" even knowing each colour was
   correct - concentrating it into one strong badge instead of diluting it across a hairline
   border + small coloured text is the fix, not moving the label around). */
.ftr-list-item {
  display: flex;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 16px 20px;
  text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ftr-list-item:hover {
  border-color: var(--ftr-accent, var(--mv));
  box-shadow: 0 2px 10px rgba(35,15,66,.08);
  transform: translateY(-1px);
}

/* 100px, up from 68px (~50%, rounded to match the platform's existing 100px card-image
   convention rather than the exact 102px) - Marcel, 2026-08-31: images needed to stand out
   more, and the bigger blurb text below needs a taller row to sit comfortably beside anyway. */
.ftr-list-item-img {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--wh2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ftr-list-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ftr-list-item-img--empty {
  color: var(--ftr-accent, var(--mu));
  font-size: 28px;
}

/* The one deliberate colour moment per row - a solid chip sitting on the image's corner,
   colour and type literally the same object rather than merely adjacent. Only rendered over
   a real photo (see __fulltext_content_listing.php's own comment) - the empty-image fallback
   above already carries the accent colour on the icon itself, so it doesn't need this too. */
.ftr-list-item-badge {
  position: absolute;
  bottom: -4px;
  left: -4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ftr-accent, var(--mv));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 1px 4px rgba(35,15,66,.35);
  border: 2px solid #fff;
}

.ftr-list-item-body { min-width: 0; flex: 1; }

.ftr-list-item-cat {
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mu);
  display: block;
  margin-bottom: 3px;
}

/* 2026-09-02 - past-event/tour flag (Marcel: don't make people read the small print to find out
   they missed it). Deliberately neutral grey, not the row's --ftr-accent colour or events'
   .evt-row-badge--cancelled red - this isn't an error/cancellation, just a date fact, and the
   "one deliberate colour per row" rule above still applies. */
.ftr-list-item-badge-past {
  display: inline-block;
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--mu);
  padding: 2px 7px;
  border-radius: 2px;
  margin-bottom: 4px;
}

.ftr-list-item-title {
  font-family: var(--ff-h);
  font-size: 1rem;
  font-weight: 700;
  color: var(--dv);
  line-height: 1.35;
}

/* Shown on every breakpoint now, not just d-md-block - the point (making it clear why a
   result matched the search) matters on mobile too. Clamped to exactly 2 lines regardless
   of content length - the PHP-side truncation (__fulltext_content_listing.php, 220 chars)
   just needs to supply enough text to fill both lines, this is what enforces the visual cap. */
.ftr-list-item-blurp {
  font-size: .85rem;
  color: var(--mu);
  line-height: 1.4;
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ftr-list-item-meta {
  font-family: var(--ff-h);
  font-size: 10.5px;
  color: var(--mu);
  margin-top: 4px;
}
.ftr-list-item-meta i {
  color: var(--ftr-accent, var(--mv));
  font-size: 9px;
  margin-right: 4px;
}

/* ================================================================
   02. PAGINATION
   .fpill reused verbatim from result-pages-addon-v4.css.
================================================================ */
.ftr-pagination {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}
.ftr-pagination .fpill:only-child { margin-left: auto; }

/* ================================================================
   03. EMPTY STATE
================================================================ */
.ftr-empty-state i {
  font-size: 32px;
  color: var(--mu);
}
.ftr-empty-state p {
  color: var(--mu);
  font-size: .95rem;
}