/*
 * patterns/multicolumn.css — "Multicolumn"
 * Markup: wp-content/themes/fcs/patterns/multicolumn.php
 * Root:   .fcs-multicolumn
 *
 * Three homepage arrangements, one pattern. What varies is either a core block
 * setting (column count, background colour) or one of three modifiers:
 *
 *   --cards      white panel behind the copy, image radius flattened to the top
 *   --centered   column text centred rather than left-aligned
 *   --pattern    lion-head tile over the background colour
 *
 * and, per column, __col--card and __col--align-{left,center,right}, both written
 * from the block sidebar rather than typed by hand.
 *
 * MOBILE IS A SLIDER, AND SO IS ANY ROW OF MORE THAN FOUR COLUMNS. Below 768px
 * the columns row is mounted as a Splide carousel by assets/js/multicolumn.js;
 * at 768px and up Splide destroys itself and the row is a plain grid again —
 * UNLESS the row holds five or more columns, which cannot fit the container at
 * any size and so stays a slider throughout, paging four at a time behind
 * arrows (Figma 10005:11915). That case carries
 * .fcs-multicolumn__grid--overflow, written by the JS. Two consequences for the
 * CSS below:
 *
 *   1. Splide adds .splide, .splide__track and .splide__list to the SAME
 *      elements the columns block already uses, so every rule here has to hold
 *      whether or not those classes are present.
 *   2. The editor canvas never mounts Splide (see multicolumn.js), so the
 *      un-mounted state must already look like the desktop grid. That is why
 *      the base state is the grid and the slider is layered on top of it, not
 *      the other way round.
 */

/* Section ------------------------------------------------------------- */

/*
 * Section padding is NOT declared here for Medium and Large — the editor owns
 * those from the sidebar's Dimensions panel. Mobile is pinned in
 * layout/spacing.css. See CLAUDE.md § "Section padding".
 */
.fcs-multicolumn {
  position: relative;
  overflow: hidden;
}

/*
 * Header block. The pattern ships eyebrow + heading + intro; any of them can be
 * deleted in the editor, so the spacing lives on the child rather than as a
 * fixed height here.
 *
 * Figma 7926:1117 groups the copy as: (eyebrow + heading) with an 8px gap, then
 * 20px to the intro, then 40px down to the columns. Those three values are the
 * whole rhythm — the header is NOT constrained to 768px, it runs the full
 * container and centres, which is what stops the heading wrapping early.
 */
/* Doubled: see "WHY EVERY RULE BELOW REPEATS THE CLASS" under Columns. */
.fcs-multicolumn__header.fcs-multicolumn__header {
  margin-block-end: 40px;
  text-align: center;
}

/*
 * Core resets block margins with :where( .wp-block-heading ) and friends, which
 * has ZERO specificity — but it also emits a `margin-block-start` on headings
 * from theme.json's own spacing, at a specificity this cannot beat with a bare
 * child selector. Repeating the class raises specificity to (0,2,0) without
 * !important, which CLAUDE.md reserves for layout/spacing.css alone.
 *
 * Without this the browser keeps core's default heading margin and the whole
 * 8/20/40 rhythm below collapses into something tighter and uneven.
 */
.fcs-multicolumn__header.fcs-multicolumn__header > * {
  margin-block: 0;
}

/* Default step between copy blocks. */
.fcs-multicolumn__header.fcs-multicolumn__header > * + * {
  margin-block-start: 20px;
}

/*
 * The eyebrow and the heading are one unit in Figma ("Eyebrow and headline",
 * 8px gap) — tighter than the 20px that separates that unit from the intro.
 */
.fcs-multicolumn__header.fcs-multicolumn__header > .fcs-multicolumn__eyebrow + * {
  margin-block-start: 8px;
}

/*
 * COLOUR IS INHERITED, NEVER SET HERE.
 *
 * The same pattern is used on a light surface (v2/v3) and on the navy ground
 * (v1, Figma 7926:1117), where Figma makes the heading and intro white and the
 * eyebrow yellow. Hardcoding either colour would break the other arrangement,
 * so both follow the section's own text colour, which the editor sets from the
 * Color panel alongside the background.
 *
 * `color: inherit` is needed because core gives paragraphs and headings their
 * own colour from theme.json; without it they stay dark on the navy.
 */
.fcs-multicolumn__heading,
.fcs-multicolumn__info {
  color: inherit;
}

