![]()
with nothing between, while the Loop Grid still has its container. A
direct-child chain therefore breaks on one and not the other.
The image was 29px inside a 39px box because the chain from the aspect-ratio
box down to the
![]()
was not height-definite the whole way; a percentage
height needs every ancestor to resolve. */
.post-tile__media .elementor-widget-image,
.post-tile__media .elementor-widget-image > * {
width: 100%;
height: 100%;
}
/* GUARD: a percentage height needs EVERY ancestor between the aspect-ratio box
and the
![]()
to resolve. If a stray container is left inside the media box —
easy to do when rebuilding the loop template — the chain breaks there and the
image silently drops to its natural height, leaving the --sand-200 backing
visible below it. Making any container in that position fill keeps the chain
intact. The media box should still hold only the Image and the chip. */
.post-tile__media > .e-con {
width: 100%;
height: 100%;
}
.post-tile__media .elementor-widget-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* The category pill. Class sits on the Text Editor wrapper, which is the
painted element — main.css positions it. Only the text inside needs
handing back. */
.elementor-widget-text-editor.post-tile__chip,
.elementor-widget-text-editor.post-tile__chip p {
margin: 0;
}
.e-con.post-tile__body {
--display: flex !important;
--flex-direction: column !important;
--gap: .55rem !important;
--row-gap: .55rem !important;
--column-gap: .55rem !important;
--flex-grow: 1 !important;
--padding-top: clamp(1.1rem, 2.2vw, 1.45rem) !important;
--padding-right: clamp(1.1rem, 2.2vw, 1.45rem) !important;
--padding-bottom: clamp(1.1rem, 2.2vw, 1.45rem) !important;
--padding-left: clamp(1.1rem, 2.2vw, 1.45rem) !important;
}
.post-tile__body .elementor-widget-heading .elementor-heading-title {
margin: 0;
}
/* THE EXCERPT HAS NO
.
main.css sizes and clamps the summary with `.post-tile__body p`. Elementor's
Post Excerpt dynamic tag renders BARE TEXT straight into the widget — no
paragraph element — so that rule never matches and the excerpt rendered at
the inherited 17px with no line clamp.
Styling the widget itself is the fix. The class is applied explicitly in the
template rather than relying on child position, so adding another widget to
the card body cannot silently re-target this. */
.elementor-widget-text-editor.post-tile__excerpt,
.elementor-widget-text-editor.post-tile__excerpt p {
margin: 0;
font-size: .93rem;
line-height: 1.6;
color: var(--ink-500);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* main.css says `.post-tile__body .link-arrow { margin-top: auto }`, but the
.link-arrow here is a inside a Text Editor — an auto margin on a
span does nothing. The flex item is the widget wrapper, so the rule has to
move up one level. This is what pins the "Read article" row to the bottom
so it lines up across tiles of unequal excerpt length. */
.e-con.post-tile__body > .elementor-widget-text-editor:last-child,
.e-con.post-tile__body > .e-con-inner > .elementor-widget-text-editor:last-child {
margin-top: auto;
padding-top: .75rem;
}
/* --------------------------------------------------------------------------
6i. SINGLE POST BODY
--------------------------------------------------------------------------
v2 has no design for a single article — every news tile links to /contact/
and reads "Coming soon". The single-post template is therefore composed
from existing patterns (page-head, v2-col, prose, CTA band) so it reads as
part of the same site rather than as a new design.
Only one thing needs bridging. Elementor's Post Content widget renders: