/*------------------------------------------------------------------*\
    4. COMPONENTS - Hero
\*------------------------------------------------------------------*/

/* ── Hero fluid tokens ── */
.section-hero-carousel {
    --hero-arrow-size: clamp(5rem, 8.333vmin, 9.38rem);
    --hero-arrow-icon-w: clamp(1.88rem, -0.17rem + 1.29vw, 2.92rem);
    --hero-arrow-icon-h: clamp(1.09rem, -0.10rem + 0.74vw, 1.68rem);
    --hero-ring-inset: clamp(-6px, -0.156vw, -3px);
}

/* Highlight text */
.hero-highlight-text {
    color: var(--color-accent);
}

/*------------------------------------------------------------------*\
    Elementor Slides Widget Button
\*------------------------------------------------------------------*/

.section-hero-carousel .elementor-slides .elementor-slide-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: var(--fluid-slide-btn-text);
    padding-right: 1.3021vw;
    z-index: 2;
}

.section-hero-carousel .elementor-slides .elementor-slide-button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(14%, -50%);
    width: var(--fluid-slide-btn-circle);
    height: var(--fluid-slide-btn-circle);
    border-radius: 50%;
    background-color: var(--color-accent);
    opacity: 1;
    z-index: -1;
}

.section-hero-carousel .elementor-slides .elementor-slide-button::after {
    content: '';
    position: absolute;
    right: 0.0521vw;
    top: 50%;
    transform: translateY(-50%);
    width: var(--fluid-slide-btn-arrow);
    height: var(--fluid-slide-btn-arrow);
    background-image: url('/makeitvisually/wp-content/uploads/2026/02/arrow-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

/*------------------------------------------------------------------*\
    Elementor Slides Navigation Arrows
\*------------------------------------------------------------------*/

.section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-prev,
.section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-next {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hero-arrow-size);
    height: var(--hero-arrow-size);
    border-radius: 50%;
    border: 1px solid var(--color-border-light);
    background: transparent;
    transition: var(--transition-base);
}

.section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-prev {
    left: 90% !important;
    top: 50% !important;
    transform: translateY(calc(-100% - 8px)) !important;
}

.section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-next {
    left: 90% !important;
    top: 50% !important;
    transform: translateY(8px) !important;
}

/* Hide default Elementor SVG */
.section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-prev svg,
.section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-next svg {
    display: none !important;
}

/* Custom SVG arrows from Figma */
.section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-prev::after,
.section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-next::after {
    content: '';
    display: block;
    width: var(--hero-arrow-icon-w);
    height: var(--hero-arrow-icon-h);
    background-image: url('/makeitvisually/wp-content/uploads/2026/02/arrow-slider-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-prev::after {
    transform: rotate(360deg);
}

.section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-next::after {
    transform: rotate(180deg);
}

/* Hover state for arrows */
.section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-prev:hover::after,
.section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-next:hover::after {
    filter: brightness(0) saturate(100%) invert(76%) sepia(51%) saturate(1000%) hue-rotate(351deg) brightness(101%) contrast(101%);
}

/* Arrow circle fill effect */
.section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-prev,
.section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-next {
    overflow: visible;
    --fill-angle: 0deg;
}

/* Fill using ::before - circular progress controlled by CSS custom property */
.section-hero-carousel .elementor-arrows-position-inside
.elementor-swiper-button-prev::before,
.section-hero-carousel .elementor-arrows-position-inside
.elementor-swiper-button-next::before {

    --ring-size: 2px;

    content: '';
    position: absolute;
    inset: var(--hero-ring-inset);
    border-radius: 50%;

    background: conic-gradient(
        from -90deg,
        var(--color-accent) var(--fill-angle),
        transparent 0
    );

    -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - var(--ring-size) - 0.5px),
        #000 calc(100% - var(--ring-size)),
        #000 100%
    );

    mask: radial-gradient(
        farthest-side,
        transparent calc(100% - var(--ring-size) - 0.5px),
        #000 calc(100% - var(--ring-size)),
        #000 100%
    );

    transform: translateZ(0); /* improves rendering */
    will-change: transform;

    z-index: 2;
    pointer-events: none;
}

