/* ==========================================================================
   AIP-SKOLAN – VERSION 2 AV SÄLJSIDAN (aip-skolan/landning-v2.php, v5.995.0)
   Laddas bara när Version 2 visas, efter startsidans version-2.css och
   programsidans program-landning-2.css, som står för typsnitt, färger,
   heron, trygghetsraden, citatkorten, frågorna och avslutet. Här ligger
   bara det som är unikt för kursen (prefix s2-as).
   Bandrytm: hero grå, Känner du igen dig vitt, Om AIP grått, Lär dig vitt,
   Kursplan grått, Författaren vitt, Berättelser grått, Så fungerar vitt,
   Frågor vitt med linje, Avslut ljust (som programsidorna, v5.995.3).
   Brytpunkter: 1000 px (surfplatta) och 700 px (mobil), som startsidan.
   ========================================================================== */

/* === 1. SIDAN: AIP-Skolans mall runt Version 2 === */
body.sp-as2-page main.sp-as {
    font-family: inherit;
}

.sp-start2 .s2-as-smal {
    max-width: 840px;
}

/* === 2. HERON: programsidornas illustrationsstil (s2-pl-ill), kurspärmen
   (v5.999.7, ny teckning v5.999.8; dold ≤ 1000 px, se §8). Rutan nedan är "Fortsätt där du var" för en tidigare medlem
   som har börjat kursen, på den ljusgröna formen. Ingen skugga, kanten
   räcker (v5.995.5). === */
.sp-start2 .s2-as-hero-kort {
    position: relative;
    padding: 28px 0;
}

.sp-start2 .s2-as-hero-kort::before {
    content: "";
    position: absolute;
    left: -8%;
    right: -8%;
    top: 0;
    bottom: 0;
    z-index: 0;
    border-radius: 48% 52% 46% 54% / 56% 44% 56% 44%;
    background: var(--s2-ljusgron);
}

.sp-start2 .s2-as-kurskort {
    position: relative;
    z-index: 1;
    padding: 30px;
    background: #fff;
    border: 1px solid #ece6db;
    border-radius: 18px;
}

.sp-start2 .s2-as-kurskort p {
    margin: 0;
}

.sp-start2 .s2-as-kurskort-etikett {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--s2-gron);
}

.sp-start2 .s2-as-kurskort-titel {
    margin-top: 10px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    color: var(--s2-rubrik);
}

.sp-start2 .s2-as-kurskort-text {
    margin-top: 6px !important;
    font-size: 16px;
    line-height: 1.5;
    color: var(--s2-gra-text);
}

/* Förloppet: tio segment, klara mörkgröna, den pågående ljusare (samma
   färger som medlemmarnas förloppsmätare). */
.sp-start2 .s2-as-segment {
    display: flex;
    gap: 4px;
    margin-top: 22px;
}

.sp-start2 .s2-as-seg {
    flex: 1 1 0;
    height: 8px;
    border-radius: 4px;
    background: #ece6db;
}

.sp-start2 .s2-as-seg--klar {
    background: var(--s2-gron);
}

.sp-start2 .s2-as-seg--pagar {
    background: #B9D2BD;
}

.sp-start2 .s2-as-kurskort-status {
    margin-top: 10px !important;
    font-size: 14px;
    color: var(--s2-gra-text);
}

.sp-start2 .s2-as-kurskort-rad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-top: 22px;
}

.sp-start2 .s2-as-kurskort-knapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--s2-gron);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #fff;
}

.sp-start2 .s2-as-kurskort-tid {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--s2-gra-text);
}

.sp-start2 .s2-as-kurskort-tid svg {
    width: 16px;
    height: 16px;
}

/* Tidigare medlem: raden under förnya-knappen (i stället för trygghetsraden). */
.sp-start2 .s2-as-utgangen {
    margin: -6px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--s2-text);
}

/* === 3. KÄNNER DU IGEN DIG: tre rader med prick och linje emellan === */
.sp-start2 .s2-as-igenkanning li {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--s2-linje);
    font-size: 18px;
    line-height: 1.55;
}

.sp-start2 .s2-as-igenkanning li:first-child {
    border-top: 1px solid var(--s2-linje);
}

.sp-start2 .s2-as-prick {
    flex: 0 0 8px;
    height: 8px;
    margin-top: 11px;
    border-radius: 50%;
    background: var(--s2-gron);
}

.sp-start2 .s2-as-igenkanning-avslut {
    font-size: 18px;
    line-height: 1.6;
}

/* === 4. OM AIP: text till vänster, kortet med det man kan märka till höger === */
.sp-start2 .s2-as-g-aip {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 64px;
    align-items: center;
}

.sp-start2 .s2-as-g-aip > .s2-stapel {
    gap: 20px;
    align-items: flex-start;
}

.sp-start2 .s2-as-brod {
    font-size: 17px;
    line-height: 1.65;
}

.sp-start2 .s2-as-aip-kort {
    padding: 32px;
    background: #fff;
    border: 1px solid #ece6db;
    border-radius: 18px;
}

.sp-start2 .s2-as-aip-kort-rubrik {
    margin-bottom: 18px !important;
    font-size: 19px;
    line-height: 1.35;
}

/* === 5. DET HÄR LÄR DU DIG: tre kolumner med ikon === */
.sp-start2 .s2-as-lar-rad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
}

.sp-start2 .s2-as-lar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.sp-start2 .s2-as-ikon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--s2-ljusgron);
    color: var(--s2-gron);
}

