/* ============================================================
   Featured + Trending strip (homepage, under the map)
   Compact band, not a full-screen section.
   ============================================================ */
.ft-section {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #fff;
  padding: 36px 20px;
}

.ft-container {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ft-heading {
  font-size: 1.35rem;
  font-weight: 700;
  color: #2B2D42;
  margin: 0 0 14px;
}

.ft-card-title {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #2B2D42;
}
.ft-card-title strong { font-weight: 700; }
.ft-card-title .ft-by { font-weight: 400; color: #5c5f7a; }

/* ---------- Featured: horizontal scroll row of larger cards ---------- */
.ft-featured-row {
  display: flex;
  gap: 18px;
  /* Center the cards so that when there are only a few of them on a wide
     screen the leftover space splits into balanced margins on both sides
     instead of one big gap on the right. `safe` falls back to start
     alignment when the cards overflow, so the first card stays reachable
     while scrolling. */
  justify-content: safe center;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.ft-featured-row::-webkit-scrollbar { height: 8px; }
.ft-featured-row::-webkit-scrollbar-thumb {
  background: #d6d6e0;
  border-radius: 999px;
}

.ft-featured-card {
  /* Don't grow: cards keep a sensible fixed-ish size and the row is centered
     (see .ft-featured-row). This keeps a lone card from stretching huge and
     splits leftover space into balanced margins. They can still shrink down
     to min-width, after which the row overflows and the scroller appears. */
  flex: 0 1 440px;
  min-width: 300px;
  scroll-snap-align: start;
  border: 1px solid #ececf2;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 16px rgba(43, 45, 66, 0.06);
}
.ft-featured-card .ft-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #f0f0f4;
  overflow: hidden;
}
.ft-featured-card .ft-media img,
.ft-featured-card .ft-media iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}
.ft-featured-card .ft-card-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Meta row: "posted" on the left, "City, Country" on the right */
.ft-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
}
.ft-posted {
  color: #6b6e85;
  white-space: nowrap;
}
.ft-location {
  color: #8b00d1;
  text-align: right;
}

.ft-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: #1f2233;
}

.ft-action {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: #2B2D42;
}

.ft-creators {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: #8b00d1;
}

.ft-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.ft-value-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: #eddcff;
  color: #8b00d1;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
}

/* ---------- Trending: vertical stacked compact rows ---------- */
.ft-trending-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ft-trending-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid #ececf2;
  border-radius: 14px;
  padding: 0;
  background: #faf8fd;
  overflow: hidden;
}
.ft-trend-thumb {
  position: relative;
  flex: 0 0 180px;
  width: 180px;
  align-self: stretch;
  overflow: hidden;
  background: #f0f0f4;
}
.ft-trend-thumb img,
.ft-trend-thumb iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}

.ft-trend-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 14px 18px;
}
.ft-trend-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  color: #1f2233;
}
.ft-trend-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.9rem;
}
.ft-trend-meta-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ft-trend-meta-left .ft-creators {
  font-size: 0.9rem;
}

/* Phones + tablets: show ONE featured card per view (full-width carousel)
   so each card has room to breathe, swipe horizontally for the rest. */
@media (max-width: 1024px) {
  .ft-featured-row {
    justify-content: flex-start;
    scroll-padding: 0;
  }
  .ft-featured-card {
    flex: 0 0 100%;
    min-width: 0;
    max-width: none;
    scroll-snap-align: center;
  }
}

@media (max-width: 640px) {
  .ft-trend-thumb { flex: 0 0 110px; width: 110px; }
  .ft-trend-title { font-size: 1.05rem; }
  .ft-trend-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}