/* ==========================================================================
   Foundation image gallery (AB#98987 / AB#99069)
   --------------------------------------------------------------------------
   Loaded by masterFoundation.cshtml only. Every rule is scoped under
   .brand-foundation (the Foundation body class) and the fnd-gallery__* classes,
   so nothing here can reach the ASISA, ESD or Academy layouts. The shared rules
   in main.css are NOT modified; the ones that leak into any Foundation band
   (img, :focus, p, ul, li, button) are reset under .fnd-gallery below.

   Slick isolation. Slick is shared with every other carousel on the site, and
   main.css and slick-theme.css style .slick-prev, .slick-next and .slick-dots
   globally. This gallery never carries those classes: the script supplies its
   own arrow markup and its own dotsClass, and appends both into containers of
   its own, so none of those rules match. Two rules DO reach any Slick instance
   and are overridden at the bottom of this file:
     main.css:1202  .slick-dotted.slick-slider { margin-bottom: -30px }
     main.css:1016  .slick-slide { height: inherit }

   Design source: design/foundation-image-gallery/reference.jpg, the story
   attachment, a 1:1 crop of the 5.4 WageWise How to Join frame, cross-checked
   against the three full-page frames (5.4, 5.6, 6.6). Figma file
   fL3pEfqVg3JdWDyYf1qWPG, node 7205:241527.

   No value here came from the Figma API: spec.json does not exist yet, because
   both attempts to fetch the node on 4 Sep 2026 failed before reaching it (the
   design-context guidance resource is unauthorised on this seat, and the server
   then asked to be re-authorised). Values read off the crop are marked "crop"
   with the measurement; everything else is an ESTIMATE or an INFERENCE, named
   as such, to be replaced when spec.json exists. design/foundation-image-gallery/SOURCE.md
   carries the one-call recipe for fetching it.

   Layout: one image at 1200 x 527, an arrow either side of it, the image's
   caption centred beneath, then a row of dots. The accent comes from
   --programme-accent, which the view sets on the section root (validated hex,
   FoundationImageGalleryAccent); elsewhere it falls back to --foundation.
   ========================================================================== */

