/* ==========================================================================
   FRAMGÅNGSHISTORIER – VERSION 2 (arkiv-v2.php, v5.993.0)
   Laddas bara när Version 2 visas, efter startsidans version-2.css, som står
   för typsnitt, färger och delarna (.sp-start2 .s2-…: citatkortet .s2-rost,
   brickan .s2-chip, kantknappen, avslutet). Här ligger bara det som är unikt
   för sidan (prefix s2-fh).
   ========================================================================== */

/* === 1. SIDAN === */
body.sp-fh2-page {
    background: #fff;
}

/* === 2. HERON === */
/* Sök och filter ligger sist i heron (v5.993.7). Heron hålls tät så att
   första kortraden börjar synas utan att man scrollar; den extra luften
   ovanför (v5.993.6) togs bort igen när verktygen flyttade in (v5.993.8). */
.sp-start2 .s2-fh-hero {
    padding: 72px 0 40px;
    background: #F2F2EF;
}

.sp-start2 .s2-fh-hero-in {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.sp-start2 .s2-fh-hero-in > * {
    max-width: 720px;
}

/* Bilden till höger om texten, bara på bred skärm. Den ligger utanför flödet
   så att heron inte blir högre (första kortraden ska synas utan scroll),
   och döljs där texten behöver bredden (v5.993.9). */
.sp-start2 .s2-fh-hero-in {
    position: relative;
}

.sp-start2 .s2-fh-hero-ill {
    display: none;
}

@media (min-width: 1200px) {
    .sp-start2 .s2-fh-hero-in > .s2-fh-hero-ill {
        display: block;
        position: absolute;
        top: 50%;
        right: 40px; /* .s2-in har 40 px sidomarginal; linjer upp mot innehållets kant */
        /* v5.999.10: 440×400-ritningen, nära programsidornas storlek. Smalare
           vid 1200–1300 px så att minst 40 px luft blir kvar till texten
           (max 720 px). */
        width: min(400px, calc(100% - 840px)); /* 100 % = innehåll + 2 × 40 px marginal */
        max-width: none;
        height: auto;
        transform: translateY(-50%);
    }
}

.sp-start2 .s2-fh-h1 {
    margin: 0;
    font-family: 'Montserrat', 'Figtree', sans-serif !important;
    font-weight: 700;
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--s2-rubrik);
}

.sp-start2 .s2-fh-hero .s2-lead {
    font-size: 19px;
}

.sp-start2 .s2-fh-hero-knapp {
    margin-top: 4px;
}

/* Friskrivningen: lugn och liten, men synlig (planerad 2026-04-12). */
.sp-start2 .s2-fh-friskrivning {
    margin: 4px 0 0 !important;
    font-size: 14px;
    line-height: 1.55;
    color: var(--s2-gra-text);
}

/* === 3. SÖK OCH FILTER === */
/* Två ytor: beige hero med sök och filter längst ner (avskilt med en tunn
   linje), sedan en vit lista med krämvita kort. En smal vit remsa mellan två
   beige ytor såg lappad ut (ägaren 2026-11-05, v5.993.7). */
.sp-start2 .s2-fh-verktyg {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--s2-linje);
}

.sp-start2 .s2-fh-lista {
    padding-top: 32px;
    background: #fff;
}

.sp-start2 .s2-fh-sok {
    position: relative;
    max-width: 520px;
    color: var(--s2-gra-text);
}

.sp-start2 .s2-fh-sok svg {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    pointer-events: none;
}

.sp-start2 .s2-fh-sok input {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 18px 0 48px;
    border: 1px solid #e3ddd1;
    border-radius: 999px;
    background: #fff;
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    color: var(--s2-rubrik);
    box-shadow: none;
}

.sp-start2 .s2-fh-sok input::placeholder {
    color: #8a8478;
}

.sp-start2 .s2-fh-sok input:focus-visible {
    outline: 2px solid var(--s2-gron);
    outline-offset: 2px;
    border-color: var(--s2-gron);
}