/*
 * Nothing here sets heading type at all — not size, not line height, not
 * tracking. theme.json owns the whole scale globally and fluidly (h2 is
 * 36/40 on desktop easing to 30/36 on mobile, Outfit 800, -0.2px), which is
 * Figma's Typography/H2 at both ends. A pattern that restated any of it would
 * be a second place to update when the scale moves.
 */

/* Columns ------------------------------------------------------------- */

/*
 * EVERY COLUMN IS A FLEX COLUMN, WRAPPED OR NOT.
 *
 * .fcs-columns--stretch (layout/blocks.css) stretches the columns to equal
 * height, but it makes them flex containers with a CHILD selector —
 * `.fcs-columns--stretch > .wp-block-column`. Once multicolumn.js mounts the
 * slider, the columns are moved into .splide__track > .splide__list and are no
 * longer children of the columns block. That rule stopped matching, the columns
 * fell back to display:block, and `margin-block-start: auto` on the link did
 * nothing — so on the mobile slider and the 5+ timeline every link sat under
 * its own copy and the columns ended at different heights.
 *
 * Declaring it on the column's own class holds in both states. The slides
 * themselves are already equal height: .splide__list is a flex row, which
 * stretches its items by default.
 */
.fcs-multicolumn__col {
  display: flex;
  flex-direction: column;
}

/*
 * WHY EVERY RULE BELOW REPEATS THE CLASS
 * --------------------------------------
 * A column is an .is-layout-flow container, and core's global styles give its
 * children
 *
 *     :root :where( .is-layout-flow ) > * { margin-block-start: 24px; }
 *
 * The :where() is zero, but :root is not — it is a pseudo-class, so the whole
 * selector is (0,1,0). A single-class rule here ties with it, and core prints
 * global-styles-inline-css AFTER the theme's stylesheets, so core won every
 * tie: every copy gap rendered as 24px, and the link's `auto` margin became
 * 24px too, which is why the links stopped lining up across the row. Repeating
 * the class makes each rule (0,2,0), which wins without !important.
 */
.fcs-multicolumn__col.fcs-multicolumn__col > * {
  margin-block: 0;
}

/*
 * Figma 7926:5142: title, meta line and body copy are one "Eyebrow and
 * headline" stack with an 8px gap (GC/padding/padding-sm), and that stack sits
 * 20px (padding-md) below the image and 20px above the link.
 */
.fcs-multicolumn__col.fcs-multicolumn__col > * + * {
  margin-block-start: 8px;
}

.fcs-multicolumn__col.fcs-multicolumn__col > .fcs-multicolumn__media + * {
  margin-block-start: 20px;
}

/*
 * The link is the last thing in a column and sits on the foot of the tallest
 * column, so the links line up across the row whatever each column's copy
 * length. The 20px padding is Figma's copy → link gap, and is the MINIMUM: a
 * column with shorter copy gets the difference as extra space above its link.
 */
.fcs-multicolumn__col.fcs-multicolumn__col > .fcs-multicolumn__link {
  margin-block-start: auto;
  padding-block-start: 20px;
}

.fcs-multicolumn__media img {
  width: 100%;
  border-radius: 12px;
}

/* Section button ------------------------------------------------------ */

/*
 * Figma: 40px below the columns, matching the gap above them. Doubled for the
 * same reason as the column rules: the section is a flow container too.
 */
.fcs-multicolumn__actions.fcs-multicolumn__actions {
  margin-block-start: 40px;
}

/* Modifier: cards ----------------------------------------------------- */

/*
 * v1 — the copy sits on a white panel below a flush image. The column itself
 * becomes the card, so the radius is on the column and the image only rounds
 * its top two corners.
 *
 * Applied per column from the block sidebar's "Card" checkbox, not by hand —
 * fcs-core/src/multicolumn-options.js writes .fcs-multicolumn__col--card, and
 * the section-level --cards class stays supported for sections built before the
 * option existed.
 *
 * Figma 9911:11075: 295px wide, the image 199px tall and flush to the top with
 * only its top corners rounded, then a white panel padded 40px top/bottom and
 * 24px left/right, copy centred with a 12px gap.
 */
.fcs-multicolumn--cards .fcs-multicolumn__col,
.fcs-multicolumn__col--card {
  overflow: hidden;
  background-color: var(--wp--preset--color--background);
  border-radius: 12px;
  color: var(--wp--preset--color--foreground);
}

/*
 * The image is the card's lid: full bleed to the card edges, square-bottomed so
 * it meets the white panel, and its own radius removed because the card's
 * overflow:hidden already clips it to the 12px corners.
 */