.brand-foundation {
  /* The accent token (--fnd-gallery-accent) is declared on .fnd-gallery itself, below: a custom
     property resolves where it is declared, and --programme-accent is set on the section root,
     not on body. */

  /* Band. The crop is a 1:1 cut of the 1440 frame and its image measures 1200 px across, which is
     the 1200 px design column, so crop pixels are design pixels. The site column is 1150 px inside
     .container (1190 max, 20 px padding each side), 4% narrower than the design's 1200, so the image
     runs 1150 px wide here; absolute values (radius, corner, arrows, type, dots) are kept as
     designed rather than scaled. */
  --fnd-gallery-pad-y: 50px;                          /* crop: 100 px of whitespace between the CTA band
                                                         above and the image, 102 px below the dots. The
                                                         split between this band's padding and its
                                                         neighbour's is an ESTIMATE, so half each. */
  --fnd-gallery-font: var(--font-family-main, Arial, Helvetica, sans-serif);

  /* Image */
  --fnd-gallery-ratio: 1200 / 527;                    /* crop: x 120..1319, y 151..677 */
  --fnd-gallery-ratio-mobile: 4 / 3;                  /* ESTIMATE: no mobile frame was delivered for these
                                                         pages. A 1200:527 image is 80 px tall on a 360 px
                                                         screen, too short to read. */
  --fnd-gallery-radius: 24px;                          /* crop: the top-left arc runs from x 143 at y 151
                                                         to x 120 at y 174, so 23 to 24 px */
  /* Top left, TOP RIGHT, bottom right, bottom left. The top right is square, and for a reason: the
     accent triangle's corner is a right angle, and rounding the box behind it clipped the tip into a
     curve. Michiel reported it looking off on dev, 8 September 2026.

     crop: all four corners measured this time, not only the top left. The three rounded ones show
     background through the arc and reach the edge 24 px along (insets 22, 12, 8, 7, 5, 3, 2, 1, 0,
     row by row). The top right has an inset of 0 on every row and its corner pixel is the accent
     itself: green on the 5.4 and 5.6 frames, Foundation purple on 6.6. */
  --fnd-gallery-image-radius:
    var(--fnd-gallery-radius) 0 var(--fnd-gallery-radius) var(--fnd-gallery-radius);
  --fnd-gallery-corner: 56px;                          /* crop: 57 px legs, top right */
  --fnd-gallery-placeholder: #F8F5EA;                  /* INFERENCE: the site's cream, so a slow image
                                                         leaves the brand's ground and not a white hole */

  /* Arrows. The glyph is a filled triangle, not the chevron main.css uses for every other carousel
     (wwwroot/img/left_arrow.svg is a 32 x 62 two-stroke chevron with its colour baked in, which is
     why the site carries seven recoloured copies of it). Drawn in CSS instead, so it takes the
     accent-independent design colour and needs no eighth asset. */
  --fnd-gallery-arrow-glyph-w: 9px;                    /* crop: 9 px wide including antialiasing (8 px solid) */
  --fnd-gallery-arrow-glyph-h: 17px;                   /* crop: 17 px tall including antialiasing (15 px solid) */
  --fnd-gallery-arrow-colour: #191919;                 /* crop: darkest pixel #191919, darker than Grey/100 */
  --fnd-gallery-arrow-gap: 40px;                       /* crop: 40 px from the glyph to the image edge, both sides */
  --fnd-gallery-arrow-target: 44px;                    /* WCAG 2.5.5 AAA target size; the glyph itself is far
                                                          below the 24 px minimum */

  /* Caption */
  --fnd-gallery-caption-size: 14px;                    /* crop: 10 px cap height, and 37 characters measure
                                                          252 px, which is 14 px in this face */
  --fnd-gallery-caption-colour: #262626;               /* Grey/100; crop reads #19 to #26 through the JPEG */
  --fnd-gallery-caption-line-height: 1.5;
  --fnd-gallery-image-to-caption: 16px;                /* crop: 22 px from the image bottom to the caption cap
                                                          tops; the split between the line box and the margin
                                                          is an ESTIMATE */

  /* Dots */
  --fnd-gallery-caption-to-dots: 16px;                 /* crop: 23 px from the caption baseline to the dot
                                                          tops; same ESTIMATE as above */
  --fnd-gallery-dot-size: 8px;                         /* crop: 8 px, all eight inactive dots */
  --fnd-gallery-dot-size-active: 12px;                 /* crop: 12 px */
  --fnd-gallery-dot-gap: 5px;                          /* crop: 5 px, every gap */
  --fnd-gallery-dot-colour: #D9D9D9;                   /* crop: #D9D9D9 (#D2 to #DE through the JPEG) */
  --fnd-gallery-dot-colour-active: #2E2E2E;            /* crop: #2E2E2E */

  /* Above this width the arrows sit outside the image, as designed. Derived, not designed: an arrow
     reaches 66.5 px past the image edge (40 px gap + 9 px glyph + half the 44 px target's overhang),
     the container's own padding covers 20 px of that, so 46.5 px has to come from outside the
     1190 px container, which needs a 1283 px viewport. Rounded up. */
  --fnd-gallery-arrows-outside: 1300px;
}

/* ---- Band -------------------------------------------------------------- */

