/*
 * Teckenstorlek, typsnitt, vikt och radavstånd ligger i typography.css, som är
 * enda auktoriteten på typografi. Reglerna som stod här satte en egen skala med
 * clamp() — brödtext upp till 20px och .my-title upp till 40px oavsett om
 * klassen satt på en h1 eller en h2 — vilket gjorde profilens skala omöjlig att
 * följa. Se GrafiskDesignWeb.md.
 */

/* Radbryt marginal */
.text-block p {
    margin-bottom: 23px;
}


/*Button css*/
/*
 * Sajtens call-to-action. Var en vit ruta med grå kant som fyllde med temafärgen
 * först vid hover — profilen anger motsatsen: primärknappen har temafärg som
 * bakgrund och vit text i viloläge, med #006a9e vid hover. Höjd 40px, 16px
 * vågrät padding, r-sm, 13px Roboto 500, 100 ms ease-out.
 */
.nov-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    background-color: var(--theme-fill);
    color: var(--text-on-fill);
    border: 1px solid var(--theme-fill);
    border-radius: var(--r-sm);
    text-align: center;
    text-decoration: none;
    transition: background-color 100ms ease-out, border-color 100ms ease-out;
}

.nov-button:hover,
.nov-button:focus-visible {
    background-color: var(--theme-fill-hover);
    border-color: var(--theme-fill-hover);
    color: var(--text-on-fill);
}

@media (prefers-reduced-motion: reduce) {
    .nov-button { transition: none; }
}

/* Hero-CTA:n är större enligt profilen: 48px höjd, 24px padding. */
.button-and-text-inside-video .nov-button {
    min-height: 48px;
    padding: 0 24px;
}

/*
 * Hero-texten över filmen.
 *
 * Låg tidigare på `left: 520px` med `translateX(-50%)`, alltså en fast
 * pixelposition, med tre mediefrågor som flyttade den till 350, 250 och 150px.
 * Den lösningen kan inte hålla sig innanför innehållsbredden: på en bred skärm
 * hamnade texten långt till vänster om övrigt innehåll, och på en smal svämmade
 * den över kanten.
 *
 * Nu ligger blocket i samma kolumn som resten av sidan — profilens 1200px
 * maxbredd med 24px sidmarginal (16px under 768px) — och vänsterställs i den.
 * Rubriken linjerar därmed med sidans övriga innehåll.
 */
.button-and-text-inside-video {
    position: relative;
    z-index: 2;
    width: min(1200px, 100% - 48px);
    margin: 0 auto;
    padding-block: 3rem 4rem;
    text-align: left;
    /* Ligger över video och scrim, alltid mörk bakgrund */
    color: var(--text-on-fill);
}

/*
 * Epix-logotypen ovanför rubriken. Proportionerna kommer ur svg:ens viewBox
 * (21,92 × 7,77), alltså 2,82:1 — 280px bredd ger 99px höjd. Måtten står också
 * som attribut i markupen, så att raden inte hoppar innan svg:en är läst.
 *
 * Skalas ned i samma två steg som profilens rubrikskala, så att logotypen och
 * rubriken behåller sitt storleksförhållande på mindre skärmar.
 */
.hero-epix-logo {
    display: block;
    width: 280px;
    height: auto;
    margin-bottom: 24px;
}

