.robotia-intranet-hero {
    isolation: isolate;
}

.robotia-intranet-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 20% -10%, rgba(15, 76, 129, 0.12), transparent 55%),
        radial-gradient(circle at 80% 0%, rgba(240, 21, 112, 0.08), transparent 50%);
    opacity: 0.9;
    mix-blend-mode: color-dodge;
    transition: opacity 0.6s ease;
}

.robotia-intranet-hero:hover::after {
    opacity: 1;
}

.robotia-hero-pill {
    background: rgba(13, 110, 253, 0.12);
    color: #0f3c8a;
    font-size: 10px;
    letter-spacing: 0.2em;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    text-transform: uppercase;
}

.robotia-hero-media {
    min-height: 280px;
    background: linear-gradient(135deg, #0f2d52, #1a4180);
    background-size: cover;
    background-position: center;
    border-radius: 1.25rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 0.4s ease;
}

.robotia-hero-media:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 22px 45px rgba(15, 45, 82, 0.25);
}

.robotia-hero-media__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 8, 20, 0) 0%, rgba(3, 8, 20, 0.85) 100%);
    mix-blend-mode: multiply;
    opacity: 0.95;
    transition: opacity 0.4s ease;
}

.robotia-hero-media:hover .robotia-hero-media__shade {
    opacity: 1;
}

.robotia-hero-media__content {
    position: absolute;
    inset: auto 0 0;
    padding: 2.5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
    .robotia-hero-media,
    .robotia-hero-media:hover,
    .robotia-intranet-hero::after {
        transition: none;
    }
}