/**
 * Front-end styles for the in-article native ad unit.
 *
 * The in-feed card deliberately reuses the theme's 15Zine archive classes and
 * is styled by the theme, so it is not covered here. (Follow-up: isolate and
 * replicate the in-feed styles under namespaced classes so the ad does not
 * break if the theme's post-card styling changes.)
 */

/* ===== Cache-bust placeholders: reserve space to avoid layout shift ===== */
/* Approximate the rendered native unit's height so injecting the real ad
   doesn't push content around. Empty placeholders (no ad served) are removed
   by the fill script, so no reserved gap is left behind. */
.rench-cb-reserve-article {
	min-height: 280px;
}

.rench-cb-reserve-feed {
	min-height: 120px;
}

@media (max-width: 768px) {
	/* The in-article unit stacks image over text on narrow screens, so it is
	   taller there. */
	.rench-cb-reserve-article {
		min-height: 360px;
	}
}

/* ===== Ad-blocker bait + supporter notice ===== */
/* The bait must have real size so that a blocker hiding it is detectable. */
.rench-bait {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
}

.rench-support-notice {
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 99999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em 1.25em;
	max-width: min(680px, calc(100vw - 32px));
	padding: 0.9em 1.2em;
	background: #161616;
	color: #fff;
	border-radius: 8px;
	box-shadow: 0 6px 30px rgb(0 0 0 / 30%);
	font-size: 0.85rem;
	line-height: 1.5;
}

.rench-support-text {
	margin: 0;
	flex: 1 1 320px;
}

