/*
 * Fox Core UI — the case study gallery grid, plus the shared lightbox.
 *
 * The masonry layout was ported 14 Aug 2026 from the `settings.customCSS` of
 * Cornerstone layout templates, where it existed as TEN byte-identical copies
 * (1,408 bytes, md5 f7c17dfc) across all six sites.
 *
 * ⚠️ NMS's `.gallery-grid2` slider is NOT styled here. It stays in that site's
 * own Custom CSS. The only thing this file gives it is the click affordance on
 * its main image, because the lightbox is shared.
 *
 * ⚠️ Also not here, deliberately: `button.gallery-grid::after`,
 * `button.gallery-grid span` and `.tab-gallery .x-tabs-panels`. Those style the
 * Cornerstone TAB BUTTON that happens to carry that name. Site chrome.
 *
 * Everything here is square-cornered on purpose: the estate has no border-radius
 * except on genuinely circular elements.
 */

:root {
  /* A right-pointing chevron, rotated into place per arrow. One shape for the
     whole estate: the four brand chevrons only ever differed by colour. */
  --gallery-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.4 0 0 1.4 4.6 6 0 10.6 1.4 12l6-6z'/%3E%3C/svg%3E");

  /* Fallback only. fox_core_ui_enqueue_gallery() prints this variable inline
     with the site's own primary colour, from fox_core_ui_site_colour(). A site
     can still override it again in its Custom CSS, which loads later. */
  --gallery-arrow-colour: #23214a;
}

/* ------------------------------------------------------------------
 * The NMS slider — affordance only, no layout
 * ------------------------------------------------------------------ */

.gallery-grid2 .gallery-grid__main {
  cursor: zoom-in;
}

.gallery-grid2 .gallery-grid__main:focus-visible {
  outline: 2px solid var(--gallery-arrow-colour);
  outline-offset: 2px;
}

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

html.fox-lightbox-open {
  overflow: hidden;
}

.fox-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fox-lightbox[hidden] {
  display: none;
}

.fox-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 14, 30, 0.94);
}

/* A click anywhere except the arrows closes, so say so. The arrows and the close
   button set `cursor: pointer` on themselves, which wins over this. */
.fox-lightbox__backdrop,
.fox-lightbox__inner {
  cursor: zoom-out;
}

/* ⚠️ Every control is pinned to the VIEWPORT, not laid out around the image.
   The image changes size with every photo, so anything sharing a flex row with
   it would shift on each next/prev click and the arrows would walk about under
   the cursor. Only the image itself is allowed to change size. */
.fox-lightbox__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 60px 72px 66px;
}

.fox-lightbox__figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Faded in once loaded, from moore's version — a full-size photo can take a
   moment and snapping between them is jarring. `is-loaded` is set in the JS. */
.fox-lightbox__img {
  opacity: 0;
  transition: opacity 0.2s ease;
  display: block;
  max-width: 100%;
  /* Leave room for the caption and the counter. */
  max-height: calc(100vh - 126px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.fox-lightbox__img.is-loaded {
  opacity: 1;
}

.fox-lightbox__caption {
  position: absolute;
  left: 72px;
  right: 72px;
  bottom: 38px;
  margin: 0;
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  opacity: 0.85;
}

.fox-lightbox__caption[hidden] {
  display: none;
}

.fox-lightbox__count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  margin: 0;
  color: #fff;
  font-size: 14px;
  text-align: center;
  opacity: 0.7;
}

.fox-lightbox__count[hidden] {
  display: none;
}

/* Lightbox controls sit on a dark backdrop, so the shared chevron flips white.
   Pinned to the viewport edges and vertically centred, so they hold still while
   the image behind them changes size. */
.fox-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.fox-lightbox__nav--prev {
  left: 18px;
}

.fox-lightbox__nav--next {
  right: 18px;
}

.fox-lightbox__nav:hover,
.fox-lightbox__nav:focus-visible {
  opacity: 1;
}

.fox-lightbox__nav[hidden] {
  display: none;
}

/* The rotation lives on the pseudo-element, not the button, because the button's
   own transform is doing the vertical centring. */
.fox-lightbox__nav::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-mask: var(--gallery-chevron) center / contain no-repeat;
          mask: var(--gallery-chevron) center / contain no-repeat;
}

.fox-lightbox__nav--prev::before {
  transform: rotate(180deg);
}

.fox-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.fox-lightbox__close:hover,
.fox-lightbox__close:focus-visible {
  opacity: 1;
}