@media (max-width: 1023px) {
    .hero-epix-logo {
        width: 200px;
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .hero-epix-logo {
        width: 160px;
        margin-bottom: 16px;
    }
}

@media (max-width: 767px) {
    .button-and-text-inside-video {
        width: min(1200px, 100% - 32px);
    }
}

/* Hero-texten är sidans h1. Selektorn träffar båda, så CSS:en fungerar även
   om markupen ändras tillbaka. Storleken sätts i typography.css. */
.button-and-text-inside-video h1,
.button-and-text-inside-video p {
    margin: 0;
}

/*
 * Inledande animation. Utgångsläget `opacity: 0` låg tidigare direkt på
 * elementet, vilket innebär att innehållet är osynligt till animationen kört —
 * och permanent osynligt om den av något skäl inte gör det. Utgångsläget ligger
 * nu i mediefrågan, så att texten är synlig som grundtillstånd och animationen
 * är det som läggs till.
 */
.text-wrapper {
    text-align: left;
    max-width: 900px;
}

@media (prefers-reduced-motion: no-preference) {
    .text-wrapper {
        opacity: 0;
        transform: translateY(50px);
        animation: slideUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
    }
}

.show-more-btn {
    font-family: var(--font-body);
    font-size: var(--text-button);
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.3s;
    text-decoration: underline;
    margin-top: 15px;
}

.show-more-btn:hover {
    color: var(--theme-text-hover);
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Formulärfel. Färger från tokens. Ikonen finns med eftersom färg aldrig
   får vara ensam informationsbärare. */
.form-notice {
    font-family: 'Roboto', sans-serif;
    font-size: var(--text-body);
    line-height: 1.5;
    color: var(--accent-text);
    background-color: var(--accent-tint);
    border: 1px solid var(--accent-fill);
    border-radius: var(--r-sm);
    padding: 12px 16px;
    margin-bottom: 24px;
}

.field-error {
    font-family: 'Roboto', sans-serif;
    font-size: var(--text-nav);
    color: var(--accent-text);
    margin-top: 4px;
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
    border-color: var(--accent-fill);
}

/* Personuppgiftsnotis vid kontaktformuläret.
   Informationen lämnas där uppgifterna faktiskt samlas in. */
.privacy-note {
    font-family: 'Roboto', sans-serif;
    border-left: 3px solid var(--theme-fill);
    background-color: var(--theme-tint);
    padding: 16px 20px;
    border-radius: var(--r-sm);
}

@media (max-width: 767px) {
    .privacy-note { padding: 16px; }
}

.privacy-note h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--text-body);
    font-weight: 500;
    margin: 0 0 12px;
}

.privacy-note p {
    font-size: var(--text-nav);
    line-height: 1.5;
    margin-bottom: 12px;
}

.privacy-note p:last-child {
    margin-bottom: 0;
}

.privacy-inline {
    font-family: 'Roboto', sans-serif;
    font-size: var(--text-nav);
    line-height: 1.5;
    color: var(--text-secondary);
    margin-top: 24px;
}

/* Bilder från partials/img.ejs skall fylla sin kolumn */
picture {
    display: block;
}

picture img {
    width: 100%;
    height: auto;
}

/* Fast höjd för kundkommentarer */
/* Höjden sätts av skriptet i index.ejs efter det längsta citatet. En fast
   höjd på 80px låg här tidigare, och på mobil var det första citatet högre än
   så och rann ut över innehållet under. */
.customer-quotes {
    transition: opacity 200ms ease-out;
}

.customer-quotes.is-fading {
    opacity: 0;
}


/* Video css */
/*
 * Hero-ytan.
 *
 * Höjden var `calc(100vh - 6.25rem)`, alltså 100px, vilket motsvarade den gamla
 * menyradens höjd. Menyn är 64px sedan profilens mått infördes. svh i stället för
 * vh, eftersom vh på mobil räknar med den adressrad som göms vid skrollning.
 *
 * Textblocket ligger nu i normalflödet, bottenställt med flex, i stället för
 * absolut positionerat på `bottom: 15%`. Skälet är att blocket växte när
 * Epix-logotypen lades till: ett bottenankrat block som blir högre än
 * `85 %` av behållaren får sin överkant utanför, och behållaren har
 * `overflow: hidden` — så logotyp och rubrik klipptes bort medan knappen blev
 * kvar. Med flex kan innehållet inte hamna utanför, oavsett hur högt det blir,
 * och min-height gör att ytan växer om innehållet inte får plats.
 */
.border-video-container {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-height: calc(100vh - 64px);
    min-height: calc(100svh - 64px);
    overflow: hidden;
}

/* Filmen fyller ytan bakom innehållet. */
.video-style {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Scrim bakom hero-texten.
 *
 * Filmen är ljus — vitt kontorsljus, vita skärmar, ljus tröja — medan
 * hero-texten är vit. Rubriken var därför i praktiken oläsbar där den korsade
 * skrivbordet och pappersbunten, och Epix-logotypen hade fått samma problem.
 *
 * Gradienten går uppåt från underkanten i stället för in från vänstern, eftersom
 * textblocket är centrerat i 1200px-kolumnen: på en bred skärm börjar det långt
 * in från vänsterkanten, och en vänsterställd gradient hade tonat ut innan den
 * nådde texten. Nedifrån täcker den textblocket oavsett skärmbredd.
 *
 * Färgen är --bg-page i mörkt tema, alltså sajtens egen mörka yta.
 */
.border-video-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(15, 17, 23, 0.85) 0%,
        rgba(15, 17, 23, 0.6) 30%,
        rgba(15, 17, 23, 0) 65%
    );
}







