/*
Extra CSS för "kort"
Alltså kontaktkort samt partner-logotyper
*/

/* Själva kortets yttre skal */
.card-container {
    display: flex;
    align-items: center; /* Centrerar bild och text vertikalt mot varandra */
    gap: 20px;           /* Avstånd mellan bild och textblocket */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;  /* Matchar kortets hörn lite snyggt */
    max-width: 450px;    /* Sätter en lagom maxbredd så det ser ut som ett visitkort */
    border: 2px solid #8cb059;
}

/* Bildens behållare */
.card-avatar-wrapper {
    flex-shrink: 0;      /* Ser till att bilden aldrig trycks ihop om skärmen blir smal */
}

/* Magin för att göra bilden helt rund */
.card-avatar {
    width: 100px;
    height: 100px;
    object-fit: cover;   /* Gör att bilden inte blir utsträckt/deformerad */
    border-radius: 50%;  /* 50% gör bilden till en perfekt cirkel så länge width/height är samma */
    border: 2px solid rgba(255, 255, 255, 0.5); /* Valfritt: En diskret vit kant runt bilden */
}

/* Textblocket till höger */
.card-content {
    display: flex;
    flex-direction: column; /* Staplar titel, roll och kontaktinfo vertikalt */
    justify-content: center;
}

/* Titeln / Namnet */
.card-title {
    margin: 0 0 4px 0;   /* Nollställer WP:s standardmarginaler och sätter lite luft under */
    font-size: 1.2rem;
    font-weight: bold;
}

/* Rollen / Yrkesstiteln */
.card-role {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    text-transform: uppercase; /* Valfritt: Gör titeln lite mer "skylt-lik" */
    letter-spacing: 0.5px;
    opacity: 0.8;             /* Gör texten subtilt ljusare än namnet */
}

/* Kontaktinfon (de tre raderna) */
.card-contact-info {
    display: flex;
    flex-direction: column; /* Staplar telefon, mail etc på högkant */
    gap: 4px;               /* Luft mellan de tre raderna */
    font-size: 0.9rem;
}


/* Stil för partner-logo's */

/* Själva kortets yttre skal */
.partner-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrerar bild och text vertikalt mot varandra */
    gap: 0px;           /* Avstånd mellan bild och textblocket */
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;  /* Matchar kortets hörn lite snyggt */
    max-width: 400px;    /* Sätter en lagom maxbredd så det ser ut som ett visitkort */
    /*min-width: 440px; */
    border: 2px solid #8cb059;
}

/* Bildens behållare */
.partner-avatar-wrapper {
    flex-shrink: 1;    /* Ser till att bilden aldrig trycks ihop om skärmen blir smal */
}

/* Magin för PartnerKortet's logo */
.partner-logo {
    max-width: 335px;
    /* height: 100px; */
    object-fit: contain;
    border-radius: 8%;  /* 50% gör bilden till en perfekt cirkel så länge width/height är samma */
    /* border: 2px solid rgba(255, 255, 255, 0.5); */
}