/**
 * [BLOCK STYLE: TESTIMONIALS]
 * LOCATION: logic/blocks/testimonialblock/style.css
 */

.block-stories {
    background-color: var(--c-navy-800, #0f172a); 
    padding: 6rem 0;
    color: #fff;
    position: relative;
    overflow: hidden;
    /* Background Image Support */
    background-size: cover;
    background-position: center;
}

/* OVERLAY (Only acts if parent has background image) */
.block-stories__overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.9); /* Default dark tint */
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1;
}

.block-stories--has-bg .block-stories__overlay {
    opacity: 1; /* Make visible if BG exists */
}

.block-stories__container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    padding: 0 1.5rem;
    z-index: 2; /* Sit on top of overlay */
}

/* --- TRACK (The Slider) --- */
.stories-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
    
    /* DRAG LOGIC */
    cursor: grab; /* Show grabbing hand */
}
.stories-track:active {
    cursor: grabbing; /* Clenched hand when clicking */
    scroll-snap-type: none; /* Disable snap while dragging for smoothness */
    scroll-behavior: auto;  /* Remove smooth scroll lag while dragging */
}

.stories-track::-webkit-scrollbar { display: none; }

/* --- INDIVIDUAL SLIDE --- */
.story-slide {
    flex: 0 0 100%; 
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column-reverse; 
    gap: 2rem;
    padding: 1rem;
    user-select: none; /* Prevent text highlighting while dragging */
}

@media (min-width: 768px) {
    .story-slide {
        flex-direction: row; 
        align-items: center;
        text-align: left;
        gap: 4rem;
    }
}

/* --- CONTENT --- */
.story-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.story-quote {
    font-size: 1.25rem;
    line-height: 1.6;
    margin: 0 0 2rem 0;
    font-style: italic;
    color: #e2e8f0;
    border-left: 3px solid var(--c-accent, #c5a059);
    padding-left: 1.5rem;
}

@media (min-width: 768px) {
    .story-quote { font-size: 1.5rem; }
}

.story-meta {
    font-size: 0.9rem;
    color: #94a3b8;
    padding-left: 1.5rem;
}

.story-author { color: #fff; font-weight: 700; }

/* --- VISUAL --- */
.story-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.story-img-wrapper {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 4/5;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    border: 1px solid rgba(197, 160, 89, 0.2);
    position: relative;
    pointer-events: none; /* Prevent dragging the image itself (phantom image) */
}

/* --- NAVIGATION --- */
.story-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--c-accent, #c5a059);
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    font-size: 1.5rem;
    line-height: 1;
    display: none; 
    transition: all 0.3s;
}

.story-nav:hover { background: var(--c-accent); color: #000; }
.story-nav--prev { left: -20px; }
.story-nav--next { right: -20px; }

@media (min-width: 1100px) {
    .story-nav { display: block; } 
}

/* --- DOTS --- */
.story-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.story-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}
.story-dot.active { background: var(--c-accent, #c5a059); }

/* --- ANIMATIONS --- */
.block-stories.reveal-group .story-slide {
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.8s ease;
}
.block-stories.reveal-active .story-slide {
    opacity: 1;
    transform: translateX(0);
}