.fcs-multicolumn--cards .fcs-multicolumn__media img,
.fcs-multicolumn__col--card .fcs-multicolumn__media img {
  border-radius: 0;
  aspect-ratio: 295 / 199;
  object-fit: cover;
}

/*
 * 40px top/bottom and 24px left/right around the copy, but nothing around the
 * image — so the padding goes on the text children rather than on the card.
 */
.fcs-multicolumn--cards .fcs-multicolumn__col > :not(.fcs-multicolumn__media),
.fcs-multicolumn__col--card > :not(.fcs-multicolumn__media) {
  padding-inline: 24px;
}

.fcs-multicolumn--cards .fcs-multicolumn__col > :not(.fcs-multicolumn__media):first-child,
.fcs-multicolumn__col--card > :not(.fcs-multicolumn__media):first-child {
  padding-block-start: 40px;
}

.fcs-multicolumn--cards .fcs-multicolumn__col > :last-child,
.fcs-multicolumn__col--card > :last-child {
  padding-block-end: 40px;
}

/*
 * The title is the first thing under the image, so its 40px comes from the
 * padding rule above rather than a margin — otherwise the two would add up.
 */
.fcs-multicolumn--cards .fcs-multicolumn__media + .fcs-multicolumn__title,
.fcs-multicolumn__col--card .fcs-multicolumn__media + .fcs-multicolumn__title {
  margin-block-start: 0;
  padding-block-start: 40px;
}

/*
 * Figma centres the card copy, so that is the card's DEFAULT — not its only
 * option. The alignment modifiers below override it per column.
 */
.fcs-multicolumn__col--card {
  text-align: center;
}

.fcs-multicolumn__col--card .fcs-multicolumn__link {
  justify-content: center;
}

/* Modifier: centered -------------------------------------------------- */

.fcs-multicolumn--centered .fcs-multicolumn__col {
  text-align: center;
}

.fcs-multicolumn--centered .fcs-multicolumn__link {
  justify-content: center;
}

/* Modifier: text alignment --------------------------------------------- */

/*
 * Per-column alignment, written by the sidebar's "Text alignment" select
 * (fcs-core/src/multicolumn-options.js → inc/multicolumn-options.php). Unset
 * means "whatever the arrangement already does": centred on a card, left on a
 * bare column, so nothing built before this control existed changes.
 *
 * WHY THE DOUBLED CLASS
 * ---------------------
 * These have to beat both .fcs-multicolumn__col--card above and the section-wide
 * .fcs-multicolumn--centered, and the latter is (0,2,0) — a single class here
 * would lose to it and the select would silently do nothing inside a centred
 * section. Repeating the class raises this to (0,2,0) as well and, being later
 * in the file, it wins. !important is reserved for layout/spacing.css.
 *
 * The buttons block is a flex row, so it does not inherit text-align; each
 * alignment sets its justify-content to match.
 */
.fcs-multicolumn__col--align-left.fcs-multicolumn__col--align-left {
  text-align: left;
}

.fcs-multicolumn__col--align-left.fcs-multicolumn__col--align-left .fcs-multicolumn__link {
  justify-content: flex-start;
}

.fcs-multicolumn__col--align-center.fcs-multicolumn__col--align-center {
  text-align: center;
}

.fcs-multicolumn__col--align-center.fcs-multicolumn__col--align-center .fcs-multicolumn__link {
  justify-content: center;
}

.fcs-multicolumn__col--align-right.fcs-multicolumn__col--align-right {
  text-align: right;
}

.fcs-multicolumn__col--align-right.fcs-multicolumn__col--align-right .fcs-multicolumn__link {
  justify-content: flex-end;
}

/* Section background image -------------------------------------------- */

/*
 * THE BACKGROUND IMAGE IS CORE'S, NOT OURS.
 *
 * Figma 7926:1117 puts a sparse lion-crest tile over the navy ground. That is
 * an editor choice made from the block's own Background panel: core/group has
 * had a background IMAGE control since WP 6.4, and since 6.5 it offers
 * Cover / Contain / **Tile** plus a Repeat toggle and a focal point.
 * `appearanceTools: true` in theme.json turns it on.
 *
 * So there is no --pattern modifier and no CSS here painting artwork. The
 * pattern ships with the tile pre-selected in its block attributes
 * (patterns/multicolumn.php) and an editor can swap it for anything in the
 * media library, or remove it, without touching code.
 *
 * Superseded approach, for context: this used to be a ::before painting
 * FCS_Lion_Head.svg as a repeating CSS mask filled with currentcolor. It
 * reimplemented — worse — something core already ships.
 *
 * NOTE ON THE ARTWORK. FCS_Lion_Head.svg is drawn in navy gradients at 5%
 * opacity, which is invisible on this section's navy. As a real background
 * image it cannot take currentcolor the way a mask could, so
 * FCS_Lion_Head_Tile.svg is a flattened WHITE crest with its own 0.08 opacity,
 * sized 25px inside a 120px canvas to give the repeat its spacing. Regenerate
 * that file to change either the tint or the spacing.
 *
 * The rule below is the only thing the section still needs: core paints the
 * image on the section element itself, so nothing has to be stacked, but the
 * content must stay above it.
 */
