/* CreatorCardsEditorial
   Visual styling for the editorial hero cards only. Every rule is scoped to .rc--editorial,
   so the original cards (css/styles.css) are never affected. Size, position, tilt, motion
   and the flip all come from the shared .rc rules and js/main.js and are untouched here */

.rc--editorial .front.ed-front {
  border-radius: 24px;
  background: var(--surface-2);
  box-shadow:
    0 1px 0 #FFFFFF14 inset,
    0 0 0 1px #11191614,
    0 22px 44px -26px var(--shadow);
}

.rc--editorial .ed-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
}

/* A soft bottom scrim, only where the text sits */
.rc--editorial .ed-front::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(180deg, #11191600 0%, #11191626 35%, #111916B8 100%);
  pointer-events: none;
}

.rc--editorial .ed-label {
  position: absolute; z-index: 1; left: 12px; top: 12px;
  padding: 4px 9px; border-radius: 99px;
  background: #FFFCF7E0; color: #111916;
  font-family: var(--font-text); font-size: 10.5px; font-weight: var(--w-label); letter-spacing: 0.02em;
}

.rc--editorial .ed-meta {
  position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 4px; color: var(--on-photo);
}
.rc--editorial .ed-handle {
  font-family: var(--font-display); font-weight: var(--w-head); font-size: 16px; letter-spacing: -0.01em;
}
.rc--editorial .ed-niche {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-text); font-size: 12px; opacity: 0.88;
}
.rc--editorial .ed-dot {
  width: 7px; height: 7px; border-radius: 99px; flex-shrink: 0;
  background: var(--tag-bg, var(--tag-lime));
}

/* The receipt side keeps the shared styling, just matched corners */
.rc--editorial .back { border-radius: 24px; }

/* Descriptive labels: category pill and location */
.rc--editorial .ed-cat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 11px; letter-spacing: 0; }
.rc--editorial .ed-cat .ed-dot { width: 6px; height: 6px; }
.rc--editorial .ed-city { gap: 5px; }
.rc--editorial .ed-city svg { opacity: 0.9; }
.flow-disclosure { font-weight: var(--w-label); color: var(--ink-soft); }

@media (max-width: 720px) {
  .rc--editorial .ed-cat { font-size: 10px; padding: 4px 8px; }
  .rc--editorial .ed-handle { font-size: 14px; }
  .rc--editorial .ed-niche { font-size: 11px; }
  .rc--editorial .ed-meta { left: 12px; right: 12px; bottom: 12px; }
}