/*
 * Styrelseporträtten på om-sico.html (#shl).
 *
 * Sex av de åtta källbilderna (images/Frame*.png, 168x168) har den grå glascirkeln inbränd i
 * själva PNG:en. Anna Kjellbins (Frame-3.png) och Tobias Ekbergs (tobias-ekberg.png) bilder är
 * frilagda utan cirkel, och ligger därför i en extra <div class="image-circle"> som Webflow
 * rundar med border-radius: 999px och overflow: hidden.
 *
 * Wrappern håller inte i mobilvyn. Under 480 px staplar Webflow kortet
 * (.item-player-card.is-glass blir flex-flow: column) och ger bilden width: 100%; height: auto.
 * Wrappern är då ett krympbart flexbarn helt utan egen höjd: den pressas ihop till ca 74 px
 * medan bilden inuti är ca 135 px hög, och overflow: hidden klipper bort resten. Den runda
 * ramen blir en liggande oval med ansiktet avskuret, och texten hoppar upp i kortet.
 *
 * Tobias källbild är dessutom 1092x1012 och inte kvadratisk. Utan egen ruta ärver wrappern den
 * proportionen, så hans cirkel är en oval i ALLA bredder och hans ruta ca 6 px bredare än de
 * andra sju kortens.
 *
 * Här får wrappern en egen kvadratisk ruta i varje brytpunkt, lika stor som syskonens bilder,
 * och porträttet fyller den med object-fit: cover.
 *
 * #shl räcker för att slå Webflows klassregler i nisses-test-site.webflow.css utan !important.
 * Wrappern tas medvetet inte bort ur markupen: den kommer tillbaka vid nästa Webflow-export,
 * och då fortsätter den här filen att gälla.
 */

/* Rutan: samma mått som syskonens .thumbnail_img-2 (height: 5rem mot en kvadratisk källa).
   flex: none, annars krymps den av kolumnflexen precis som förut. */
#shl .image-circle {
  flex: none;
  box-sizing: border-box;
  width: 5rem;
  height: 5rem;
  background-color: var(--_colors---color--bg-glass-strong);
}

/* Bilden fyller rutan. Hörnen ritar wrappern, så bilden har inga egna.
   cover på en kvadratisk ruta rör inte Annas kvadratiska källa alls, och skär 4 % från vardera
   sidan av Tobias 1092x1012 — hans huvud (x 275–799 av 1092) ligger långt innanför. Måtten
   hamnar då mitt i de sex inbrända cirklarnas spann: hjässan 6,5 % ned i rutan (deras 2,4–10,7 %)
   och huvudet 51 % av rutans bredd (deras 48–66 %). Därför behövs ingen beskärning per porträtt
   som i css/agentlista.css. */
#shl .image-circle .thumbnail_img-2 {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

/* Under 480 px är syskonens bilder kortbreda kvadrater (width: 100% mot en kvadratisk källa).
   height: auto krävs för att aspect-ratio ska få räkna ut höjden ur bredden. */
@media screen and (max-width: 479px) {
  #shl .image-circle {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}