.customer-grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.customer-grid-item {
    flex-shrink: 0;
    /* Prevent items from shrinking if space is tight */
    flex-grow: 0;
    /* Prevent items from growing */
}

/* Customer Card */
.customer-card {
    width: 200px;
    height: 180px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-radius: var(--r-md);
    overflow: hidden;
    /* Bakgrund och kant sätts i theme.css — logotyper kräver helvitt */
    position: relative;
    transition: transform 0.3s ease;
}

.customer-card-image {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/*
 * <picture> är flexobjektet, inte <img>.
 *
 * Logotyperna renderas som <picture> med avif- och webp-källor och <img> som
 * reserv; bara SVG läggs ut som ett ensamt <img>. Centreringen på
 * .customer-card-image träffar därför <picture>-elementet, och img:ens
 * `max-width: 90%` räknades mot <picture> — som i sin tur krympte till
 * innehållets bredd. Resultatet var att raster-logotyperna hamnade osymmetriskt
 * medan SVG-logotyperna satt rätt.
 *
 * <picture> fyller nu hela bildytan och centrerar sitt <img>, så att båda
 * fallen beter sig likadant.
 */
.customer-card-image picture {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.customer-card-image img {
    /* Lite luft in mot kortets kant. */
    max-width: 90%;
    max-height: 90%;
    /* Bredd och höjd i markupen är kortets bildyta, inte logotypens egna mått,
       så bilden måste passas in i rutan utan att beskäras. */
    object-fit: contain;
    object-position: center;
}

.customer-card:hover {
    transform: scale(1.05);
}

.additional-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-medium);
    /* Ligger över mörkt överlägg i båda teman */
    color: var(--text-on-fill);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Luft in mot kortets kant. Utan padding gick texten kant i kant. */
    padding: 12px;
    gap: 4px;
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.3s ease-in-out;
}

.customer-card:hover .additional-info {
    opacity: 1;
    /* Visible on hover */
}

/*
 * Texten får inte bli högre än kortet.
 *
 * Kortet har fast storlek och beskär sitt innehåll, och lagret centrerar texten
 * lodrätt — så en lång beskrivning sköt ut över både över- och underkanten och
 * klipptes i båda ändar. På mobilens 160×140-kort gällde det ett tiotal kunder.
 *
 * Varje del kapas därför till ett fast antal rader med ellips: namnet till två,
 * orten till en och beskrivningen till det som ryms under dem. Hela texten står
 * på kundsidan som kortet länkar till.
 */
.additional-info h4,
.additional-info p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    max-width: 100%;
    overflow: hidden;
    /* Långa sammansatta ord ("distributionscentral") är bredare än mobilkortet
       och klipptes annars i högerkanten. */
    overflow-wrap: anywhere;
}

.additional-info p {
    margin: 0;
    font-size: var(--text-label);
    line-height: 1.35;
}

/* Orten, när den finns — beskrivningen är alltid sist. */
.additional-info p:not(:last-child) {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.additional-info p:last-child {
    margin-top: 4px;
    -webkit-line-clamp: 5;
    line-clamp: 5;
}

/* Installationskartan. Färger kommer från tokens.css via theme.css;
   här bara geometri. Bredden är inte längre låst till 1300px. */
.nov-map {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--map-ocean);
    border: 1px solid var(--map-border);
    border-radius: var(--r-md);
    overflow: hidden;
}

.nov-map-installations {
    max-width: 1200px;
    margin: 24px auto;
}

/* Kontorskartan: locator, inte vägvisare. Natural Earth 50m har inga gator,
   så den visar var Göteborg ligger — vägbeskrivningen sköter Google-länken. */
.nov-map-office {
    aspect-ratio: 4 / 3;
}

.map-marker.is-static circle {
    fill: var(--accent-text);
    fill-opacity: 1;
    stroke-width: 2;
}

.map-marker-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    fill: currentColor;
    dominant-baseline: hanging;
}

/* Kontaktsidans kontorssektion */
.office-location {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 32px;
    align-items: center;
    margin: 48px 0;
}

.office-details h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: var(--text-h3);
    font-weight: 500;
    margin: 0 0 16px;
}

.office-details address {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-size: var(--text-body);
    line-height: 1.6;
    margin-bottom: 16px;
}