.brand-foundation .fnd-gallery {
  /* Accent: the programme colour (--programme-accent, set on this element by the view inside a
     programme), else ASISA Foundation Signature Colour/100. Declared here, not on body, so that
     var(--programme-accent) is read on the element that carries it. */
  --fnd-gallery-accent: var(--programme-accent, var(--foundation, #A137B7));

  font-family: var(--fnd-gallery-font);
  padding: var(--fnd-gallery-pad-y) 0;
}

.brand-foundation .fnd-gallery__inner {
  box-sizing: border-box;
}

/* The arrows are positioned against this box, so the media box's top is their top. */
.brand-foundation .fnd-gallery__viewport {
  position: relative;
}

/* ---- Slides ------------------------------------------------------------ */

.brand-foundation .fnd-gallery__slide {
  /* Reset: figure carries a browser default margin. */
  margin: 0;
  padding: 0;
}

/* Before the script runs, only the first image is shown. Without it the gallery stays a single
   captioned image rather than a stack of ten. */
.brand-foundation .fnd-gallery__slider:not(.slick-initialized) .fnd-gallery__slide:not(:first-child) {
  display: none;
}

.brand-foundation .fnd-gallery__media {
  position: relative;
  /* Clips the image to the corners. The triangle is no longer clipped at the top right, because
     that corner is square there, which is what lets its tip stay a point. */
  overflow: hidden;
  border-radius: var(--fnd-gallery-image-radius);
  background: var(--fnd-gallery-placeholder);
  aspect-ratio: var(--fnd-gallery-ratio);
}

.brand-foundation .fnd-gallery__image {
  display: block;
  width: 100%;
  /* Reset: main.css sets a global img { height: inherit }, which would take the media box's height
     rather than the image's own proportion. */
  height: 100%;
  object-fit: cover;
}

/* The accent triangle, top right. Same border technique as the latest news card's corner: two
   borders on a zero-sized box, so it needs no asset and takes the accent as a colour. */
.brand-foundation .fnd-gallery__corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: var(--fnd-gallery-corner) solid var(--fnd-gallery-accent);
  border-left: var(--fnd-gallery-corner) solid transparent;
}

/* ---- Caption ----------------------------------------------------------- */

.brand-foundation .fnd-gallery__caption {
  margin: var(--fnd-gallery-image-to-caption) auto 0;
  padding: 0;
  text-align: center;
  font-size: var(--fnd-gallery-caption-size);
  line-height: var(--fnd-gallery-caption-line-height);
  color: var(--fnd-gallery-caption-colour);
}

/* ---- Arrows ------------------------------------------------------------ */

/* The overlay covers exactly the media box: left and right are pinned to it and aspect-ratio
   supplies the height, so the arrows centre on the image whatever height the caption takes.
   :empty hides it until the script has appended the arrows into it. */
.brand-foundation .fnd-gallery__arrows {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: var(--fnd-gallery-ratio);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The overlay must not swallow a swipe or a drag on the image; the buttons take it back. */
  pointer-events: none;
}

.brand-foundation .fnd-gallery__arrows:empty {
  display: none;
}

.brand-foundation .fnd-gallery .fnd-gallery__arrow {
  /* Reset: button inherits neither font nor background reliably, and the site styles buttons. */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--fnd-gallery-arrow-target);
  height: var(--fnd-gallery-arrow-target);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fnd-gallery-arrow-colour);
  cursor: pointer;
  pointer-events: auto;
}

/* The glyph: a triangle drawn with borders, pointing away from the image. */
.brand-foundation .fnd-gallery__arrow::before {
  content: "";
  width: 0;
  height: 0;
  border-top: calc(var(--fnd-gallery-arrow-glyph-h) / 2) solid transparent;
  border-bottom: calc(var(--fnd-gallery-arrow-glyph-h) / 2) solid transparent;
}

.brand-foundation .fnd-gallery__arrow--prev::before {
  border-right: var(--fnd-gallery-arrow-glyph-w) solid currentColor;
}

.brand-foundation .fnd-gallery__arrow--next::before {
  border-left: var(--fnd-gallery-arrow-glyph-w) solid currentColor;
}

/* Wide enough for the arrows to sit clear of the image, as the frames show them. The negative
   margin carries the button out past the image edge: the gap, the glyph, and the half of the
   target that overhangs the glyph. */
@media (min-width: 1300px) {
  .brand-foundation .fnd-gallery__arrow--prev {
    margin-left: calc(-1 * (var(--fnd-gallery-arrow-gap) + var(--fnd-gallery-arrow-glyph-w)
      + (var(--fnd-gallery-arrow-target) - var(--fnd-gallery-arrow-glyph-w)) / 2));
  }

  .brand-foundation .fnd-gallery__arrow--next {
    margin-right: calc(-1 * (var(--fnd-gallery-arrow-gap) + var(--fnd-gallery-arrow-glyph-w)
      + (var(--fnd-gallery-arrow-target) - var(--fnd-gallery-arrow-glyph-w)) / 2));
  }
}

/* Narrower than that there is no room beside the image, so the arrows move just inside its edges on
   a translucent white disc, which is the conventional pattern and keeps the design's vertical
   centring and its 44 px target. INFERENCE: no mobile or narrow-desktop frame was delivered for
   these pages, so this is the one piece of the layout the design has not ruled on. */
@media (max-width: 1299px) {
  .brand-foundation .fnd-gallery .fnd-gallery__arrow {
    margin: 0 8px;
    background: rgba(255, 255, 255, 0.85);
  }
}

/* ---- Dots -------------------------------------------------------------- */

.brand-foundation .fnd-gallery__controls:empty {
  display: none;
}

/* Slick appends its own <ul> here, so the margin that separates the dots from the caption goes on
   the list, not on this container: an empty container is display:none and would collapse it. */
