/**
 * Gorillah Banner — Front-end aligned to GorillaH DS.
 *
 * @package GorillahWeekb
 */

:root {
    --gwb-bg: #15191e;
    --gwb-surface: #181d24;
    --gwb-surface-soft: rgba(26, 31, 38, 0.7);
    --gwb-line: #353c41;
    --gwb-text: #e5e5e5;
    --gwb-text-soft: #a3a3a3;
    --gwb-cyan: #00ffff;
    --gwb-cyan-hover: #00b9b9;
    --gwb-radius: 6px;
    --gwb-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    --gwb-font-ui: "Jura", "Segoe UI", sans-serif;
    --gwb-font-body: "Open Sans", "Segoe UI", Arial, sans-serif;
}

.gwb-banner,
.gwb-banner * {
    box-sizing: border-box;
}

.gwb-banner {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    background: var(--gwb-surface);
}

.gwb-banner::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 18px;
    border-top: 2px solid var(--gwb-cyan);
    border-right: 2px solid var(--gwb-cyan);
    border-top-right-radius: var(--gwb-radius);
    pointer-events: none;
    z-index: 2;
}

.gwb-banner__picture {
    display: block;
    width: 100%;
}

.gwb-banner__image {
    display: block;
    width: 100% !important;
    height: auto;
}

.gwb-banner__button {
    position: absolute;
    left: 50% !important;
    right: auto !important;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    min-width: 42px;
    padding: 0 16px;
    border: 1px solid var(--gwb-cyan);
    border-radius: var(--gwb-radius);
    background: var(--gwb-cyan);
    color: #031519;
    font-family: var(--gwb-font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    max-width: calc(100% - 40px);
    margin: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 3;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.gwb-banner__button:hover,
.gwb-banner__button:focus {
    background: var(--gwb-cyan-hover);
    border-color: var(--gwb-cyan-hover);
    color: #031519;
}

.gwb-banner__button-text {
    display: inline-block;
    color: inherit;
    font: inherit;
    line-height: 1;
}

.gwb-banner__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: inherit;
    line-height: 1;
    flex-shrink: 0;
}

.gwb-banner__button .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.gwb-banner__button svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: currentColor;
}

.gwb-banner-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.gwb-banner-slider .swiper-wrapper {
    align-items: stretch;
}

.gwb-banner-slider .swiper-slide {
    height: auto;
}

.gwb-banner-slider .swiper-slide .gwb-banner {
    height: 100%;
}

.gwb-banner-slider > .swiper-pagination {
    z-index: 5;
    line-height: 1;
}

.gwb-banner-slider .swiper-pagination-bullet {
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--gwb-line);
    opacity: 1;
}

.gwb-banner-slider .swiper-pagination-bullet-active {
    background: var(--gwb-cyan);
}

.gwb-banner-slider > .swiper-pagination-fraction {
    bottom: 12px;
    color: var(--gwb-cyan);
    font-family: var(--gwb-font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.gwb-banner-slider > .swiper-pagination-progressbar {
    top: auto;
    bottom: 0;
    height: 3px;
    background: rgba(53, 60, 65, 0.65);
}

.gwb-banner-slider > .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--gwb-cyan);
}