.sp-start2 .s2-fh-filterrad {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Valt läge = ljusgrön yta och grön kant, aldrig helfylld (ägarregel). */
.sp-start2 .s2-fh-filter {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid #e3ddd1;
    border-radius: 999px;
    background: #fff;
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.2;
    color: var(--s2-text);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sp-start2 .s2-fh-filter.is-vald {
    border-color: var(--s2-gron);
    background: var(--s2-ljusgron);
    color: var(--s2-gron);
    font-weight: 600;
}

.sp-start2 .s2-fh-filter:focus-visible {
    outline: 2px solid var(--s2-gron);
    outline-offset: 2px;
}

@media (hover: hover) {
    .sp-start2 .s2-fh-filter:not(.is-vald):hover {
        border-color: #cfc8ba;
        background: #FAF9F6;
    }
}

/* Väljaren som ersätter bubblorna på mobilen (v5.993.12). Telefonens egen
   lista öppnas av den osynliga select-rutan som täcker hela fältet; texten
   som syns ligger i .s2-fh-valj-visning och uppdateras av skriptet. */
.sp-start2 .s2-fh-valj {
    display: none;
    position: relative;
    align-items: center;
    height: 50px;
    box-sizing: border-box;
    padding: 0 48px 0 20px;
    border: 1px solid #e3ddd1;
    border-radius: 999px;
    background: #fff;
    color: var(--s2-text);
}

.sp-start2 .s2-fh-valj-visning {
    overflow: hidden;
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sp-start2 .s2-fh-valj-namn {
    font-weight: 600;
    color: var(--s2-gron);
}

.sp-start2 .s2-fh-valj-pil {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    color: var(--s2-gron);
    pointer-events: none;
}

.sp-start2 .s2-fh-valj select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    font-size: 16px; /* ingen iOS-zoom */
    opacity: 0;
    cursor: pointer;
    appearance: none;
}

.sp-start2 .s2-fh-valj:focus-within {
    outline: 2px solid var(--s2-gron);
    outline-offset: 2px;
    border-color: var(--s2-gron);
}

.sp-start2 .s2-fh-antal {
    margin: 0 0 20px !important;
    font-size: 15px;
    color: var(--s2-gra-text);
}

/* === 4. KORTEN === */
.sp-start2 .s2-fh-galler {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* Vita kort som på startsidan och programsidorna, med kanten och en mjuk
   skugga så att de lyfter från den vita listan (ägaren 2026-11-05, v5.993.10;
   krämvita kort v5.993.7 bröt mot sajtens övriga citatkort). */
.sp-start2 .s2-fh-kort {
    gap: 14px;
    border-color: #e6e0d4;
    box-shadow: 0 1px 2px rgba(60, 50, 30, 0.05), 0 8px 24px rgba(60, 50, 30, 0.07);
}

.sp-start2 .s2-fh-kort[hidden] {
    display: none;
}

.sp-start2 .s2-fh-titel {
    margin: 0;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.3;
    text-transform: none;
    color: var(--s2-rubrik);
}

/* Citatet kortat till sex rader; utfällt visas allt (skriptet animerar). */
.sp-start2 .s2-fh-citat {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
    font-size: 16px !important;
    line-height: 1.65 !important;
}

.sp-start2 .s2-fh-kort.is-oppen .s2-fh-citat {
    display: block;
    -webkit-line-clamp: unset;
}

.sp-start2 .s2-fh-citat.is-animeras {
    transition: max-height 0.3s ease;
}

.sp-start2 .s2-fh-las {
    align-self: flex-start;
    min-height: 44px;
    margin: -10px 0 -8px;
    padding: 0;
    border: 0;
    background: none;
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--s2-gron);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.sp-start2 .s2-fh-las:focus-visible {
    outline: 2px solid var(--s2-gron);
    outline-offset: 3px;
    border-radius: 4px;
}

.sp-start2 .s2-fh-las[hidden] {
    display: none;
}

/* Namnet till vänster och en diagnosbricka till höger, som på startsidan
   (v5.993.11). Blir raden för smal hamnar brickan på en egen rad. */
.sp-start2 .s2-fh-kort .s2-rost-fot {
    flex-wrap: wrap;
    row-gap: 8px;
}

/* === 5. QUIZPAUSEN EFTER EN HEL RAD KORT (bara besökare) === */
/* Ingen ruta: en centrerad paus mellan två tunna linjer, i startsidans
   sektionsformspråk. Färgade rutor (ljus-, mellan- och mörkgrön) blev
   främmande bland korten (ägaren 2026-11-05, v5.993.4). */
.sp-start2 .s2-fh-uppmaning {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 16px 0;
    padding: 44px 24px 48px;
    border-top: 1px solid var(--s2-linje);
    border-bottom: 1px solid var(--s2-linje);
    text-align: center;
}

.sp-start2 .s2-fh-uppmaning[hidden] {
    display: none;
}

.sp-start2 .s2-fh-uppmaning-ill {
    display: block;
    width: 104px;
    height: auto;
}

.sp-start2 .s2-fh-uppmaning-text {
    max-width: 520px;
}

.sp-start2 .s2-fh-uppmaning-text .s2-kicker {
    justify-content: center;
    margin: 0 0 10px !important;
    font-size: 12px;
}

.sp-start2 .s2-fh-uppmaning-text p {
    margin: 0 !important;
    font-size: 16px;
    line-height: 1.55;
}

.sp-start2 .s2-fh-uppmaning-text .s2-fh-uppmaning-rubrik {
    margin-bottom: 8px !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 1.3;
    color: var(--s2-rubrik);
}

/* Kantknapp på vit botten; köpgrönt (#7A9E4E) sparas till köp. */
.sp-start2 .s2-fh-uppmaning .s2-knapp-kant {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    background: #fff;
    white-space: nowrap;
}

.sp-start2 .s2-fh-uppmaning .s2-knapp-kant:focus-visible {
    outline: 2px solid var(--s2-gron);
    outline-offset: 3px;
}

/* === 6. TOMT OCH VISA FLER === */
.sp-start2 .s2-fh-tomt {
    margin: 8px 0 0 !important;
    font-size: 17px;
}

.sp-start2 .s2-fh-tomt[hidden],
.sp-start2 .s2-fh-fler[hidden] {
    display: none;
}

.sp-start2 .s2-fh-fler-rad {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

.sp-start2 .s2-fh-fler {
    background: #fff;
    cursor: pointer;
}

.sp-start2 .s2-fh-fler:focus-visible {
    outline: 2px solid var(--s2-gron);
    outline-offset: 3px;
}

/* === 7. SURFPLATTA (≤ 1000 px) === */
@media (max-width: 1000px) {
    .sp-start2 .s2-fh-galler {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

/* === 8. MOBIL (≤ 700 px) === */
@media (max-width: 700px) {
    .sp-start2 .s2-fh-hero {
        padding: 56px 0 24px;
    }

    .sp-start2 .s2-fh-verktyg {
        margin-top: 24px;
        padding-top: 20px;
    }

    .sp-start2 .s2-fh-h1 {
        font-size: 34px;
    }

    .sp-start2 .s2-fh-hero .s2-lead {
        font-size: 17px;
    }

    .sp-start2 .s2-fh-lista {
        padding-top: 24px;
    }

    /* Ingen svepning: bubblorna byts mot väljaren (v5.993.12). */
    .sp-start2 .s2-fh-filterrad {
        display: none;
    }

    .sp-start2 .s2-fh-valj {
        display: flex;
    }

    .sp-start2 .s2-fh-galler {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .sp-start2 .s2-fh-titel {
        font-size: 18px;
    }

    /* Mobil: knappen i full bredd. */
    .sp-start2 .s2-fh-uppmaning {
        padding: 36px 8px 40px;
    }

    .sp-start2 .s2-fh-uppmaning-ill {
        width: 92px;
    }

    .sp-start2 .s2-fh-uppmaning-text .s2-fh-uppmaning-rubrik {
        font-size: 22px;
    }

    .sp-start2 .s2-fh-uppmaning .s2-knapp-kant {
        align-self: stretch;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-start2 .s2-fh-citat.is-animeras {
        transition: none;
    }
}