.brand-foundation .fnd-gallery__dots {
  /* Reset: main.css styles ul (font, colour, line height) and the browser adds list padding. */
  margin: var(--fnd-gallery-caption-to-dots) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fnd-gallery-dot-gap);
  line-height: 1;
}

.brand-foundation .fnd-gallery__dots li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.brand-foundation .fnd-gallery .fnd-gallery__dot {
  box-sizing: border-box;
  display: block;
  width: var(--fnd-gallery-dot-size);
  height: var(--fnd-gallery-dot-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--fnd-gallery-dot-colour);
  cursor: pointer;
  /* The accessible name is on aria-label; the button holds no text to hide. */
  font-size: 0;
}

.brand-foundation .fnd-gallery__dots li.slick-active .fnd-gallery__dot {
  width: var(--fnd-gallery-dot-size-active);
  height: var(--fnd-gallery-dot-size-active);
  background: var(--fnd-gallery-dot-colour-active);
}

/* ---- Focus ------------------------------------------------------------- */

/* main.css sets a global :focus { outline: none }, which leaves a keyboard visitor with no idea
   where they are. Restored here for this band's controls, in the page's accent. :focus-visible, so
   a pointer click does not draw a ring. */
.brand-foundation .fnd-gallery .fnd-gallery__arrow:focus-visible,
.brand-foundation .fnd-gallery .fnd-gallery__dot:focus-visible {
  outline: 2px solid var(--fnd-gallery-accent);
  outline-offset: 3px;
}

/* Fallback for browsers without :focus-visible, and for the one shipped Safari that supports
   :focus-visible only behind the alias. */
.brand-foundation .fnd-gallery .fnd-gallery__arrow:focus,
.brand-foundation .fnd-gallery .fnd-gallery__dot:focus {
  outline: 2px solid var(--fnd-gallery-accent);
  outline-offset: 3px;
}

.brand-foundation .fnd-gallery .fnd-gallery__arrow:focus:not(:focus-visible),
.brand-foundation .fnd-gallery .fnd-gallery__dot:focus:not(:focus-visible) {
  outline: none;
}

/* ---- Screen reader text ------------------------------------------------ */

/* The site has no shared helper for this. Not display:none: a hidden live region is not announced. */
.brand-foundation .fnd-gallery__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Zoom button ------------------------------------------------------- */

/* The media box becomes a button when the image can be opened full size. It carries
   .fnd-gallery__media too, so the sizing, radius and clipping above still apply; these rules only
   undo what a button brings with it. */
.brand-foundation .fnd-gallery .fnd-gallery__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  /* zoom-in rather than pointer: it opens a bigger picture, it does not navigate. */
  cursor: zoom-in;
}

.brand-foundation .fnd-gallery .fnd-gallery__zoom:focus-visible,
.brand-foundation .fnd-gallery .fnd-gallery__zoom:focus {
  outline: 2px solid var(--fnd-gallery-accent);
  outline-offset: 3px;
}

.brand-foundation .fnd-gallery .fnd-gallery__zoom:focus:not(:focus-visible) {
  outline: none;
}

/* ---- Lightbox --------------------------------------------------------- */

/* INFERENCE throughout this block: the design frames show no lightbox, because a static frame
   cannot. The criterion (AB#99069, and Section 7.6.1 which promised it) says only "an enlarged or
   lightbox view". So the values here are the component's own tokens where it has them (the accent,
   the arrows, the caption size) and conventional choices where it does not, and the whole block is
   flagged in the documentation as needing a design answer. */
.brand-foundation .fnd-gallery__lightbox {
  --fnd-gallery-lightbox-backdrop: rgba(25, 25, 25, 0.92);   /* INFERENCE: near the arrow's #191919 */
  --fnd-gallery-lightbox-gap: 24px;                          /* INFERENCE */
  --fnd-gallery-lightbox-close: 44px;                        /* WCAG 2.5.5 AAA target size */

  position: fixed;
  inset: 0;
  /* Above the sticky Foundation header (z-index 5) and the search modal (6), because a modal dialog
     that something else can cover is not modal. */
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fnd-gallery-lightbox-gap);
  box-sizing: border-box;
}

/* The hidden attribute's own display:none is a bare [hidden] rule, which the class selector above
   outranks. Without this the lightbox would be visible from the moment the page loaded. */
.brand-foundation .fnd-gallery__lightbox[hidden] {
  display: none;
}

.brand-foundation .fnd-gallery__lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: var(--fnd-gallery-lightbox-backdrop);
}

