/* ==========================================================================
   lc-feature.css — SEO feature landing pages (waterfront / golf / pool).
   Server-rendered card grid emitted by [lc_feature_listings]. Card visuals
   mirror lc-listings.css so these pages match the /listings/ directory, but
   the grid is a responsive auto-fill (these pages are full page width, not the
   split-screen map app). Self-contained — no dependency on the map app CSS.
   ========================================================================== */

.lc-feature {
  --lc-ink:     #1d2721;
  --lc-muted:   #6b7772;
  --lc-line:    #e3e6e3;
  --lc-bg:      #ffffff;
  --lc-bg-soft: #f6f7f5;
  --lc-accent:  #2f6f57;   /* lowcountry green */
  --lc-gold:    #b8863b;   /* featured accent  */
  --lc-shadow:  0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  color: var(--lc-ink);
  box-sizing: border-box;
}
.lc-feature *, .lc-feature *::before, .lc-feature *::after { box-sizing: border-box; }

.lc-feature .lcf-count {
  font-weight: 600;
  font-size: 15px;
  color: var(--lc-ink);
  margin: 0 0 16px;
}

/* ---- Responsive card grid ---------------------------------------------- */
.lc-feature .lcf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
}

.lc-feature .lc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--lc-bg);
  border: 1px solid var(--lc-line);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--lc-shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
.lc-feature .lc-card:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  transform: translateY(-2px);
}

.lc-feature .lc-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #e7eae8;
  overflow: hidden;
}
.lc-feature .lc-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.lc-feature .lc-card__noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--lc-muted);
  font-size: 13px;
  background: var(--lc-bg-soft);
}
.lc-feature .lc-card__ribbon {
  position: absolute;
  top: 10px; left: 0;
  background: var(--lc-gold);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 0 4px 4px 0;
  box-shadow: var(--lc-shadow);
}
/* LCSaves heart. Over the photo, opposite the ribbon — the card body is spoken for by
   the attribution line and must not be crowded. Matches .lc-card__save in
   lc-listings.css so a saved home looks the same here as on the map directory. */
.lc-feature .lc-card__save {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  width: 30px; height: 30px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); color: #8a9490;
  box-shadow: 0 1px 4px rgba(0,0,0,.18); transition: transform .1s, color .12s;
}
.lc-feature .lc-card__save:hover { transform: scale(1.08); color: #d6455f; }
.lc-feature .lc-card__save.is-on { color: #d6455f; }
.lc-feature .lc-card__save svg { display: block; fill: currentColor; }

.lc-feature .lc-card__body { padding: 10px 12px 12px; }
.lc-feature .lc-card__price {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--lc-ink);
  line-height: 1.1;
}
.lc-feature .lc-card__meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--lc-ink);
}
.lc-feature .lc-card__meta b { font-weight: 700; }
.lc-feature .lc-card__addr {
  margin-top: 6px;
  font-size: 13px;
  color: var(--lc-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lc-feature .lc-card__sub {
  font-size: 12px;
  color: var(--lc-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-top: 2px;
}
/* NAR IDX 7.58: attribution must be readable and no smaller than the median type in the
   listing display. The card runs 20/13/13/12px, so the median is 13px -- this matches
   .lc-feature .lc-card__meta exactly. Do not shrink it, and do not fade it into --lc-muted.

   ⚠ SIZE IS NOT AN AVAILABLE LEVER, AND THIS RULE HAS ALREADY BEEN BROKEN ONCE. It was set to
   11px directly beneath this comment and shipped. The reasoning was sound — at body-adjacent
   size the credit does compete with the price and the address — but the diagnosis pointed at the
   wrong property. The competition comes from the credit being the only --lc-ink line in the lower
   half of the card, under two --lc-muted ones, in a stack of five evenly spaced lines with no
   grouping. Shrinking it left a small line that was still the darkest thing down there. Rank is
   handled below, by separation rather than by scale. */
.lc-feature .lc-card__attrib {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--lc-ink);
}
/* Rank without touching size or ink: the credit stops being the fifth line of listing data and
   becomes the card's footer. A rule and real space are what say "different register" — at the
   same size and colour as the data above it, 4px of margin says "next line" instead. The hairline
   is the card's own border colour, so it reads as part of the card rather than as a new device.
   Kept in step with lc-listings.css, which these pages deliberately mirror. */
.lc-feature .lc-card__body .lc-card__attrib {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--lc-line);
}

/* ---- Count / more / nav / empty ---------------------------------------- */
.lc-feature .lcf-more {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--lc-muted);
}
.lc-feature .lcf-more a,
.lc-feature .lcf-nav a { color: var(--lc-accent); }

.lc-feature .lcf-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 28px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--lc-line);
  font-size: 14px;
}
.lc-feature .lcf-nav a { text-decoration: none; }
.lc-feature .lcf-nav a:hover { text-decoration: underline; }

.lc-feature .lcf-empty {
  padding: 32px 0;
  color: var(--lc-muted);
  font-size: 15px;
}