/* Scroll efter redirect till affärssystem */
#order {
    scroll-margin-top: 100px;
}

#whAndLogistic {
    scroll-margin-top: 100px;
}

#tpl {
    scroll-margin-top: 100px;
}



/* Indexcard */
/* Fyra kort: WMS, OIS, 3PL och MPS. Var flex med `max-width: 30%`, vilket höll
   tre på en rad och tvingade ned det fjärde ensamt. Rutnätet lägger fyra på en
   rad på skrivbord, två på surfplatta och ett i mobilen, utan brytpunkter. */
.card-container {
    display: grid;
    /* Uttryckligt antal kolumner i stället för auto-fit: kolumnen är två
       tredjedelar av containern, så auto-fit slog om till tre kort på raden
       och ett ensamt på nästa redan vid vanliga bärbara skärmbredder. */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0 0 4rem;
}

@media (max-width: 900px) {
    .card-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .card-container {
        grid-template-columns: 1fr;
    }
}

/* Tre kort i stället för fyra, till driftformerna. Utan detta ger auto-fit
   två på raden och ett ensamt på nästa. */
.mode-grid.is-three {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
    .mode-grid.is-three {
        grid-template-columns: 1fr;
    }
}

.index-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.index-card {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-surface);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-subtle);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    aspect-ratio: 1/1;
}

.index-card:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-overlay);
}

.index-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Ligger över bild med mörkt överlägg */
    color: var(--text-on-fill);
    text-align: center;
    width: 100%;
    padding: 10px;
    background-color: var(--overlay-soft);
    z-index: 1; 
}

.text-overlay p {
    font-size: var(--text-body);
    margin: 10px 0;
}


/*
 * "Fyra sätt att använda Epix" — avsnittet med de fyra införandefallen.
 *
 * Flödesrutorna ritas i css i stället för att läggas in som bilder: de följer
 * temat, går att läsa upp och behöver inte byggas om när en text ändras.
 */
.epix-modes {
    margin: 4rem 0;
}

.epix-modes-intro {
    max-width: 62ch;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.mode-grid {
    display: grid;
    /* 25rem ger två kolumner i en 1200px-container, alltså 2×2 — inte tre kort
       på en rad och ett ensamt på nästa, vilket 20rem gav. */
    grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr));
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mode-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-subtle);
}

/* Samma inre marginal som övriga kort på mobil, se .large-card. */
@media (max-width: 767px) {
    .mode-card { padding: 16px; }
}

.mode-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
}

.mode-number {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--r-xs);
    background-color: var(--theme-fill);
    color: var(--text-on-fill);
    font-size: var(--text-body);
    font-weight: 600;
}

/* Sajtens reset nollar marginalen på p, och styckeavstånd sätts per block —
   jämför .text-block p. Utan detta blev kortets tre stycken en enda massa. */
.mode-card p {
    margin-bottom: 0.9rem;
}

/* Flödesraden: fylld ruta = Epix, streckad = kundens befintliga system. */
.mode-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.mode-box {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--theme-fill);
    border-radius: var(--r-sm);
    background-color: var(--theme-fill);
    color: var(--text-on-fill);
    font-size: var(--text-nav);
    /* Inte nowrap: i en radbrytande flexrad flyttar en ruta hellre ned till
       nästa rad än bryter sin text, så texten bryts bara när rutan inte ryms
       på en egen rad. Med nowrap stack den i stället ut ur kortet. */
    max-width: 100%;
}

.mode-box.is-own {
    border-style: dashed;
    border-color: var(--text-secondary);
    background-color: transparent;
    color: var(--text-secondary);
}

.mode-arrow {
    color: var(--text-secondary);
    font-size: var(--text-nav);
}

/* Passar-raden skjuts till kortets underkant så att de fyra korten får en
   gemensam avslutningsrad även när texterna är olika långa. */
.mode-fit {
    margin-top: auto;
    padding-top: 1rem;
    color: var(--text-secondary);
    font-size: var(--text-nav);
}

.mode-fit strong {
    color: var(--theme-text);
}

