/* ==========================================================================
   Telephone Directory  —  /page/telephone-directory/
   Academic Leadership  —  /page/academic-leadership/
   --------------------------------------------------------------------------
   TWO PAGES, ONE STYLESHEET. Both are the same table: a name, an address and
   a number, read by scanning down a column. Academic Leadership puts the
   department where the directory puts the photograph, and can carry more
   than one person in a cell, which is what .tel-stack is for.

   Four columns of the same shape, so a table. Below 700px it becomes one
   card per person: a four-column table at phone width either overflows the
   screen or squeezes an email address to three characters a line, and an
   email address is the one thing on these pages nobody can guess at.

   The stacked layout prints the column name in front of each value from the
   data-label attribute on the cell, so a card still says which number is
   which without a header row to refer back to.
   ========================================================================== */

.tel-wrap {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow-x: auto;              /* a narrow laptop scrolls rather than clips */
}

.tel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.tel-table th,
.tel-table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
.tel-table tbody tr:last-child th,
.tel-table tbody tr:last-child td { border-bottom: 0; }

.tel-table thead th {
  /* 8%, the same tint the fee table uses: --accent-deep on 10% falls under
     the 4.5:1 a heading this size needs. */
  background: rgb(var(--accent-rgb) / 8%);
  color: var(--accent-deep);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tel-table tbody tr:hover { background: rgb(var(--accent-rgb) / 4%); }

.tel-lead {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: .92rem;
}

/* A cell holding more than one person - two departments share a head, and
   Civil Engineering has two coordinators. Each gets its own line so the
   names, addresses and numbers in the three cells stay in step across the
   row; run together they would read as one person with two addresses. */
.tel-stack { display: block; }
.tel-stack + .tel-stack { margin-top: 6px; }

/* Whose address or number this is. Only rendered where a department has more
   than one head, and only shown on a phone - see the note in the template. */
.tel-stack__who { display: none; }

/* "(In-charge)", "(Coordinator)" - the office, not part of the name. */
.tel-role {
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}

/* ---- the name cell ------------------------------------------------------ */
.tel-person {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tel-person__photo {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--page);
}
.tel-person__name {
  font-weight: 700;
  color: var(--ink);
}

/* ---- Academic Leadership's first column ---------------------------------
   The department is the widest thing in that table and the telephone number
   the narrowest, so left to itself the department takes the room it wants -
   "Management Studies (BBA, MBA, BBA (Hospital Management), MBA (Hospital
   Management))" on one line - and the number is what gives way, breaking
   after nine digits onto a second line.

   Capping the department makes it wrap instead, which costs a long name a
   line it can afford. The number then never wraps: break-word below is right
   for an email address and wrong for ten digits, where a break reads as two
   numbers or as a typo. */
.tel-table--dept tbody th { max-width: 22rem; }
.tel-table--dept td[data-label="Phone"] { white-space: nowrap; }
.tel-table--dept td[data-label="Phone"] a { word-break: normal; }

/* Addresses and numbers are the point of the page, so they are links and
   look like them. */
.tel-table a {
  color: var(--accent-deep);
  text-decoration: none;
  word-break: break-word;        /* a long address wraps rather than widening
                                    the column past the screen */
}
.tel-table a:hover { text-decoration: underline; }
.tel-table a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.tel-none { color: var(--muted); }

.tel-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: .88rem;
}
.tel-note a { color: var(--accent-deep); }

/* ==========================================================================
   One card per person, below 700px
   ========================================================================== */
@media (max-width: 699.98px) {
  .tel-wrap {
    background: none;
    box-shadow: none;
    overflow-x: visible;
  }
  .tel-table thead {
    /* Not display: none - that takes the header out of the accessibility
       tree as well, and a screen reader still uses it to announce cells. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tel-table,
  .tel-table tbody,
  .tel-table tr,
  .tel-table th,
  .tel-table td { display: block; }

  .tel-table tr {
    margin-bottom: 14px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow-xs);
  }
  .tel-table tr:last-child { margin-bottom: 0; }

  .tel-table th,
  .tel-table td {
    padding: 0;
    border-bottom: 0;
  }
  .tel-table td { margin-top: 10px; }

  /* The column name in front of the value, from data-label on the cell. */
  .tel-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .tel-stack__who {
    display: block;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 700;
  }
  .tel-stack + .tel-stack { margin-top: 10px; }

  .tel-person__photo { width: 44px; height: 44px; }
  .tel-person__name { font-size: 1rem; }
}