/* Ensure arrow icon stays visible on top */
.section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-prev::after,
.section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-next::after {
    position: relative;
    z-index: 1;
}

/* ---- Mobile ≤768px ---- */
@media (max-width: 768px) {

    .section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-prev {
        left: 84% !important;
        top: 84% !important;
    }

    .section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-next {
        left: 84% !important;
        top: 83% !important;
    }

    .section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-prev,
    .section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-next {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1px solid var(--color-border-light);
        background: transparent;
        transition: var(--transition-base);
    }

    .section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-prev::after,
    .section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-next::after {
        content: '';
        width: 15px;
        height: 9px;
    }

    .section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-prev::after {
        transform: rotate(90deg);
    }

    .section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-next::after {
        transform: rotate(270deg);
    }

    /* Slide button — keep original fixed values on mobile */
    .section-hero-carousel .elementor-slides .elementor-slide-button {
        font-size: inherit;
        padding-right: 0;
    }

    .section-hero-carousel .elementor-slides .elementor-slide-button::before {
        width: 46px;
        height: 46px;
    }

    .section-hero-carousel .elementor-slides .elementor-slide-button::after {
        position: relative;
        width: 15px;
        height: 15px;
        right: auto;
        top: auto;
        transform: none;
        margin-left: 10px;
        flex-shrink: 0;
    }
}

/*------------------------------------------------------------------*\
    Section Slider Carousel - Overlay
\*------------------------------------------------------------------*/

.section-slider-carousel {
    position: relative;
}

.section-slider-carousel .swiper-wrapper .swiper-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/makeitvisually/wp-content/uploads/2026/02/overlay-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

.hero-slider .swiper-wrapper .swiper-slide-contents {
    z-index: 2;
}

.hero-slider .elementor-widget-container {
    position: relative;
    z-index: 0;
}

/*------------------------------------------------------------------*\
    Section Slider Carousel - Vertical Pagination Bullets
\*------------------------------------------------------------------*/

.hero-slider .swiper-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    left: 90%;
    top: 50%;
    transform: translateY(-50%);
    width: auto !important;
    height: 444px;
    z-index: var(--z-pagination);
}

/* Vertical line connecting bullets — top/height set via JS custom properties */
.hero-slider .swiper-pagination::before {
    content: '';
    position: absolute;
    left: 50%;
    /* OLD: fixed values — misaligned with real bullet positions */
    /* top: 5px; */
    /* height: calc(100% - 10px); */
    top: var(--line-top, 5px);
    height: var(--line-height, calc(100% - 10px));
    transform: translateX(-50%);
    width: 1px;
    background-color: var(--color-border-light);
    z-index: 0;
}

/* Progress line - animated with GSAP, top set via JS */
.hero-slider .pagination-progress-line {
    position: absolute;
    left: 50%;
    /* OLD: fixed top — now set dynamically by JS */
    /* top: 5px; */
    top: 0;
    transform: translateX(-50%);
    width: 1px;
    height: 0;
    background-color: var(--color-accent);
    z-index: 1;
    pointer-events: none;
}

.hero-slider .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: var(--color-border-light);
    border-radius: 50%;
    opacity: 1;
    transition: var(--transition-base);
    z-index: 1;
    position: relative;
}

.hero-slider .swiper-pagination-bullet-active {
    background-color: var(--color-accent);
}

/* First bullet - current slide number */
.hero-slider .swiper-pagination-bullet.pagination-number-first {
    width: auto;
    height: auto;
    background: transparent !important;
    border-radius: 0;
    font-size: var(--fluid-pagination-number);
    color: var(--color-accent) !important;
    font-weight: 400;
    margin-top: var(--fluid-pagination-mt);
}

/* Last bullet - total slides number */
.hero-slider .swiper-pagination-bullet.pagination-number-last {
    width: auto;
    height: auto;
    background: transparent !important;
    border-radius: 0;
    font-size: var(--fluid-pagination-number);
    color: var(--color-text-muted) !important;
    font-weight: 400;
    margin-bottom: var(--fluid-pagination-mb);
}

