/*
-----------------------------------------
BOLAGEN (blocket companyGrid, Ohlssons/companyCard)
1. Kompakt: startsidans Våra bolag (Figma: Bolagskort), tre kolumner, hela kortet länkar till bolagets webbplats
2. Detalj: sidan Våra bolag (Figma: Bolagskort med Bolagsinformation), två kolumner
-----------------------------------------
*/

.company-grid__list {
  gap: var(--space-grid);
}

.company {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

/* Fotot med ett mörkt lager och bolagets vita logotyp i mitten */
.company__photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio-photo);
  overflow: hidden;
  background: var(--surface-brand);
}

.company__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-shade);
}

.company__image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.company__logo {
  position: relative;
  z-index: 1;
  inline-size: var(--size-company-logo);
  max-inline-size: var(--size-company-logo-max);
}

.company-grid--detailed .company__logo {
  inline-size: var(--size-company-logo-large);
}

/* ---- Kompakt ------------------------------------------------------------------ */

.company__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-block-size: var(--size-company-link);
  padding-inline: var(--space-24);
  font: var(--font-card);
  color: var(--text-heading);
  text-transform: uppercase;
}

.company__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.company__link-icon {
  flex: none;
  inline-size: var(--size-icon-large);
  block-size: var(--size-icon-large);
}

.company:has(.company__link:focus-visible) {
  outline: var(--border-width-focus) solid var(--focus-ring-color);
  outline-offset: var(--border-width-focus);
}

.company__link:focus-visible {
  outline: none;
}

@media (hover: hover) {
  .company:has(.company__link):hover .company__name {
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: var(--space-4);
  }
}

/* ---- Detalj ------------------------------------------------------------------- */

.company__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  padding: var(--space-company-info);
}

.company__title {
  font: var(--font-h2);
  color: var(--text-heading);
}

.company__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--size-fact-column), 100%), 1fr));
  gap: var(--space-20);
  align-self: stretch;
  padding: var(--space-16) var(--space-20);
  background: var(--surface-light);
}

.company__fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.company__fact-label {
  font: var(--font-fact-label);
  color: var(--text-muted);
  text-transform: uppercase;
}

.company__fact-value {
  font: var(--font-fact-small);
  color: var(--text-heading);
}

.company__text {
  font: var(--font-body);
  color: var(--text-body);
}