/* Two bars crossed, rather than a glyph, so it does not depend on a font. */
.fox-lightbox__close::before,
.fox-lightbox__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  background: #fff;
}

.fox-lightbox__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.fox-lightbox__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.fox-lightbox button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .fox-lightbox__inner {
    padding: 56px 44px 62px;
  }

  .fox-lightbox__nav--prev {
    left: 4px;
  }

  .fox-lightbox__nav--next {
    right: 4px;
  }

  .fox-lightbox__caption {
    left: 44px;
    right: 44px;
  }

  .fox-lightbox__img {
    max-height: calc(100vh - 118px);
  }
}

/* ------------------------------------------------------------------
 * Case study galleries — the masonry grid
 *
 * Ported 14 Aug 2026 from the `settings.customCSS` of Cornerstone layout
 * templates, where it existed as TEN byte-identical copies (1,408 bytes,
 * md5 f7c17dfc) across all six sites: Case Study everywhere, plus News Post on
 * foxskip/nms/dsd and Vacancy on dsd.
 *
 * ⚠️ The declarations are deliberately IDENTICAL to those copies, so that a site
 * still carrying its layout copy sees no change at all. Do not "improve" them
 * until every layout copy has been stripped.
 *
 * ⚠️ Scoped to `.gallery-grid .gallery-item`, where the originals said
 * `.gallery-item` alone. `.gallery-item` is a WordPress CORE class, emitted by
 * the [gallery] shortcode, and dsd post 7856 uses one. The original rules were
 * restyling it. Scoping raises specificity over the layout copies, which is
 * harmless while the declarations match and correct once they are gone.
 * ------------------------------------------------------------------ */

/* ⚠️ THE DOUBLED CLASS IS LOAD-BEARING. DO NOT "TIDY" IT TO ONE.
   Cornerstone emits `.x-col { display: flex; flex-direction: column; }` in its
   inline CSS, which WordPress prints AFTER an enqueued stylesheet. `.x-col` and
   `.gallery-grid` are both single-class selectors, so they tie on specificity
   and the later one wins — the grid silently renders as a flex column.
   This did not bite while the rule lived in the Cornerstone layout's own custom
   CSS, because that is printed after the element CSS and won on source order.
   Repeating the class takes it to (0,2,0) so it wins outright, wherever it loads. */
.gallery-grid.gallery-grid {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  display: grid;
  gap: 20px;
  width: 100%;
}

/* A one-image gallery should not be a four-column grid with three empty cells.
   Taken from moore's version. Already (0,2,0), so it beats `.x-col` unaided. */
.gallery-grid.items-1 {
  grid-template-columns: 1fr;
}

.gallery-grid .gallery-item {
  overflow: hidden;
  position: relative;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

.gallery-grid .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.6s ease;
}

.gallery-grid .gallery-item:hover img {
  transform: scale(1.2);
}

.gallery-grid .gallery-item.wide      { grid-column: span 2; }
.gallery-grid .gallery-item.tall      { grid-row: span 2; }
.gallery-grid .gallery-item.square    { grid-column: span 2; grid-row: span 2; }
.gallery-grid .gallery-item.fullwidth { grid-column: span 4; grid-row: span 2; }
.gallery-grid .gallery-item.banner    { grid-column: span 3; grid-row: span 2; }
.gallery-grid .gallery-item.tower     { grid-column: span 2; grid-row: span 3; }

/* The lightbox affordance. Not in the originals — the cells were not clickable. */
.gallery-grid .gallery-item[role="button"] {
  cursor: zoom-in;
}

.gallery-grid .gallery-item[role="button"]:focus-visible {
  outline: 2px solid var(--gallery-arrow-colour);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  /* Doubled for the same reason as above. */
  .gallery-grid.gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 10px;
    padding-top: 20px;
  }

  .gallery-grid .gallery-item {
    max-height: 200px;
    height: auto;
  }

  /* The span classes are left ON the elements at mobile and neutralised here,
     rather than being removed by the JS. That is why resizing down works. */
  .gallery-grid .gallery-item.wide,
  .gallery-grid .gallery-item.tall,
  .gallery-grid .gallery-item.square,
  .gallery-grid .gallery-item.fullwidth,
  .gallery-grid .gallery-item.banner,
  .gallery-grid .gallery-item.tower {
    grid-column: span 1;
    grid-row: span 1;
  }
}