/* ==========================================================================
   glow-effects.css — Growra-stil gradient-glöd
   Spec ref: Fas 4.5 punkt 4 — tre glow-varianter + SVG
   ========================================================================== */

/* ----- Variant 1: Halvmåne ovanför sektion ----- */
.glow-top {
    position: relative;
    overflow: visible;
}

.glow-top::before {
    content: '';
    position: absolute;
    width: 700px;
    height: 350px;
    background: radial-gradient(
        ellipse at center,
        rgba(105, 160, 50, 0.14) 0%,
        transparent 65%
    );
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
}

.glow-top > * {
    position: relative;
    z-index: 1;
}

/* ----- Variant 2: Glow bakom card-grupp ----- */
.glow-behind {
    position: relative;
}

.glow-behind::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(
        circle at center,
        rgba(105, 160, 50, 0.10) 0%,
        transparent 60%
    );
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

.glow-behind > * {
    position: relative;
    z-index: 1;
}

/* ----- Variant 3: Vård-glow (röd) ----- */
.glow-vard {
    position: relative;
    overflow: visible;
}

.glow-vard::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 300px;
    background: radial-gradient(
        ellipse at center,
        rgba(224, 85, 85, 0.10) 0%,
        transparent 65%
    );
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
}

.glow-vard > * {
    position: relative;
    z-index: 1;
}

/* ----- Legacy alias (bakåtkompatibilitet) ----- */
.glow-section {
    position: relative;
    overflow: hidden;
}

.glow-section::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 400px;
    background: radial-gradient(
        ellipse at center,
        rgba(105, 160, 50, 0.12) 0%,
        transparent 70%
    );
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
}

.glow-section > * {
    position: relative;
    z-index: 1;
}

/* ----- Företagande-glow (blå) ----- */
.glow-foretag {
    position: relative;
    overflow: visible;
}

.glow-foretag::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 300px;
    background: radial-gradient(
        ellipse at center,
        rgba(91, 155, 213, 0.10) 0%,
        transparent 65%
    );
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
}

.glow-foretag > * {
    position: relative;
    z-index: 1;
}

/* ----- Mobil: reducera glow-storlek ----- */
@media (max-width: 768px) {
    .glow-top::before,
    .glow-vard::before,
    .glow-foretag::before,
    .glow-section::before {
        width: 300px;
        height: 200px;
        top: -100px;
    }

    .glow-behind::after {
        width: 250px;
        height: 250px;
    }
}