.office-details p {
    margin-bottom: 16px;
}

.office-note {
    font-size: var(--text-label);
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .office-location {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.map-svg {
    display: block;
    width: 100%;
    height: 100%;
    /* Kartan sköter själv panorering och nypzoom (nov-map.js), så
       webbläsaren får varken skrolla eller zooma sidan när gesten börjar på
       kartan. */
    touch-action: none;
    cursor: grab;
}

.map-svg.is-dragging {
    cursor: grabbing;
}

.map-land path {
    fill: var(--map-land);
    stroke: var(--map-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.map-marker circle {
    fill: var(--theme-text);
    fill-opacity: 0.75;
    stroke: var(--bg-surface);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    transition: fill-opacity 100ms ease-out;
}

.map-marker { cursor: pointer; }
.map-marker:hover circle { fill-opacity: 1; }
.map-marker.is-active circle { fill: var(--accent-text); fill-opacity: 1; }

.map-marker:focus { outline: none; }
.map-marker:focus-visible circle {
    stroke: var(--accent-text);
    stroke-width: 3;
    fill-opacity: 1;
}

.map-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.map-controls button {
    width: 32px;
    height: 32px;
    font-size: var(--text-body);
    line-height: 1;
    font-family: 'Roboto', sans-serif;
    background: var(--bg-surface);
    color: inherit;
    border: 1px solid var(--map-border);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background-color 100ms ease-out;
}

.map-controls button:hover { background: var(--theme-tint); }
.map-controls button:focus-visible {
    outline: 2px solid var(--theme-text);
    outline-offset: 2px;
}

/* Metapunkter: markörer som skär varandra på skärmen slås ihop. Läge, storlek
   och opacitet sätts per bildruta av nov-map.js; här bara utseendet. */
.map-cluster circle { fill-opacity: 0.9; }

.map-cluster-count {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    user-select: none;
}

/* Navet som blir kvar när metapunkten är sprängd. Ett klick drar ihop den. */
.map-cluster.is-hub circle {
    fill-opacity: 1;
    stroke-width: 1.5;
}

.map-marker.is-hover circle { fill-opacity: 1; stroke-width: 2.5; }

/* Markörer på väg bort skall inte gå att träffa medan de tonar ut. */
.map-marker.is-leaving { pointer-events: none; }

.map-legs { pointer-events: none; }

.map-markers { transition: opacity 300ms ease-out; }
.map-svg.has-exploded .map-markers:not(.map-markers-top) { opacity: 0.35; }

.map-legs line {
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

/* Textbrickorna staplas uppifrån i en kolumn längs vänsterkanten. Kolumnen
   släpper igenom pekaren till kartan tills den svämmar över och måste kunna
   rullas. */
.map-panels {
    position: absolute;
    left: 12px;
    top: 12px;
    bottom: 12px;
    width: min(340px, calc(100% - 24px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: none;
    /* Plats för brickornas skugga, som annars klipps av rullningen. */
    padding: 4px 6px 6px 4px;
    margin: -4px -6px -6px -4px;
    scrollbar-width: thin;
}

.map-panels.is-scrollable { pointer-events: auto; }

/* Kolumnen var tidigare bottenjusterad via margin-top: auto på första barnet.
   Det gav två olika lägen — en ensam bricka hamnade överst, eftersom den dolda
   raden med "Stäng alla" fortfarande var första barnet, medan en metapunkts
   brickor lade sig nedtill — och när raden doldes vid stängning försvann
   justeringen på en gång, så brickorna hoppade upp innan de tonade ut. Nu är
   alla toppjusterade. */

.map-panels-bar {
    position: sticky;
    /* Kolumnens egen utfyllnad räknas bort från sticky-kanten. */
    top: -4px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: none;
    padding: 6px 6px 6px 12px;
    border: 1px solid var(--map-border);
    border-radius: var(--r-md);
    background: var(--bg-surface);
    box-shadow: var(--shadow-overlay);
    font-family: 'Roboto', sans-serif;
    font-size: var(--text-nav);
    pointer-events: auto;
    max-height: 64px;
    transition:
        opacity 220ms ease-out,
        max-height 260ms ease-in-out,
        padding 260ms ease-in-out,
        margin 260ms ease-in-out,
        border-width 260ms ease-in-out;
}

/* Raden visas bara när fler än en bricka är öppen. Den fälls ihop på samma sätt
   och med samma tider som en stängd bricka (.map-panel.is-out), så att raden och
   brickorna under den försvinner i takt i stället för att raden blinkar bort.
   visibility slår om först när hopfällningen är klar och tar den ur
   tabbordningen. */
.map-panels-bar:not(.is-shown) {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    margin-bottom: -8px;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 160ms ease-out,
        max-height 260ms ease-in-out 80ms,
        padding 260ms ease-in-out 80ms,
        margin 260ms ease-in-out 80ms,
        border-width 260ms ease-in-out 80ms,
        visibility 0s linear 340ms;
}

.map-panels-bar button {
    padding: 4px 10px;
    font: inherit;
    font-weight: 500;
    background: transparent;
    color: inherit;
    border: 1px solid var(--map-border);
    border-radius: var(--r-sm);
    cursor: pointer;
}

.map-panels-bar button:focus-visible {
    outline: 2px solid var(--theme-text);
    outline-offset: 2px;
}

.map-panel {
    position: relative;
    flex: none;
    overflow: hidden;
    padding: 16px 40px 16px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--map-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-overlay);
    font-family: 'Roboto', sans-serif;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transform-origin: left bottom;
    transition:
        opacity 220ms ease-out,
        transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 150ms ease-out;
}

.map-panel.is-in {
    opacity: 1;
    transform: none;
}

/* Stängd bricka fälls ihop så att grannarna glider på plats i stället för
   att hoppa. Minusmarginalen äter upp kolumnens mellanrum. */
.map-panel.is-out {
    opacity: 0;
    transform: scale(0.96);
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    margin-bottom: -8px;
    pointer-events: none;
    transition:
        opacity 160ms ease-out,
        transform 200ms ease-out,
        height 260ms ease-in-out 80ms,
        padding 260ms ease-in-out 80ms,
        margin 260ms ease-in-out 80ms,
        border-width 260ms ease-in-out 80ms;
}

.map-panel.is-flash { animation: map-panel-flash 700ms ease-out; }

@keyframes map-panel-flash {
    0% { box-shadow: 0 0 0 3px var(--theme-text), var(--shadow-overlay); }
    100% { box-shadow: 0 0 0 0 transparent, var(--shadow-overlay); }
}

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

.map-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.map-panel p {
    font-size: var(--text-nav);
    line-height: 1.5;
    margin: 2px 0 0;
}

.map-panel-customer {
    font-size: var(--text-nav);
    font-weight: 500;
}

.map-panel-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    font-size: 20px;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    color: inherit;
    cursor: pointer;
}

.map-panel-close:hover { background: var(--theme-tint); }
.map-panel-close:focus-visible {
    outline: 2px solid var(--theme-text);
    outline-offset: 2px;
}

.map-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: var(--text-nav);
}

.map-status.is-error { color: var(--accent-text); }

@media (prefers-reduced-motion: reduce) {
    .map-marker circle,
    .map-controls button,
    .map-panel,
    .map-panels-bar { transition: none; }
    .map-panel { transform: none; }
}

.additional-info h4 {
    margin: 0;
    font-size: var(--text-body);
    font-weight: bold;
    line-height: 1.25;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}


/* De tidigare fasta bredderna (1300/1080/860px) är borta — kartan är flytande
   och styrs av sin behållare, så det behövs inga brytpunkter för bredden. */

@media (max-width: 768px) {
    /* Kartan blir för låg och bred på mobil i 16:9. */
    .nov-map-installations {
        aspect-ratio: 3 / 4;
    }

    /* Brickorna tar bara nedre delen, så att kartan syns ovanför. */
    .map-panels {
        top: 45%;
    }
}

@media (max-width: 768px) {
    .customer-card {
        width: 160px;
        height: 140px;
    }

    /* Mindre kort: tätare lager, något mindre namn och tre rader beskrivning. */
    .additional-info {
        padding: 8px;
        gap: 2px;
    }

    .additional-info h4 {
        font-size: var(--text-nav);
    }

    .additional-info p:last-child {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .customer-grid-container {
        gap: 15px;
    }
}