/*

Swiper Stylesheet

    * Version: 1.0
    * Powered by House Of Scribes
    * https://houseofscribes.co.nz

    File Structure
     ↳ js/swiper.js
      ↳ partials/featured.php

    Breakpoints
    * Desktop: 1200px
    * Tablet: 992px
    * Mobile: 768px

    Contents
    * 01. Swiper
    * 02. Top
    * 03. Wrapper
    * 04. Bottom
    * 05. Pagination
    * 06. Animation
    * 07. Other
    * 08. Zoom
    * 09. Lightbox
    * 10. Arrows

*/




/* 01. Swiper */
/* -------------------------------------------- */

/* Swiper */
.swiper {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;

    margin-left: auto;
    margin-right: auto;
    position: relative;
    list-style: none;
    padding: 0;
    z-index: 1;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacer);
}




/* 02. Top */
/* -------------------------------------------- */

.swiper-top {
    display: flex;
    justify-content: space-between;
    gap: var(--spacer);
    padding-bottom: var(--spacer);
    border-bottom: var(--border);
}




/* 03. Wrapper */
/* -------------------------------------------- */

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box;

    flex-direction: row !important; /* Fixes spacing issues from base.css */
    gap: 0 !important; /* Fixes base.css code */
}

.swiper-wrapper .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block;
}

.swiper-backface-hidden .swiper-wrapper .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.swiper-wrapper .swiper-slide {
    transition: opacity var(--hover) !important;
}




/* 04. Bottom */
/* -------------------------------------------- */

.swiper-bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--spacer);
    margin-top: var(--spacer);
}

.swiper-bottom .swiper-button {
    padding: var(--button-padding-vertical) calc(var(--button-padding-vertical) * 1.5) !important;
    width: auto !important;
}

.swiper-bottom .swiper-button:last-of-type {
    width: 100% !important;
}




/* 05. Pagination */
/* -------------------------------------------- */

/* 2025/12/11 - When swiper buttons are in wp-block-buttons animation is not needed */
/* .swiper-button-prev,
.swiper-button-next {
    opacity: 1;
    transition: opacity (--hover);
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    cursor: pointer;
    opacity: 0.5;
} */

.swiper-button-disabled,
.swiper-button-disabled:hover {
    opacity: 0.5;
    cursor: not-allowed !important;
}




/* 06. Animation */
/* -------------------------------------------- */

.swiper-fade .swiper-slide {
    transition-property: opacity;
    pointer-events: none;
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-duplicate-active {
    opacity: 1;
    pointer-events: auto;
}

.swiper-fade .swiper-slide {
    opacity: 0;
}




/* 07. Other */
/* -------------------------------------------- */

.swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000;
}




/* 08. Zoom */
/* -------------------------------------------- */

/* data-zoom: the image is centred and contained in its slide, so it can scale */
.swiper-zoom-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.swiper-zoom-container > img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}




/* 09. Lightbox */
/* -------------------------------------------- */

/* data-lightbox: one full-screen <dialog> (js/swiper.js), a slider with zoom, and under it the prev / close / next buttons (icon buttons, like every other button) */
dialog.lightbox {
    width: 100vw;
    height: 100vh;
    height: 100svh;
    max-width: none;
    max-height: none;

    margin: 0;
    padding: var(--gutter);

    color: var(--text);
    background: var(--background);
    border: none;
}

dialog.lightbox[open] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacer);
}

dialog.lightbox::backdrop {
    background: var(--background);
}

dialog.lightbox .swiper-zoom-container > img {
    width: auto; /* not base.css's img width: 100% — the box is the photo's own size, so a click beside it is off the photo (and closes the lightbox) */
    max-height: calc(100svh - (var(--gutter) * 2) - var(--button-height) - var(--spacer));
}

dialog.lightbox .wp-block-buttons {
    justify-content: center;
}

dialog.lightbox .swiper-button-prev::after {
    content: var(--arrow-left);
}

dialog.lightbox .swiper-button-next::after {
    content: var(--arrow-right);
}




/* 10. Arrows */
/* -------------------------------------------- */

/* Plain arrows over a slider's bottom edge (.swiper-arrows inside the .swiper, e.g. the product gallery): just --arrow-left / --arrow-right, no border, padding or fill, prev at the start and next at the end. Soft at rest, solid while the slider is hovered or an arrow has keyboard focus (a disabled one stays soft). Drawn white with mix-blend-mode: difference, so each arrow inverts whatever is under it and reads on a light or dark image. Each has a --button-height square to tap. */
.swiper-arrows {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;

    display: flex;
    justify-content: space-between;
}

.swiper-arrows .swiper-button {
    min-width: var(--button-height);
    min-height: var(--button-height);

    color: #fff;
    mix-blend-mode: difference;
    background: transparent;
    border: none;
    cursor: pointer;

    opacity: 0.5;
    transition: opacity var(--hover);
}

.swiper:hover .swiper-arrows .swiper-button:not(.swiper-button-disabled),
.swiper-arrows .swiper-button:focus-visible {
    opacity: 1;
}

/* Hovering the arrows counts as hovering the photo: the slide's link fades (base.css's link hover) wherever the pointer is on the slider */
.swiper:has(> .swiper-arrows):hover .swiper-slide > a {
    opacity: 0.5;
}

.swiper-arrows .swiper-button-prev::after {
    content: var(--arrow-left);
}

.swiper-arrows .swiper-button-next::after {
    content: var(--arrow-right);
}