/**
 * News Element — Magazine 11 block (news-element's magazine-11).
 * Structure only; columns, spacing, dividers, vertical line and colours
 * come from the block's controls. Runs inside the Grid view
 * (.ne-grid-items.mag_eleven).
 *
 * The structural defaults sit in :where() so they have zero specificity:
 * this file is enqueued after the per-post control CSS, so without it the
 * Column width, Gap and Thumb-to-text controls lost to the defaults below
 * (every sidebar copy rendered three squeezed columns).
 */

/* Three columns by default; rows sit flush (spacing comes from the divider). */

:where(.ne-grid-items.mag_eleven > .mag11-col) {
	position: relative;
	flex: 0 0 33.33%;
	max-width: 33.33%;
	padding: 0 0 0 30px;
}

/* Default thumb-to-text spacing (the Thumb to text spacing control overrides). */
:where(.mag11-item) {
	gap: 15px;
	border-bottom: 0 solid;
}

/* Vertical line between columns (General → Vertical border), drawn on each post: it runs
 * down the post's right side and stops one row spacing above the post's bottom rule, the
 * same gap that sits above the rule, so the junctions have equal space on both sides. */
.mag11-item::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: var(--mag11-row, 20px);
	right: -15px;
	border-right: 0 solid #eee;
	pointer-events: none;
}

/* Title defaults (Post title controls override). */
:where(.mag11-item) .ne-title {
	margin: 0 0 4px;
	font-size: 16px;
	line-height: 1.4;
}

.mag11-item .ne-title a {
	text-decoration: none;
}

@media (max-width: 767px) {
	.ne-grid-items.mag_eleven > .mag11-col {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}

	.mag11-item::before {
		display: none;
	}
}