/* vemodalen.es static archive — overrides for the JS-stripped Squarespace markup.
   Squarespace normally uses JavaScript to (a) fade images in once "loaded" and
   (b) absolutely-position gallery tiles. With the JS removed we force images
   visible and lay galleries out with CSS grid. */

/* --- force every image visible (Squarespace hides them until JS adds .loaded) --- */
img,
img.thumb-image,
.sqs-image img,
[data-image] {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

/* --- page banner / hero image ---
   Squarespace's JS sizes the banner image as a cover-crop (scaled + offset in an
   overflow:hidden box). With the JS gone, force the same via object-fit:cover.
   The per-image focal point is applied inline (object-position) by the build. */
.banner-thumbnail-wrapper,
#thumbnail,
.index-section-wrapper .section-background,
.page-banner-image-wrapper,
.section-background {
  overflow: hidden !important;
}
.banner-thumbnail-wrapper img,
#thumbnail img,
.section-background img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 50%;   /* default; overridden inline per focal point */
  display: block;
}

/* ================== GALLERY BLOCKS (grid / stacked / slideshow) ==================
   Squarespace lays gallery tiles out with JavaScript (absolute-positioned, sized
   in px). With the JS gone we restore a static flow. GRID galleries have
   autoCrop on: each tile is cropped (object-fit:cover) to the gallery's own
   aspect ratio (square / standard / standard-vertical / …) in the configured
   number of columns — matching the live site. STACKED/SLIDESHOW show full images. */
[class*="sqs-gallery-block-"].sqs-gallery-container,
[class*="sqs-gallery-block-"] .sqs-gallery {
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
[class*="sqs-gallery-block-"] .slide {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  display: block;
}

/* ---- GRID: N columns from per-row; tiles cropped to the gallery aspect ratio ---- */
.sqs-gallery-block-grid .sqs-gallery {
  display: grid;
  gap: 16px;
  align-items: start;
}
.sqs-gallery-thumbnails-per-row-1 .sqs-gallery { grid-template-columns: 1fr; }
.sqs-gallery-thumbnails-per-row-2 .sqs-gallery { grid-template-columns: repeat(2, 1fr); }
.sqs-gallery-thumbnails-per-row-3 .sqs-gallery { grid-template-columns: repeat(3, 1fr); }
.sqs-gallery-thumbnails-per-row-4 .sqs-gallery { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 767px) {
  .sqs-gallery-thumbnails-per-row-3 .sqs-gallery,
  .sqs-gallery-thumbnails-per-row-4 .sqs-gallery { grid-template-columns: repeat(2, 1fr); }
}
/* keep the tile/anchor wrappers as simple static blocks (no JS positioning).
   padding:0 removes Squarespace's intrinsic-ratio spacer (padding-bottom:150%
   etc.) which otherwise DOUBLES each tile's height since our image already
   flows in-line with its own aspect-ratio. */
.sqs-gallery-block-grid .slide .margin-wrapper,
.sqs-gallery-block-grid .slide .margin-wrapper > a,
.sqs-gallery-block-grid .slide .image-slide-anchor {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}
/* the IMAGE itself is the aspect-ratio box: full column width, cropped (cover)
   to the gallery's ratio. No absolute positioning needed. */
.sqs-gallery-block-grid .slide img,
.sqs-gallery-block-grid .sqs-gallery img.thumb-image {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1;   /* default square; overridden per aspect-ratio class */
  display: block;
  cursor: zoom-in;
  background: #f2f2f2;
}
.sqs-gallery-block-grid.sqs-gallery-aspect-ratio-square .slide img,
.sqs-gallery-block-grid.sqs-gallery-aspect-ratio-square img.thumb-image            { aspect-ratio: 1 / 1; }
.sqs-gallery-block-grid.sqs-gallery-aspect-ratio-standard .slide img,
.sqs-gallery-block-grid.sqs-gallery-aspect-ratio-standard img.thumb-image          { aspect-ratio: 3 / 2; }
.sqs-gallery-block-grid.sqs-gallery-aspect-ratio-standard-vertical .slide img,
.sqs-gallery-block-grid.sqs-gallery-aspect-ratio-standard-vertical img.thumb-image { aspect-ratio: 2 / 3; }
.sqs-gallery-block-grid.sqs-gallery-aspect-ratio-four-three .slide img,
.sqs-gallery-block-grid.sqs-gallery-aspect-ratio-four-three img.thumb-image        { aspect-ratio: 4 / 3; }
.sqs-gallery-block-grid.sqs-gallery-aspect-ratio-three-four-vertical .slide img,
.sqs-gallery-block-grid.sqs-gallery-aspect-ratio-three-four-vertical img.thumb-image { aspect-ratio: 3 / 4; }
.sqs-gallery-block-grid.sqs-gallery-aspect-ratio-widescreen .slide img,
.sqs-gallery-block-grid.sqs-gallery-aspect-ratio-widescreen img.thumb-image        { aspect-ratio: 16 / 9; }

/* ---- STACKED / SLIDESHOW / SLIDER: single column, full images (no crop) ---- */
.sqs-gallery-block-stacked .sqs-gallery,
.sqs-gallery-block-slideshow .sqs-gallery,
.sqs-gallery-block-slider .sqs-gallery { display: block; }
.sqs-gallery-block-stacked .slide,
.sqs-gallery-block-slideshow .slide,
.sqs-gallery-block-slider .slide { margin: 0 auto 16px !important; }
.sqs-gallery-block-stacked .slide .margin-wrapper,
.sqs-gallery-block-slideshow .slide .margin-wrapper,
.sqs-gallery-block-slider .slide .margin-wrapper,
.sqs-gallery-block-stacked .slide a,
.sqs-gallery-block-slideshow .slide a,
.sqs-gallery-block-slider .slide a { position: static !important; width: auto !important; height: auto !important; display: block; }
.sqs-gallery-block-stacked .slide img,
.sqs-gallery-block-slideshow .slide img,
.sqs-gallery-block-slider .slide img {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: fill;
  display: block;
  cursor: zoom-in;
}
/* gallery meta/caption overlays that relied on JS hover positioning */
.sqs-gallery-block-meta { position: static !important; }

/* ================== SUMMARY BLOCKS (blog lists: home, issue index pages) ==================
   Summary "autogrid/grid" designs are JS-laid-out. Render them as a uniform
   2-column grid of SQUARE thumbnails (owner's preference), cropped to 1:1 with
   the image's focal point. Clicking a thumbnail navigates to its post. */
.summary-item-list-container {
  position: static !important;
  height: auto !important;
  width: auto !important;
  overflow: visible !important;
  transform: none !important;
}
/* item list -> uniform 2-column grid (kills masonry / flex carousel strips) */
.summary-item-list-container .summary-item-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  column-count: auto !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  white-space: normal !important;
  align-items: start;
}
/* list design stays a single column */
.summary-block-setting-design-list .summary-item-list { grid-template-columns: 1fr !important; }
.summary-item-list-container .summary-item {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  float: none !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  display: block;
  margin: 0 !important;
  opacity: 1 !important;
}
.summary-item-list-container .summary-thumbnail-outer-container,
.summary-item-list-container .summary-thumbnail-container,
.summary-item-list-container .summary-thumbnail {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  transform: none !important;
}
/* SQUARE thumbnails: crop to 1:1 (focal point applied inline by the build) */
.summary-item-list-container .summary-thumbnail img,
.summary-item-list-container .summary-item img {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block;
}
/* hide carousel prev/next controls (they need JS) */
.summary-carousel-pager,
.summary-block .sqs-gallery-controls { display: none !important; }
@media (max-width: 767px) { .summary-item-list-container .summary-item-list { grid-template-columns: 1fr; } }