.mode-legend {
    margin-top: 1.25rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-nav);
}

/* Ingressen över modulkorten på startsidan. */
.modules-intro {
    max-width: 46rem;
    margin: 4rem auto 2rem;
    text-align: center;
}

.modules-intro p {
    margin-top: 0.75rem;
}

.modules-intro-link {
    color: var(--theme-text);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
}

.modules-intro-link:hover,
.modules-intro-link:focus-visible {
    color: var(--theme-text-hover);
    border-bottom-color: currentColor;
}

/*
 * Kontaktsidan i surfplattebredd. Formuläret ligger på halva bredden och
 * integritetsrutan på en fjärdedel, vilket på en 834px-skärm ger rutan omkring
 * 170px text — ungefär tjugo tecken per rad, alltså en spalt som inte går att
 * läsa. Under 1024px staplas de i stället.
 */
@media screen and (max-width: 1023px) {
    /* Raden måste också sluta vara en rad. Kolumnerna ligger kvar i
       flex-direction: row över 768px, så två fullbreda barn hamnade bredvid
       varandra och sköt ut sidan istället för att staplas. */
    .columns.contact-row {
        flex-direction: column;
    }

    /* Två klasser krävs: breddmodifierarna i layout.css är .column.is-half
       och väger tyngre än en ensam klass. */
    .column.contact-form-column,
    .column.contact-aside {
        flex: none;
        width: 100%;
    }
}

/*
 * Radlängd. Profilen anger max omkring 75 tecken för brödtext; stycket under
 * "Våra lösningar" låg på 100 tecken i surfplattebredd och 147 på skrivbord,
 * eftersom det spänner över hela containern utan egen begränsning.
 */
.lead-block p {
    max-width: 70ch;
}

/*
 * Fältrader i kontaktformuläret.
 *
 * Kolumnernas ränna görs med padding, inte med negativa marginaler (se
 * layout.css). I en formulärrad syns det: förnamn och efternamn drogs in 12px
 * på var sida och hamnade ur linje med e-post- och meddelandefälten, som ligger
 * i fältets fulla bredd. Raden dras därför ut lika mycket som rännan är bred.
 * Föräldern har samma padding, så ingenting sticker utanför.
 */
.columns.form-row {
    margin-inline: calc(var(--column-gap) * -1);
    /* Samma avstånd mellan fältraderna som mellan enskilda fält, alltså 1rem —
       annars blir det 24px inne i blocket och 16px utanför. */
    row-gap: 1rem;
}

/* På mobil har kolumnerna ingen ränna (se layout.css), så det finns inget att
   dra ut raden över — den negativa marginalen hade skjutit fälten 12px utanför
   sidmarginalen. */
@media (max-width: 767px) {
    .columns.form-row { margin-inline: 0; }
}

/*
 * Extrafälten i kontaktformuläret (telefon, företag, intresseområden) visas
 * bara för vissa ärenden. De fälldes tidigare fram med display, så att resten
 * av formuläret knuffades ned i ett ryck; nu fälls de ut under 200 ms.
 *
 * Radhöjden går från 0fr till 1fr, vilket animerar till innehållets verkliga
 * höjd utan att den behöver mätas. Bottenmarginalen — samma 1rem som mellan
 * övriga fält — följer med, eftersom blocket inte är någon .field.
 */
.extra-fields {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-bottom: 0;
    transition:
        grid-template-rows 200ms ease-out,
        opacity 200ms ease-out,
        margin-bottom 200ms ease-out;
}

.extra-fields.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-bottom: 1rem;
}

.extra-fields-inner {
    min-height: 0;
    overflow: hidden;
}

/* Helt utfällt: ingen klippning, så att fokusringen syns hela vägen runt. */
.extra-fields.is-settled .extra-fields-inner {
    overflow: visible;
}

/* Förvalt läge vid sidladdning ställs in utan animation. */
.extra-fields.is-instant {
    transition: none;
}

/* Text enbart för skärmläsare. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Large card */
.large-card {
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-subtle);
    margin-bottom: 2rem;
    background-color: var(--bg-surface);
}

/*
 * Kortens bild ligger i en halvbred kolumn. Staplat på mobil hamnade den
 * vänsterställd ovanför texten, medan skärmbilderna längre ned i korten är
 * centrerade — bilden centreras därför också.
 */