.fcs-multicolumn > * {
  position: relative;
  z-index: 1;
}

/* Slider (Small only) -------------------------------------------------- */

/*
 * Splide is mounted below 768px only. Everything in this block is scoped to
 * .is-active, the class Splide puts on the root once it has mounted, so an
 * un-mounted grid (no JS, or the editor canvas) is untouched.
 */
/*
 * THE TRACK MUST BE PINNED TO THE ROW'S WIDTH.
 *
 * Splide injects .splide__track as a child of the columns block, which core
 * makes a flex row — so the track is a FLEX ITEM, and its default
 * `flex: 0 1 auto` sizes it to its content. Its content is the non-wrapping
 * list of every slide, so the track measures the full uncut strip: with eight
 * timeline cards that is ~1175px inside a 350px column, and Splide then derives
 * each slide's width from that instead of from the visible row.
 *
 * The result is a slider whose "one card" is several times the viewport. It
 * went unnoticed while every arrangement had at most four columns, because four
 * overflowed by little enough to look like the intended peek.
 *
 * flex-basis: 100% + min-width: 0 is the pair that fixes it: the first gives
 * the track the row's width, the second lets it be narrower than its content,
 * which a flex item does not allow by default (min-width defaults to auto).
 */
.fcs-multicolumn__grid.is-active .splide__track {
  /*
	 * A mounted slider is a flex COLUMN (see below), so the track is a full-width
	 * child. order: 0 puts it first: Splide inserts the arrows BEFORE it in the
	 * DOM, and the arrows and dots both carry order: 1 to sit underneath.
	 */
  order: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  /*
	 * The peeking next card must show outside the track, not be clipped — this
	 * is the Small behaviour, where `padding-right` on the track is what creates
	 * the peek and clipping it would defeat the point.
	 */
  overflow: visible;
}

/*
 * THE OVERFLOW SLIDER CLIPS INSTEAD.
 *
 * Figma 10005:11915 shows exactly four cards inside the 1240px column and the
 * fifth not at all — the strip is cut at the container edge, not feathered past
 * it. With `overflow: visible` above, the off-screen cards escape the track and
 * are only caught by `overflow: hidden` on the SECTION, which is the full-bleed
 * .alignfull element and therefore far wider than the content column. The
 * result is a fifth card hanging in the right-hand margin.
 *
 * Clipping on the track puts the boundary back on the 1240px column where the
 * design has it. Small keeps the visible overflow, because there the peek IS
 * the affordance that says "swipe me" — there are no arrows at that size.
 */
@media (min-width: 768px) {
  .fcs-multicolumn__grid--overflow.is-active .splide__track {
    overflow: hidden;
  }
}

/*
 * CORE FORCES THE ROW NOT TO WRAP FROM 782px, SO A MOUNTED SLIDER STOPS BEING
 * A ROW AT ALL.
 *
 * wp-block-library ships:
 *
 *     @media ( min-width: 782px ) {
 *         .wp-block-columns { flex-wrap: nowrap !important; }
 *     }
 *
 * On a mounted slider the columns block holds three children — the track, the
 * pagination and the arrows — and that rule pins all three on ONE line. The
 * track then keeps its natural full-strip width (every card visible at once)
 * and the arrows are shoved off to its right, which is precisely the broken
 * layout this produced on the About page.
 *
 * `flex-basis: 100%` cannot fix it: with nowrap there is no second line to take.
 * The container has to stop being a ROW — so it becomes a flex COLUMN, and the
 * three children stack vertically with core's nowrap made irrelevant.
 *
 * WHY A FLEX COLUMN AND NOT display: block
 * ----------------------------------------
 * Splide inserts .splide__arrows BEFORE the track in the DOM, not after. A
 * block container would therefore paint the arrows ABOVE the cards, and `order`
 * — which is what puts them back underneath — only applies to flex and grid
 * children. Keeping the container flex keeps `order: 1` working on both the
 * arrows and the pagination.
 *
 * !important is required because core's own rule carries it and no amount of
 * specificity beats that. It is scoped to a MOUNTED slider only — an
 * un-mounted grid keeps core's flex row untouched, which is what the editor
 * canvas and the no-JS front end both render.
 *
 * This was invisible in mobile testing: the rule starts at 782px, above the
 * 768px breakpoint where the 2–4 column slider destroys itself.
 */