/* single content images: subtle zoom affordance */
.sqs-block-image img.vm-img { cursor: zoom-in; }

/* hide UI that only works with Squarespace JS */
.sqs-gallery-block-loading,
.sqs-gallery-blockslideshow-controls,
.sqs-gallery-block-slideshow .sqs-gallery-controls,
.loading-indicator,
#sqs-cmp-loader,
.sqs-cookie-banner-v2,
.sqs-announcement-bar-dropzone { display: none !important; }

/* keep long pages from overflowing horizontally */
img, video, iframe { max-width: 100%; }

/* ===================== HEADER FOLDER NAV (Año N) =====================
   The saved pages carry <html class="touch-styles">, which disables
   Squarespace's hover dropdown and hides the subnav (height:0 / transform) until
   a JS-toggled .active class appears. With the JS removed, we force the subnav
   open on hover (desktop, mouse) and on tap (.active / .vm-open, added by our
   script). !important is needed to beat Squarespace's own hiding rules. */
.nav-wrapper .folder { position: relative; }
.folder-toggle { cursor: pointer; }
.nav-wrapper .folder .subnav {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.nav-wrapper .folder:hover .subnav,
.nav-wrapper .folder:focus-within .subnav,
.nav-wrapper .folder-toggle.active ~ .subnav,
.nav-wrapper .folder.vm-open .subnav {
  height: auto !important;
  max-height: 999px !important;
  overflow: visible !important;
  opacity: 1 !important;
  padding: 12px 4px !important;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  z-index: 10000;
  white-space: nowrap;
  text-align: center;
}
.nav-wrapper .folder:hover .subnav > div,
.nav-wrapper .folder:focus-within .subnav > div,
.nav-wrapper .folder-toggle.active ~ .subnav > div,
.nav-wrapper .folder.vm-open .subnav > div { opacity: 1 !important; }
.nav-wrapper .folder .subnav .collection { padding: 4px 16px; }
/* narrow screens: expand inline under the toggle instead of an absolute dropdown */
@media (max-width: 767px) {
  .nav-wrapper .folder .subnav {
    position: static !important;
    transform: none !important;
    box-shadow: none;
    text-align: left;
    padding: 0 0 0 14px !important;
  }
}

/* ============================ LIGHTBOX ============================ */
.vm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 12, 12, 0.94);
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* never intercept clicks while closed */
  transition: opacity 0.28s ease;
  -webkit-user-select: none;
  user-select: none;
}
.vm-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.vm-lightbox__stage {
  position: relative;
  max-width: 94vw;
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.vm-lightbox__img {
  max-width: 94vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  transform: scale(0.985);
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
  background: #1a1a1a;
}
.vm-lightbox.is-open .vm-lightbox__img { opacity: 1; transform: scale(1); }
.vm-lightbox__cap {
  color: #eee;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 12px;
  text-align: center;
  max-width: 80vw;
  min-height: 1em;
  opacity: 0.85;
}
.vm-lightbox__btn {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
  padding: 12px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.vm-lightbox__btn:hover { opacity: 1; }
.vm-lightbox__close { top: 14px; right: 16px; font-size: 34px; }
.vm-lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 48px; }
.vm-lightbox__prev { left: 8px; }
.vm-lightbox__next { right: 8px; }
.vm-lightbox__count {
  position: absolute;
  top: 18px;
  left: 20px;
  color: #fff;
  opacity: 0.6;
  font-size: 13px;
}
@media (max-width: 640px) {
  .vm-lightbox__nav { font-size: 34px; padding: 8px; }
  .vm-lightbox__close { font-size: 28px; }
}
body.vm-lb-open { overflow: hidden; }