/* Organisation structure on the company page.
   A nested tree with drawn connectors, so the reporting lines match the chart
   NJK supplied. On a narrow screen it becomes an indented list with a single
   guide line down the left, which stays readable on a phone. */

.org-structure {
  padding: 60px 0 70px;
  background: #fafafa;
}

/* the tree is wider than a narrow desktop window, so it scrolls sideways
   inside its own box rather than being cut off at the edges */
.org-tree-scroll {
  overflow-x: auto;
  padding-bottom: 8px;
}

.org-tree,
.org-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.org-tree ul {
  display: flex;
  justify-content: center;
  position: relative;
  padding-top: 26px;
}

.org-tree li {
  position: relative;
  padding: 26px 4px 0;
  text-align: center;
}

/* the two halves of the horizontal bar above each child */
.org-tree li::before,
.org-tree li::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  width: 50%;
  height: 26px;
  border-top: 2px solid #bcc9c2;
}

.org-tree li::after {
  right: auto;
  left: 50%;
  border-left: 2px solid #bcc9c2;
}

/* an only child needs a straight drop, not a bar */
.org-tree li:only-child::after,
.org-tree li:only-child::before {
  display: none;
}

.org-tree li:only-child {
  padding-top: 26px;
}

/* the outer ends of the bar are not drawn */
.org-tree li:first-child::before,
.org-tree li:last-child::after {
  border: 0 none;
}

.org-tree li:last-child::before {
  border-right: 2px solid #bcc9c2;
  border-radius: 0 6px 0 0;
}

.org-tree li:first-child::after {
  border-radius: 6px 0 0 0;
}

/* the drop from a parent into its row of children */
.org-tree ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 26px;
  border-left: 2px solid #bcc9c2;
}

.org-tree > li {
  padding-top: 0;
}

.org-tree > li::before,
.org-tree > li::after {
  display: none;
}

.org-card {
  display: inline-block;
  width: 148px;
  background: #ffffff;
  border: 1px solid #e4e8e6;
  border-top: 3px solid #144e2a;
  border-radius: 10px;
  padding: 14px 9px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  vertical-align: top;
}

.org-card--lead {
  border-top-color: #fa9e0d;
  width: 200px;
}

.org-card img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
  border: 3px solid #f1f4f2;
}

.org-card--lead img {
  width: 92px;
  height: 104px;
}

.org-card .org-name {
  font-weight: 700;
  color: #144e2a;
  margin: 0 0 3px;
  font-size: 13px;
  line-height: 1.3;
}

.org-card .org-role {
  color: #4a5450;
  font-size: 11.5px;
  line-height: 1.4;
  margin: 0;
}


/* Between a tablet and a small laptop the tree is wider than the page, so the
   cards shrink to fit rather than making the reader scroll sideways. Roles wrap
   onto more lines, which is preferable to a hidden half of the chart. */
@media (min-width: 992px) and (max-width: 1199px) {
  .org-card { width: 106px; padding: 10px 5px 9px; }
  .org-card--lead { width: 140px; }
  .org-card img { width: 50px; height: 50px; margin-bottom: 7px; }
  .org-card--lead img { width: 68px; height: 68px; }
  .org-card .org-name { font-size: 11px; }
  .org-card .org-role { font-size: 10px; line-height: 1.35; }
  .org-tree li { padding: 22px 3px 0; }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .org-card { width: 128px; padding: 12px 7px 10px; }
  .org-card--lead { width: 168px; }
  .org-card img { width: 58px; height: 58px; }
  .org-card--lead img { width: 80px; height: 80px; }
  .org-card .org-name { font-size: 12px; }
  .org-card .org-role { font-size: 10.5px; }
  .org-tree li { padding: 24px 3px 0; }
}

/* Phones: an indented list rather than a wide tree nobody can read. */
@media (max-width: 991px) {
  .org-structure { overflow-x: visible; }

  .org-tree ul {
    display: block;
    padding-top: 0;
    padding-left: 26px;
    text-align: left;
  }

  .org-tree ul::before { display: none; }

  .org-tree li {
    padding: 10px 0 0 18px;
    text-align: left;
  }

  /* one guide line down the left, with a short tick into each card */
  .org-tree li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    width: 0;
    height: 100%;
    border-top: 0;
    border-left: 2px solid #d3dcd7;
  }

  .org-tree li:last-child::before { height: 34px; }

  .org-tree li::after {
    content: "";
    position: absolute;
    top: 34px;
    left: 0;
    width: 16px;
    height: 0;
    border-left: 0;
    border-top: 2px solid #d3dcd7;
    border-radius: 0;
  }

  .org-tree li:only-child::before,
  .org-tree li:only-child::after { display: block; }

  .org-tree > li { padding-left: 0; }
  .org-tree > li::before,
  .org-tree > li::after { display: none; }

  .org-card,
  .org-card--lead { width: 100%; max-width: 330px; }
}