.fcs-multicolumn__grid.is-active {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
}

/*
 * Core's columns block forces a flex row with wrapping at small sizes; Splide
 * needs the list to stay a single non-wrapping row that it can translate.
 */
.fcs-multicolumn__grid.is-active .splide__list {
  display: flex;
  flex-wrap: nowrap;
}

.fcs-multicolumn__grid.is-active .fcs-multicolumn__col {
  /* Splide sets the width inline; this stops core's flex-basis fighting it. */
  flex: 0 0 auto;
}

/*
 * Pagination dots.
 *
 * WHY width: 100% IS LOAD-BEARING
 * -------------------------------
 * Splide appends .splide__pagination as a direct child of the .splide root,
 * which here IS the columns block. A mounted slider makes that root a flex
 * COLUMN (see the nowrap note above), so the <ul> is a full-width child and
 * `width: 100%` gives justify-content something real to centre within.
 *
 * order: 1 keeps the dots below the track, which carries order: 0. That matters
 * because Splide does not always insert its UI after the track — the arrows go
 * BEFORE it — so DOM order cannot be relied on.
 *
 * flex-basis: 100% is retained for the pre-mount/flex-row case, where the <ul>
 * would otherwise be a shrink-to-fit flex item pinned to the row's start and a
 * bare justify-content would centre the dots inside a box only as wide as the
 * dots themselves — doing nothing, and reading as left-aligned. Splide's own
 * stylesheet hits that same wall.
 */
.fcs-multicolumn .splide__pagination {
  display: flex;
  flex-basis: 100%;
  order: 1;
  gap: 0.5rem;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
  margin-block-start: var(--wp--preset--spacing--30);
  list-style: none;
}

/*
 * Dot colour is an editor choice.
 *
 * Figma uses different dot colours per section — yellow on the navy card band,
 * blue on the light ones — so this cannot be one fixed value, and per CLAUDE.md
 * it must not be a class the client types either. The section sidebar carries a
 * "Slider dots" colour picker (fcs-core/src/multicolumn-options.js) which writes
 * --fcs-dot-color onto the section as an inline style.
 *
 * The fallback is currentcolor, so a section that has never been touched still
 * gets dots that read against its own background — which is the behaviour this
 * had before the control existed.
 */
.fcs-multicolumn .splide__pagination__page {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid var(--fcs-dot-color, currentcolor);
  border-radius: var(--wp--preset--border-radius--pill);
  background: transparent;
  opacity: 0.6;
  transition:
    background-color var(--fcs-transition),
    opacity var(--fcs-transition);
}

.fcs-multicolumn .splide__pagination__page.is-active {
  background: var(--fcs-dot-color, currentcolor);
  opacity: 1;
}

/*
 * The full-width mobile button rule that used to live here is now in
 * components/buttons.css, which applies it to every pattern and also centres
 * the label — this copy only stretched the box and left the text at the start.
 */

/* Slider arrows (overflow slider only) --------------------------------- */

/*
 * MORE THAN FOUR COLUMNS IS A SLIDER AT EVERY SIZE.
 *
 * Five columns cannot fit the 1240px container, so multicolumn.js mounts the
 * row as a Splide carousel that shows four at a time and pages with arrows —
 * Figma 10005:11915, the About page's year-by-year timeline strip. The class
 * below is written by the JS when it counts more than four columns; nothing
 * about it is an editor choice, because the column count already decides it.
 *
 * Splide's own arrow markup is a <button class="splide__arrow"> wrapping an
 * <svg>. We hide that svg and paint the icon as a mask on the button instead,
 * which is what lets one file serve both directions and both states:
 *
 *   FCS_Slider_Arrow.svg         the enabled icon
 *   FCS_Slider_Arrow_Faded.svg   the same icon at 0.5 opacity, pointing left
 *
 * The faded file is the disabled end-stop from the design. As a MASK its own
 * fill and opacity are discarded — only its shape survives — so reproducing
 * the faded look means `opacity: 0.5` here rather than a second mask, and the
 * disabled arrow then dims in whatever colour the section is using. Using it
 * as a mask anyway would give a left arrow that is indistinguishable from the
 * enabled one, which is the trap: the two files differ only in opacity and
 * direction, and CSS supplies both.
 *
 * So FCS_Slider_Arrow_Faded.svg is deliberately NOT referenced anywhere. It is
 * kept as the design's record of the disabled state; the faded look is
 * reproduced below and stays in step with the section's colour. Do not "fix"
 * its absence by adding a second mask.
 */
