or
, these rules will need to become more specific (e.g. :first-of-type).
Reserves a fixed two-line height regardless of actual name length, so
every card in a row stays aligned whether its neighbor's name is short
or wraps to two lines. Names beyond that get an ellipsis rather than
growing the card and breaking row alignment.
`height`, not `min-height`: -webkit-box (needed for -webkit-line-clamp
to truncate a long name at 2 lines) sizes itself to its actual content
under min-height, so a one-line name collapsed this box to one line's
height instead of reserving the second -- min-height never applied at
all, verified live (33.8px one-line vs. 47.8px two-line boxes). A hard
`height` isn't optional here, it's the only one of the two that works
with this display mode; the icon+promo row below it needs that
constant height to land on a consistent third line either way.
`box-sizing: content-box`: the height above is sized to hold exactly
two lines of text and nothing else -- on a host page whose own CSS
resets box-sizing to border-box (confirmed live on encasdurgence.fr),
that same height instead has to fit the 14px of top+bottom padding
too, leaving barely one line's worth of room and clipping the second
line's text mid-character. Pinning it back to content-box here makes
the height calc mean what it says regardless of the host page's own
reset. */
.dc-grid-card p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
box-sizing: content-box;
margin: 0;
padding: 10px 8px 4px;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
height: calc(1.3em * 2);
}
/* The block template has no way to set a fixed label independent of the
bound column (see class-dc-connector-grid-shortcode.php's block-renderer
notes) -- renderLink() falls back to printing the raw LinkedIn URL as
the link text. font-size: 0 collapses that text to nothing visually
while leaving it in the DOM, so screen readers still announce the full
URL as the link's accessible name even though sighted users only see
the icon -- friendlier than display:none, which would hide it from
both. */
.dc-grid-card a {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
margin: 0 auto 10px;
font-size: 0;
color: var(--dc-grid-blue);
text-decoration: none;
}
/* A small colored badge rendered purely in CSS (no logo asset, no HTML
from the block template needed) -- avoids reproducing LinkedIn's actual
trademarked icon mark. */
.dc-grid-card a::before {
content: "in";
width: 22px;
height: 22px;
flex-shrink: 0;
background: var(--dc-grid-blue);
border-radius: 4px;
color: #fff;
font-size: 12px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
transition: opacity 0.15s;
}
.dc-grid-card a:hover::before {
opacity: 0.8;
}
/* Promo block-renderer.ts also emits "text" as a , giving each card a
second after the LinkedIn -- :last-of-type (scoped among
siblings, so the in between doesn't break it) targets that one
without touching the name's existing 2-line-clamp styling above.
Switching it to inline-flex puts it back on the same line as the
badge (both inline-level, centered together by .dc-grid-card's own
text-align: center) instead of wrapping to a fresh line below it. */
.dc-grid-card p:last-of-type {
display: inline-flex;
align-items: center;
-webkit-line-clamp: unset;
vertical-align: middle;
margin: 0 0 10px 6px;
padding: 0;
min-height: 0;
font-size: 12px;
font-weight: 600;
color: #767676;
}
@media (max-width: 480px) {
.dc-grid-search {
max-width: none;
}
.dc-grid-count {
margin-left: 0;
flex-basis: 100%;
}
}