@media (max-width: 768px) {
    .large-card > .column.is-half-mobile {
        align-self: center;
        text-align: center;
    }
}

/*
 * Profilens 24px inre padding är avvägd mot desktopbredd. På en 360px-skärm tar
 * den tillsammans med sidmarginalen 80px av bredden; 16px ger samma avstånd som
 * sidmarginalen och samma inre marginal i alla kort och rutor på mobil.
 */
@media (max-width: 767px) {
    .large-card { padding: 16px; }
}

/*
 * Ingressen på Epix- och branschsidorna är indragen 48px per sida. Den satt
 * tidigare som ml-6/mr-6 i markupen och gällde därför även på mobil, där
 * indraget åt en tredjedel av bredden: texten fick omkring 200px och
 * innehållsförteckningens rubriker svämmade ut ur sin ruta.
 */
@media (min-width: 768px) {
    .page-intro { margin-inline: 3rem; }
}

/* Används inte för tillfället!*/
/* .card-content-collapsible {
    max-height: 200px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease;
} */

/* Används inte för tillfället!*/
/* .collapsible-text.expanded .card-content-collapsible {
    max-height: 2000px;
} */




/* Språk knapp */
.language-switcher {
    border: none;
    background-color: var(--bg-surface);
}

.language-switcher:hover {
    transform: scale(1.03);
    cursor: pointer;
}


/*
 * Sidhuvudet: rubriken och eventuell ingress överst på undersidorna.
 *
 * Avstånden satt tidigare som pt-6 med pb-6 eller pb-4 per vy, och det första
 * innehållet under hade sin egen toppmarginal ovanpå — så avståndet från rubrik
 * till innehåll blev 36, 48, 64, 72 eller 96px beroende på sida. Här är det
 * 48px ovanför rubriken och 48px ned till innehållet, överallt.
 */
.page-header {
    padding-block: 48px;
}

/* Ingressen står alltid lika långt under rubriken. */
.page-header h1 + p,
.page-title + * {
    margin-top: 24px;
}

/*
 * Innehållet under sidhuvudet börjar direkt; avståndet kommer från sidhuvudets
 * padding. Blocken har ofta mt-6 eller en egen marginal, eftersom de också
 * används längre ned på sidorna, så det nollas här i stället för i varje vy.
 * !important krävs för att slå mt-6, som är en hjälpklass med !important.
 */
.page-header + *,
.page-header + * > :first-child,
.page-header + * > :is(ol, ul):first-child > li:first-child {
    margin-top: 0 !important;
}

/*
 * Rubrik med Epix-logotypen till höger (Epix och Branscher). Tre spalter där
 * rubriken ligger i den mittersta, så att den står mitt på sidan precis som på
 * sidor utan logotyp.
 *
 * Logotypen är högre än rubriken. Låg den i flödet blev raden högre och
 * rubriken, som centreras i raden, flyttades ned 12px — den hoppade när man
 * bytte till sidan. Logotypen är därför absolut positionerad. Ett absolut
 * positionerat barn till ett grid får sin gridyta som referensram, så den
 * hamnar ändå i högerspalten, centrerad mot rubriken, men påverkar inte radens
 * höjd.
 */
.page-title.has-logo {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    text-align: center;
}

.page-title.has-logo h1 {
    grid-column: 2;
}

.page-title-logo {
    grid-column: 3;
    grid-row: 1;
    position: absolute;
    inset: 0;
    margin: auto;
    width: clamp(120px, 12vw, 160px);
    height: auto;
}

/* På mobil finns ingen plats bredvid rubriken. Logotypen läggs under den i en
   läsbar storlek; tidigare var den 12vw, alltså 47px på en 390px-skärm. */
@media (max-width: 767px) {
    .page-title.has-logo {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }

    .page-title.has-logo h1,
    .page-title-logo {
        grid-column: 1;
    }

    .page-title-logo {
        position: static;
        grid-row: auto;
        width: 140px;
    }
}


/* CSS för rullande kundloggor, index sidan */
.slide img {
    height: 80px;
    width: auto;
    object-fit: contain;
    padding: 10px;
    display: block;
}