/* Arrow Button */
.miv-portfolio-button {
    position: absolute;
    right: 7.396vw;
    bottom: 46px;
    width: 35px;
    height: 35px;
    background: url('/makeitvisually/wp-content/uploads/2026/02/arrow-icon.svg') no-repeat center;
    background-size: contain;
    font-size: 0;
    color: transparent;
    transition: transform 0.3s ease;
}

.portfolio-item:hover .miv-portfolio-button {
    transform: translateX(0.5rem);
}

@media screen and (max-width: 1023px) {
    .swiper-pagination.swiper-pagination-bullets {
        display: none;
    }
}

/*------------------------------------------------------------------*\
    Hero Drag Hint
\*------------------------------------------------------------------*/

.hero-drag-hint {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--fluid-drag-hint-gap);
    z-index: var(--z-pagination);
    pointer-events: none;
    user-select: none;
}

.hero-drag-hint__label {
    font-size: var(--fluid-drag-hint);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text);
}

.hero-drag-hint__arrow--left,
.hero-drag-hint__arrow--right {
    display: block;
    width: var(--fluid-drag-hint-line-w);
    height: var(--fluid-drag-hint-line-h);
    background-color: var(--color-text-soft);
    position: relative;
}

.hero-drag-hint__arrow--left::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: var(--fluid-drag-hint-chevron);
    height: var(--fluid-drag-hint-chevron);
    border-left: var(--fluid-drag-hint-line-h) solid var(--color-text);
    border-bottom: var(--fluid-drag-hint-line-h) solid var(--color-text);
}

.hero-drag-hint__arrow--right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: var(--fluid-drag-hint-chevron);
    height: var(--fluid-drag-hint-chevron);
    border-right: var(--fluid-drag-hint-line-h) solid var(--color-text);
    border-top: var(--fluid-drag-hint-line-h) solid var(--color-text);
}

@keyframes hero-hint-nudge {
    0%, 100% { transform: translateX(0); }
    50%       { transform: translateX(0.2604vw); }
}

.hero-drag-hint__arrow--right {
    animation: hero-hint-nudge 1.4s ease-in-out infinite;
}

.hero-drag-hint__arrow--left {
    animation: hero-hint-nudge 1.4s ease-in-out infinite reverse;
}

/*------------------------------------------------------------------*\
    Section Slider Carousel - Pagination large screens
\*------------------------------------------------------------------*/

/* QHD 2560x1440 - arrow doubled vs 2560x1080 */
@media screen and (min-width: 2560px) and (min-height: 1350px) {
    .section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-prev::after,
    .section-hero-carousel .elementor-arrows-position-inside .elementor-swiper-button-next::after {
        width: 2.2rem;
        height: 2.2rem;
    }
}

/* QHD 2560px */
@media screen and (min-width: 2560px) {
    .hero-slider .swiper-pagination { height: 36.875rem; }
    .hero-slider .swiper-pagination-bullet { width: 0.8125rem; height: 0.8125rem; }
}

/* 4K 3840px */
@media screen and (min-width: 3200px) {
    .hero-slider .swiper-pagination { height: 55.5rem; }
    .hero-slider .swiper-pagination::before,
    .hero-slider .pagination-progress-line { width: 0.125rem; }
    .hero-slider .swiper-pagination-bullet { width: 1.25rem; height: 1.25rem; }
}

/* Tall viewports — 1440px height (QHD, ultrawide) +15% */
@media screen and (min-width: 1024px) and (min-height: 1440px) {
    .hero-slider .swiper-pagination-bullet.pagination-number-first  { font-size: 1.1vw;  margin-top: -1.797vw; }
    .hero-slider .swiper-pagination-bullet.pagination-number-last   { font-size: 1.1vw;  margin-bottom: -1.198vw; }
}

/* Tall viewports — 2160px height (4K) +25% */
@media screen and (min-width: 1024px) and (min-height: 2160px) {
    .hero-slider .swiper-pagination-bullet.pagination-number-first  { font-size: 1.5vw; margin-top: -1.9531vw; }
    .hero-slider .swiper-pagination-bullet.pagination-number-last   { font-size: 1.5vw; margin-bottom: -1.3021vw; }
}