/* =========================================================================
   ABOUT — /om-fjallverket
   Decorative blue medallion (rings + soft glow) around the hero mascot.
   Self-contained & page-scoped: only affects .about-medallion, which exists
   on this page. The original .main-hero / .mascot styling is untouched.
   Adapts to light/dark via the global brand variables.
   ========================================================================= */

.about-medallion {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 38px;                 /* gap between the mascot and the ring */
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%,
                rgba(59, 124, 203, 0.18), rgba(36, 62, 102, 0) 70%);
    isolation: isolate;
}

/* keep the mascot above the rings; its float animation still comes from home.css */
.about-medallion .mascot {
    position: relative;
    z-index: 1;
}

.about-medallion__ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.about-medallion__ring--outer {
    inset: 0;
    border: 1px solid var(--var-border-color);
}

.about-medallion__ring--inner {
    inset: 14px;
    border: 1px dashed rgba(74, 144, 226, 0.22);
    animation: aboutOrbit 90s linear infinite;
}

@keyframes aboutOrbit {
    to { transform: rotate(360deg); }
}

/* Smaller ring gap on compact screens so the circle stays proportional */
@media (max-width: 868px) {
    .about-medallion { padding: 26px; }
    .about-medallion__ring--inner { inset: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .about-medallion__ring--inner { animation: none; }
}