/*
 * Screws Blocks — two-level Gallery (projects -> images).
 *
 * Layered on top of the existing .gallery rules in styles.css. Adds only what
 * the nested structure needs:
 *   - .sg-images : the per-project image carousel becomes the full-bleed
 *                  background layer of each project slide (replacing the old
 *                  single absolute .gallery__image).
 *   - center arrows : positioning was keyed to .gallery-prev/.gallery-next in
 *                     styles.css; re-key to the new .sg-img-prev/.sg-img-next.
 *   - per-project image thumbnails live at the gallery level (one strip per
 *     project, only the active one shown via .is-active). The strips keep their
 *     original .gallery__slider_thumb styling thanks to display:contents on the
 *     wrapper.
 *
 * Scale matches the em()-based source (1rem = 16px base).
 */

/* ----- per-project image carousel = full-bleed background ----- */
/* No z-index here on purpose: a stacking context would trap the center arrows
   (z-index:2) below the glassy text card (z-index:1). Without it, the arrows
   compete at the slide-container level and paint above the card. */
.gallery .gallery__image_slider.sg-images {
    position: absolute;
    inset: 0;
}

.gallery .gallery__image_slider.sg-images,
.gallery .gallery__image_slider.sg-images .swiper-wrapper,
.gallery .gallery__image_slider.sg-images .swiper-slide {
    height: 100%;
}

/* each image fills its slide (override the old absolute .gallery__image) */
.gallery .gallery__image_slider.sg-images .gallery__image {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* clicking the image advances it — but ONLY on the active project slide.
   Fade stacks every project slide and sets non-active ones pointer-events:none;
   re-enabling images/arrows unconditionally lets the topmost (last, non-active)
   slide swallow the clicks. Scope to the active project slide so only the
   visible project is interactive. */
.gallery .swiper-slide-active > .gallery__slide_container .gallery__image img {
    pointer-events: auto;
    cursor: pointer;
}

/* keep the glassy text card above the image background */
.gallery .gallery__slide_container > .gallery__text_block {
    position: relative;
    z-index: 1;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* text card shows only on the project's first image (toggled by gallery.js) */
.gallery .gallery__slide_container > .gallery__text_block.sg-text-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ----- center arrows: always visible over the image ----- */
/* display:flex with !important overrides Swiper's .swiper-button-lock
   (display:none) so the arrows stay visible even on single-image projects. */
.gallery .gallery__arrow_center.sg-img-prev,
.gallery .gallery__arrow_center.sg-img-next {
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

/* arrows are interactive only on the active project slide — fade keeps
   non-active project slides pointer-events:none, so their stacked arrows
   can't steal clicks. (No pointer-events override here on purpose.) */
.gallery .swiper-slide-active > .gallery__slide_container > .gallery__arrow_center {
    pointer-events: auto;
}

/* re-key positioning to the image-nav hooks */
.gallery .gallery__arrow_center.sg-img-prev {
    left: 1.875rem;
}
.gallery .gallery__arrow_center.sg-img-next {
    right: 1.875rem;
}

@media (max-width: 1280px) {
    .gallery .gallery__arrow_center.sg-img-prev { left: 1rem; }
    .gallery .gallery__arrow_center.sg-img-next { right: 1rem; }
}

@media (max-width: 1024px) and (orientation: portrait) {
    .gallery .gallery__arrow_center.sg-img-prev { left: 0.625rem; }
    .gallery .gallery__arrow_center.sg-img-next { right: 0.625rem; }
}

@media (max-width: 360px) and (orientation: portrait) {
    .gallery .gallery__arrow_center { display: none; }
}

/* ----- gallery-level image thumbnails (one strip per project) ----- */
/* display:contents lets each .gallery__slider_thumb keep its original layout
   position/size from styles.css, as if it were a direct child of .container. */
.gallery .gallery__images_thumbs {
    display: contents;
}
.gallery .gallery__images_thumbs .sg-images-thumb {
    display: none;
}
.gallery .gallery__images_thumbs .sg-images-thumb.is-active {
    display: block;
}

/* ----- bottom image counter: orange current (old rule keyed to .count-1) ----- */
.gallery .gallery__navigation_bottom_text .sg-img-current {
    color: #F6941E;
}