/* =========================================================================
Icon Carousel — styles
=========================================================================
Sits on top of slick (accessible-slick build). slick.min.css provides the
structural rules for .slick-list / .slick-track / .slick-slide; everything
here is an override on top of that, same arrangement as
leadership-carousel.css and upcoming-conferences.css.
Mobile-first. Base block = phone; `min-width` queries layer on tablet and
desktop. No Bootstrap grid, no `.row` / `.col-*`.
Layout strategy
---------------
The legacy markup nested a `.row` inside every `.col`, so each icon/label
pair was its own 12-column grid (`col-xs-2` icon + `col-xs-10` text) — which
is why the labels never lined up when one wrapped to two lines. Here each
item is a 2-column CSS grid: fixed icon column, content-sized text column,
label vertically centred against the icon. Wrapping can't break alignment.
Slides / paging / clones are all slick's job. This file never counts items.
Theming hooks (set on .rbccm-icon-carousel or :root)
----------------------------------------------------
--rbccm-ic-pt-m / --rbccm-ic-pb-m mobile padding top / bottom (40px)
--rbccm-ic-pt-d / --rbccm-ic-pb-d desktop padding top / bottom (64px)
--rbccm-ic-icon-size icon WIDTH (40px at every breakpoint —
Figma does not scale it up on desktop).
Height follows the artwork's own ratio.
--rbccm-ic-icon-max-h optional height cap; unset by default
--rbccm-ic-gap gap between items (12px)
========================================================================= */
.rbccm-icon-carousel {
padding: var(--rbccm-ic-pt-m, 40px) 16px var(--rbccm-ic-pb-m, 40px);
background: #fff;
box-sizing: border-box;
}
.rbccm-icon-carousel *,
.rbccm-icon-carousel *::before,
.rbccm-icon-carousel *::after {
box-sizing: border-box;
}
/* The content rail — a byte-for-byte copy of leadership's .rbccm-leadership__inner:
1200px base, tightening to 1140px at 1170+. Not just the end value, the whole
two-step, so the two components line up at every width rather than only at
desktop.
Heading, intro, dots and the icon track all inherit it, so nothing below needs
its own max-width.
NOTE: the Figma comp specs a 1100px rail (1440 frame, 170px side padding). We
deliberately use leadership's rail instead — the two carousels can appear on
the same page, and a 40px difference in rail width would read as a
misalignment between sections. Consistency beat the comp here; worth a word to
the designer.
The ARROWS are the one exception: they sit OUTSIDE the rail, in the section's
gutter. They get there the same way leadership does it — the carousel row
breaks out of __inner with negative side margins equal to one arrow column
(44px button + 24px gap = 68px), and only at a width where that gutter is
guaranteed to exist. Below that, the arrows drop to the dots row instead, so
the track always spans the full rail and stays aligned with the heading.
Vertical rhythm comes from the flex `gap`, not margins on the children:
Figma specs a single 64px gap between header / carousel row / dots. */
.rbccm-icon-carousel__inner {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px; /* → 64px at desktop, per Figma */
margin: 0 auto;
max-width: 1200px;
position: relative;
}
@media (min-width: 1170px) {
.rbccm-icon-carousel__inner { max-width: 1140px; }
}
/* ---- Heading + intro ---------------------------------------------------- */
/* Figma: flex column, align-items flex-start, gap 16px.
The legacy markup had `style="margin-top: 7%; margin-bottom: -1%"` inline —
a percentage margin resolves against the PARENT WIDTH, not height, so the
gap grew on wide screens and collapsed on narrow ones. Gap replaces it. */
/* No max-width: __inner already IS the 1140px rail. */
.rbccm-icon-carousel__header {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: 16px;
}
.rbccm-icon-carousel__heading {
margin: 0;
color: var(--Blue-Dark-Blue, #003168);
font-family: RBCDisplay, Georgia, Times, serif;
font-size: 24px;
line-height: 1.2;
font-weight: 400;
}
.rbccm-icon-carousel__intro {
margin: 0;
color: var(--Blue-Dark-Blue, #003168);
font-family: Roboto, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
/* ---- Screen-reader-only utility ----------------------------------------- */
/* Visually hidden but still announced. NOT `display: none` / `visibility:
hidden` — both remove the node from the a11y tree, which would silence the
live region entirely. */
.rbccm-icon-carousel__sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---- Viewport row: [prev] [track] [next] -------------------------------- */
/* Mobile: arrows are hidden here (they move to the dots row), so this is just
the track, full-bleed to the section padding. Flex, not grid — a grid with
empty auto columns would still pay the column gaps and inset the track by
48px for no reason. Desktop swaps to the grid below. */
.rbccm-icon-carousel__viewport-row {
display: flex;
align-self: stretch;
align-items: center;
gap: 24px;
}
.rbccm-icon-carousel__viewport {
flex: 1 1 auto;
min-width: 0; /* lets a flex child actually shrink; without it slick's track
forces the row wider than its container */
}
/* =========================================================================
slick overrides
=========================================================================
slick.min.css supplies the mechanics (absolute track, floated slides,
transform paging). These rules only adjust spacing and height.
========================================================================= */
.rbccm-icon-carousel__track .slick-list {
/* Negative margin cancels the per-slide padding below, so the FIRST and LAST
items still sit flush against the 1140px rail while the items between them
get their 12px gutter. Without this the row is inset by half a gap on each
side and no longer aligns with the heading. */
margin: 0 calc(var(--rbccm-ic-gap, 12px) / -2);
}
.rbccm-icon-carousel__track .slick-track {
/* slick floats its slides, so they collapse to the tallest content rather
than matching each other. Flex makes every slide equal height, which keeps
the icons on a consistent baseline when one label wraps to two lines. */
display: flex;
align-items: stretch;
}
.rbccm-icon-carousel__track .slick-slide {
height: auto; /* undo slick's fixed height */
padding: 0 calc(var(--rbccm-ic-gap, 12px) / 2); /* the 12px inter-item gutter */
float: none; /* flex track owns placement */
}
/* Grid mode (mobile). slick wraps each row in a plain div; this is the only
hook for the vertical rhythm between the four stacked items. */
.rbccm-icon-carousel__track .slick-slide > div + div {
margin-top: var(--rbccm-ic-gap, 12px);
}
/* slick-theme adds `margin-bottom: 30px` to any dotted slider. Our dots are
appended to our OWN container outside the track, so that margin is just a
stray 30px hole under the row. */
.rbccm-icon-carousel__track.slick-dotted.slick-slider {
margin-bottom: 0;
}
/* ---- Item: icon + label ------------------------------------------------- */
/* Figma: height 50px, align-items center, gap 15px.
Column sizing: the icon is a fixed track, the label is `auto` — NOT `1fr`.
With `1fr` the label track stretches to the end of its quarter whatever the
text is, so a short label like "Energy" left a large void before the next
icon while a long one ran right up against it. Sizing the track to the text
and centring the pair gives every item symmetric space on both sides.
Don't rewrite this as min(max-content, calc(...)) — CSS math functions can't
take intrinsic keywords, so the browser drops the whole declaration. */
.rbccm-icon-carousel__item {
/* !important is load-bearing, not laziness.
slick's buildRows() runs whenever `rows > 0` and writes an INLINE
`display: inline-block` onto every original child — our items. An inline
style outranks any class selector, so without !important the grid silently
collapses and the icon stacks ON TOP of the label instead of sitting beside
it. This is the same fight leadership-carousel.css picks with slick, and
the same reason nearly every rule in that file carries !important. */
display: grid !important;
grid-template-columns: var(--rbccm-ic-icon-size, 40px) auto;
align-items: center;
justify-content: center; /* centre the icon+label pair within its column */
gap: 15px;
min-height: 50px; /* min-, not fixed: a label that wraps to two lines must
be allowed to grow rather than overflow its box */
margin: 0;
}
/* Mobile stacks the items one per row, where centring would leave each pair
floating mid-row with a ragged left edge. Hard left rail there — a vertical
list reads as a list, so the icons must line up.
Scoped with :not() so it doesn't fight the items-centered modifier, which
wants its items centred at EVERY breakpoint, mobile included. */
@media (max-width: 767px) {
.rbccm-icon-carousel:not(.rbccm-icon-carousel--items-centered) .rbccm-icon-carousel__item {
grid-template-columns: var(--rbccm-ic-icon-size, 40px) 1fr;
justify-content: start;
}
}
/* =========================================================================
Modifier: items-centered
=========================================================================
Icon ABOVE the label, both centred — a tile rather than a list row. Set by
ItemAlignment=centered in the DCR. The Figma comp specs the inline default;
this is the alternative treatment.
One grid column instead of two, so the icon and label stack; `justify-items`
centres each within that column, and text-align handles a label that wraps to
more than one line (justify-items alone would centre the text BLOCK but leave
its lines ragged-left inside it).
`display: grid !important` is repeated here for the same reason the base rule
carries it — slick writes an inline `display: inline-block` on every item and
an inline style beats any class selector. A modifier that only changed
grid-template-columns would be silently ignored on a slick-initialised track.
========================================================================= */
.rbccm-icon-carousel--items-centered .rbccm-icon-carousel__item {
display: grid !important;
grid-template-columns: 1fr;
justify-items: center;
justify-content: center;
align-content: center;
text-align: center;
gap: 12px; /* tighter than the 15px inline gap: vertical spacing
between an icon and its caption reads larger than
the same value does horizontally */
}
/* The icon's own box must centre too — without this it hugs the column's start
edge on browsers that resolve the auto margin differently. */
.rbccm-icon-carousel--items-centered .rbccm-icon-carousel__icon {
margin-left: auto;
margin-right: auto;
}
/* Icon: WIDTH is the constraint, height follows the artwork.
Previously this locked a 40x40 box with `aspect-ratio: 1/1` and
`object-fit: contain`, which is wrong for anything that isn't square: a 2:1
icon got letterboxed down to 40x20 inside the square, so it rendered SMALLER
than its siblings rather than simply wider. Now the width is pinned at 40 and
the height resolves from the icon's own ratio, so a tall icon is tall and a
wide icon is wide — all of them exactly 40 across, which is what keeps the
labels on a common left edge.
Works for both an (intrinsic ratio from the file) and the
inline
(intrinsic ratio from the file) and the
inline