/* ansatte.css */

/* Container for alle ansatte */
.employee-list {
    background: var(--section-bg); /* Samme nesten hvite bakgrunn som andre seksjoner */
    padding: 2rem; /* Padding rundt listen på store skjermer */
    padding-bottom: 4.6875rem; /* 75 piksler padding under siste ansatte */
	box-shadow: var(--shadow, 0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Grid for ansatte */
.employee-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* To kolonner på store skjermer */
    gap: 4.6875rem; /* 75 piksler mellom ansatte på store skjermer */
}

/* Hver ansatt */
.employee-item {
    display: flex;
    flex-direction: column; /* Standard for små skjermer */
    gap: 1rem; /* Luft mellom elementer */
    min-height: 1.5rem; /* Sørger for at høyden ikke kollapser */
}

/* Bilde */
.employee-image img {
    width: 100px; /* Endret tilbake til 100px */
    height: 100px; /* Endret tilbake til 100px */
    object-fit: cover; /* Sørger for at bildet fyller 100x100 uten forvrengning */
}

/* Navn */
.employee-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    margin-bottom: 1.5rem; /* Økt fra 0.625rem til 1.5rem (24 piksler) */
}

/* Tagger */
.employee-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem; /* 12 piksler padding under taggene */
}

.employee-tag {
    border: 1px solid var(--accent-color); /* Oransje kant */
    background: #FFFFFF; /* Hvit bakgrunn */
    color: var(--text-color); /* Nesten svart tekst */
    padding: 0.3125rem 0.4375rem; /* 5px topp/bunn, 7px venstre/høyre */
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center; /* Sentrert tekst */
    line-height: 1; /* Sørger for vertikal sentrering */
}

/* Kontaktinfo */
.employee-contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Tilbake til opprinnelig verdi (8 piksler) */
}

/* Kontakt-elementer (telefon og e-post) */
.employee-contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

/* Spesifikk justering for "VIS E-POST"-elementet */
.employee-contact-item:has(.show-email-btn) {
    margin-top: 0.3125rem; /* 5 piksler padding over knappen */
    margin-bottom: 1.25rem; /* 20 piksler padding under knappen */
}

/* "Vis e-post"-knappen */
.show-email-btn {
    border: 1px solid var(--accent-color); /* Oransje kant */
    background: #FFFFFF; /* Hvit bakgrunn */
    color: var(--text-color); /* Nesten svart tekst */
    padding: 0.3125rem 0.4375rem; /* Samme padding som .employee-tag */
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* Avstand mellom ikon og tekst */
    height: 1.5rem; /* Fast høyde for å sikre konsistens */
}

/* E-post håndtering */
.email-hidden {
    display: inline-flex;
    align-items: center;
    height: 1.5rem; /* Fast høyde for å matche knappen */
}

/* Lenker for telefon og e-post */
.employee-contact-link {
    color: var(--text-color); /* Samme farge alltid */
    text-decoration: none; /* Ingen understreking */
    display: inline-flex;
    align-items: center;
}

/* Juster e-post-lenken når den vises */
.employee-contact-item:has(.email-link:not([style*="display: none"])) {
    margin-top: 0.3125rem; /* 5 piksler padding over e-postadressen */
    margin-bottom: 1.25rem; /* 20 piksler padding under e-postadressen */
    height: 1.5rem; /* Fast høyde for å sikre konsistens */
}

.show-email-btn i {
    font-size: 0.75rem; /* Samme størrelse som teksten */
    color: var(--accent-color); /* Oransje ikon */
}

.show-email-btn:hover {
    background: #FFFFFF; /* Ingen fargeendring ved hover */
}

/* Fjern hover-effekt */
.employee-contact-link:hover {
    color: var(--text-color); /* Ingen fargeendring ved hover */
    text-decoration: none; /* Ingen understreking ved hover */
}

/* Telefon- og e-postikoner */
.employee-contact-item i {
    color: var(--accent-color); /* Oransje ikon */
}

/* Beskrivelse */
.employee-description {
    font-size: 1rem;
    line-height: 1.5;
}

/* Responsiv design for små skjermer */
@media (max-width: 767px) {
    .employee-list {
        grid-template-columns: 1fr; /* Én kolonne på små skjermer */
        gap: 4.6875rem; /* 75 piksler mellom ansatte på små skjermer */
        padding: 1rem; /* Redusert padding på små skjermer */
        padding-bottom: 4.6875rem; /* 75 piksler padding under siste ansatte */
    }

    .employee-item {
        gap: 0.75rem; /* Litt mindre luft mellom elementer på små skjermer */
    }

    .employee-name {
        font-size: 1.25rem; /* Redusert skriftstørrelse på små skjermer */
    }

    .employee-contact-item {
        font-size: 0.875rem; /* Redusert tekststørrelse på små skjermer */
    }

    .employee-description {
        font-size: 0.875rem; /* Redusert tekststørrelse på små skjermer */
    }
}

/* Store skjermer: Bilde til venstre, detaljer til høyre */
@media (min-width: 768px) {
    .employee-item {
        flex-direction: row;
        align-items: flex-start;
    }

    .employee-image {
        flex-shrink: 0; /* Forhindrer at bildet krymper */
    }

    .employee-details {
        flex: 1; /* Tar opp resten av plassen */
    }
}