/* mouldshop-why-grid.css — skin for the Why Mouldshop Grid paragraph.
Paragraph: Swift_WhyGrid_Custom + a list of Swift_WhyTile_Custom tiles.
Loaded via MouldshopHead. Tokens from mouldshop.css. Zero JS.
THIS FILE BELONGS TO ONE COMPONENT AND SHARES NOTHING. mouldshop-icon-grid.css is a
different component's skin, on different class names, and is not touched by this one.
Every selector here is `.ms-whygrid*`.
WHY THIS IS ONE GRID AND THE REFERENCE IS NOT. On the live site the block is TWO stacked
four-column rows with `BON numbers top` / `BON numbers bottom` classes and a JS padding hack
making the gap between the rows match the gap inside them. Two mechanisms pretending to be
one: add a ninth tile and it breaks. Here the horizontal and vertical gutters are the SAME
`gap` property, so they cannot drift, and a ninth tile simply wraps.
THE LADDER IS FIXED AT 4 / 2 and is not an authoring choice. There is no Columns field.
THE TILE IS TWO EQUAL HALVES, and that is the whole layout idea:
top half icon or number, aligned to the BOTTOM of its half
bottom half text, aligned to the TOP of its half
Both meet on the centre line. That is what keeps a tile with a one-line label and a tile
with a three-line label aligned across the row — the SPLIT does the aligning, not the
content. Centring the whole stack instead drifts the moment two labels differ in length,
which is the alignment the reference achieves by hand-tuning padding per tile. */
.ms-whygrid {
/* TASK-0078 / DEC-0054: no max-width and no inline centring on a component root.
This used to cap at var(--ms-page-width), which DUPLICATED the container ladder
inside a container that is already on it -- measured 1288 inside 1288 at 1440.
The row's container owns the width now; this element fills it. */
width: 100%;
padding-block: 2.5rem;
padding-inline: 0;
}
.ms-whygrid-heading {
font-family: var(--ms-font-head, "Montserrat", sans-serif);
font-weight: 700;
font-size: clamp(1.25rem, 2.4vw, 1.875rem);
color: var(--ms-ink);
text-align: center;
margin: 0 0 2rem;
}
/* ONE grid, ONE gap — the same value in both axes by construction. */
.ms-whygrid-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--ms-whygrid-gap, 1rem);
}
@media (max-width: 989px) {
.ms-whygrid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The tile is SQUARE. The halves only read as halves if the box has a fixed shape — with an
auto height the split would follow the tallest label in the row and stop being a half.
`aspect-ratio` holds the square at every column width without one breakpoint value. */
.ms-whygrid-tile {
position: relative;
aspect-ratio: 1;
min-width: 0;
}
.ms-whygrid-tileinner {
position: relative;
height: 100%;
display: grid;
grid-template-rows: 1fr 1fr; /* THE SPLIT */
text-align: center;
overflow: hidden;
background-color: var(--ms-tile-surface);
color: var(--ms-tile-ink);
/* The background photo, when the tile has one. The template hands over a URL as
`--ms-tile-bg` and never a `background-image` declaration, so every visual decision stays
here. A tile without one needs no rule: the property is absent and the flat colour shows. */
background-image: var(--ms-tile-bg, none);
background-size: cover;
background-position: center;
}
/* --- the two halves --------------------------------------------------------------------- */
.ms-whygrid-top {
display: flex;
align-items: flex-end; /* icon sits ON the centre line */
justify-content: center;
padding: 1rem 1rem 0;
min-height: 0;
}
.ms-whygrid-bottom {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start; /* text starts AT the centre line */
gap: .25rem;
padding: .5rem 1rem 1rem;
min-height: 0;
}
/* --- icon or number ---------------------------------------------------------------------- */
/* THE REFERENCE'S OWN BOX, taken verbatim from mouldshop.css (operator, 2026-09-06):
.bon-numbers ... > div > div:nth-child(1) > div width: 100px; height: 75px
@media (min-width: 576px) width: 150px; height: 100px
A FIXED box on both axes, and the SVG fills it - which is what the reference does with
`width: 100% !important; height: 100% !important` on the same element. 576px is the
reference's breakpoint, not this project's ladder; it is kept because the instruction was
the reference's values, no more and no less. */
.ms-whygrid-icon {
display: inline-flex;
align-items: flex-end;
justify-content: center;
width: 100px;
height: 75px;
}
@media (min-width: 576px) {
.ms-whygrid-icon {
width: 150px;
height: 100px;
}
}
.ms-whygrid-icon svg,
.ms-whygrid-icon img {
display: block;
width: 100%;
height: 100%;
}
/* --- text -------------------------------------------------------------------------------- */
.ms-whygrid-title {
font-family: var(--ms-font-head, "Montserrat", sans-serif);
font-weight: 400;
font-size: clamp(.9rem, 1.15vw, 1.125rem);
line-height: 1.3;
text-transform: uppercase;
color: inherit;
}
.ms-whygrid-text {
font-family: var(--ms-font-body, "Roboto", Arial, sans-serif);
font-size: 1rem;
line-height: 1;
color: inherit;
}
@media (min-width: 576px) {
.ms-whygrid-text { font-size: 1.5rem; }
}
/* --- the styles --------------------------------------------------------------------------
ONE setting drives the whole tile. Each style sets the surface and the ink; the title, the
text and the icon all inherit from there.
`currentColor` is deliberately NOT the mechanism. The operator's artwork carries its own
two-tone classes (`bon-svg-lightblue` / `bon-svg-darkblue`) with hard fills, so the style
drives those classes directly. This only reaches inside the file because the template inlines
SVG uploads — an ![]()
could not be recoloured at all, and a sprite