/**
 * News Element — Hero Columns block (news-element-pro's hero-grid).
 * Structure only; column widths come from the layout (hw-* classes below), heights,
 * spacing, overlay and colours from the block's controls.
 */
.ne-hcols {
	flex-wrap: wrap;
}

/* Label tab (Content → Label): over the posts, placed by Style → Label → Left / Top. */
.ne-hero-columns:has(.ne-hcol-label) {
	position: relative;
}

.ne-hcol-label {
	position: absolute;
	z-index: 3;
	margin: 0;
}

.ne-hcol {
	box-sizing: border-box;
	min-width: 0;
}

.ne-hcol .ft-thumbwrap {
	display: block;
}

/* Sub-grid inside a column; spaced by Grid spacing like the columns. */
.ne-hsub {
	flex-wrap: wrap;
	margin: 0 0 -20px -20px;
}

.ne-hsub-cell {
	box-sizing: border-box;
	min-width: 0;
	padding: 0 0 20px 20px;
}

/* Cards: image on top, text below (flex-list controls refine it). */
:where(.ne-hcol .post-item:not(.abs-excerpt)) {
	flex-direction: column;
	align-items: stretch;
}

:where(.ne-hcol .post-item:not(.abs-excerpt)) .excerpt-wrap {
	padding-top: 12px;
}

/* Cards set to a row (thumb beside text): keep the thumb from collapsing. */
:where(.ne-hcol .post-item:not(.abs-excerpt)) > .ft-thumbwrap {
	flex-shrink: 0;
	min-width: 100px;
}

/* Compact default title sizes; the Post title controls override them. */
:where(.hcol-big) .ne-title {
	font-size: 26px;
	line-height: 1.25;
}

:where(.hcol-med) .ne-title {
	font-size: 19px;
	line-height: 1.3;
}

:where(.hcol-sml) .ne-title {
	font-size: 16px;
	line-height: 1.35;
}

/* Column divider (Layout → Column divider, opt-in): a line half a gutter left of every column, as
   tall as the column. Lines at the block's left edge (first column of each row) fall outside it and
   are clipped. In :where() so the colour and width controls win. */
.ne-hcdiv-yes {
	overflow-x: clip;
}

:where(.ne-hcdiv-yes .ne-hcols > .ne-hcol) {
	position: relative;
}

:where(.ne-hcdiv-yes .ne-hcols > .ne-hcol)::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: var(--hcol-row, var(--hcol-gap, 20px));
	left: calc(var(--hcol-gap, 20px) / 2);
	border-left: 1px solid #eaeaea;
	pointer-events: none;
}

/* Phones: one column. */
@media (max-width: 767px) {
	/* Repeated class: outranks the Big column width override. */
	.ne-hcols.ne-hcols.ne-hcols.ne-hcols > .ne-hcol {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
}

/* Column widths (the layout picks one per column / sub-grid cell). */
.hw-100   { flex: 0 0 100%;    max-width: 100%; }
.hw-66_66 { flex: 0 0 66.66%;  max-width: 66.66%; }
.hw-50    { flex: 0 0 50%;     max-width: 50%; }
.hw-41_66 { flex: 0 0 41.66%;  max-width: 41.66%; }
.hw-33_33 { flex: 0 0 33.33%;  max-width: 33.33%; }
.hw-29_17 { flex: 0 0 29.17%;  max-width: 29.17%; }
.hw-25   { flex: 0 0 25%;     max-width: 25%; }
.hw-19_44 { flex: 0 0 19.44%;  max-width: 19.44%; }
.hw-16_66 { flex: 0 0 16.66%;  max-width: 16.66%; }