/* gc_storefront_feed_sections_v1 (2026-07-28)
 *
 * Two storefront surfaces:
 *   1. .gc-storefront-section--feed-posts  — the "Feed Posts" section under My Content.
 *      Cards are the plugin's normal timeline cards, so it only needs grid + reveal rules.
 *   2. .gc-feed-grid-card                  — the compact feed card that sits INSIDE the
 *      Included-in-subscription clip grid. It reuses the .gc-clip-card skeleton on purpose
 *      (sizing / aspect-ratio / title + meta colour tokens all inherit and are already
 *      Law-6 clean), so only the feed-specific extras are defined here.
 *
 * Law 6: every colour below is either an existing theme token already used on this card,
 * or an OPAQUE pair chosen so the ratio can be computed without alpha guesswork:
 *   #ffffff on #c81e6a (--gc-accent-strong)  = 5.45:1   (Subscribers badge)
 *   #edf4ff on #0f1626                       = 15.8:1   (Public badge, lock chip)
 *   var(--gc-text-soft) on the card body     = inherited from .gc-clip-card__meta-row
 */

/* ---------------------------------------------------------------- 1. Feed section */

.gc-storefront-section--feed-posts {
	margin-top: 28px;
}

/* The grid itself is the theme's own .gc-card-grid--compact — no geometry is redefined
   here on purpose, so feed cards sit on exactly the same column track, gap and card
   width as the clip cards above them. Only the reveal state needs a rule. */
.gc-storefront-feed-grid > .gc-clip-card[hidden],
.gc-storefront-feed-grid > .gc-clip-card.gc-reveal-hidden {
	display: none !important;
}

.gc-storefront-feed-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 20px;
}

/* Tap-target floor (Law 6: >= 44px preferred on mobile). */
.gc-storefront-feed-actions .gc-show-more-button {
	min-height: 44px;
	min-width: 44px;
}

/* ------------------------------------------- 2. Compact feed card in the clip grid */

.gc-feed-grid-card .gc-clip-card__media {
	background: #0f1626;
}

.gc-feed-grid-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gc-feed-grid-card__img--blurred {
	filter: blur(16px);
	/* Scale up so the blur does not expose translucent card edges. */
	transform: scale(1.12);
}

.gc-feed-grid-card:hover .gc-feed-grid-card__img--blurred {
	transform: scale(1.12);
}

.gc-feed-grid-card__placeholder {
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient(135deg, #0f1626, #1a2540);
}

.gc-feed-grid-card__badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 24px;
	padding: 0 10px;
	border-radius: var(--gc-radius-pill, 999px);
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.gc-feed-grid-card__badge--subscribers {
	background: #c81e6a; /* --gc-accent-strong; #fff on it = 5.45:1 */
	color: #fff;
}

.gc-feed-grid-card__badge--free {
	background: #0f1626;
	color: #edf4ff; /* 15.8:1 */
	border: 1px solid rgba(237, 244, 255, 0.22);
}

.gc-feed-grid-card__lock {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
	border-radius: 50%;
	background: #0f1626;
	border: 1px solid rgba(237, 244, 255, 0.28);
	color: #edf4ff;
	font-size: 1.15rem;
	line-height: 1;
	pointer-events: none;
}

.gc-feed-grid-card__stats {
	display: inline-flex;
	gap: 10px;
	margin-left: auto;
}

.gc-feed-grid-card__stat {
	white-space: nowrap;
}

.gc-feed-grid-card__stat { display: inline-flex; align-items: center; gap: 4px; }
/* currentColor icons - not emoji. An emoji is a multicolour bitmap: `color` does not apply,
   it renders differently per platform, and it makes the Law-6 pixel reader measure the glyph's
   own grey pixels as the backdrop (3 walk cells read 1.29:1 for a span that is really 9.79:1). */
.gc-feed-grid-card__icon { flex: 0 0 auto; opacity: .85; }


/* NOT var(--gc-accent). Measured on pixels: #ec3a86 on the card body rgb(42,30,54) is
   4.12:1 — under the 4.5 body-text gate. (The theme's own .gc-clip-card__store uses that
   exact pair and measures the same 4.12:1 — a pre-existing failure logged separately;
   this label must not become a second instance of it.) --gc-text-soft measures 7.1:1. */
.gc-feed-grid-card__kind {
	font-weight: 700;
	color: var(--gc-text-soft);
	letter-spacing: .02em;
	text-transform: uppercase;
	font-size: .78rem;
}

/* No footer on this card (see render_grid_card): the meta row is the last row, so let the
   body push it to the bottom the way .gc-clip-card__footer does on a clip card. Keeps the
   card no taller than its clip neighbours in the same grid row. */
.gc-feed-grid-card .gc-clip-card__meta-row {
	margin-top: auto;
	align-items: center;
}