/*
 * Growing Posts Cards
 * Hover/focus on a card expands it to ~50% of the container width while the
 * remaining cards share the other 50%. Pure CSS via flex-grow + :has().
 */

.gpc-growing-posts-cards {
	/* Defaults — overridden by inline <style> printed from saved options. */
	--gpc-radius: 8x;
	--gpc-font: inherit;
	--gpc-title-size: clamp(1rem, 1vw + 0.75rem, 1.35rem);
	--gpc-meta-size: clamp(0.8rem, 0.4vw + 0.7rem, 0.9rem);
	--gpc-excerpt-size: clamp(0.85rem, 0.4vw + 0.75rem, 1rem);
	--gpc-bg: #0f1115;
	--gpc-surface: #1a1d24;
	--gpc-text: #f5f6f8;
	--gpc-muted: #a8adb8;
	--gpc-accent: #ff5b1f;
	--gpc-overlay: rgba(15, 17, 21, 0.55);

	/* Per-instance — set inline by the renderer based on post count. */
	--gpc-count: 4;
	--gpc-grow: 3;

	--gpc-card-min-h: clamp(280px, 38vw, 460px);
	--gpc-gap: clamp(8px, 1vw, 16px);
	--gpc-transition: 480ms cubic-bezier(0.22, 1, 0.36, 1);

	display: block;
	width: 100%;
	font-family: var(--gpc-font);
	color: var(--gpc-text);
	box-sizing: border-box;
}

.gpc-growing-posts-cards *,
.gpc-growing-posts-cards *::before,
.gpc-growing-posts-cards *::after {
	box-sizing: border-box;
}

/* Viewport is a no-op in grid mode (just lays out the track). In slider mode
   it clips the overflowing track so off-screen cards stay hidden. */
.gpc-growing-posts-cards__viewport {
	display: block;
	position: relative;
	width: 100%;
}

.gpc-growing-posts-cards.is-slider {
	position: relative; /* anchor for absolute-positioned nav buttons */
}

.gpc-growing-posts-cards.is-slider .gpc-growing-posts-cards__viewport {
	overflow: hidden;
}

.gpc-growing-posts-cards__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--gpc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	min-height: var(--gpc-card-min-h);
}

/* Slider mode: track gets sized + transformed by JS via inline style. CSS
   only owns the transition + cards' fixed widths. */
.gpc-growing-posts-cards.is-slider .gpc-growing-posts-cards__track {
	transition: transform var(--gpc-transition);
	will-change: transform;
}

.gpc-growing-posts-cards.is-slider .gpc-growing-posts-cards__item {
	/* Each card is exactly 1/visible of the viewport width, gap-aware. */
	flex: 0 0 calc((100% - (var(--gpc-visible) - 1) * var(--gpc-gap)) / var(--gpc-visible));
}

/* Disable hover-expand in slider mode — hovered card keeps its fixed width
   so off-screen cards never get pulled into view. Image scale, overlay,
   meta-extra and excerpt reveal still fire from the hover rules above. */
.gpc-growing-posts-cards.is-slider .gpc-growing-posts-cards__track .gpc-growing-posts-cards__item:hover,
.gpc-growing-posts-cards.is-slider .gpc-growing-posts-cards__track .gpc-growing-posts-cards__item:focus-within,
.gpc-growing-posts-cards.is-slider .gpc-growing-posts-cards__track .gpc-growing-posts-cards__item.is-active {
	flex-grow: 0;
	flex-basis: calc((100% - (var(--gpc-visible) - 1) * var(--gpc-gap)) / var(--gpc-visible));
}

/* Nav buttons — circular, semi-transparent, perched on top of the slider. */
.gpc-growing-posts-cards__nav {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 200ms ease, transform 200ms ease, opacity 200ms ease;
	opacity: 0.85;
	-webkit-appearance: none;
	appearance: none;
}

.gpc-growing-posts-cards__nav:hover {
	background: rgba(0, 0, 0, 0.78);
	opacity: 1;
}

.gpc-growing-posts-cards__nav:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--gpc-accent);
}

.gpc-growing-posts-cards__nav--prev { left: 8px; }
.gpc-growing-posts-cards__nav--next { right: 8px; }