.gwb-banner-slider .swiper-button-next,
.gwb-banner-slider .swiper-button-prev {
    width: 42px;
    height: 42px;
    border: 1px solid var(--gwb-line);
    border-radius: var(--gwb-radius);
    background: var(--gwb-surface-soft);
    color: var(--gwb-cyan);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.gwb-banner-slider .swiper-button-next::after,
.gwb-banner-slider .swiper-button-prev::after {
    font-size: 16px;
    font-weight: 700;
}

.gwb-banner-slider .swiper-button-next:hover,
.gwb-banner-slider .swiper-button-prev:hover,
.gwb-banner-slider .swiper-button-next:focus,
.gwb-banner-slider .swiper-button-prev:focus {
    border-color: var(--gwb-cyan);
    background: var(--gwb-cyan);
    color: #031519;
}

@media (max-width: 760px) {
    .gwb-banner__button {
        bottom: 12px;
        padding: 0 14px;
        max-width: calc(100% - 24px);
    }

    .gwb-banner-slider .swiper-button-next,
    .gwb-banner-slider .swiper-button-prev {
        width: 36px;
        height: 36px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE BANNER — Entry animations
   Each CSS-only effect is keyed off the data-gwb-effect attribute injected
   by PHP. animation-fill-mode:both ensures the "from" state (hidden/offset)
   is applied before the delay fires, preventing a flash of visible content.
═══════════════════════════════════════════════════════════════════════════ */

/* Shared wrapper */
.gwb-banner-single {
    position: relative;
    display: block;
    width: 100%;
}

.gwb-banner-single .gwb-banner {
    position: relative;
}

/* ── Keyframes ──────────────────────────────────────────────────────────── */

@keyframes gwb-entry-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes gwb-entry-slide {
    from { transform: translateX(48px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes gwb-entry-cube {
    from { transform: perspective(1000px) rotateY(-55deg); opacity: 0; }
    to   { transform: perspective(1000px) rotateY(0deg);   opacity: 1; }
}

@keyframes gwb-entry-flip {
    from { transform: perspective(1000px) rotateX(55deg) scale(0.92); opacity: 0; }
    to   { transform: perspective(1000px) rotateX(0deg)  scale(1);    opacity: 1; }
}

@keyframes gwb-entry-creative-stack {
    from { transform: translateX(-32px) scale(0.91); opacity: 0.25; }
    to   { transform: translateX(0)     scale(1);    opacity: 1; }
}

@keyframes gwb-entry-creative-scale {
    from { transform: scale(0.78); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* ── Effect rules ───────────────────────────────────────────────────────── */

/* Fade — simple opacity reveal */
.gwb-banner-single[data-gwb-effect="fade"] {
    animation: gwb-entry-fade 0.75s ease 0.05s both;
}

/* Slide — enters from the right */
.gwb-banner-single[data-gwb-effect="slide"] {
    animation: gwb-entry-slide 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s both;
}

/* Cube — Y-axis rotation reveal */
.gwb-banner-single[data-gwb-effect="cube"] {
    animation: gwb-entry-cube 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s both;
    transform-style: preserve-3d;
    overflow: visible;
}

/* Flip — X-axis rotation reveal */
.gwb-banner-single[data-gwb-effect="flip"] {
    animation: gwb-entry-flip 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s both;
    transform-style: preserve-3d;
    overflow: visible;
}

/* Creative Stack — slides in with a slight scale-down feel */
.gwb-banner-single[data-gwb-effect="creative-stack"] {
    animation: gwb-entry-creative-stack 0.75s cubic-bezier(0.34, 1.4, 0.64, 1) 0.05s both;
}

/* Creative Scale — zooms up from below scale */
.gwb-banner-single[data-gwb-effect="creative-scale"] {
    animation: gwb-entry-creative-scale 0.75s cubic-bezier(0.34, 1.4, 0.64, 1) 0.05s both;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHUTTER EFFECT — Strips act as horizontal blinds
   Closing: strips expand (scaleY 0→1) to cover the outgoing image.
   Opening: strips retract (scaleY 1→0) to reveal the new/entering image.
   The overlay is injected by JS both for sliders and single-banner entry.
═══════════════════════════════════════════════════════════════════════════ */

/* Overlay container — covers banner or full slider */
.gwb-shutter-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: inherit;
}

/* Individual strip */
.gwb-shutter-strip {
    flex: 1 1 0;
    /* Solid, fully-opaque panel — alpha 100% (rgba channel = 1.0) */
    background: var(--gwb-bg, #15191e);
    /* Default: strips retracted (invisible), ready to close */
    transform: scaleY(0);
    transform-origin: top center;
    will-change: transform;
    animation-fill-mode: both;
}

/* Alternate origin on even strips for a realistic bi-directional blind effect */
.gwb-shutter-strip:nth-child(even) {
    transform-origin: bottom center;
}

/* ── Keyframes ── */

@keyframes gwb-strip-close {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

@keyframes gwb-strip-open {
    from { transform: scaleY(1); }
    to   { transform: scaleY(0); }
}

/* ── Static closed state (strips fully covering — no animation) ── */
.gwb-shutter-overlay.gwb-shutter-closed .gwb-shutter-strip {
    transform: scaleY(1);
    animation: none;
}

/* ── Closing: strips expand to cover the image ── */
.gwb-shutter-overlay.gwb-shutter-closing .gwb-shutter-strip {
    animation-name: gwb-strip-close;
    animation-timing-function: ease-in;
}

/* ── Opening: strips retract to reveal the image ──
     animation-fill-mode:both ensures strips stay at scaleY(0)
     after the animation ends — image remains fully visible. ── */
.gwb-shutter-overlay.gwb-shutter-opening .gwb-shutter-strip {
    animation-name: gwb-strip-open;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}