/*
 * .risks-section-shell IS the pinned scroll-mask animation's "third
 * section" — assets/js/main.js toggles its opacity the instant #testing-
 * block's pill fully covers the screen (mid-transition), so the swap is
 * never visible mid-scroll.
 */
.risks-section-shell {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    /* Invisible at rest, but opacity:0 alone doesn't remove it from hit-
       testing — without this it silently sits on top of hero (same
       z-index, later in DOM) and swallows every click/hover on the whole
       screen. main.js's pill-morph IIFE flips this to 'auto' once this
       layer actually becomes the visible one. */
    pointer-events: none;
    transition: opacity 0.15s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .risks-section-shell {
        transition: none;
    }
}

.risks-section {
    box-sizing: border-box;
    /* Fills the shell's 100vh exactly (percentage heights resolve here
       because .risks-section-shell has a definite height via inset:0).
       Without this, .risks-section only took the height its own content
       (the card) needed, so align-items:center only ever centered the
       card within that same content-sized box — not within the actual
       100vh the card visually reads against — leaving it looking
       arbitrarily off-center depending on viewport height. Same fix as
       team-section/style.css. */
    min-height: calc(100% - 120px);
    display: flex;
    align-items: center;
    padding: 0px 40px;
    background-image: url('../assets/images/section3.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    margin-top: 120px;
}

.risk-card {
    box-sizing: border-box;
    width: 420px;
    max-width: 100%;
    /* Was a fixed height — content longer than the English original (e.g.
       the Ukrainian 3-line title) had nowhere to go and spilled outside
       the rounded corners. min-height keeps the original size as a floor
       but lets the card grow with its content instead of clipping it. */
    min-height: 581px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px;
    gap: 36px;
    background: #023A85;
    border-radius: 48px;
}

.risk-card__counter {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.risk-card__title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

.risk-card__highlight {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: rgba(252, 169, 58, 1);
}

.risk-card__divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.risk-card__nav {
    display: flex;
    gap: 16px;
}

.risk-card__arrow {
    box-sizing: border-box;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    background: transparent;
    color: #FFFFFF;
    cursor: pointer;
}

.risk-card__arrow:hover {
    background: #FFFFFF;
    color: #023A85;
}

.risk-card__slides {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    margin-top: auto;
    /* .risk-card__slide is position:absolute so it can't contribute height
       to this flex item on its own — without a min-height, a longer slide
       (or a longer title eating into the card's min-height budget) can
       collapse this and spill the slide text outside the card. */
    min-height: 120px;
}

.risk-card__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}

.risk-card__slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.risk-card__slide-title,
.risk-card__slide-text {
    /* Riding along on .risk-card__slides' own reveal-repeat fade isn't
       enough on its own — is-active is already present in the
       server-rendered markup, so the browser paints the first slide
       "arrived" with no prior state to transition from, and only the
       slide-switch crossfade (.risk-card__slide.is-active above) ever
       animates. Gating on the ancestor's is-visible (added by the same
       scroll-driven reveal that toggles the rest of the card) gives the
       text its own small entrance the first time the card is actually
       revealed, and replays it — with a slight rise — on the incoming
       slide's text whenever the slide changes too. */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
}

.risk-card__slides.is-visible .risk-card__slide.is-active .risk-card__slide-title,
.risk-card__slides.is-visible .risk-card__slide.is-active .risk-card__slide-text {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .risk-card__slide-title,
    .risk-card__slide-text {
        transition: none;
    }
}

.risk-card__slide-title {
    margin: 0 0 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #FFFFFF;
}

.risk-card__slide-text {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
    .risks-section {
        padding: 32px 20px;
    }

    .risk-card {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 28px;
        gap: 32px;
    }

    .risk-card__title {
        font-size: 30px;
    }

    .risk-card__slides {
        min-height: 150px;
    }
}