/**
 * Switchboard grid — reusable 3-up tile layout for direct-contact info.
 *
 * Renders switchboard_grid > switchboard_tile > switchboard_row paragraphs.
 * Standalone (not scoped to a parent page), so the same look applies wherever
 * a switchboard_grid is dropped into field_components.
 */

.dh-switchboard {
  --dh-sb-line: rgba(255, 255, 255, 0.08);
  --dh-sb-line-2: rgba(255, 255, 255, 0.14);
  --dh-sb-ink-1: rgba(255, 255, 255, 0.78);
  --dh-sb-ink-2: rgba(255, 255, 255, 0.56);
  --dh-sb-ink-3: rgba(255, 255, 255, 0.38);

  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}

/* Drupal renders field_items inside a field wrapper div, with each tile
   inside its own per-item wrapper div. Flatten both so the .dh-switchboard
   __tile articles become the real grid children. */
.dh-switchboard > div,
.dh-switchboard > div > div {
  display: contents;
}

.dh-switchboard__tile {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0.006) 100%);
  border: 1px solid var(--dh-sb-line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px 30px 28px;
  position: relative;
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease;
}

.dh-switchboard__tile:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.012) 100%);
  border-color: var(--dh-sb-line-2);
}

.dh-switchboard__eye {
  align-items: center;
  color: var(--site-color-coral);
  display: inline-flex;
  font-family: var(--site-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  gap: 10px;
  letter-spacing: 0.22em;
  margin: 0;
  text-transform: uppercase;
}

.dh-switchboard__eye::before {
  background: var(--site-color-coral);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--site-color-coral);
  content: "";
  height: 5px;
  width: 5px;
}

.dh-switchboard__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Drupal wraps field_items in a field wrapper + per-item wrappers; flatten
   them so .dh-switchboard__row becomes a real flex child and `gap` applies. */
.dh-switchboard__list > div,
.dh-switchboard__list > div > div {
  display: contents;
}

.dh-switchboard__row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dh-switchboard__row-k {
  color: var(--dh-sb-ink-3);
  font-family: var(--site-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Shared color/leading for every row value. */
.dh-switchboard__row-v,
.dh-switchboard__row-v > p,
.dh-switchboard__row-v a {
  color: var(--site-color-text-white);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

/* Default — plain text rows (postal address, notes) sit at a softer 16/500. */
.dh-switchboard__row-v,
.dh-switchboard__row-v > p {
  font-size: 16px;
  font-weight: 500;
}

/* Link rows (phone numbers, emails) get the larger 20/600 emphasis. */
.dh-switchboard__row-v:has(a),
.dh-switchboard__row-v:has(a) > p,
.dh-switchboard__row-v a {
  font-size: 20px;
  font-weight: 600;
}

/* processed_text wraps the value in <p>; collapse its margins so the row
   stays flush. */
.dh-switchboard__row-v > p {
  margin: 0;
}

.dh-switchboard__row-v a {
  background: linear-gradient(currentColor, currentColor) no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  text-decoration: none;
  transition:
    background-size 0.25s ease,
    color 0.15s ease;
}

.dh-switchboard__row-v a:hover {
  background-size: 100% 1px;
  color: var(--site-color-coral);
  text-decoration: none;
}

.dh-switchboard__foot,
.dh-switchboard__foot > p {
  color: var(--dh-sb-ink-2);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.dh-switchboard__foot {
  border-top: 1px dashed var(--dh-sb-line);
  margin-top: auto;
  padding-top: 18px;
}

.dh-switchboard__foot b,
.dh-switchboard__foot strong {
  color: var(--dh-sb-ink-1);
  font-weight: 600;
}

@media (max-width: 880px) {
  .dh-switchboard {
    gap: 14px;
    grid-template-columns: 1fr;
  }
}