/**
 * News Element — Alt Blog block (news-element's altblog). Structure
 * only; thumbnail width, spacing, dividers, "Alternate image" and colours
 * come from the block's controls. Runs inside the Grid view
 * (.ne-grid-items.alt_blog).
 */

/* One column: every row spans the width. */
.ne-grid-items.alt_blog {
	margin: 0;
}

.ne-grid-items.alt_blog > .altblog-row {
	flex: 0 0 100%;
	max-width: 100%;
	padding: 0;
}

.altblog-item {
	gap: 30px;
	/* The row is a flex box: without this a row with a short excerpt shrinks to its content,
	   and the thumbnail's % width with it. */
	flex: 1 1 100%;
	min-width: 0;
}

.altblog-item .ft-thumbwrap {
	display: block;
	flex: 0 0 40%;
	max-width: 40%;
}

.altblog-item .excerpt-wrap {
	flex: 1 1 0;
	min-width: 0;
}

/* Category meta listed first: an uppercase label in the meta colour, not the
   meta link colour. Only the category link (.ne-cat), so an author listed
   first keeps the Meta link controls. */
.altblog-item .excerpt-wrap > .ne-meta:first-child a.ne-cat {
	text-transform: uppercase;
	color: inherit;
}

/* Phones: compact rows, thumbnail beside the text with no excerpt, also on
   alternated rows. */
@media (max-width: 767px) {
	.ne-grid-items.alt_blog .altblog-item {
		flex-direction: row !important;
		align-items: flex-start;
		gap: 12px;
	}

	.ne-grid-items.alt_blog .altblog-item .ft-thumbwrap {
		flex: 0 0 38% !important;
		max-width: 38% !important;
	}

	.altblog-item .ne-excerpt {
		display: none;
	}
}

/* Zig-zag extras, each switched on in General (off by default). The image sits
   on the right on the odd rows when "Alternate image" is on (.altblog-alt-yes),
   on the even rows with "Start with the image on the left" (.altblog-even-yes),
   and on every row when "Image on right" is on (.altblog-right-yes). Phones
   either use the compact rows above (image always left) or stack, so these
   side-dependent rules start at 768px. */
@media (min-width: 768px) {
	/* Align text toward the image. */
	.altblog-towards-yes.altblog-alt-yes:not(.altblog-right-yes):not(.altblog-even-yes) .altblog-row:nth-child(odd) .excerpt-wrap,
	.altblog-towards-yes.altblog-alt-yes.altblog-even-yes:not(.altblog-right-yes) .altblog-row:nth-child(even) .excerpt-wrap,
	.altblog-towards-yes.altblog-right-yes .altblog-item .excerpt-wrap {
		text-align: right;
	}

	/* Pointer arrow: a triangle on the text's edge, pointing into the image.
	   Pointer size / colour set --altblog-notch / --altblog-notch-clr. */
	.altblog-notch-yes .altblog-item .excerpt-wrap {
		position: relative;
	}

	.altblog-notch-yes .altblog-item .excerpt-wrap::before {
		content: "";
		position: absolute;
		top: 50%;
		left: calc(-2 * var(--altblog-notch, 10px));
		z-index: 2;
		margin-top: calc(-1 * var(--altblog-notch, 10px));
		border: var(--altblog-notch, 10px) solid transparent;
		border-right-color: var(--altblog-notch-clr, #ffffff);
		pointer-events: none;
	}

	.altblog-notch-yes.altblog-alt-yes:not(.altblog-right-yes):not(.altblog-even-yes) .altblog-row:nth-child(odd) .excerpt-wrap::before,
	.altblog-notch-yes.altblog-alt-yes.altblog-even-yes:not(.altblog-right-yes) .altblog-row:nth-child(even) .excerpt-wrap::before,
	.altblog-notch-yes.altblog-right-yes .altblog-item .excerpt-wrap::before {
		right: calc(-2 * var(--altblog-notch, 10px));
		left: auto;
		border-right-color: transparent;
		border-left-color: var(--altblog-notch-clr, #ffffff);
	}
}

/* Stack on phones: image full width above the text, excerpt shown. Beats the
   compact-row rules above, which use !important. */
@media (max-width: 767px) {
	.altblog-stack-yes .ne-grid-items.alt_blog .altblog-item {
		flex-direction: column !important;
		align-items: stretch;
		gap: 0;
	}

	.altblog-stack-yes .ne-grid-items.alt_blog .altblog-item .ft-thumbwrap {
		flex: 0 0 auto !important;
		width: 100%;
		max-width: 100% !important;
	}

	.altblog-stack-yes .altblog-item .ne-excerpt {
		display: block;
	}
}

/* Image as background (General → Image as background): the post image (--altblog-bg,
   set per row by the loop) covers the row and the text is a card on it, placed by
   Content position (.altblog-bgpos-*). Card width / inset / overlay come in as
   --altblog-card-w / --altblog-inset / --altblog-bg-ovl. Vertical alignment still
   overrides the stretch. */
.altblog-bg-yes .altblog-item {
	position: relative;
	align-items: stretch;
	padding: var(--altblog-inset, 20px);
	background-image: var(--altblog-bg, none);
	background-size: cover;
	background-position: center;
	background-color: #222;
	overflow: hidden;
}

.altblog-bg-yes .altblog-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--altblog-bg-ovl, transparent);
	pointer-events: none;
}

.altblog-bg-yes .altblog-item .ft-thumbwrap {
	display: none;
}

.altblog-bg-yes .altblog-item .excerpt-wrap {
	position: relative;
	z-index: 1;
	flex: 0 0 var(--altblog-card-w, 440px);
	max-width: 100%;
	margin-right: auto;
}

.altblog-bgpos-right .altblog-item .excerpt-wrap,
.altblog-bgpos-alternate .altblog-row:nth-child(odd) .altblog-item .excerpt-wrap {
	margin-right: 0;
	margin-left: auto;
}

/* Phones: undo the compact-row rules (they align to the top and hide the excerpt).
   Vertical alignment still applies through --altblog-valign. */
@media (max-width: 767px) {
	.altblog-bg-yes .ne-grid-items.alt_blog .altblog-item {
		align-items: var(--altblog-valign, stretch);
	}

	.altblog-bg-yes .altblog-item .ne-excerpt {
		display: block;
	}
}