/*
 * Strange World — support layer for the NATIVE Elementor homepage.
 *
 * Deliberately small. Everything Elementor's own style controls can express
 * (padding, grid, gap, colour, background, shadow, transform, border) is set
 * per-element in Elementor so it stays editable in the Style tab.
 *
 * This file holds only the residue Elementor Core cannot express:
 *   1. behaviour hooks for sw-chrome.js (carousel / scroller / lightbox)
 *   2. scrollbar hiding and scroll-snap
 *   3. mask-based hand-drawn rules
 *   4. hatched "awaiting artwork" fill
 *
 * `sw-home.css` still serves the older HTML-widget homepage (page 106) and can
 * be removed once that page is retired.
 */

/* ---------- horizontal scroller (Recent Work) ---------- */
.swn-track {
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.swn-track::-webkit-scrollbar { display: none; }
.swn-track > * { scroll-snap-align: start; }

/* ---------- carousel + lightbox hooks (no styling of their own) ---------- */
.swn-plate, .swn-slide, .swn-counter, .swn-prev, .swn-next, .swn-scroller { }
.swn-zoom { cursor: zoom-in; }
.swn-zoom img { display: block; }

/* Slides are stacked by the script; only the active one is shown. */
.swn-slide[hidden] { display: none !important; }

/* ---------- hand-drawn rule used either side of a banner label ---------- */
.swn-rule {
  background-color: var(--sw-ink);
  -webkit-mask: var(--sw-underline-svg) center / 100% 100% no-repeat;
  mask: var(--sw-underline-svg) center / 100% 100% no-repeat;
}
.swn-rule--flip { transform: scaleX(-1); }

/* ---------- hatched placeholder for artwork not yet supplied ---------- */
.swn-hatch {
  background-image: repeating-linear-gradient(135deg, #E4E0D6 0 14px, #EDE9E0 14px 28px);
}

/* ---------- Elementor image widget: fill its frame ---------- */
.swn-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.swn-fill { display: block; }

/* Elementor wraps widgets; make image widgets inside a frame behave as blocks. */
.swn-frame > .elementor-widget-e-image,
.swn-frame > .e-image-base { display: block; width: 100%; }