/*!
 * Media Wall for Squarespace 7.1 — v1.2.0
 * Every size and colour is a --mw-* variable. Override in Design → Custom CSS:
 *   .mw { --mw-height: 90vh; --mw-gap: 16px; }
 */

.mw {
  --mw-height: 100vh;            /* wall height (100svh on browsers that know it) */
  --mw-gap: 12px;                /* space between tiles and columns */
  --mw-padding: 12px;            /* space around the edge of the wall */
  --mw-radius: 0px;              /* tile corner radius */
  --mw-bg: var(--siteBackgroundColor, #111);
  --mw-fade: 0px;                /* soft fade at top/bottom edge, e.g. 80px */
  --mw-cols: 3;                  /* set by the script from the column settings */

  position: relative;
  height: var(--mw-height);
  overflow: hidden;
  background: var(--mw-bg);
  box-sizing: border-box;
  padding: 0 var(--mw-padding);
  contain: paint;
}
@supports (height: 100svh) {
  .mw { --mw-height: 100svh; }
}

.mw-grid {
  display: grid;
  grid-template-columns: repeat(var(--mw-cols), minmax(0, 1fr));
  gap: var(--mw-gap);
  height: 100%;
}

.mw-col {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.mw-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

/* gap between sets = gap between tiles, so the loop point is invisible */
.mw-set {
  display: flex;
  flex-direction: column;
  gap: var(--mw-gap);
  padding-bottom: var(--mw-gap);
}

.mw-tile {
  margin: 0;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--mw-radius);
  background: rgba(127, 127, 127, 0.12);
}

.mw-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* the tile already has the media's own ratio */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* optional soft edge, top and bottom */
.mw::before,
.mw::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--mw-fade);
  z-index: 2;
  pointer-events: none;
}
.mw::before { top: 0; background: linear-gradient(var(--mw-bg), transparent); }
.mw::after { bottom: 0; background: linear-gradient(transparent, var(--mw-bg)); }

/* ---------------------------------------------- Above the site header */
/* The wall sits before #header; the header then scrolls up with the page
   and (sticky mode) stays pinned once it reaches the top. */
body.mw-header-sticky #header,
body.mw-header-sticky header.header {
  position: sticky !important;
  top: 0 !important;
  transform: none !important;
}
body.mw-header-static #header,
body.mw-header-static header.header {
  position: relative !important;
  top: auto !important;
  transform: none !important;
}

/* inline mode: full-bleed inside its own section */
.mw--inline { width: 100%; }

/* source sections are hidden on the live site only */
.mw-source-hidden { display: none !important; }

/* ------------------------------------------------------ Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mw-track { transform: none !important; }
}

/* ------------------------------------------------------------ Links */
/* Only when links are on (off by default). */
.mw-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.mw-link .mw-media { transition: transform 0.5s ease, opacity 0.3s ease; }
.mw-link:hover .mw-media { transform: scale(var(--mw-hover-scale, 1.03)); }
.mw-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---------------------------------------------------- Scroll indicator */
.mw {
  --mw-scroll-bottom: 28px;            /* distance from the bottom of the wall */
  --mw-scroll-color: #fff;
  --mw-scroll-bg: rgba(17, 17, 17, 0.55);
  --mw-scroll-blur: 8px;
}
.mw-scroll {
  position: absolute;
  left: 50%;
  bottom: var(--mw-scroll-bottom);
  z-index: 3;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--mw-scroll-bg);
  -webkit-backdrop-filter: blur(var(--mw-scroll-blur));
  backdrop-filter: blur(var(--mw-scroll-blur));
  color: var(--mw-scroll-color);
  font: inherit;                       /* site font from Site Styles */
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.mw-scroll:hover { background: var(--mw-scroll-bg-hover, rgba(17, 17, 17, 0.75)); }
.mw-scroll:focus-visible { outline: 2px solid var(--mw-scroll-color); outline-offset: 3px; }
.mw-scroll__icon { display: inline-flex; animation: mw-nudge 1.8s ease-in-out infinite; }
.mw-scroll--hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes mw-nudge {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .mw-scroll__icon { animation: none; }
}