/**
 * Troora Tier Paywall - frontend styles.
 *
 * Reproduces the locking effect of the original Elementor template:
 * the lower part of the permitted preview gradually fades into the page
 * background (a linear-gradient CSS mask, not a blur), then the paywall design
 * follows.
 *
 * The fade is decoration only. The restricted remainder of the article is
 * removed on the server and is not present in the HTML, so removing these rules
 * (or disabling CSS entirely) reveals nothing.
 *
 * Deliberately minimal: no typography, colour, spacing, width or layout rules
 * are imposed on the article itself.
 */

/* -------------------------------------------------------------------------
 * 1. Tail fade (default): fades the last N pixels of the permitted preview.
 * ---------------------------------------------------------------------- */

.troora-pw-preview {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	position: relative;
}

.troora-pw-preview--fade-tail {
	--troora-pw-fade-height: var( --troora-pw-fh-lg, 260px );
	--troora-pw-fade-color: #ffffff;

	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 0,
		#000 calc(100% - var( --troora-pw-fade-height ) ),
		rgba( 0, 0, 0, 0 ) 100%
	);
	mask-image: linear-gradient(
		to bottom,
		#000 0,
		#000 calc(100% - var( --troora-pw-fade-height ) ),
		rgba( 0, 0, 0, 0 ) 100%
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* -------------------------------------------------------------------------
 * 1b. Screen tiers.
 *
 * Six tiers, because a 24" monitor, a 15" laptop and a phone do not want the
 * same fade depth. Equal specificity, so the last matching rule wins; the
 * max-width rules are ordered widest to narrowest.
 *
 * Each tier falls back to the next tier up, so leaving one unset is harmless.
 * ---------------------------------------------------------------------- */

/* Large monitor: 1600px and up */
@media ( min-width: 1600px ) {

	.troora-pw-preview--fade-tail {
		--troora-pw-fade-height: var( --troora-pw-fh-xl, var( --troora-pw-fh-lg, 300px ) );
	}

	.troora-pw-preview--capped {
		--troora-pw-cap: var( --troora-pw-cap-xl, var( --troora-pw-cap-lg, none ) );
	}
}

/* Small laptop: up to 1199px */
@media ( max-width: 1199px ) {

	.troora-pw-preview--fade-tail {
		--troora-pw-fade-height: var( --troora-pw-fh-md, var( --troora-pw-fh-lg, 220px ) );
	}

	.troora-pw-preview--capped {
		--troora-pw-cap: var( --troora-pw-cap-md, var( --troora-pw-cap-lg, none ) );
	}
}

/* Tablet: up to 1024px */
@media ( max-width: 1024px ) {

	.troora-pw-preview--fade-tail {
		--troora-pw-fade-height: var( --troora-pw-fh-tablet, var( --troora-pw-fh-md, 180px ) );
	}

	.troora-pw-preview--capped {
		--troora-pw-cap: var( --troora-pw-cap-tablet, var( --troora-pw-cap-md, none ) );
	}
}

/* Phone: up to 767px */
@media ( max-width: 767px ) {

	.troora-pw-preview--fade-tail {
		--troora-pw-fade-height: var( --troora-pw-fh-mobile, var( --troora-pw-fh-tablet, 110px ) );
	}

	.troora-pw-preview--capped {
		--troora-pw-cap: var( --troora-pw-cap-mobile, var( --troora-pw-cap-tablet, none ) );
	}
}

/* Small phone: up to 480px */
@media ( max-width: 480px ) {

	.troora-pw-preview--fade-tail {
		--troora-pw-fade-height: var( --troora-pw-fh-small, var( --troora-pw-fh-mobile, 90px ) );
	}

	.troora-pw-preview--capped {
		--troora-pw-cap: var( --troora-pw-cap-small, var( --troora-pw-cap-mobile, none ) );
	}
}

/* -------------------------------------------------------------------------
 * 1c. Visual height cap (optional).
 *
 * Caps how tall the teaser looks, in pixels, per screen tier. This is a purely
 * visual limit applied to content that is already free to read: the protected
 * remainder of the article was removed on the server and is not in the page.
 * Text between this cap and the server cut is present and can be reached with
 * Inspect Element, so keep the word ceiling close to what this cap shows.
 * ---------------------------------------------------------------------- */

.troora-pw-preview--capped {
	--troora-pw-cap: var( --troora-pw-cap-lg, none );

	max-height: var( --troora-pw-cap );
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * 2. Element fade: masks the final element of the preview, using the same
 *    gradient stops as the original template (opaque to 25%, clear at 62%).
 * ---------------------------------------------------------------------- */

.troora-pw-fade {
	--troora-pw-fade-start: 25%;
	--troora-pw-fade-end: 62%;
	--troora-pw-fade-color: #ffffff;

	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 var( --troora-pw-fade-start ),
		rgba( 0, 0, 0, 0 ) var( --troora-pw-fade-end )
	);
	mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 var( --troora-pw-fade-start ),
		rgba( 0, 0, 0, 0 ) var( --troora-pw-fade-end )
	);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

/* -------------------------------------------------------------------------
 * 3. Fallback for browsers without CSS mask support: a gradient overlay in
 *    the configured background colour.
 * ---------------------------------------------------------------------- */

@supports not ( ( mask-image: linear-gradient( #000, #000 ) ) or ( -webkit-mask-image: linear-gradient( #000, #000 ) ) ) {

	.troora-pw-preview--fade-tail::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: var( --troora-pw-fade-height, 260px );
		background: linear-gradient(
			to bottom,
			rgba( 255, 255, 255, 0 ),
			var( --troora-pw-fade-color, #ffffff )
		);
		pointer-events: none;
	}

	.troora-pw-fade {
		opacity: 0.45;
	}
}

/* -------------------------------------------------------------------------
 * 4. Paywall container. Layout neutral: the design comes from the Elementor
 *    template rendered by the configured shortcode.
 * ---------------------------------------------------------------------- */

.troora-pw-paywall {
	display: block;
	position: relative;
	clear: both;
}

/* -------------------------------------------------------------------------
 * 5. Fallback message, used only when no shortcode is configured or the
 *    shortcode renders nothing. Inherits the article typography.
 * ---------------------------------------------------------------------- */

.troora-pw-fallback {
	font: inherit;
	color: inherit;
	margin: 1.5em 0 0;
	padding: 1.5em;
	border: 1px solid currentColor;
	border-radius: 2px;
	text-align: center;
}

.troora-pw-fallback > :first-child {
	margin-top: 0;
}

.troora-pw-fallback > :last-child {
	margin-bottom: 0;
}

.troora-pw-fallback__actions {
	margin-bottom: 0;
}

.troora-pw-button {
	display: inline-block;
	padding: 0.85em 1.75em;
	border: 1px solid currentColor;
	text-decoration: none;
	font: inherit;
	color: inherit;
}

.troora-pw-button:focus,
.troora-pw-button:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * 6. Print and accessibility: never fade in print, and respect users who ask
 *    for reduced transparency.
 * ---------------------------------------------------------------------- */

@media print {

	.troora-pw-preview--fade-tail,
	.troora-pw-fade {
		-webkit-mask-image: none;
		mask-image: none;
		opacity: 1;
	}

	.troora-pw-preview--fade-tail::after {
		display: none;
	}

	.troora-pw-preview--capped {
		max-height: none;
		overflow: visible;
	}
}

@media ( prefers-reduced-transparency: reduce ) {

	.troora-pw-preview--fade-tail,
	.troora-pw-fade {
		-webkit-mask-image: none;
		mask-image: none;
	}
}