.gpc-growing-posts-cards__arrow {
	display: block;
	width: 20px;
	height: 20px;
}

.gpc-growing-posts-cards__item {
	flex: 1 1 0;
	min-width: 0; /* allow shrinking inside flex */
	display: flex;
	transition: flex-grow var(--gpc-transition);
}

/* Hover/focus expansion. The two rules below MUST have equal specificity
   so the cascade resolves on source order — same trick the Hotmart layout
   uses (.wrapper:hover .card vs .wrapper .card:hover). The track-hover
   rule keeps non-active siblings at flex-grow:1 while the active rule,
   placed later and with the same specificity, wins for the hovered card. */
.gpc-growing-posts-cards__track:hover .gpc-growing-posts-cards__item,
.gpc-growing-posts-cards__track:focus-within .gpc-growing-posts-cards__item {
	flex-grow: 1;
}

.gpc-growing-posts-cards__track .gpc-growing-posts-cards__item:hover,
.gpc-growing-posts-cards__track .gpc-growing-posts-cards__item:focus-within,
.gpc-growing-posts-cards__track .gpc-growing-posts-cards__item.is-active {
	flex-grow: var(--gpc-grow);
}

/* The card itself is the link, fills the item, hosts media + content layers. */
.gpc-growing-posts-cards__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	min-height: var(--gpc-card-min-h);
	overflow: hidden;
	border-radius: var(--gpc-radius);
	background: var(--gpc-surface);
	color: inherit;
	text-decoration: none;
	isolation: isolate;
	transition: transform var(--gpc-transition), box-shadow var(--gpc-transition);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.18);
}

.gpc-growing-posts-cards__card:focus {
	outline: none;
}
.gpc-growing-posts-cards__card:focus-visible {
	box-shadow:
		0 0 0 3px var(--gpc-accent),
		0 8px 24px rgba(0, 0, 0, 0.28);
}

.gpc-growing-posts-cards__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	overflow: hidden;
}


.gpc-growing-posts-cards__media--empty {
	background: linear-gradient(135deg, var(--gpc-surface) 0%, var(--gpc-bg) 100%);
}

.gpc-growing-posts-cards__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.02);
	transition: transform var(--gpc-transition), filter var(--gpc-transition);
	filter: saturate(0.9) brightness(0.85);
}

.gpc-growing-posts-cards__item:hover .gpc-growing-posts-cards__image,
.gpc-growing-posts-cards__item:focus-within .gpc-growing-posts-cards__image,
.gpc-growing-posts-cards__item.is-active .gpc-growing-posts-cards__image {
	transform: scale(1.06);
	filter: saturate(1.05) brightness(1);
}

.gpc-growing-posts-cards__overlay {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			to top,
			rgba(0, 0, 0, 0.78) 0%,
			rgba(0, 0, 0, 0.6) 28%,
			rgba(0, 0, 0, 0.25) 55%,
			transparent 80%
		);
	transition: opacity var(--gpc-transition);
}

.gpc-growing-posts-cards__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: clamp(16px, 1.6vw, 28px);
	color: var(--gpc-text);
	/* Soft shadow on every text node inside the card. Two-stop stack: a tight
	   1px halo for sharpness on top of the photo, plus a wider 6px diffusion
	   for legibility against bright image areas. */
	text-shadow:
		0 1px 1px rgba(0, 0, 0, 0.55),
		0 2px 6px rgba(0, 0, 0, 0.45);
}

.gpc-growing-posts-cards__title {
	display: block;
	margin: 0;
	font-family: var(--font-family-secondary);
	font-size: var(--gpc-title-size);
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
	text-wrap: balance; /* progressively enhanced; harmless when unsupported */
	overflow-wrap: break-word;
	transition: transform var(--gpc-transition);
}

.gpc-growing-posts-cards__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	font-family: var(--font-family-secondary, inherit);
	font-size: var(--gpc-meta-size);
	color: var(--gpc-muted);
	line-height: 1.3;
}

.gpc-growing-posts-cards__date,
.gpc-growing-posts-cards__author {
	font-family: var(--font-family-secondary, inherit);
}