/*
 * Kundlogotyperna löper över hela skärmbredden. Var tidigare kapad till 1260px
 * och centrerad, vilket gjorde att bandet slutade mitt på skärmen på en bredare
 * skärm i stället för att fortsätta ut.
 *
 * Sektionen runt omkring har ingen vågrät padding, så full bredd nås utan att
 * bryta ut ur någon behållare.
 *
 * Spåret är logotyperna två varv om — i dag 19 logotyper, alltså 38 brickor à
 * 200px och 7600px — och animationen flyttar det halva vägen. Andra halvan är en
 * kopia av den första, så loopen går ihop, och spåret är brett nog att täcka
 * även en mycket bred skärm. Antalet styrs av slideShowImages i installations.js.
 *
 * Mellanrummet ligger som margin-right på brickan, inte som `gap` på spåret.
 * Med `gap` blir spåret N×180 + (N−1)×20, eftersom det inte finns något
 * mellanrum efter sista brickan. translateX(-50%) flyttar då 10px kortare än
 * första halvan är bred, så loopen hoppade 10px varje varv. Med margin-right får
 * varje bricka exakt 200px och halva spåret blir exakt första halvan.
 */
.slideshow {
    overflow: hidden;
    width: 100%;
}

.slide-track {
    display: flex;
    animation: scroll 50s linear infinite;
    width: max-content;
}

/*
 * Pausa när besökaren håller pekaren över bandet. Samma resonemang som för
 * kundcitaten på startsidan: rörelsen skall inte byta motiv mitt i att någon
 * tittar på en logotyp.
 */
.slideshow:hover .slide-track,
.slideshow:focus-within .slide-track {
    animation-play-state: paused;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

}

.slide {
    flex: 0 0 auto;
    width: 180px;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    /* Bakgrund och kant sätts i theme.css — logotyper kräver helvitt */
    border-radius: var(--r-md);
}

/*
 * Utan rörelse: logotyperna som ett stillastående rutnät.
 *
 * Den globala regeln för reducerad rörelse (theme.css) kortar alla animationer
 * till 0,01 ms. För bandet betydde det att det hoppade direkt till slutläget —
 * halvvägs in i den dubblerade raden — och stannade där, med logotyper
 * avklippta i båda kanterna. Det såg ut som ett renderingsfel. Här stängs
 * animationen av helt, kopian döljs och brickorna bryts i rader inom sidans
 * innehållsbredd.
 */
@media (prefers-reduced-motion: reduce) {
    .slideshow {
        overflow: visible;
    }

    .slide-track {
        animation: none;
        width: auto;
        max-width: 1200px;
        margin: 0 auto;
        padding-inline: 24px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .slide {
        width: 160px;
        height: 90px;
        margin-right: 0;
    }

    .slide.is-copy {
        display: none;
    }

    /* Fast höjd, som i bandet: utan den faller bilden tillbaka på
       <img>-attributets 160px, och kvadratiska logotyper sticker ut. */
    .slide img {
        height: 76px;
        max-width: 100%;
    }
}

/* Tre i bredd på mobil, så att rutnätet inte blir sexton rader högt. */
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
    .slide-track {
        padding-inline: 16px;
        gap: 12px;
    }

    .slide {
        width: calc((100% - 24px) / 3);
        height: 72px;
    }

    .slide img {
        height: 60px;
    }
}






/* Miniatyrerna på Epix-sidan.
 *
 * Alla tre skall vara exakt lika höga. Höjden kan därför inte vara ett fast
 * mått: skrivbordsbilden är den bredaste (480×268), så det är den som avgör
 * hur hög raden får bli innan den spränger sin kolumn. Länken får bildens
 * eget förhållande som aspect-ratio och bilden fyller höjden — då blir höjden
 * automatiskt kolumnbredden delad med 1,79, och de stående mobil- och
 * surfplattebilderna blir smalare men precis lika höga.
 *
 * Höjden ligger på länken, inte på bilden, så att raden reserverar sin plats
 * innan de lata bilderna laddat. Låg måttet på bilden med width/height:auto
 * blev den 0×0 tills den kom, och sidan hoppade.
 *
 * Ram och skugga sitter på bilden och ingen object-fit används, så kanten
 * följer bildens verkliga form. Tidigare satt höjden på bilden ihop med
 * object-fit: contain och en vit platta, vilket ritade vita fält över och
 * under de breda skrivbordsbilderna. */
