/**
 * Pagestic CMS shared Swiper presentation.
 *
 * This file is loaded after Swiper's vendor CSS by every theme that renders a
 * carousel. It owns the structural fallback, control chrome, pagination,
 * focus states, disabled states, and no-JavaScript presentation. Individual
 * themes select a skin with data-swiper-skin instead of depending on Swiper's
 * unthemed defaults.
 */

.theme-swiper,
[data-swiper-scope] {
    --theme-swiper-accent: var(--primary, #334155);
    --theme-swiper-control-size: 3rem;
    --theme-swiper-control-radius: 9999px;
    --theme-swiper-control-offset: 1rem;
    --theme-swiper-control-bg: var(--surface, #fff);
    --theme-swiper-control-fg: var(--text-primary, #172033);
    --theme-swiper-control-border: var(--border, rgba(15, 23, 42, 0.14));
    --theme-swiper-control-hover-bg: var(--theme-swiper-accent);
    --theme-swiper-control-hover-fg: #fff;
    --theme-swiper-dot: var(--text-secondary, #64748b);
    --theme-swiper-dot-active: var(--primary, #334155);
    --theme-swiper-dot-radius: 9999px;
}

.theme-swiper[data-swiper-skin="universal"],
[data-swiper-scope][data-swiper-skin="universal"] {
    --theme-swiper-accent: var(--primary, #334155);
    --theme-swiper-control-radius: 0.9rem;
    --theme-swiper-dot-active: var(--primary, #334155);
}

.theme-swiper[data-swiper-skin="chic"],
[data-swiper-scope][data-swiper-skin="chic"] {
    --theme-swiper-accent: var(--primary, #334155);
    --theme-swiper-control-radius: 0;
    --theme-swiper-dot-active: var(--primary, #334155);
    --theme-swiper-dot-radius: 0;
}

.theme-swiper[data-swiper-skin="modern"],
[data-swiper-scope][data-swiper-skin="modern"] {
    --theme-swiper-accent: var(--accent, #6366f1);
    --theme-swiper-control-size: 2.9rem;
    --theme-swiper-control-radius: 9999px;
    --theme-swiper-control-bg: var(--surface, #fff);
    --theme-swiper-dot-active: var(--accent, #6366f1);
}

/* Minimal structural fallback if the vendor stylesheet is unavailable. */
.theme-swiper {
    position: relative;
    isolation: isolate;
    contain: inline-size;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    overflow: hidden;
}

[data-swiper-scope] {
    min-width: 0;
    min-height: 0;
    max-width: 100%;
}

.theme-swiper > .swiper-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    height: 100%;
    box-sizing: content-box;
}

.theme-swiper > .swiper-wrapper > .swiper-slide {
    position: relative;
    width: 100%;
    height: auto;
    flex-shrink: 0;
    min-width: 0;
}

.theme-swiper--cards {
    padding-bottom: 3.25rem;
}

.theme-swiper--cards > .swiper-wrapper {
    align-items: stretch;
}

.theme-swiper--cards > .swiper-wrapper > .swiper-slide {
    display: flex;
    height: auto;
}

.theme-swiper--cards > .swiper-wrapper > .swiper-slide > * {
    width: 100%;
}

.theme-swiper--gallery,
.theme-swiper--marquee {
    overflow: hidden;
}

/* Controls stay invisible until their own scoped Swiper is ready. */
.theme-swiper-control {
    --theme-swiper-control-transform: translateY(-50%);
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--theme-swiper-control-size);
    height: var(--theme-swiper-control-size);
    min-width: var(--theme-swiper-control-size);
    min-height: var(--theme-swiper-control-size);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid var(--theme-swiper-control-border);
    border-radius: var(--theme-swiper-control-radius);
    background: var(--theme-swiper-control-bg);
    color: var(--theme-swiper-control-fg);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    -webkit-user-select: none;
    user-select: none;
    transform: var(--theme-swiper-control-transform);
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        opacity 180ms ease,
        transform 220ms ease;
}

.theme-swiper-control.swiper-button-prev {
    left: var(--theme-swiper-control-offset);
    right: auto;
}

.theme-swiper-control.swiper-button-next {
    right: var(--theme-swiper-control-offset);
    left: auto;
}

/* Draw arrows without depending on Swiper's icon font. */
.theme-swiper-control::after {
    content: "";
    display: block;
    width: 0.62rem;
    height: 0.62rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    font-family: inherit;
    font-size: 0;
    line-height: 1;
}

.theme-swiper-control.swiper-button-prev::after {
    margin-left: 0.18rem;
    transform: rotate(-135deg);
}

.theme-swiper-control.swiper-button-next::after {
    margin-right: 0.18rem;
    transform: rotate(45deg);
}

[dir="rtl"] .theme-swiper-control.swiper-button-prev {
    right: var(--theme-swiper-control-offset);
    left: auto;
}

[dir="rtl"] .theme-swiper-control.swiper-button-next {
    right: auto;
    left: var(--theme-swiper-control-offset);
}

[dir="rtl"] .theme-swiper-control.swiper-button-prev::after {
    margin-right: 0.18rem;
    margin-left: 0;
    transform: rotate(45deg);
}

[dir="rtl"] .theme-swiper-control.swiper-button-next::after {
    margin-right: 0;
    margin-left: 0.18rem;
    transform: rotate(-135deg);
}

.theme-swiper-control--overlay {
    --theme-swiper-control-bg: rgba(15, 23, 42, 0.48);
    --theme-swiper-control-fg: #fff;
    --theme-swiper-control-border: rgba(255, 255, 255, 0.34);
    -webkit-backdrop-filter: blur(10px) saturate(1.25);
    backdrop-filter: blur(10px) saturate(1.25);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
}

.theme-swiper-control--surface {
    background: var(--surface, #fff);
    background: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
    color: var(--theme-swiper-accent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.swiper-initialized .theme-swiper-control[data-swiper-bound="true"],
.theme-swiper-scope-ready .theme-swiper-control[data-swiper-bound="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (hover: hover) {
    .theme-swiper-control:hover {
        border-color: var(--theme-swiper-control-hover-bg);
        background: var(--theme-swiper-control-hover-bg);
        color: var(--theme-swiper-control-hover-fg);
        transform: var(--theme-swiper-control-transform) scale(1.06);
    }
}

.theme-swiper-control:active {
    transform: var(--theme-swiper-control-transform) scale(0.96);
}

.theme-swiper-control:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow:
        0 0 0 5px var(--theme-swiper-accent),
        0 12px 30px rgba(15, 23, 42, 0.2);
}

.theme-swiper-control.swiper-button-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

.theme-swiper-control.swiper-button-lock,
.theme-swiper-pagination.swiper-pagination-lock {
    display: none !important;
}

.theme-swiper-control--desktop {
    display: none;
}

/* Pagination is fully reset so vendor defaults cannot leak into a theme. */
.theme-swiper-pagination.swiper-pagination {
    position: absolute;
    right: auto;
    bottom: 1.15rem;
    left: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: calc(100% - 7rem);
    min-height: 1.75rem;
    gap: 0.45rem;
    padding: 0.42rem 0.58rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 180ms ease;
}

.swiper-initialized .theme-swiper-pagination[data-swiper-bound="true"],
.theme-swiper-scope-ready .theme-swiper-pagination[data-swiper-bound="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.theme-swiper-pagination--overlay.swiper-pagination {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(15, 23, 42, 0.34);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    backdrop-filter: blur(8px) saturate(1.2);
}

.theme-swiper-pagination--cards.swiper-pagination {
    bottom: 0.25rem;
    border: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.theme-swiper-pagination .swiper-pagination-bullet {
    display: block;
    width: 0.55rem;
    height: 0.55rem;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: var(--theme-swiper-dot-radius);
    background: var(--theme-swiper-dot);
    box-shadow: none;
    opacity: 0.34;
    cursor: pointer;
    transition:
        width 220ms ease,
        background-color 180ms ease,
        opacity 180ms ease,
        transform 180ms ease;
}

.theme-swiper-pagination--overlay .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
}

.theme-swiper-pagination .swiper-pagination-bullet-active {
    width: 1.55rem;
    background: var(--theme-swiper-dot-active);
    opacity: 1;
}

.theme-swiper-pagination--overlay .swiper-pagination-bullet-active {
    background: #fff;
}

.theme-swiper-pagination .swiper-pagination-bullet:focus-visible {
    outline: 2px solid var(--theme-swiper-accent);
    outline-offset: 3px;
    opacity: 1;
}

.theme-swiper-pagination.swiper-pagination-fraction {
    min-width: 4.25rem;
    color: var(--theme-swiper-control-fg);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.theme-swiper-pagination--overlay.swiper-pagination-fraction {
    color: #fff;
}

@media (hover: hover) {
    .theme-swiper-pagination .swiper-pagination-bullet:hover {
        opacity: 0.8;
        transform: scale(1.15);
    }
}

/* Gallery controls deliberately sit in document flow below the images. */
.theme-swiper-controls {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 1.75rem;
}

.theme-swiper-controls .theme-swiper-control {
    --theme-swiper-control-transform: translate(0, 0);
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    flex: 0 0 var(--theme-swiper-control-size);
}

.theme-swiper-controls .theme-swiper-pagination {
    position: relative;
    inset: auto;
    max-width: min(18rem, calc(100vw - 10rem));
    padding-inline: 0.35rem;
    background: transparent;
    transform: none;
}

/* Graceful output when JavaScript or Swiper is absent, unnecessary, or motion is reduced. */
.theme-swiper-static .theme-swiper-control,
.theme-swiper-static .theme-swiper-pagination,
.theme-swiper-unavailable .theme-swiper-control,
.theme-swiper-unavailable .theme-swiper-pagination {
    display: none !important;
}

.theme-swiper:not(.swiper-initialized):not(.theme-swiper--marquee) {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
}

.theme-swiper:not(.swiper-initialized):not(.theme-swiper--marquee) > .swiper-wrapper {
    transform: none !important;
}

.theme-swiper:not(.swiper-initialized):not(.theme-swiper--marquee) > .swiper-wrapper > .swiper-slide {
    width: 100% !important;
    scroll-snap-align: start;
}

.theme-swiper--marquee:not(.swiper-initialized) {
    overflow: visible;
}

.theme-swiper--marquee:not(.swiper-initialized) > .swiper-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    transform: none !important;
}

.theme-swiper--marquee:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
    width: auto !important;
    flex: 0 0 auto;
}

@media (min-width: 768px) {
    .theme-swiper-control--desktop {
        display: flex;
    }
}

@media (max-width: 639px) {
    .theme-swiper,
    [data-swiper-scope] {
        --theme-swiper-control-size: 2.75rem;
        --theme-swiper-control-offset: 0.65rem;
    }

    .theme-swiper-pagination.swiper-pagination {
        gap: 0.35rem;
    }

    .theme-swiper-pagination .swiper-pagination-bullet {
        width: 0.48rem;
        height: 0.48rem;
    }

    .theme-swiper-pagination .swiper-pagination-bullet-active {
        width: 1.25rem;
    }
}

@media (max-width: 420px) {
    .theme-swiper--hero .theme-swiper-control {
        --theme-swiper-control-transform: translate(0, 0);
        top: auto;
        bottom: 0.72rem;
    }

    .theme-swiper--hero .theme-swiper-pagination {
        bottom: 0.88rem;
        max-width: calc(100% - 8rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-swiper-control,
    .theme-swiper-pagination,
    .theme-swiper-pagination .swiper-pagination-bullet {
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .theme-swiper-control {
        border-color: ButtonText;
        background: Canvas;
        color: ButtonText;
        box-shadow: none;
        forced-color-adjust: auto;
    }

    .theme-swiper-control:hover,
    .theme-swiper-control:focus-visible {
        border-color: Highlight;
        background: Highlight;
        color: HighlightText;
        outline-color: Highlight;
        box-shadow: none;
    }

    .theme-swiper-pagination,
    .theme-swiper-pagination--overlay.swiper-pagination {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .theme-swiper-pagination .swiper-pagination-bullet,
    .theme-swiper-pagination--overlay .swiper-pagination-bullet {
        background: ButtonText;
        opacity: 1;
    }

    .theme-swiper-pagination .swiper-pagination-bullet-active,
    .theme-swiper-pagination--overlay .swiper-pagination-bullet-active {
        background: Highlight;
    }
}