.rench-support-actions {
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.rench-support-notice a.rench-support-donate {
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	white-space: nowrap;
}

.rench-support-close {
	background: transparent;
	color: #cfcfcf;
	border: 1px solid #4a4a4a;
	border-radius: 5px;
	padding: 0.35em 0.8em;
	font-size: 0.8em;
	cursor: pointer;
	white-space: nowrap;
}

.rench-support-close:hover {
	color: #fff;
	border-color: #8a8a8a;
}

/* ===== Image (banner) ad ===== */
.rench_image_ad {
	display: inline-block;
	max-width: 100%;
}

.rench_image_ad img {
	max-width: 100%;
	height: auto;
}

/* ===== Ad container: layout (text flow) + label ===== */
/* Applied only when an ad sets a Text Flow, Ad Style class/ID, or Ad Label;
   otherwise the ad is output with no wrapper and these rules never apply. */
.rench_ad_container {
	margin: 1.3em 0;
}

/* Floats: the ad shrink-wraps and body text wraps around it. */
.rench-flow-float-left {
	float: left;
	max-width: 50%;
	margin: 0 1.25em 1em 0;
}

.rench-flow-float-right {
	float: right;
	max-width: 50%;
	margin: 0 0 1em 1.25em;
}

/* Blocks: the ad sits on its own line, aligned within the container. */
.rench-flow-block-left {
	text-align: left;
}

.rench-flow-block-center {
	text-align: center;
}

.rench-flow-block-right {
	text-align: right;
}

/* On small screens floats become full-width blocks so they never crush text. */
@media (max-width: 768px) {
	.rench-flow-float-left,
	.rench-flow-float-right {
		float: none;
		max-width: 100%;
		margin: 1.3em 0;
	}
}

/* Ad label, e.g. "Advertisement" / "Sponsored". */
.rench_ad_label {
	display: block;
	font-size: 0.7em;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #767676;
}

.rench_ad_label--before {
	margin: 0 0 0.35em;
}

.rench_ad_label--after {
	margin: 0.35em 0 0;
}

/* ===== Ad Grid ===== */
/* Column count comes from the --rench-grid-cols custom property set inline on
   the container by the grid placement. */
.rench_ad_grid {
	display: grid;
	grid-template-columns: repeat(var(--rench-grid-cols, 3), 1fr);
	gap: 1.5em;
	margin: 1.3em 0;
}

@media (max-width: 768px) {
	.rench_ad_grid {
		grid-template-columns: 1fr;
	}
}

/* ===== Native Links ===== */
/* Override the theme's content link styling inside the ad unit (underline and
   hover colour), so the native ad keeps its own look. */
.rench_native_wrap a {
	text-decoration: none !important;
	font-weight: normal !important;
}

.rench_native_wrap a:hover {
	color: #1c1c1c !important;
}

/* ===== Native Outer Wrap ===== */

.rench_native_wrap {
	width: 100%;
	display: block;
	border: 1px solid rgb(242 242 242);
	border-radius: 5px;
	padding: 0.3em;
	position: relative;
	margin-top: 1.3em;
	box-shadow: 0 0 30px rgb(0 0 0 / 10%) !important;
	margin-bottom: 1em;
}

.native_inner_wrap {
	display: flex;
	flex-direction: row-reverse;
	width: 100%;
	justify-content: space-between;
	margin: 0 auto;
}

/* Native Inner Wrap */
.native_inner_wrap article {
	width: 59%;
	padding-right: 1%;
	padding-left: 1%;
}

.native_inner_wrap figure {
	width: 40%;
}

/* Badge */

.badge {
	position: absolute;
	top: -5%;
	left: -3%;
	display: inline-block;
	background-color: #161616;
	color: white;
	z-index: 500;
	padding: .6em 1em;
	font-size: 0.7rem;
	line-height: 1rem;
	font-weight: 700;
	box-shadow: 2px 2px 2px 0 rgb(0 0 0 / 14%);
}

/* Native Text */

.native_details {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.new_native_price {
	font-size: 0.85em;
	margin: 1em 0;
	font-weight: bold;
}

/*.new_native_price::after {*/
/*    font-family: "Font Awesome 5 Free";*/
/*    font-weight: 900;*/
/*    content: "  \f35d";*/
/*}*/

.new_native_title {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.6;
	letter-spacing: 0.1em;
	box-shadow: none;
	text-decoration: none;
}

.new_native_title a {
	text-decoration: none;
}

.new_native_desc {
	font-size: .70em;
	line-height: 1.6;
	margin: 0.6em 0;
}

.new_native_desc a {
	color: #161616;
	font-weight: bold;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.native_details ul {
	font-size: 0.70em;
	list-style-position: outside !important;
	padding-left: 16%;
	text-align: left;
	list-style-type: square;
}

.native_details ul li {
	margin: 0 0 5px 0;
	display: list-item !important;
}

/* Call to Action */
.just_centre {
	justify-content: center;
}

.new_native_cta {
	padding: 10px 15px;
	margin: 10px auto;
	text-align: center;
	line-height: initial;
	background-color: #161616;
	color: white;
	border: 1px solid black;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 0.55em;
	font-weight: bold;
	border-radius: 5px;
	width: 85%;
}

/* Declaration */
.affi_declare {
	font-size: 0.6rem;
	/* font-style: italic; */
	color: #5f6368eb;
	display: inline;
}

/* Native Image */
.native_inner_wrap figure {
	overflow: hidden;
}

figure .native_img a img {
	max-width: 100%;
	height: auto;
}

/* Enforce the 3:2 crop in the browser, so uncropped library images and
   URL-sourced images (which cannot be server-cropped) still display 3:2. */
.native_img img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Native Media query */

@media (max-width: 768px) {

	.rench_native_wrap {
		padding: 0;
	}

	.native_inner_wrap {
		display: flex;
		flex-direction: column-reverse;
		width: 100%;
		align-items: center;
		padding-bottom: 1em;
	}

	.native_inner_wrap figure {
		width: 100% !important;
		/* text-align: center; */
		margin: 0;
	}

	.native_inner_wrap article {
		width: 100% !important;
		/* text-align: center; */
	}

	figure .native_img a {
		display: flex;
	}

	.native_img a img {
		width: 100%;
		height: auto;
	}

	.badge {
		position: absolute;
		top: -3%;
		left: -2%;
		display: inline-block;
		background-color: black;
		color: white;
		z-index: 500;
		padding: .6em 1em;
		font-size: 0.7rem;
		line-height: 1;
		font-weight: 700;
		box-shadow: 2px 2px 2px 0 rgb(0 0 0 / 14%);
	}

	.new_native_title {
		font-size: 0.71em;
	}

	.new_native_cta {
		margin: 1em auto;
	}

}