/*
 * The arrows wrapper is appended as a direct child of the columns block, after
 * the track, and a mounted slider makes that root display:block — so this row
 * of two buttons sits under the track on its own line and centres within the
 * full width. See the nowrap note further up for why the root is block.
 *
 * WHY THIS IS A `display: flex` AND NOT A BARE ONE
 * ------------------------------------------------
 * Splide toggles this wrapper by writing `display: none` / `display: ''`
 * INLINE as the `arrows` option flips at each breakpoint — false on Small,
 * true from 768px up. An inline style beats every rule in this file, so the
 * hide holds on Small whatever is declared here; but when Splide clears it
 * again the wrapper falls back to the stylesheet, and splide-core.min.css is
 * the structural build with no arrow rules at all. Without a `display: flex`
 * of our own the wrapper would be a block and the gap, centring and 34px
 * buttons would all be inert.
 *
 * So: declare it, and let the inline `none` win on Small. That is the one
 * ordering that produces the right result in both states.
 */
.fcs-multicolumn .splide__arrows {
  display: flex;
  flex-basis: 100%;
  order: 1;
  gap: 6px;
  justify-content: center;
  width: 100%;
  margin-block-start: var(--wp--preset--spacing--30);
}

/*
 * Splide positions its arrows absolutely over the track by default. These are
 * a centred row UNDER it (Figma 10005:12413), so the positioning is undone
 * rather than adjusted.
 */
.fcs-multicolumn .splide__arrow {
  position: static;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  /* splide-core is the structural build — the button reset is ours. */
  appearance: none;
  background: var(--fcs-dot-color, currentcolor);
  cursor: pointer;
  opacity: 1;
  transform: none;
  transition: opacity var(--fcs-transition);
  -webkit-mask-image: url("../../images/icons/FCS_Slider_Arrow.svg");
  mask-image: url("../../images/icons/FCS_Slider_Arrow.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* The artwork points right; the previous arrow is the same glyph flipped. */
.fcs-multicolumn .splide__arrow--prev {
  transform: rotate(180deg);
}

/*
 * Splide's stylesheet hides its svg child at its own specificity; the mask is
 * on the button, so the glyph inside would otherwise double up.
 */
.fcs-multicolumn .splide__arrow svg {
  display: none;
}

/*
 * The end stops. Splide sets `disabled` on the first/last arrow rather than
 * hiding them, which is what the design shows — a faded prev on slide one.
 */
.fcs-multicolumn .splide__arrow:disabled {
  opacity: 0.5;
  cursor: default;
}

.fcs-multicolumn .splide__arrow:not(:disabled):hover {
  opacity: 0.75;
}

/* Medium --------------------------------------------------------------- */

@media (min-width: 768px) {
  /*
	 * Tablet: a 4-column set breaks to 2×2 rather than squeezing four 180px
	 * columns. Core's columns block already wraps at this size; this just makes
	 * the basis predictable.
	 *
	 * An overflow slider is EXEMPT: it is still mounted at this size, and
	 * Splide sizes its slides inline from perPage. Forcing a 50% basis on them
	 * would fight that and leave the track mismeasured, so the selector skips
	 * any grid the JS has marked.
	 */
  .fcs-multicolumn__grid:not(.fcs-multicolumn__grid--overflow) > .wp-block-column {
    flex-basis: calc(50% - var(--wp--preset--spacing--30)) !important;
  }
}

/* Large ---------------------------------------------------------------- */

@media (min-width: 1024px) {
  /*
	 * Desktop: let core's own equal-width distribution take over again, so 3-up
	 * and 4-up both work without knowing the count here. Exempt for the same
	 * reason as above — a mounted slider owns its own slide widths.
	 */
  .fcs-multicolumn__grid:not(.fcs-multicolumn__grid--overflow) > .wp-block-column {
    flex-basis: 0 !important;
    flex-grow: 1;
  }
}