/*
 * Organisationsdiagram (organisation chart / board / committee) styles.
 *
 * Consumes the design tokens from tokens.css. Do not hard-code colours,
 * fonts or spacing here; reference the custom properties so the site
 * stays themeable.
 */

.organisationsdiagram {
  width: 100%;
  /* Reserve space so the anchor-scrolled element lands below the fixed
     header/pill and operational-message bar (matches afdelingskort.css/faq.css). */
  scroll-margin-top: calc(var(--padis-header-height, 5rem) + var(--padis-operational-height, 0px) + var(--padis-space-md));
}

.organisationsdiagram__headline {
  margin: 0 0 var(--padis-space-lg);
  color: var(--padis-color-primary);
}

.organisationsdiagram__level {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--padis-space-lg);
}

.organisationsdiagram__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
}

/* Standard/Kontaktvisning: nested levels render inside the parent's <li>, so
   indent/connect them visually while keeping the real nested <ul>/<li> markup. */
.organisationsdiagram__item > .organisationsdiagram__level {
  margin-top: var(--padis-space-lg);
  padding-top: var(--padis-space-lg);
  border-top: 1px solid var(--padis-color-border);
}

/* Kompakt: single-level CSS grid, no nesting/connecting lines. */
.organisationsdiagram--kompakt .organisationsdiagram__level--flat,
.organisationsdiagram--standard .organisationsdiagram__level--flat,
.organisationsdiagram--kontaktvisning .organisationsdiagram__level--flat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--padis-space-lg);
}

.organisationsdiagram__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  gap: 0.5rem;

  width: 11rem;
  padding: var(--padis-space-md);

  background: var(--padis-color-surface);
  border-radius: var(--padis-radius);
  box-shadow: var(--padis-shadow);
}

.organisationsdiagram__photo {
  width: 100%;
  height: 7rem;

  object-fit: cover;
  border-radius: var(--padis-radius);
}

.organisationsdiagram__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--padis-color-surface-alt);
}

.organisationsdiagram__photo--placeholder svg {
  width: 3.5rem;
  height: 3.5rem;

  fill: none;
  stroke: var(--padis-color-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.organisationsdiagram__role {
  margin: 0;
  color: var(--padis-color-text-muted);
  overflow-wrap: break-word;
}

.organisationsdiagram__name {
  margin: 0;
  font-weight: 700;
  color: var(--padis-color-text);
  overflow-wrap: break-word;
}

.organisationsdiagram__description {
  margin: 0;
  font-size: 0.9em;
  color: var(--padis-color-text);
  overflow-wrap: break-word;
}

.organisationsdiagram__contact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  font-size: 0.9em;
}

.organisationsdiagram__contact a {
  color: var(--padis-color-primary);
}

/* Kontaktvisning emphasizes contact info; fields still only render when
   filled in (no reserved blank space), but get a bolder/highlighted style. */
.organisationsdiagram--kontaktvisning .organisationsdiagram__contact {
  font-weight: 700;
}

.organisationsdiagram--kontaktvisning .organisationsdiagram__contact a {
  padding: 0.15rem 0.5rem;
  background: var(--padis-color-surface-alt);
  border-radius: var(--padis-radius);
}