.image-link {
    position: relative;
    display: block;
    width: 100%;
    /* Taket för höjden: 286px bredd × 268/480 ger 160px, alltså samma 10rem
       som raden hade när höjden var ett fast mått. */
    max-width: 17.875rem;
    margin: 0 auto 30px;
    aspect-ratio: 480 / 268;
}

/* Absolut placerad, av ett skäl: ett procentuellt height mot en förälder vars
   höjd kommer ur aspect-ratio räknas som obestämt i normalflödet, och bilden
   föll tillbaka på sin egen höjd — mobil- och surfplattebilderna blev då
   dubbelt så höga som skrivbordsbilden. Mot ett absolut placerat element
   resolverar procenten mot förälderns utfyllnadsruta, som är bestämd.
   inset + margin: auto centrerar den smalare bilden i rutan. */
.thumbnailImg {
    position: absolute;
    inset: 0;
    margin: auto;
    height: 100%;
    width: auto;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-subtle);
    transition: transform var(--t-hover), box-shadow var(--t-hover), opacity 200ms ease-out;
}

/* Laddas lazy. Tills bilden är hämtad syntes en tom ram som plötsligt fylldes;
   nu tonar den in när den är klar. Klassen sätts bara av reveal.js. */
.thumbnailImg.is-loading {
    opacity: 0;
}

.thumbnailImg:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-overlay);
}

/* Förstoringen (lightbox).

   Den styrs med klassen .is-open, inte med inline display. Tidigare satte
   skriptet display:block, vilket slog ut flex-centreringen härifrån och lade
   bilden i vänsterkanten. Visibility i stället för display gör dessutom att
   in- och uttoningen går att animera. */
.modal {
    position: fixed;
    inset: 0;
    /* Över den fasta menyn (1000 i navbar.css). På 100 låg menyraden kvar
       ovanpå förstoringen och dolde stängknappen i övre högra hörnet. */
    z-index: 5000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: clamp(1rem, 4vh, 3rem) clamp(1rem, 4vw, 3rem);
    background-color: transparent;
    visibility: hidden;
    transition: background-color var(--t-modal), visibility 0s linear 200ms;
}

/*
 * Bakgrund, stängknapp och bild tonas var för sig i stället för att hela
 * modalen tonas. Bilden växer nämligen ut ur miniatyren (skriptet i
 * partials/epix-modal) och skall vara fullt synlig under tiden — tonades
 * modalen hade den bleknat samtidigt. is-closing håller modalen synlig tills
 * bilden har krympt tillbaka.
 */
.modal.is-open,
.modal.is-closing {
    visibility: visible;
    transition: background-color var(--t-modal), visibility 0s;
}

.modal.is-open {
    background-color: var(--overlay-strong);
}

.modal .close-btn,
.modal .modal-content {
    opacity: 0;
}

.modal.is-open .close-btn,
.modal.is-open .modal-content,
.modal.is-flip .modal-content {
    opacity: 1;
}

.modal .modal-content {
    transition: opacity var(--t-modal);
    transform-origin: 0 0;
}

.modal.is-flip .modal-content {
    transition: none;
}

/* Bilden fyller ytan som blir kvar när bildtexten tagit sin plats, i stället
   för 90% av fönstret ovanpå en fast toppmarginal — det senare gjorde att
   nederkanten hamnade utanför rutan på låga fönster. */
.modal-content {
    display: block;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-modal);
}


/* Stängknappen är ett <button> och behövde nollställas — utan det ritade
   webbläsaren sin egen grå knappruta runt krysset. */
.close-btn {
    position: absolute;
    top: clamp(0.5rem, 2vh, 1.25rem);
    right: clamp(0.5rem, 2vw, 1.25rem);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    background: transparent;
    color: var(--text-on-fill);
    font-family: inherit;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--t-hover), border-color var(--t-hover), opacity var(--t-modal);
}

.close-btn:hover,
.close-btn:focus-visible {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--text-on-fill);
}

/* Bakgrunden skall inte kunna skrollas medan förstoringen är uppe. */
body.modal-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .modal,
    .thumbnailImg {
        transition: none;
    }
}





/* Media */
@media (max-width: 1600px) {
}

@media (max-width: 1200px) {
    .border-video-container {
        height: 500px;
    }

    .video-style {
        height: 100%;
    }
}

@media (max-width: 675px) {
    .border-video-container {
        height: 300px;
    }

}