.brand-foundation .fnd-gallery__lightbox-panel {
  position: relative;                                 /* above the backdrop */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;                                          /* INFERENCE */
  max-width: 100%;
  max-height: 100%;
}

.brand-foundation .fnd-gallery__lightbox-figure {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;                                          /* INFERENCE */
  min-height: 0;                                      /* lets the image shrink inside the flex column */
}

.brand-foundation .fnd-gallery__lightbox-image {
  display: block;
  /* Reset: main.css sets a global img { height: inherit }. The picture is shown whole, so it is
     bounded by the viewport on both axes and keeps its own proportion. */
  width: auto;
  height: auto;
  max-width: 100%;
  /* The viewport less this element's own padding, the close button's row and the nav row. */
  max-height: calc(100vh - 190px);
  object-fit: contain;
  /* All four corners, unlike the band, which is square at the top right. That corner is square
     because the accent triangle sits in it and its tip must stay a point; the lightbox carries no
     triangle, so a single sharp corner there would read as a mistake rather than as the design.
     INFERENCE, like the rest of the lightbox: no frame exists for it. */
  border-radius: var(--fnd-gallery-radius);
  background: var(--fnd-gallery-placeholder);
}

.brand-foundation .fnd-gallery__lightbox-caption {
  margin: 0;
  padding: 0;
  max-width: 70ch;                                    /* INFERENCE: a readable measure */
  text-align: center;
  font-size: var(--fnd-gallery-caption-size);
  line-height: var(--fnd-gallery-caption-line-height);
  color: #FFFFFF;                                     /* INFERENCE: the caption sits on the backdrop */
}

/* Nothing to show, no empty line taking up space. */
.brand-foundation .fnd-gallery__lightbox-caption:empty {
  display: none;
}

.brand-foundation .fnd-gallery__lightbox-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;                                          /* INFERENCE */
}

.brand-foundation .fnd-gallery__lightbox-position {
  margin: 0;
  padding: 0;
  min-width: 8ch;                                     /* so the row does not jump between "1 of 9" and "10 of 9" */
  text-align: center;
  font-size: var(--fnd-gallery-caption-size);
  color: #FFFFFF;
}

/* The arrows reuse the band's glyph, in white so they read on the backdrop, and sit in the flow
   rather than outside the image: there is no column to hang them beside here. */
.brand-foundation .fnd-gallery .fnd-gallery__lightbox-arrow {
  position: static;
  margin: 0;
  background: transparent;
  color: #FFFFFF;
}

.brand-foundation .fnd-gallery .fnd-gallery__lightbox-close {
  position: absolute;
  top: 0;
  right: 0;
  /* Out of the panel's top-right corner, over the backdrop, so it never covers the picture. */
  transform: translate(50%, -50%);
  box-sizing: border-box;
  width: var(--fnd-gallery-lightbox-close);
  height: var(--fnd-gallery-lightbox-close);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--fnd-gallery-arrow-colour);
  cursor: pointer;
}

/* The cross, drawn rather than fetched, so it takes the colour and needs no asset. */
.brand-foundation .fnd-gallery__lightbox-close::before,
.brand-foundation .fnd-gallery__lightbox-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;                                        /* INFERENCE */
  height: 2px;
  background: currentColor;
}

