/*
 * Slider strelice — hero.
 *
 * Koristi se Flickityjeva ugrađena strelica (SVG koji Flickity sam generiše),
 * bez ijednog dodatnog asset fajla. Mi dajemo samo oblik pozadine i boje.
 *
 * Oblik: bezier path 42x42 iz Figme, node 2340-5042, preko clip-path: path().
 * Desna strelica koristi isti path rotiran 180° oko centra, kako je i u Figmi
 * (shape wrapper ima rotate-180). Koordinate preračunate (x,y) -> (42-x, 42-y).
 *
 * Vidi .claude/rules/primitives.md, sekcija "Slider strelica".
 *
 * Napomena o !important: Salient postavlja
 *   .flickity-prev-next-button { background-color: transparent !important; }
 * pa se pozadina ne može dobiti specifičnošću. Ovo je jedini !important ovdje
 * i postoji samo zato što nadjačava tuđi !important.
 */

.custom-hero-section .flickity-button.flickity-prev-next-button {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 0;
    transform: translateY(-50%);
    background-color: var(--color-surface-alt) !important;
    color: var(--color-text);
    box-shadow: none;
    cursor: pointer;
    transition:
        background-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}

.custom-hero-section .flickity-button.flickity-prev-next-button.previous {
    left: var(--space-1);
    clip-path: path('M42 24.36C42 35.958 34.1711 42 23.0192 42C11.8673 42 0 30.498 0 18.9C0 7.30202 11.8673 0 23.0192 0C34.1711 0 42 12.762 42 24.36Z');
}

.custom-hero-section .flickity-button.flickity-prev-next-button.next {
    right: var(--space-1);
    clip-path: path('M0 17.64C0 6.042 7.8289 0 18.9808 0C30.1327 0 42 11.502 42 23.1C42 34.698 30.1327 42 18.9808 42C7.8289 42 0 29.238 0 17.64Z');
}

/*
 * Flickityjeva strelica ima viewBox 0 0 100 100, a sam path zauzima x 10..70,
 * dakle njegov centar je na x=40, deset jedinica lijevo od centra viewBoxa.
 * Zato se SVG pomjera za 10% svoje širine da glif završi tačno u sredini dugmeta.
 * Za .next Flickity rotira path (translate(100,100) rotate(180)), pa je pomak obrnut.
 */
.custom-hero-section .flickity-button.flickity-prev-next-button svg.flickity-button-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.custom-hero-section .flickity-button.flickity-prev-next-button.previous svg.flickity-button-icon {
    margin-left: 1.4px;
}

.custom-hero-section .flickity-button.flickity-prev-next-button.next svg.flickity-button-icon {
    margin-left: -1.4px;
}

/* Salient postavlja fill: #fff, što bi na bijeloj pozadini bilo nevidljivo. */
.custom-hero-section .flickity-button.flickity-prev-next-button .arrow {
    fill: currentColor;
    transition: fill var(--dur-fast) var(--ease-out);
}

.custom-hero-section .flickity-button.flickity-prev-next-button:hover,
.custom-hero-section .flickity-button.flickity-prev-next-button:focus-visible {
    background-color: var(--color-primary-hover) !important;
    color: var(--color-surface-alt);
}

.custom-hero-section .flickity-button.flickity-prev-next-button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.custom-hero-section .flickity-button.flickity-prev-next-button[disabled] {
    opacity: 0.35;
    cursor: default;
}

.custom-hero-section .flickity-button.flickity-prev-next-button[disabled]:hover {
    background-color: var(--color-surface-alt) !important;
    color: var(--color-text);
}

/* Ispod 1200px ostaju dots i swipe. */
@media (max-width: 1199px) {
    .custom-hero-section .flickity-button.flickity-prev-next-button {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .custom-hero-section .flickity-button.flickity-prev-next-button,
    .custom-hero-section .flickity-button.flickity-prev-next-button .arrow {
        transition: none;
    }
}