/* Findings carousel — 3D coverflow, reuses theme color tokens from app.css */

/* Romania section (#romania) is a .main-section.has-background, which sets a
   blanket color:#fff on the whole section (higher specificity than the
   default .section-content / .meta-custom color rules). That's why the
   paragraph and the Wave/Respondents/Live stat row render bright white here
   instead of the muted grey seen in the Company section. Scope the correct
   tone back in with an ID selector so it wins the cascade. */
#romania .section-content .content {
    color: var(--accent-light);
}

#romania .meta-custom ul li {
    color: var(--accent-light);
}

.findings-carousel {
    position: relative;
    margin-top: 2.5em;
    width: 100%;
}

.findings-stage {
    position: relative;
    width: 100%;
    height: 480px;
    max-width: 900px;
    min-width: 320px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 1.5em;
    perspective: 1400px;
}

.finding-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    max-width: 74vw;
    background: var(--background-light);
    border-radius: 1.25em;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    user-select: none;
    cursor: pointer;
    transition: transform 550ms cubic-bezier(.4, 0, .2, 1), opacity 550ms ease;
    will-change: transform, opacity;
}

.finding-card.is-current {
    cursor: default;
}

.finding-card:not(.is-current) .story-slides,
.finding-card:not(.is-current) .story-footer,
.finding-card:not(.is-current) .story-dots {
    pointer-events: none;
}

.finding-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-light);
}

.finding-card-meta .is-live {
    color: var(--decorative-color);
}

.finding-card-stat {
    font-size: 2.5em;
    font-weight: 700;
    line-height: 1;
}

.finding-card-stat span {
    color: var(--accent-color);
}

.finding-card-headline {
    font-size: 1em;
    line-height: 1.5;
    color: #ffffff;
    margin: 0;
}

.finding-card-source {
    font-size: 0.75em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--accent-light);
}

.finding-card-link {
    font-size: 0.875em;
    color: var(--accent-color);
    text-decoration: none;
    margin-top: auto;
}

.finding-card-link:hover {
    text-decoration: underline;
}

.findings-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3em;
    margin-top: 2em;
}

.findings-arrow {
    width: 2.75em;
    height: 2.75em;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1em;
    color: rgba(255, 255, 255, 0.75);
    transition: background 150ms linear, color 150ms linear, border-color 150ms linear;
}

.findings-arrow:hover {
    background: var(--accent-color);
    color: #ffffff;
    border-color: var(--accent-color);
}

.story-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1em 1.1em 0.75em;
    font-size: 0.75em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--default-light);
}

.story-header .is-live {
    color: var(--accent-color);
    font-weight: 700;
}

.story-slides {
    position: relative;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    aspect-ratio: 4 / 5;
    background: var(--background-light);
}

.story-slides.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.story-slides::-webkit-scrollbar {
    display: none;
}

.story-slides {
    scrollbar-width: none;
}

.story-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
}

.story-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.story-fallback {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 0.75em;
    width: 100%;
    height: 100%;
    padding: 1.5em;
    background: #EAEAEA;
    color: var(--accent-dark);
    box-sizing: border-box;
}

.story-fallback .fallback-tag {
    font-size: 0.7em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--default-light);
}

.story-fallback .fallback-headline {
    font-size: 1.1em;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}

.story-fallback .fallback-body {
    font-size: 0.85em;
    line-height: 1.5;
    color: var(--accent-dim);
    margin: 0;
}

.story-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0.5em;
}

.story-dots button {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: none;
    background: var(--border-light);
    padding: 0;
    cursor: pointer;
}

.story-dots button:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
}

.story-dots button.is-active {
    background: var(--accent-color);
    width: 14px;
    border-radius: 4px;
}

.story-dots:has(> button:only-child) {
    display: none;
}

.story-footer {
    padding: 0 1.1em 1.1em;
}

.story-footer .finding-card-link {
    margin-top: 0;
}