/* Organisation structure on the company page.

   Laid out on a four column grid so the second and third rows line up exactly:
   each of the four who report to the chief executive owns a column, the person
   reporting to the plant head sits in the first column, and the sales team fills
   the remaining three.

   On a phone the same information becomes a stacked list, with the colour bar
   moving to the left edge of each card. */

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

.org-chart {
  --cols: 4;
  --gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
}

/* ---- rows ---------------------------------------------------------------- */
.org-row--lead {
  display: flex;
  justify-content: center;
}

.org-row--four {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
}

/* half a column, allowing for the gaps between them, which is where the centre
   of the first column falls; every connector below is measured from this */
.org-row--four,
.org-row--panels {
  --half-col: calc((100% - 3 * var(--gap)) / 8);
}

.org-row--panels {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--gap);
  margin-top: 26px;
  position: relative;
}

/* the plant head has one report, so this panel and the card inside it are
   narrower than a full column, which leaves more air before the sales team */
.org-panel--single { width: 200px; }
.org-panel--single .org-card { max-width: 168px; margin: 0 auto; }

.org-col { display: flex; }

/* the wrapper around everyone below the chief executive takes no part in the
   desktop layout; it only matters once the chart stacks up on a phone */
.org-branch { display: contents; }

/* ---- the line from the chief executive down to the row of four ----------- */
.org-link--down {
  height: 30px;
  position: relative;
  margin: 0 0 30px;
}

.org-link--down::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 1.5px solid #c3ccc7;
}

/* the horizontal bar across the four columns, with a stub down into each */
.org-row--four { position: relative; }

.org-row--four::before {
  content: "";
  position: absolute;
  top: -30px;
  left: var(--half-col);
  right: var(--half-col);
  border-top: 1.5px solid #c3ccc7;
}

.org-col { position: relative; }

.org-col::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  height: 30px;
  border-left: 1.5px solid #c3ccc7;
}

/* ---- panels holding a team ----------------------------------------------- */
.org-panel {
  background: #e8efe9;
  border-radius: 16px;
  padding: 26px 16px 18px;
  position: relative;
  display: grid;
  gap: 14px;
  align-items: start;
}

.org-panel--single { grid-template-columns: 1fr; }
.org-panel--team   { grid-template-columns: repeat(5, 1fr); }

/* the lines from the two parent cards down into the panels below them, drawn
   on the row so that they stay under the columns those cards sit in even though
   the panels themselves no longer follow the four column grid */
.org-row--panels::before,
.org-row--panels::after {
  content: "";
  position: absolute;
  top: -26px;
  height: 26px;
  border-left: 1.5px solid #b7c4bd;
}

.org-row--panels::before { left: var(--half-col); }
.org-row--panels::after  { left: calc(var(--half-col) * 3 + var(--gap)); }

/* ---- cards --------------------------------------------------------------- */
.org-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 190px;
  background: #ffffff;
  border-radius: 12px;
  border-top: 7px solid #14532d;
  padding: 20px 12px 16px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(20, 40, 30, 0.07);
}

.org-card--lead {
  border-top-color: #eaa106;
  width: 262px;
  min-height: 206px;
}

/* inside a panel the cards need no bar of their own */
.org-card--sub {
  border-top: 0;
  padding-top: 18px;
  min-height: 184px;
  box-shadow: 0 1px 2px rgba(20, 40, 30, 0.06);
}

.org-card img {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  margin-bottom: 12px;
  border: 3px solid #eef2f0;
  background: #f4f6f5;
  flex: 0 0 auto;
}

.org-card--lead img { width: 92px; height: 92px; }
.org-card--sub img  { width: 62px; height: 62px; margin-bottom: 10px; }

.org-card .org-name {
  font-weight: 700;
  color: #14532d;
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.3;
}

.org-card--lead .org-name { font-size: 16px; }

.org-card .org-role {
  color: #566360;
  font-size: 12.5px;
  line-height: 1.45;
  margin: 0;
}