.sp-start2 .s2-as-ikon svg {
    width: 24px;
    height: 24px;
}

.sp-start2 .s2-as-lar-titel,
.sp-start2 .s2-as-steg-titel {
    margin-top: 6px;
    font-size: 19px;
    line-height: 1.3;
}

.sp-start2 .s2-as-lar-text,
.sp-start2 .s2-as-steg-text {
    max-width: 330px;
    font-size: 16px;
    line-height: 1.6;
}

/* === 6. KURSPLANEN: tidslinje med de tio delarna === */
.sp-start2 .s2-as-tidslinje {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-start2 .s2-as-del {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 20px;
    padding-bottom: 18px;
}

/* Linjen mellan siffrorna, från cirkelns underkant till nästa del. */
.sp-start2 .s2-as-del:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 50px;
    bottom: -2px;
    left: 22px;
    width: 1px;
    background: var(--s2-linje);
}

.sp-start2 .s2-as-del-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--s2-gron);
    border-radius: 50%;
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--s2-gron);
}

.sp-start2 .s2-as-del-text {
    padding-top: 9px;
}

.sp-start2 .s2-as-del-titel {
    font-size: 18px;
    line-height: 1.35;
}

.sp-start2 .s2-as-del-sammanfattning {
    margin-top: 4px !important;
    font-size: 16px;
    line-height: 1.55;
    color: var(--s2-gra-text);
}

/* Köpknappen efter kursplanen: ett vitt kort, centrerat. */
.sp-start2 .s2-as-kursplan-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 36px 32px;
    background: #fff;
    border: 1px solid #ece6db;
    border-radius: 22px;
    text-align: center;
}

.sp-start2 .s2-as-kursplan-cta-rubrik {
    font-size: 24px;
    line-height: 1.3;
}

.sp-start2 .s2-as-kursplan-cta-text {
    max-width: 520px;
    font-size: 17px;
    line-height: 1.6;
}

.sp-start2 .s2-as-kursplan-cta .sp-cta-btn {
    margin-top: 6px;
}

.sp-start2 .s2-as-kursplan-cta .s2-pl-trygghet {
    justify-content: center;
    margin-top: -2px;
}

/* === 7. SÅ FUNGERAR DET: tre steg med en tunn linje mellan siffrorna === */
.sp-start2 .s2-as-stegrad {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
}

.sp-start2 .s2-as-stegrad::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 16.67%;
    right: 16.67%;
    height: 1px;
    background: var(--s2-linje);
}

.sp-start2 .s2-as-steg {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.sp-start2 .s2-as-steg-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--s2-gron);
    border-radius: 50%;
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--s2-gron);
}

/* === 8. SURFPLATTA (≤ 1000 px) === */
@media (max-width: 1000px) {
    /* Pärmen döljs när heron ligger i en kolumn (v5.999.8, ägaren): under
       köpknappen är den bara dekor och skjuter ned nästa sektion.
       "Fortsätt där du var" ligger kvar, den är innehåll. */
    .sp-start2 .s2-as-hero .s2-pl-komp--ill {
        display: none;
    }

    .sp-start2 .s2-as-hero-kort {
        max-width: 520px;
    }

    .sp-start2 .s2-as-g-aip {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .sp-start2 .s2-as-lar-rad,
    .sp-start2 .s2-as-stegrad {
        gap: 32px;
    }
}

/* === 9. MOBIL (≤ 700 px) === */
@media (max-width: 700px) {
    .sp-start2 .s2-as-hero-kort {
        padding: 16px 0;
    }

    .sp-start2 .s2-as-hero-kort::before {
        left: -4%;
        right: -4%;
    }

    .sp-start2 .s2-as-kurskort {
        padding: 22px;
    }

    .sp-start2 .s2-as-kurskort-titel {
        font-size: 20px;
    }

    .sp-start2 .s2-as-igenkanning li,
    .sp-start2 .s2-as-igenkanning-avslut {
        font-size: 17px;
    }

    .sp-start2 .s2-as-aip-kort {
        padding: 24px;
    }

    /* Lär dig och stegen under varandra, vänsterställda med ikonen eller
       siffran till vänster om texten. */
    .sp-start2 .s2-as-lar-rad,
    .sp-start2 .s2-as-stegrad {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .sp-start2 .s2-as-lar,
    .sp-start2 .s2-as-steg {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 4px;
        align-items: start;
        text-align: left;
    }

    .sp-start2 .s2-as-lar > .s2-as-ikon,
    .sp-start2 .s2-as-steg > .s2-as-steg-nr {
        grid-row: span 2;
    }

    .sp-start2 .s2-as-lar-titel,
    .sp-start2 .s2-as-steg-titel {
        margin-top: 10px;
        font-size: 18px;
    }

    .sp-start2 .s2-as-lar-text,
    .sp-start2 .s2-as-steg-text {
        max-width: none;
    }

    .sp-start2 .s2-as-stegrad::before {
        top: 22px;
        bottom: 22px;
        left: 22px;
        right: auto;
        width: 1px;
        height: auto;
    }

    .sp-start2 .s2-as-del {
        gap: 16px;
    }

    .sp-start2 .s2-as-del-titel {
        font-size: 17px;
    }

    .sp-start2 .s2-as-kursplan-cta {
        padding: 28px 20px;
    }

    .sp-start2 .s2-as-kursplan-cta-rubrik {
        font-size: 21px;
    }
}