/* ==========================================================================
   Informatiepagina's: start, contact, releasenotes, help
   ==========================================================================
   Vier schermen die geen gegevens tonen maar tekst. Ze deelden in de oude schil
   dezelfde vorm - card met een gekleurde koprand en een card-body vol koppen en
   alinea's - en delen daarom ook hier één laag.

   Het verschil met de andere schermen: hier is de LEESREGEL de maat. Een alinea
   die over 1700px doorloopt dwingt het oog terug naar links te zoeken waar de
   volgende regel begint. Vandaar --lees-breedte op de tekstkolommen, terwijl de
   kaarten zelf de pagina vullen.

   De startpagina is bovendien het enige scherm in deze schil dat een UITGELOGDE
   bezoeker te zien krijgt. Zie _RailNav en _LayoutApp voor wat er dan wegvalt.
   ========================================================================== */

:root {
    --lees-breedte: 72ch;
}

.inf-page {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
}

/* Lopende tekst in een kaart. Alinea's houden hun onderlinge ruimte en de kolom
   blijft leesbaar breed, ook op een kaart die de hele pagina vult. */
.inf-tekst {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    max-width: var(--lees-breedte);
}

    .inf-tekst p {
        margin: 0;
        font-size: var(--fs-body);
        line-height: var(--lh-normal);
        color: var(--text-default);
    }

    /* Knoppen niet: die hebben hun eigen tekstkleur, en de linkkleur is dezelfde
       teal als de primaire knop - dan valt de tekst weg. */
    .inf-tekst a:not(.oc-btn) {
        color: var(--text-link);
    }

/* Een kop binnen zo'n tekstblok: kleiner dan de kaarttitel, met lucht erboven.
   :first-child krijgt die lucht niet - dan zou de kaart vanboven scheef staan. */
.inf-kop {
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    margin: var(--sp-4) 0 0;
}

    .inf-kop:first-child {
        margin-top: 0;
    }

/* Een kop BOVEN een reeks vraag-en-antwoorden. Het helphoofdstuk Data heeft er twee -
   GDPR en sensordata - met daaronder losse vragen. Zonder dit onderscheid staan die
   twee op hetzelfde niveau als de vragen eronder en valt de indeling weg. */
.inf-kop--groep {
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tight);
    margin-top: var(--sp-7);
}

.inf-lijst {
    margin: 0;
    padding-left: var(--sp-7);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--text-default);
    max-width: var(--lees-breedte);
}


/* == Startpagina =========================================================== */

/* Vier panelen van schermhoogte, zodat er bij het scrollen steeds één blok in
   beeld is en niet de staart van het vorige en de kop van het volgende. De inhoud
   staat verticaal in het midden.

   De hoogte is het scherm min de witruimte van .oc-content boven en onder. De
   topbalk (62px) scrolt mee en telt daarom alleen bij het eerste paneel mee - dat
   moet met balk en al in het eerste scherm passen.

   Alleen op schermen waar een paneel past: op een telefoon of een laag
   laptopvenster is de inhoud zelf al hoger dan het scherm, en dan zou de
   minimumhoogte alleen lege ruimte toevoegen. */
@media (min-width: 900px) and (min-height: 600px) {
    .inf-paneel {
        min-height: calc(100svh - 2 * var(--sp-8));
        justify-content: center;
    }

        .inf-paneel:first-child {
            min-height: calc(100svh - 62px - 2 * var(--sp-8));
        }
}

.inf-paneel > .oc-card__body {
    padding: var(--sp-9) var(--sp-10);
    gap: var(--sp-8);
}

@media (max-width: 900px) {
    .inf-paneel > .oc-card__body {
        padding: var(--sp-8) var(--sp-6);
    }
}

/* Een paneel bevat een paar onderwerpen; een haarlijn scheidt ze, zodat ze als
   aparte blokken lezen zonder dat elk een eigen kaart nodig heeft. */
.inf-deel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

    .inf-deel + .inf-deel {
        padding-top: var(--sp-8);
        border-top: 1px solid var(--border-hair);
    }

/* De kop van een onderwerp: groter dan de tussenkop in een tekstblok. */
.inf-paneel .inf-kop {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-tight);
}

/* De openingskop van een paneel - Vijf doseerkoersen, Auto Pilot - mag eruit
   springen: groter, en in de huisstijlgroen van de productnaam bovenaan. */
.inf-paneel .inf-kop--paneel {
    font-size: clamp(var(--fs-h2), 2.2vw, 2rem);
    color: var(--brand-primary);
}

.inf-paneel .inf-tekst {
    gap: var(--sp-5);
}

    .inf-paneel .inf-tekst p {
        font-size: var(--fs-body-lg);
    }

/* De productnaam is de enige h1 van de pagina en staat bovenaan het eerste
   paneel; met de gewone koptekstmaten zou hij daarin verdwijnen. */
.inf-titel {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(var(--fs-h1), 3.2vw, 3rem);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-tight);
    color: var(--brand-primary);
}

/* De slogan onder de productnaam: groter en sterker dan de lopende tekst. */
.inf-tekst p.inf-lead,
.inf-paneel .inf-tekst p.inf-lead {
    font-size: clamp(var(--fs-h3), 1.6vw, 1.5rem);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-tight);
    color: var(--text-strong);
}

.inf-acties {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
}

/* Tekst naast een schermafdruk, de afdruk breder omdat de dashboards zelf breed
   zijn. Onder 1200px onder elkaar - een afdruk van 1800px op een derde van een
   laptopscherm is niet meer te lezen. */
.inf-toon {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) minmax(0, 2fr);
    gap: var(--sp-10);
    align-items: center;
}