.brand-foundation .fnd-gallery__lightbox-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.brand-foundation .fnd-gallery__lightbox-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.brand-foundation .fnd-gallery .fnd-gallery__lightbox-arrow:focus-visible,
.brand-foundation .fnd-gallery .fnd-gallery__lightbox-close:focus-visible,
.brand-foundation .fnd-gallery .fnd-gallery__lightbox-arrow:focus,
.brand-foundation .fnd-gallery .fnd-gallery__lightbox-close:focus {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

.brand-foundation .fnd-gallery .fnd-gallery__lightbox-arrow:focus:not(:focus-visible),
.brand-foundation .fnd-gallery .fnd-gallery__lightbox-close:focus:not(:focus-visible) {
  outline: none;
}

/* The script sets this on <body> while the lightbox is open, so the page behind does not scroll
   under it. Scoped to the Foundation body class like everything else here. */
.brand-foundation.fnd-gallery-lightbox-open {
  overflow: hidden;
}

/* On a phone the close button's overhang would fall off the screen, and the nav row needs the width
   more than the picture needs the height. INFERENCE, as above. */
@media (max-width: 767px) {
  .brand-foundation .fnd-gallery__lightbox {
    --fnd-gallery-lightbox-gap: 16px;
  }

  .brand-foundation .fnd-gallery .fnd-gallery__lightbox-close {
    transform: none;
    top: 4px;
    right: 4px;
  }

  .brand-foundation .fnd-gallery__lightbox-image {
    max-height: calc(100vh - 170px);
  }
}

/* ---- Slick leak overrides ---------------------------------------------- */

/* main.css:1202 pulls every dotted Slick slider up by 30 px, which would drag the caption and dots
   into the image. main.css:1016 gives every slide the track's height, which with a caption of one
   or two lines clips the taller ones. */
.brand-foundation .fnd-gallery .slick-slider,
.brand-foundation .fnd-gallery .slick-dotted.slick-slider {
  margin-bottom: 0;
}

.brand-foundation .fnd-gallery .slick-slide {
  height: auto;
}

/* ---- Narrow screens ---------------------------------------------------- */

/* A 1200:527 image is 80 px tall on a 360 px screen, too short to make out. INFERENCE, as above:
   no mobile frame for these pages. */
@media (max-width: 767px) {
  .brand-foundation .fnd-gallery__media,
  .brand-foundation .fnd-gallery__arrows {
    aspect-ratio: var(--fnd-gallery-ratio-mobile);
  }
}

/* ---- Reduced motion ---------------------------------------------------- */

/* The slide transition is decoration; the gallery works without it. The script also sets Slick's
   speed to 0, because Slick animates in JavaScript and CSS alone cannot stop it. */
@media (prefers-reduced-motion: reduce) {
  .brand-foundation .fnd-gallery .slick-track {
    transition: none !important;
  }
}

/* ---- Compact size ------------------------------------------------------ */

/* The "smaller gallery version" both stories ask for on the Impact Story page (AB#99069, AB#99070),
   set by the editor's "Display size" field or defaulted by page type.

   ESTIMATE: no frame exists for it. Section 7.6.2 of the analysis asks instead for a "larger display
   format" on the same page and the contradiction is open as Q#97, so the one thing that can be said
   with confidence is that compact is narrower than the page-width standard. 800px is two thirds of
   the design's 1200px image, which reads as an illustration inside an article rather than as the
   page's centrepiece. Everything else is inherited: the ratio, the radius, the corner, the type
   sizes and the dots are all unchanged, so the two sizes are recognisably the same component.

   Narrowing the viewport is enough to narrow the whole band, because the slider sits inside it and
   the arrow overlay is pinned to it. */
.brand-foundation .fnd-gallery--compact {
  --fnd-gallery-compact-width: 800px;                 /* ESTIMATE: see above */
}

.brand-foundation .fnd-gallery--compact .fnd-gallery__viewport {
  max-width: var(--fnd-gallery-compact-width);
  margin-left: auto;
  margin-right: auto;
}

/* At 800px the image leaves 175px of the 1150px column either side, far more than the 66.5px an
   arrow needs, so compact can put its arrows outside from a much lower width than the standard
   size can. These selectors carry the extra --compact class, so they outrank the standard rules
   above whichever order the media queries fall in. */
@media (min-width: 1000px) {
  .brand-foundation .fnd-gallery--compact .fnd-gallery__arrow--prev {
    margin-left: calc(-1 * (var(--fnd-gallery-arrow-gap) + var(--fnd-gallery-arrow-glyph-w)
      + (var(--fnd-gallery-arrow-target) - var(--fnd-gallery-arrow-glyph-w)) / 2));
    background: transparent;
  }

  .brand-foundation .fnd-gallery--compact .fnd-gallery__arrow--next {
    margin-right: calc(-1 * (var(--fnd-gallery-arrow-gap) + var(--fnd-gallery-arrow-glyph-w)
      + (var(--fnd-gallery-arrow-target) - var(--fnd-gallery-arrow-glyph-w)) / 2));
    background: transparent;
  }
}

/* Below that the column is narrower than the image plus its arrows, so they move inside the image
   as the standard size does. The standard rule at max-width 1299px already does this; repeated here
   only because the min-width 1000px block above would otherwise still apply between 1000 and 1299. */
@media (max-width: 999px) {
  .brand-foundation .fnd-gallery--compact .fnd-gallery__arrow--prev,
  .brand-foundation .fnd-gallery--compact .fnd-gallery__arrow--next {
    margin: 0 8px;
    background: rgba(255, 255, 255, 0.85);
  }
}