/* ---- narrower desktops --------------------------------------------------- */
@media (max-width: 1199px) {
  .org-chart { --gap: 12px; }
  .org-card { min-height: 176px; padding: 16px 8px 12px; border-top-width: 5px; }
  .org-card--lead { width: 220px; min-height: 190px; }
  .org-card--sub { min-height: 172px; padding-top: 14px; }
  .org-card img { width: 60px; height: 60px; margin-bottom: 9px; }
  .org-card--lead img { width: 76px; height: 76px; }
  .org-card--sub img { width: 52px; height: 52px; }
  .org-card .org-name { font-size: 12.5px; }
  .org-card--lead .org-name { font-size: 14px; }
  .org-card .org-role { font-size: 11px; line-height: 1.4; }
  .org-panel { padding: 22px 10px 14px; gap: 9px; }
}

/* ---- phones and tablets: a stacked list ---------------------------------- */
@media (max-width: 991px) {
  .org-structure { padding: 40px 0 46px; }
  .org-chart { max-width: none; }

  /* the rows exist to build the desktop grid; stacked up they would keep the
     four managers together and push both teams to the bottom, so they step out
     of the way and every card becomes a child of the chart itself, free to be
     ordered so that a manager is followed by the people who report to them */
  .org-chart { display: flex; flex-direction: column; }

  /* everyone below the chief executive sits inside their card, set in from the
     left with one line running down the whole group */
  .org-branch {
    display: flex;
    flex-direction: column;
    margin-left: 38px;
  }

  .org-row--lead,
  .org-row--four,
  .org-row--panels {
    display: contents;
  }

  .org-col:nth-child(1) { order: 1; }
  .org-panel--single    { order: 2; }
  .org-col:nth-child(2) { order: 3; }
  .org-panel--team      { order: 4; }
  .org-col:nth-child(3) { order: 5; }
  .org-col:nth-child(4) { order: 6; }

  /* the last card carries the line no further than itself */
  .org-col:nth-child(4),
  .org-col:nth-child(4) .org-card { margin-bottom: 0; }

  .org-row--four::before,
  .org-col::before,
  .org-row--panels::before,
  .org-row--panels::after { display: none; }

  .org-link--down { display: none; }

  .org-col { display: block; margin-bottom: 12px; }

  /* the desktop chart narrows the plant panel and the card inside it; stacked
     up on a phone every card shares one width and one indent instead */
  .org-panel--single { width: auto; }
  .org-panel--single .org-card { max-width: none; margin: 0 0 12px; }

  /* levels are told apart by how far they are set in and by the coloured edge
     on the cards themselves, so a team needs no guide line of its own */
  .org-panel {
    background: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 12px 28px;
    display: block;
  }

  .org-card,
  .org-card--lead,
  .org-card--sub {
    width: 100%;
    min-height: 82px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "photo name"
      "photo role";
    align-items: center;
    column-gap: 14px;
    text-align: left;
    padding: 13px 15px;
    border-top: 0;
    border-left: 6px solid #14532d;
    border-radius: 10px;
    margin-bottom: 12px;
  }

  .org-card--lead { border-left-color: #eaa106; }
  .org-card--sub { border-left: 0; min-height: 78px; padding: 12px 14px; }

  .org-card img,
  .org-card--lead img,
  .org-card--sub img {
    grid-area: photo;
    width: 54px;
    height: 54px;
    margin-bottom: 0;
    align-self: center;
  }

  .org-card .org-name { grid-area: name; align-self: end; font-size: 14px; margin-bottom: 2px; }
  .org-card--lead .org-name { font-size: 15px; }
  .org-card .org-role { grid-area: role; align-self: start; font-size: 12px; }
}

@media (max-width: 400px) {
  .org-panel { margin-left: 12px; padding-left: 14px; }
  .org-card img,
  .org-card--lead img,
  .org-card--sub img { width: 46px; height: 46px; }
  .org-card .org-name { font-size: 13px; }
  .org-card .org-role { font-size: 11.5px; }
}

/* ---- motion --------------------------------------------------------------
   The chart assembles as it comes into view: the lines draw themselves, then
   the cards rise into place a row at a time. Cards lift a little under the
   cursor. Anyone who has asked their system to reduce motion sees the finished
   state immediately, with no movement at all. */

.org-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.org-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(20, 40, 30, 0.13);
}

.org-card--lead:hover {
  box-shadow: 0 12px 26px rgba(180, 120, 10, 0.18);
}

.org-card img { transition: transform 0.3s ease; }
.org-card:hover img { transform: scale(1.04); }

/* the resting state before the chart is revealed */
.org-chart.is-animated .org-card {
  opacity: 0;
  transform: translateY(16px);
}