/* Afwisselend links en rechts leest als een reeks. Alleen op brede schermen:
   onder elkaar hoort de tekst altijd boven het beeld. De kolommen draaien mee,
   anders komt de afdruk in de smalle tekstkolom terecht. */
.inf-toon--beeld-links {
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
}

    .inf-toon--beeld-links .inf-schermafdruk {
        order: -1;
    }

@media (max-width: 1200px) {
    .inf-toon,
    .inf-toon--beeld-links {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-8);
    }

        .inf-toon--beeld-links .inf-schermafdruk {
            order: 0;
        }
}

.inf-schermafdruk {
    margin: 0;
    /* Niet uitvergroten voorbij de opnamebreedte; dan wordt hij wazig. */
    max-width: 1820px;
}

    .inf-schermafdruk a {
        display: block;
        border-radius: var(--r-md);
    }

    .inf-schermafdruk img {
        width: 100%;
        height: auto;
        display: block;
        border: 1px solid var(--border-subtle);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-raised);
    }

    .inf-schermafdruk a:hover img {
        border-color: var(--brand-accent-text);
    }

/* Wat de teler eraan heeft, de koersen en de varianten: tegels naast elkaar, op
   smalle schermen onder elkaar. De limoenstreep links is dezelfde accentkleur als
   elders in de schil. */
.inf-voordelen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--sp-6);
}

/* De vijf koersen: smallere tegels, zodat ze op een gewoon scherm op één rij
   passen - het is een reeks van weinig naar veel doseren. */
.inf-voordelen--smal {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.inf-voordeel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-6);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--brand-accent);
    border-radius: var(--r-sm);
    background: var(--surface-card);
}

.inf-voordeel__kop {
    margin: 0;
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
}

.inf-voordeel p {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--text-default);
}

/* Twee korte onderwerpen naast elkaar; smal onder elkaar. */
.inf-kolommen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--sp-10);
}

/* Meer weten: tekst links, de knop naar contact rechts; smal onder elkaar. */
.inf-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
}

/* De partnerlogo's. auto-fit en niet vier vaste kolommen: op de contactpagina
   staan er vier of vijf (Linde komt er in het Spaans bij), en met auto-fit hoeft
   dat aantal hier niet bekend te zijn. */
.inf-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--sp-6);
}

.inf-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--surface-card);
}

    .inf-logo:hover {
        border-color: var(--brand-accent-text);
    }

    .inf-logo img {
        width: 100%;
        max-width: 10rem;
        height: 3.5rem;
        object-fit: contain;
    }


/* == Contactkaarten ======================================================== */
.inf-kaarten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: var(--sp-6);
    align-items: stretch;
}

/* Elke kaart: logo boven, adres in het midden, knoppen onderaan. De knoppen op
   dezelfde hoogte houden vraagt om margin-top:auto op de knoppenrij - anders
   staan ze per kaart op een andere plek, afhankelijk van hoe lang het adres is. */
.inf-kaart {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding: var(--sp-6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--surface-card);
}

.inf-kaart__logo {
    height: 3.5rem;
    max-width: 10rem;
    object-fit: contain;
    object-position: left;
}

.inf-kaart__naam {
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
}

.inf-kaart address {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    font-style: normal;
    color: var(--text-default);
}

    .inf-kaart address a {
        color: var(--text-link);
    }

.inf-kaart__acties {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
}


/* == Releasenotes ========================================================== */

/* Eén blok per publicatiedatum: datum als kop, wijzigingen eronder. */
.inf-release + .inf-release {
    margin-top: var(--sp-8);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--border-hair);
}

.inf-release__datum {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-subtle);
    margin: 0 0 var(--sp-5);
}

/* Een release met meer dan een handvol punten krijgt tussenkoppen. Na de inleiding of
   een vorige lijst staat de kop wat los, zodat de groepen als groepen lezen. */
.inf-release > .inf-kop {
    margin: var(--sp-6) 0 var(--sp-4);
}

/* Versie en publicatiedatum rechtsboven: klein, als label met de waarde eronder - een
   gegeven om op te zoeken, geen kop die aandacht vraagt. */
.inf-versie {
    display: flex;
    gap: var(--sp-7);
    margin: 0;
}

    .inf-versie dt {
        font-family: var(--font-mono);
        font-size: var(--fs-label);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
        color: var(--text-subtle);
    }

    .inf-versie dd {
        margin: var(--sp-1) 0 0;
        font-size: var(--fs-body);
        font-weight: var(--fw-semibold);
        color: var(--text-strong);
    }


/* == Help ================================================================== */

/* De inhoudsopgave bovenaan. De hoofdstukken staan eronder op dezelfde pagina;
   dit zijn sprongen binnen het scherm en geen echte navigatie. */
.inf-inhoud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

    .inf-inhoud a {
        display: inline-flex;
        padding: var(--sp-3) var(--sp-5);
        border: 1px solid var(--border-default);
        border-radius: var(--r-sm);
        background: var(--surface-card);
        font-size: var(--fs-body);
        color: var(--text-default);
        text-decoration: none;
    }

        .inf-inhoud a:hover {
            background: var(--brand-accent-wash);
            color: var(--text-link);
        }

/* Een hoofdstuk krijgt een eigen ankerpunt. scroll-margin-top en niet het oude
   trucje met een verborgen <a> op top:-80px: dat anker stond los van de kaart en
   liep bij elke wijziging van de kophoogte weer mis. */
.inf-hoofdstuk {
    scroll-margin-top: var(--sp-8);
}

/* Schermafbeeldingen in de help. Ze zijn op hun eigen schermgrootte gemaakt en
   mogen niet uitvergroot worden - vandaar een bovengrens en geen 100%. */
.inf-beeld {
    width: 100%;
    max-width: 44rem;
    height: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    display: block;
}