/* =========================================================
   MEMBER GATE — fades out the end of a truncated page and
   covers it with a login / sign-up call to action.

   This used to clip the full page to a pixel height. It no
   longer does, and that is the point: PHP now serves only
   the first few blocks of a gated post (see
   dvs_member_gate_truncate_content in functions.php), so
   there is no hidden content for these rules to hold back.
   Nothing here should ever go back to concealing content
   that is present in the document — the fade is decoration
   over the cut, not the mechanism.

   The gate ships applied for every visitor and is removed by
   assets/js/dvs-member-gate.js, which fetches the withheld
   blocks once MemberSpace reports a logged-in member.
   ========================================================= */

:root {
	/* How tall the fade itself is on small screens. Desktop lets it span the
	   whole preview; below 768px it is capped to this and pinned to the bottom. */
	--gate-fade-sm: 420px;

	/* Floor for the covered area, so a post with a very short preview still
	   has room for the heading, body copy and both buttons. */
	--gate-min: 460px;
}

/* Positioning context for the full-bleed overlay. */
#site-content.is-gated {
	position: relative;
}

/* A short preview can leave the CTA crowded against the header, so hold open
   enough room for the gradient to read as a fade rather than a band. */
.is-gated .member-gate-clip {
	min-height: var(--gate-min);
}

/* Members get the gate removed by JS, which also injects the rest of the
   post. The transition softens the min-height release; the injected content
   itself appears in one paint rather than animating to an unknown height. */
.member-gate-clip {
	transition: min-height 0.25s ease;
}

/* Full-bleed regardless of main's max-width, so the fade
   always reaches both edges of the window. */
.member-gate {
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	height: 100%;
	z-index: 5;

	display: flex;
	align-items: flex-end;
	justify-content: center;

	/* Transparent at the top so the peeked content stays
	   readable, solid white by the CTA so nothing shows
	   through behind the buttons. */
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0) 35%,
		rgba(255, 255, 255, 0.65) 60%,
		rgba(255, 255, 255, 0.96) 80%,
		#ffffff 92%
	);
}

/* Hidden until JS has settled the member question, so a
   member never sees the CTA flash past. */
.member-gate[hidden] {
	display: none;
}

.member-gate__inner {
	width: 100%;
	max-width: 34rem;
	padding: var(--space-xl) var(--space-lg) calc(var(--space-xl) * 1.5);
	text-align: center;
}

.member-gate__title {
	margin: 0 0 var(--space-sm);
	color: var(--clr-secondary);
	font-weight: var(--font-weight-bold);
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	line-height: 1.25;
}

.member-gate__text {
	margin: 0 0 var(--space-lg);
	color: var(--clr-black);
	line-height: 1.5;
}

.member-gate__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	justify-content: center;
}

/* .btn-outline is white-on-transparent in the header; over
   the gradient it needs its border back to stay visible. */
.member-gate__actions .btn-outline {
	border-color: var(--clr-primary);
}

@media (max-width: 768px) {
	/* A tall preview should not mean a tall gradient. On desktop the fade can
	   span the whole preview, but on a narrow screen that stretches it over
	   most of the article. Hug the bottom instead, so the fade covers the cut
	   and everything above it stays fully readable. min() keeps it honest when
	   the preview is shorter than the fade. */
	.member-gate {
		top: auto;
		bottom: 0;
/* 		height: min(100%, var(--gate-fade-sm)); */
	}

	.member-gate__actions {
		flex-direction: column;
		align-items: stretch;
	}
}

/* The empty marker PHP leaves where the withheld blocks were cut from. It must
   generate no box: the pathway templates wrap the page in a group with flex
   layout, where an empty div would still take a slot and open a gap. JS
   replaces it with the fetched content rather than filling it, so it is never
   the thing being displayed. */
.member-gate-remainder {
	display: none;
}

/* Shown in place of the withheld blocks when the fetch fails, so a member who
   has cleared the gate is told what happened rather than left on a stub. */
.member-gate-error {
	margin: var(--space-lg) 0;
	color: var(--clr-black);
}

/* Respect users who have asked for less motion. */
@media (prefers-reduced-motion: reduce) {
	.member-gate-clip {
		transition: none;
	}
}