.org-chart.is-animated .org-panel {
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* the connecting lines draw from nothing */
.org-chart.is-animated .org-link--down::before,
.org-chart.is-animated .org-col::before,
.org-chart.is-animated .org-row--panels::before,
.org-chart.is-animated .org-row--panels::after {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s ease;
}

.org-chart.is-animated .org-row--four::before {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s ease;
}

/* once revealed, everything settles into place */
.org-chart.is-revealed .org-card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s ease;
}

.org-chart.is-revealed .org-panel {
  opacity: 1;
  transform: scale(1);
}

.org-chart.is-revealed .org-link--down::before,
.org-chart.is-revealed .org-col::before,
.org-chart.is-revealed .org-row--panels::before,
.org-chart.is-revealed .org-row--panels::after,
.org-chart.is-revealed .org-row--four::before {
  transform: none;
}

/* the order things appear in, roughly top to bottom */
.org-chart.is-revealed .org-row--lead .org-card { transition-delay: 0.05s; }
.org-chart.is-revealed .org-link--down::before  { transition-delay: 0.35s; }
.org-chart.is-revealed .org-row--four::before   { transition-delay: 0.55s; }
.org-chart.is-revealed .org-col:nth-child(1)::before { transition-delay: 0.90s; }
.org-chart.is-revealed .org-col:nth-child(2)::before { transition-delay: 0.95s; }
.org-chart.is-revealed .org-col:nth-child(3)::before { transition-delay: 1.00s; }
.org-chart.is-revealed .org-col:nth-child(4)::before { transition-delay: 1.05s; }
.org-chart.is-revealed .org-col:nth-child(1) .org-card { transition-delay: 0.95s; }
.org-chart.is-revealed .org-col:nth-child(2) .org-card { transition-delay: 1.02s; }
.org-chart.is-revealed .org-col:nth-child(3) .org-card { transition-delay: 1.09s; }
.org-chart.is-revealed .org-col:nth-child(4) .org-card { transition-delay: 1.16s; }
.org-chart.is-revealed .org-row--panels::before,
.org-chart.is-revealed .org-row--panels::after { transition-delay: 1.35s; }
.org-chart.is-revealed .org-panel { transition-delay: 1.45s; }
.org-chart.is-revealed .org-panel .org-card:nth-child(1) { transition-delay: 1.60s; }
.org-chart.is-revealed .org-panel .org-card:nth-child(2) { transition-delay: 1.68s; }
.org-chart.is-revealed .org-panel .org-card:nth-child(3) { transition-delay: 1.76s; }
.org-chart.is-revealed .org-panel .org-card:nth-child(4) { transition-delay: 1.84s; }
.org-chart.is-revealed .org-panel .org-card:nth-child(5) { transition-delay: 1.92s; }

@media (prefers-reduced-motion: reduce) {
  .org-chart.is-animated .org-card,
  .org-chart.is-animated .org-panel {
    opacity: 1;
    transform: none;
  }
  .org-chart.is-animated .org-link--down::before,
  .org-chart.is-animated .org-col::before,
  .org-chart.is-animated .org-row--panels::before,
  .org-chart.is-animated .org-row--panels::after,
  .org-chart.is-animated .org-row--four::before {
    transform: none;
  }
  .org-card,
  .org-card img,
  .org-chart .org-card,
  .org-chart .org-panel { transition: none; }
  .org-card:hover { transform: none; }
  .org-card:hover img { transform: none; }
}

/* On a phone the chart is a tall list, so the staggered reveal is dropped in
   favour of a single quick fade. Waiting several seconds for the lower half to
   appear is worse than no animation at all. */
@media (max-width: 991px) {
  .org-chart.is-revealed .org-card,
  .org-chart.is-revealed .org-panel,
  .org-chart.is-revealed .org-row--lead .org-card { transition-delay: 0s; }
  .org-chart.is-revealed .org-panel .org-card:nth-child(1),
  .org-chart.is-revealed .org-panel .org-card:nth-child(2),
  .org-chart.is-revealed .org-panel .org-card:nth-child(3),
  .org-chart.is-revealed .org-panel .org-card:nth-child(4),
  .org-chart.is-revealed .org-panel .org-card:nth-child(5) { transition-delay: 0.06s; }
  .org-card:hover { transform: none; box-shadow: 0 1px 3px rgba(20, 40, 30, 0.07); }
  .org-card:hover img { transform: none; }
}