s — which is structurally
fine, but they're block-level, so they stack vertically. The original laid
them out in a row.
Rather than hand-repair the imported markup (which the client would undo the
first time they edit the page), lay them out from CSS against the DOM that
actually exists.
========================================================================== */
.wp-block-cover__inner-container:has(.iconholder),
.wp-block-group:has(.iconholder),
.grid:has(.iconholder) {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 1.5rem 2.5rem;
max-width: var(--radar-max);
margin-inline: auto;
padding-inline: 20px;
}
.iconholder {
flex: 0 0 auto;
width: 170px;
text-align: center;
}
.iconholder img {
width: 140px;
height: 140px;
border-radius: 50%;
border: 3px solid #fff;
object-fit: cover;
margin: 0 auto;
}
.iconholder em {
display: block;
margin-top: .75rem;
font-size: .9rem;
font-style: italic;
line-height: 1.3;
}
/* Empty paragraphs the shortcode split left behind. */
.wp-block-group:has(.iconholder) > p:empty,
.wp-block-cover__inner-container:has(.iconholder) > p:empty,
.grid:has(.iconholder) > p:empty { display: none; }
/* Fallback for anything without :has() — still beats a vertical stack. */
@supports not selector(:has(*)) {
.iconholder { display: inline-block; vertical-align: top; }
.wp-block-cover__inner-container { text-align: center; }
}
@media (max-width: 568px) {
.iconholder { width: 130px; }
.iconholder img { width: 110px; height: 110px; }
}
/* --- static map card ---------------------------------------------------- */
.radar-map--static {
display: grid;
place-items: center;
aspect-ratio: 16 / 6;
border: 1px solid var(--radar-rule);
background: var(--radar-bg-alt);
color: var(--radar-ink);
text-align: center;
transition: background .2s, border-color .2s;
}
.radar-map--static:hover { background: #fff; border-color: var(--radar-accent); color: var(--radar-ink); }
.radar-map__pin { width: 34px; height: 34px; color: var(--radar-accent); margin: 0 auto .5rem; display: block; }
.radar-map__city {
display: block;
font-size: 1.1rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--radar-ink-strong);
}
.radar-map__cta {
display: block; margin-top: .6rem;
font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--radar-accent);
}
@media (max-width: 768px) { .radar-map--static { aspect-ratio: 4 / 3; } }
/* ==========================================================================
ICON STRIP — alignment fix
==========================================================================
Bubble one sat higher than the other four.
Cause: when the converter split
across the
[scroll_animation] boundary, the browser's error recovery left a stray
at the START of holders 2-5 (but not 1). Empty, but carrying the default
paragraph top margin — so four bubbles got pushed down ~45px and the first
one looked out of line. It was actually the only one in the right place.
Kill the stray paragraphs and the row settles.
========================================================================== */
.iconholder p,
.wp-block-group:has(.iconholder) > p,
.wp-block-cover__inner-container:has(.iconholder) > p,
.grid:has(.iconholder) > p {
display: none !important;
margin: 0 !important;
}
/* Strip inherited margins so every holder measures from the same top edge. */
.iconholder > *,
.iconholder .radar-anim,
.iconholder .wp-block-radar-scroll-animation {
margin-top: 0;
margin-bottom: 0;
}
.iconholder img { margin-top: 0; }
/* Belt and braces: all five holders share one baseline. */
.wp-block-cover__inner-container:has(.iconholder),
.wp-block-group:has(.iconholder),
.grid:has(.iconholder) { align-items: flex-start; }