.gpc-growing-posts-cards__author-prefix {
	opacity: 0.75;
	font-weight: 400;
	margin-right: 0.15em;
}

.gpc-growing-posts-cards__separator {
	opacity: 0.55;
	margin: 0 0.15em;
}

.gpc-growing-posts-cards__meta-extra {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(2px);
	transition:
		max-width var(--gpc-transition),
		opacity var(--gpc-transition),
		transform var(--gpc-transition);
}

.gpc-growing-posts-cards__item:hover .gpc-growing-posts-cards__meta-extra,
.gpc-growing-posts-cards__item:focus-within .gpc-growing-posts-cards__meta-extra,
.gpc-growing-posts-cards__item.is-active .gpc-growing-posts-cards__meta-extra {
	max-width: 100%;
	opacity: 1;
	transform: translateY(0);
}

.gpc-growing-posts-cards__comments {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.gpc-growing-posts-cards__icon {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	stroke: currentColor;
}

/* Excerpt is hidden in the resting state and revealed when active. */
.gpc-growing-posts-cards__excerpt {
	display: block;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	margin-top: 6px;
	font-family: inherit;
	font-size: var(--gpc-excerpt-size);
	line-height: 1.5;
	color: var(--gpc-text);
	opacity: 0;
	max-height: 0;
	transform: translateY(6px);
	transition:
		max-height var(--gpc-transition),
		opacity var(--gpc-transition),
		transform var(--gpc-transition);
	text-wrap: pretty;
}

.gpc-growing-posts-cards__item:hover .gpc-growing-posts-cards__excerpt,
.gpc-growing-posts-cards__item:focus-within .gpc-growing-posts-cards__excerpt,
.gpc-growing-posts-cards__item.is-active .gpc-growing-posts-cards__excerpt {
	opacity: 1;
	max-height: 12em;
	transform: translateY(0);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Responsive — drop to a vertical stack on small screens so each card stays
   readable and tappable instead of relying on hover. */
@media (max-width: 900px) {
	.gpc-growing-posts-cards__track {
		flex-wrap: wrap;
		min-height: 0;
	}
	.gpc-growing-posts-cards__item,
	.gpc-growing-posts-cards__item:hover,
	.gpc-growing-posts-cards__item:focus-within {
		flex: 1 1 100%;
	}
	.gpc-growing-posts-cards__card {
		min-height: clamp(220px, 60vw, 360px);
	}
	/* Always show the meta-extra and excerpt on small screens — there's no
	   useful "rest" state when the slider is stacked. */
	.gpc-growing-posts-cards__meta-extra {
		max-width: 100%;
		opacity: 1;
		transform: none;
	}
	.gpc-growing-posts-cards__excerpt {
		opacity: 1;
		max-height: none;
		transform: none;
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}
}

/* Two-column intermediate breakpoint for tablets. */
@media (min-width: 600px) and (max-width: 900px) {
	.gpc-growing-posts-cards__item,
	.gpc-growing-posts-cards__item:hover,
	.gpc-growing-posts-cards__item:focus-within {
		flex: 1 1 calc(50% - var(--gpc-gap));
	}
}

/* Slider mode keeps the carousel UX even on mobile — drop visible to 1
   so a single full-width card slides at a time. The grid-mode media
   queries above don't apply because we override flex here. */
@media (max-width: 900px) {
	.gpc-growing-posts-cards.is-slider .gpc-growing-posts-cards__track {
		flex-wrap: nowrap;
	}
	.gpc-growing-posts-cards.is-slider .gpc-growing-posts-cards__item,
	.gpc-growing-posts-cards.is-slider .gpc-growing-posts-cards__track .gpc-growing-posts-cards__item:hover,
	.gpc-growing-posts-cards.is-slider .gpc-growing-posts-cards__track .gpc-growing-posts-cards__item:focus-within {
		flex: 0 0 100%;
	}
	.gpc-growing-posts-cards.is-slider .gpc-growing-posts-cards__nav {
		width: 36px;
		height: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gpc-growing-posts-cards * {
		transition-duration: 0.01ms !important;
	}
}