/**
 * Astro Content Portal — Public Stylesheet
 *
 * Stilovi za slider i sve buduće template komponente plugina.
 * Organizirano po komponentama s BEM konvencijom imenovanja.
 *
 * @package AstroContentPortal
 * @version 1.0.0
 */

/* ═══════════════════════════════════════════════════════════════════
   CSS Varijable (Custom Properties)
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --acp-radius:          16px;
    --acp-radius-sm:       8px;
    --acp-radius-btn:      50px;

    /* Visina slidera */
    --acp-slide-height:    480px;
    --acp-slide-height-md: 360px;
    --acp-slide-height-sm: 260px;

    /* Overlay i boje */
    --acp-overlay-start:   rgba(10, 6, 25, 0.10);
    --acp-overlay-end:     rgba(10, 6, 25, 0.82);
    --acp-accent:          #c89bff;
    --acp-accent-dark:     #9b59f5;
    --acp-white:           #ffffff;
    --acp-white-60:        rgba(255, 255, 255, 0.65);
    --acp-white-30:        rgba(255, 255, 255, 0.30);

    /* Navigacijski gumbi */
    --acp-nav-size:        48px;
    --acp-nav-bg:          rgba(255, 255, 255, 0.12);
    --acp-nav-bg-hover:    rgba(255, 255, 255, 0.28);

    /* Tranzicije */
    --acp-transition:      0.45s cubic-bezier(0.4, 0, 0.2, 1);
    --acp-transition-fast: 0.22s ease;

    /* Font */
    --acp-font:            -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
}


/* ═══════════════════════════════════════════════════════════════════
   Empty State
   ═══════════════════════════════════════════════════════════════════ */

.acp-empty-state {
    padding: 32px 24px;
    text-align: center;
    border: 2px dashed #d1d5db;
    border-radius: var(--acp-radius);
    color: #6b7280;
    font-family: var(--acp-font);
    font-size: 14px;
    background: #f9fafb;
}


/* ═══════════════════════════════════════════════════════════════════
   Slider Wrapper
   ═══════════════════════════════════════════════════════════════════ */

.acp-slider-wrapper {
    position:      relative;
    width:         100%;
    overflow:      hidden;
    border-radius: var(--acp-radius);
    background:    #1a1033;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.15),
        0 20px 60px -10px rgba(10, 6, 25, 0.35);

    /* Sprečava CLS (Cumulative Layout Shift) prije nego JS postavi visinu */
    min-height: var(--acp-slide-height);
	margin-bottom: 40px !important;
}

.acp-slider-wrapper:focus-within .acp-slider-nav {
    opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════════
   Slider Track (pomični kontejner)
   ═══════════════════════════════════════════════════════════════════ */

.acp-slider-track {
    display:    flex;
    height:     var(--acp-slide-height);
    transition: transform var(--acp-transition);
    will-change: transform;
}


/* ═══════════════════════════════════════════════════════════════════
   Pojedinačni Slajd
   ═══════════════════════════════════════════════════════════════════ */

.acp-slide {
    position:           relative;
    flex:               0 0 100%;
    width:              100%;
    height:             100%;
    background-color:   #2d1f5e;
    background-size:    cover;
    background-position: center center;
    background-repeat:  no-repeat;
    display:            flex;
    align-items:        flex-end;

    /* Zaobljeni rubovi naslijeđeni od wrappera */
    overflow:           hidden;
}


/* ═══════════════════════════════════════════════════════════════════
   Tamni Overlay
   ═══════════════════════════════════════════════════════════════════ */

.acp-slide__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to bottom,
        var(--acp-overlay-start)  0%,
        transparent               40%,
        var(--acp-overlay-end)   100%
    );
    z-index:    1;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════
   Sadržaj Slajda
   ═══════════════════════════════════════════════════════════════════ */

.acp-slide__content {
    position:   relative;
    z-index:    2;
    padding:    32px 36px 36px;
    width:      100%;
    max-width:  680px;
}

/* Broj slajda */
.acp-slide__counter {
    display:        inline-block;
    font-family:    var(--acp-font);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--acp-accent);
    margin-bottom:  10px;
    opacity:        0.9;
}

