/* --- Befintlig Artikel Layout --- */
.artikel-container { width: 100%; margin-top: 40px; }
.artikel-rad { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 100%; }
.row-reverse { direction: rtl; }
.row-reverse .text-kolumn { direction: ltr; }
.bild-kolumn img { width: 100%; display: block; aspect-ratio: 1 / 1; object-fit: cover; cursor: pointer; }
.text-kolumn { padding: 10% 15%; }
.text-kolumn p { font-size: 1.15rem; line-height: 1.8; color: rgba(17, 26, 11, 1); font-weight: 300; text-align: left; }

/* --- Karusell --- */
.karusell-sektion { position: relative; margin: 100px 0; padding: 0 40px; }
.karusell-container { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 20px 0; }
.karusell-container::-webkit-scrollbar { display: none; }
.karusell-item { flex: 0 0 400px; aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; }
.karusell-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.karusell-item img:hover { transform: scale(1.05); }

/* Pilar */
.karusell-pil { position: absolute; top: 50%; transform: translateY(-50%); background: white; border: none; width: 45px; height: 45px; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; }
.pil-vanster { left: 10px; } .pil-hoger { right: 10px; }

/* --- LIGHTBOX (Korrigerad för att visas ÖVER allt) --- */
.lightbox {
    display: none;
    position: fixed; /* Låst till fönstret */
    z-index: 9999;   /* Extremt högt värde för att ligga överst */
    inset: 0;        /* Täcker hela skärmen */
    background: rgba(255, 255, 255, 0.98); 
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.lightbox-content {
    max-width: 80%;  /* Begränsad till 80% av bredden enligt önskemål */
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    cursor: default;
}

.close-lightbox {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 50px;
    font-weight: 100;
    line-height: 1;
    cursor: pointer;
    color: #000;
    z-index: 10000;
}

@media (max-width: 900px) {
    .artikel-rad, .row-reverse { grid-template-columns: 1fr; direction: ltr; }
    .karusell-item { flex: 0 0 280px; }
    .karusell-pil { display: none; }
    .lightbox-content { max-width: 95%; } /* Lite bredare på mobil */
}