/* ── Inscroll ───────────────────────────────────────────────────────────── */

/*
 * Block som tonar in när de når vyn. Klasserna sätts av reveal.js, som också
 * förklarar när de inte sätts alls (utan JavaScript, vid reducerad rörelse och
 * för det som syns redan när sidan laddas). Profilen anger 250 ms ease-out.
 *
 * Transformen glider bara 12px. Mer än så ser teatraliskt ut, och en inglidning
 * från sidan hade kunnat ge vågrät rullning på mobil.
 */
[data-reveal].is-pending {
    opacity: 0;
    transform: translateY(12px);
}

[data-reveal].is-revealing {
    transition:
        opacity 250ms ease-out var(--reveal-delay, 0ms),
        transform 250ms ease-out var(--reveal-delay, 0ms);
}

/*
 * Stegen i ett flöde tänds i ordning efter blocket — Epix flödesrutor, där
 * OIS → WMS → Produktion är själva innehållet. 80 ms mellan stegen.
 */
[data-reveal].is-pending [data-reveal-steps] > * {
    opacity: 0;
    transform: translateX(-6px);
}

[data-reveal].is-revealing [data-reveal-steps] > * {
    transition: opacity 200ms ease-out, transform 200ms ease-out;
    transition-delay: calc(var(--reveal-delay, 0ms) + 150ms + var(--reveal-step, 0) * 80ms);
}

/* Utskrift: ett block som aldrig skrollats fram skall ändå synas på papper. */
@media print {
    [data-reveal].is-pending,
    [data-reveal].is-pending [data-reveal-steps] > * {
        opacity: 1;
        transform: none;
    }
}

/*
 * Hoppmålet markeras. Via innehållsförteckningen, eller en länk från
 * startsidan till #whAndLogistic, hamnar man mitt i en lång sida med många
 * likadana kort — en ram som tonar bort visar vilket av dem man kom till.
 * Ramen står kvar en stund, så att den syns även efter en mjuk skrollning.
 */
.large-card:target {
    animation: target-flash 1600ms ease-out;
}

@keyframes target-flash {
    0%, 35% { box-shadow: 0 0 0 3px var(--theme-text), var(--shadow-subtle); }
    100% { box-shadow: 0 0 0 0 transparent, var(--shadow-subtle); }
}


/* ── Sidövergångar ──────────────────────────────────────────────────────── */

/*
 * Cross-document View Transitions: i stället för att sidan blinkar vit vid
 * klick tonar den över. Menyraden har ett eget namn och står därmed stilla,
 * understrykningen under aktiv menypost glider till den nya posten, och
 * kundlogotypen följer med mellan referensväggen och kundsidan (skriptet i
 * layout.ejs sätter namnet på rätt kort).
 *
 * Webbläsare utan stöd byter sida som tidigare. Vid reducerad rörelse slås
 * övergången av helt.
 */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 200ms;
    animation-timing-function: ease-out;
}

.navbar { view-transition-name: site-header; }
.nav-indicator { view-transition-name: nav-indicator; }
.customer-page-logo { view-transition-name: customer-logo; }

::view-transition-group(nav-indicator) {
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/*
 * Logotypplattan är 200×180 i väggen och 220×120 på kundsidan. Standard är att
 * ögonblicksbilderna skalas med gruppens bredd, vilket hade tänjt ut plattan
 * och flyttat logotypen i höjdled. Här behåller bilderna sin storlek, centrerade,
 * och gruppen klipper till sin kontur — plattan ändrar form medan logotypen,
 * som är ungefär lika stor på båda sidorna, ligger kvar i mitten.
 */
::view-transition-group(customer-logo) {
    animation-duration: 350ms;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden;
    border-radius: var(--r-md);
}

::view-transition-old(customer-logo),
::view-transition-new(customer-logo) {
    width: 100%;
    height: 100%;
    object-fit: none;
    object-position: center;
}

/* Kortet som klickades: utan hoverlager och förstoring när det fotograferas.
   :hover står med för att väga lika tungt som hoverreglerna i customerCard.css,
   som laddas efter den här filen. */
.customer-card.is-leaving,
.customer-card.is-leaving:hover {
    transform: none;
    transition: none;
}

.customer-card.is-leaving .additional-info,
.customer-card.is-leaving:hover .additional-info {
    opacity: 0;
    transition: none;
}