/* Naslov */
.acp-slide__title {
    font-family:    var(--acp-font);
    font-size:      clamp(20px, 3vw, 30px);
    font-weight:    700;
    line-height:    1.25;
    margin:         0 0 12px;
    color:          var(--acp-white);
    text-shadow:    0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Link u naslovu */
.acp-slide__link {
    color:           inherit;
    text-decoration: none;
    outline:         none;
}

.acp-slide__link:hover,
.acp-slide__link:focus-visible {
    text-decoration:        underline;
    text-decoration-color:  var(--acp-accent);
    text-underline-offset:  4px;
}

/* Excerpt */
.acp-slide__excerpt {
    font-family:  var(--acp-font);
    font-size:    clamp(13px, 1.6vw, 15px);
    line-height:  1.65;
    color:        var(--acp-white-60);
    margin:       0 0 20px;
    text-shadow:  0 1px 4px rgba(0, 0, 0, 0.3);
}

/* CTA gumb */
.acp-slide__cta {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         10px 22px;
    background:      rgba(200, 155, 255, 0.18);
    border:          1.5px solid rgba(200, 155, 255, 0.45);
    border-radius:   var(--acp-radius-btn);
    color:           var(--acp-white);
    font-family:     var(--acp-font);
    font-size:       13px;
    font-weight:     600;
    letter-spacing:  0.04em;
    text-decoration: none;
    transition:
        background var(--acp-transition-fast),
        border-color var(--acp-transition-fast),
        transform var(--acp-transition-fast);
    backdrop-filter: blur(4px);
}

.acp-slide__cta:hover,
.acp-slide__cta:focus-visible {
    background:    rgba(200, 155, 255, 0.32);
    border-color:  rgba(200, 155, 255, 0.75);
    transform:     translateY(-1px);
    color:         var(--acp-white);
    outline:       none;
}

.acp-slide__cta:focus-visible {
    box-shadow: 0 0 0 3px var(--acp-accent);
}


/* ═══════════════════════════════════════════════════════════════════
   Navigacijske Strelice
   ═══════════════════════════════════════════════════════════════════ */

.acp-slider-nav {
    position:         absolute;
    top:              50%;
    transform:        translateY(-50%);
    z-index:          10;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            var(--acp-nav-size);
    height:           var(--acp-nav-size);
    background:       var(--acp-nav-bg);
    border:           1.5px solid var(--acp-white-30);
    border-radius:    50%;
    color:            var(--acp-white);
    cursor:           pointer;
    opacity:          0.75;
    transition:
        background    var(--acp-transition-fast),
        opacity       var(--acp-transition-fast),
        border-color  var(--acp-transition-fast),
        transform     var(--acp-transition-fast);
    backdrop-filter:  blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.acp-slider-nav svg {
    width:  20px;
    height: 20px;
    flex-shrink: 0;
}

.acp-slider-nav:hover,
.acp-slider-nav:focus-visible {
    background:  var(--acp-nav-bg-hover);
    border-color: rgba(255, 255, 255, 0.6);
    opacity:     1;
    transform:   translateY(-50%) scale(1.08);
    outline:     none;
}

.acp-slider-nav:focus-visible {
    box-shadow: 0 0 0 3px var(--acp-accent);
}

.acp-slider-nav:disabled {
    opacity:  0.2;
    cursor:   default;
    pointer-events: none;
}

.acp-slider-nav--prev { left:  14px; }
.acp-slider-nav--next { right: 14px; }


/* ═══════════════════════════════════════════════════════════════════
   Dot Navigacija (Bullet Indicators)
   ═══════════════════════════════════════════════════════════════════ */

.acp-slider-dots {
    position:         absolute;
    bottom:           16px;
    left:             50%;
    transform:        translateX(-50%);
    z-index:          10;
    display:          flex;
    align-items:      center;
    gap:              8px;
}

.acp-slider-dot {
    width:            8px;
    height:           8px;
    border-radius:    50%;
    background:       var(--acp-white-30);
    border:           none;
    cursor:           pointer;
    padding:          0;
    transition:
        width         var(--acp-transition-fast),
        background    var(--acp-transition-fast),
        border-radius var(--acp-transition-fast);
}

.acp-slider-dot.is-active,
.acp-slider-dot[aria-selected="true"] {
    width:        24px;
    background:   var(--acp-accent);
    border-radius: 4px;
}

.acp-slider-dot:hover:not(.is-active) {
    background: var(--acp-white-60);
}

.acp-slider-dot:focus-visible {
    outline:    2px solid var(--acp-accent);
    outline-offset: 3px;
}


/* ═══════════════════════════════════════════════════════════════════
   Responzivnost
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    :root {
        --acp-slide-height: var(--acp-slide-height-md);
        --acp-nav-size:     40px;
    }

    .acp-slider-wrapper {
        min-height: var(--acp-slide-height-md);
        border-radius: var(--acp-radius-sm);
    }

    .acp-slide__content {
        padding: 20px 20px 44px;
    }

    .acp-slider-nav--prev { left:  8px; }
    .acp-slider-nav--next { right: 8px; }
}

@media (max-width: 480px) {
    :root {
        --acp-slide-height: var(--acp-slide-height-sm);
    }

    .acp-slider-wrapper {
        min-height: var(--acp-slide-height-sm);
    }

    .acp-slide__content {
        padding: 16px 16px 48px;
    }

    .acp-slide__cta {
        padding:   8px 16px;
        font-size: 12px;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   Reduced Motion (pristupačnost)
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .acp-slider-track,
    .acp-slider-nav,
    .acp-slider-dot,
    .acp-slide__cta {
        transition: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   Placeholder prostor za buduće komponente
   ═══════════════════════════════════════════════════════════════════ */

/**
 * Grid V1 stilovi dolaze ovdje:
 *
 * .acp-grid-wrapper { ... }
 * .acp-grid-item    { ... }
 */