/* ============================================================
   Villz · Customer Home Feed (Framed Luxury Cards)
   ----------------------------------------------------------------
   Reads global Villz tokens (--noir, --rose, --ivory, etc.) with
   hardcoded fallbacks. All classes prefixed .villz-feed-* so they
   cannot collide with any other page styles.

   Card grid is responsive: 3 cols (≥1100px) → 2 cols (≥720px) → 1.
   ============================================================ */

.villz-feed,
.villz-feed *,
.villz-feed *::before,
.villz-feed *::after { box-sizing: border-box; }

.villz-feed {
  background: var(--noir, #0a0908);
  color: var(--ivory, #f4ede1);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-weight: 300;
  min-height: 100vh;
  --flame: #e3a04c;
}

/* Banner */
.villz-feed-banner {
  margin: 24px 32px;
  padding: 32px 36px;
  border: 1px solid var(--rose-deep, #a07d5b);
  background: linear-gradient(180deg, #14110e, #0c0a08);
  position: relative;
}
.villz-feed-banner .villz-feed-corner {
  position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--rose, #c9a17a);
}
.villz-feed-banner .villz-feed-corner.tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.villz-feed-banner .villz-feed-corner.tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.villz-feed-banner .villz-feed-corner.bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.villz-feed-banner .villz-feed-corner.br { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.villz-feed-banner-eyebrow {
  font-family: var(--font-sc, 'Cormorant SC', Georgia, serif);
  font-size: 10px; letter-spacing: 0.5em;
  color: var(--rose, #c9a17a); text-transform: uppercase;
  text-align: center;
}
.villz-feed-banner-h {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 300; font-size: 36px; line-height: 1.05;
  margin: 12px 0 4px; text-align: center;
}
.villz-feed-banner-h em { font-style: italic; color: var(--rose, #c9a17a); }
.villz-feed-banner-tag {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-style: italic; font-size: 15px;
  color: var(--ivory-dim, #aea79a); text-align: center;
  margin: 0;
}

/* Grid */
.villz-feed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 16px 32px 48px;
}
@media (max-width: 1099px) {
  .villz-feed-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 719px) {
  .villz-feed-banner { margin: 16px; padding: 24px 22px; }
  .villz-feed-banner-h { font-size: 26px; }
  .villz-feed-grid { grid-template-columns: 1fr; gap: 18px; padding: 12px 16px 32px; }
}

/* Card */
.villz-feed-card {
  border: 1px solid var(--line, #2a2520);
  background: var(--noir-2, #141210);
  transition: border-color 0.3s, transform 0.3s;
  position: relative;
}
.villz-feed-card:hover { border-color: var(--rose, #c9a17a); transform: translateY(-3px); }

.villz-feed-media {
  width: 100%;
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  background: #1a1a1a;
}
.villz-feed-media .villz-feed-vid,
.villz-feed-media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.villz-feed-media .villz-feed-mute {
  position: absolute; bottom: 10px; right: 10px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(244,237,225,0.3);
  border-radius: 50%;
  color: var(--ivory, #f4ede1);
  cursor: pointer;
  z-index: 2;
}
.villz-feed-media .villz-feed-mute svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 1.6;
}

.villz-feed-info {
  padding: 14px 16px 10px;
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 16px;
}
.villz-feed-title {
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-weight: 400; font-size: 22px;
  color: var(--ivory, #f4ede1); margin: 0;
}
.villz-feed-title a { color: inherit; text-decoration: none; }
.villz-feed-title a:hover { color: var(--rose, #c9a17a); }

.villz-feed-rating { display: flex; gap: 2px; }
.villz-feed-flame {
  width: 11px; height: 14px; display: inline-block;
  background: var(--flame);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'><path d='M12 0c2 6 8 8 8 16 0 6-3.6 11-8 11s-8-5-8-11c0-3 1-5 3-7 0 3 1 5 3 5 0-4-2-7 2-14z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'><path d='M12 0c2 6 8 8 8 16 0 6-3.6 11-8 11s-8-5-8-11c0-3 1-5 3-7 0 3 1 5 3 5 0-4-2-7 2-14z'/></svg>") center/contain no-repeat;
}
.villz-feed-flame.off { background: var(--line, #2a2520); }

.villz-feed-actions {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 14px;
  border-top: 1px solid var(--line, #2a2520);
}
.villz-feed-actions .villz-feed-ico {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ivory-dim, #aea79a);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px; cursor: pointer;
  background: transparent; border: none; padding: 0;
  transition: color 0.25s;
}
.villz-feed-actions .villz-feed-ico:hover { color: var(--rose, #c9a17a); }
.villz-feed-actions .villz-feed-ico.is-liked { color: var(--rose, #c9a17a); }
.villz-feed-actions svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 1.5;
}
.villz-feed-actions svg.is-solid { fill: currentColor; stroke: none; }

/* like-icon alias — matches .villz-feed-ico styles without touching the shared snippet */
.villz-feed-actions .like-icon {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ivory-dim, #aea79a);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px; cursor: pointer;
  background: transparent; border: none; padding: 0;
  transition: color 0.25s;
}
.villz-feed-actions .like-icon:hover { color: var(--rose, #c9a17a); }

/* Infinity scroll cue (HTMX trigger lives here) */
.villz-feed-cue {
  text-align: center;
  padding: 28px 32px 48px;
  font-family: var(--font-sc, 'Cormorant SC', Georgia, serif);
  font-size: 10px; letter-spacing: 0.5em;
  color: var(--ivory-mute, #6b6459); text-transform: uppercase;
  border-top: 1px solid var(--line, #2a2520);
}
.villz-feed-cue::before {
  content: '·  ·  ·';
  display: block;
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-style: italic; font-size: 22px;
  color: var(--rose, #c9a17a); letter-spacing: 0.5em;
  margin-bottom: 8px;
}