/*--------------------------------------------------------------
# Faculty Organogram
#
# Bootstrap 5 provides the grid, spacing, card, badge and typography
# utilities used throughout the markup. Everything in this file exists only
# for what Bootstrap has no utility for: the tree layout and the connector
# lines that draw the parent/child relationships between tiers.
#
# Class map
#   .organogram              section wrapper (legend + tree)
#   .organogram-tree         the chart itself, made of stacked tiers
#   .organogram-tier         one generation of the hierarchy (Dean, Vice
#                            Deans, Secretary, Departments, ...). Renders as
#                            a plain vertical link in the chain below `lg`,
#                            and reserves the space above it for that tier's
#                            incoming connector line at `lg` and up.
#   .organogram-nodes        the row (>=lg) / stack (<lg) of people/units
#                            that make up one tier
#     --branch               modifier: this tier has more than one node, so
#                            draw the line fanning OUT from a single incoming
#                            trunk into each node (>=lg only). Only ever
#                            requested by the Secretary tier, whose own
#                            SINGLE_HOLDER_LEVEL constraint (see
#                            team/models.py) keeps it to 0-1 members, so this
#                            never actually renders today -- kept for
#                            whenever that constraint is relaxed.
#     --grid                 modifier: for tiers that can hold several+ peer
#                            nodes (Vice Deans, Departments & Support Units),
#                            wraps them (flex-wrap, ~3-5 per row) instead of
#                            one nowrap/branch row that silently overflows
#                            past the container once it has too many nodes
#                            to fit at full card width (>=lg only). Sized to
#                            hug its own wrapped content (not stretched to
#                            the tier's full width), so the fan-out bar it
#                            shares with --branch, and every card's junction
#                            dot, only ever span real cards -- never empty
#                            space where a column merely could have been.
#   .organogram-node         wrapper around one card; carries the connector
#                            stub AND its junction dot, both only rendered
#                            for a node that has a parent tier -- a card
#                            never shows a connector unless it genuinely
#                            has one to draw. Under .organogram-nodes--grid,
#                            it's also the @container reference the card's
#                            own small-card layout switch queries (see
#                            "Small-card layout" at the end of this file)
#   .organogram-card         one member's card (a Bootstrap .card) -- same
#                            size and layout for every tier
#     --dean / --vice / --secretary / --department / --support
#                            sets --og-card-accent only (see "Cards"): the
#                            one thing that varies by tier is this color,
#                            carried by the top bar + avatar badge + role
#                            text -- never the card's own dimensions
#   .organogram-avatar-wrap  positions the small role-icon .organogram-badge
#                            over the .organogram-avatar's corner
#   .organogram-role         small role/tier label, single line (truncated)
#                            so every card settles to the same height
#   .organogram-meta         secondary line below the name: the member's
#                            department, or the department/unit's own name
#                            for a Department/Support card (see
#                            organogram_card.html's `unit_name`)
#   .organogram-legend       the "how to read this chart" key
--------------------------------------------------------------*/

.organogram {
  /* Reads the live site's brand variables when present (--accent-color,
     --heading-color, --surface-color from main.css) and otherwise falls
     back to a sensible standalone palette anchored on #0d6efd, so this
     file works unmodified both inside the Django project and in the
     stand-alone demo page. */
  --og-accent: var(--accent-color, #0d6efd);
  --og-accent-soft: color-mix(in srgb, var(--og-accent), white 85%);
  --og-heading: var(--heading-color, #1b1f27);
  --og-text-muted: var(--default-color, #5a6472);
  --og-surface: var(--surface-color, #ffffff);
  --og-line-color: color-mix(in srgb, var(--og-accent), transparent 30%);
  --og-line-width: 2px;
  --og-gap: 3.25rem;   /* vertical space reserved between two tiers */
  --og-drop: 1.5rem;   /* length of the short stub into/out of each card */
}

/*--------------------------------------------------------------
# Legend
--------------------------------------------------------------*/
.organogram-legend {
  border: 1px solid color-mix(in srgb, var(--og-accent), transparent 85%);
  background: var(--og-accent-soft);
  border-radius: 0.75rem;
}

.organogram-legend-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  color: #fff;
  background: var(--og-accent);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.organogram-legend-swatch.is-dean { background: var(--og-heading); }
.organogram-legend-swatch.is-support { background: #6c757d; }

/*--------------------------------------------------------------
# Tree skeleton (mobile-first: one straight vertical chain)
--------------------------------------------------------------*/
.organogram-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--og-gap);
  max-width: 34rem;
  margin-inline: auto;
}

/* Tiers and rows collapse into the tree's own flex column below `lg`, so
   every card in the whole chart -- regardless of which tier it belongs to
   -- becomes one flat, evenly-spaced vertical sequence. `display: contents`
   only removes these wrappers from the box/paint tree: the elements (and
   their heading text) stay in the DOM, so screen readers and CSS
   descendant selectors still see the real structure. */
.organogram-tier,
.organogram-nodes {
  display: contents;
}

.organogram-node {
  position: relative;
  width: 100%;
}

/* Connector stub: every node except those in the very first tier (the
   Dean) gets a line reaching up into the gap above it, visually joining it
   to the card before it in the chain. */
.organogram-tier:not(:first-child) .organogram-node::before {
  content: "";
  position: absolute;
  top: calc(var(--og-gap) * -1);
  left: 50%;
  width: var(--og-line-width);
  height: var(--og-gap);
  background: var(--og-line-color);
  transform: translateX(-50%);
}

/* Connector dot: same marker as the >=lg tree (below) uses at every
   card's junction, so the chain reads the same deliberate way at every
   width, not just once it grows a horizontal bar to hang dots off of. */
.organogram-tier:not(:first-child) .organogram-node::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--og-accent);
  border: 2px solid var(--og-surface);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.organogram-tier-heading {
  /* Visually-hidden below `lg`: the tree already reads top-to-bottom as
     Dean -> Vice Dean(s) -> Secretary -> Departments, so repeating the tier
     name as a visible heading between every card would be noisy. Screen
     reader and keyboard-navigation users still get it for structure. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*--------------------------------------------------------------
# >= lg: the horizontal tree with branch / merge connectors
--------------------------------------------------------------*/
@media (min-width: 992px) {
  .organogram-tree {
    display: block;
    max-width: none;
    width: 100%;
  }

  .organogram-tier {
    display: block;
    position: relative;
    padding-top: var(--og-gap);
  }

  .organogram-tier:first-child {
    padding-top: 0;
  }

  .organogram-nodes {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* "safe center": center while everything fits, but fall back to
       start-alignment once content overflows (e.g. a Vice Dean/Secretary
       row with an unusually long name), so an overflowing row stays fully
       reachable instead of clipping evenly off both ends. */
    justify-content: safe center;
    align-items: flex-start;
    gap: 1.75rem;
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }

  /* For any tier whose node count isn't capped at one (Vice Deans;
     Departments & Support Units), a single nowrap row of full-width cards
     overflows the container as soon as there are too many to fit -- with
     nothing to shrink a fixed-width card and no wrap, the excess simply
     runs off the page edge with no visible cue, rather than cleanly
     clipping or scrolling. Flex-wrap avoids that, reflowing to 3 columns
     at lg, 4 at xl, 5 at xxl as nodes grow/shrink between 15rem and 22rem
     (see .organogram-nodes--grid > .organogram-node below) to fill
     whatever room the row actually has.

     Stays full-width (unlike the plain nowrap .organogram-nodes above,
     which hugs its content via width: fit-content): a `display: flex`
     container whose own inline size is fit-content stops resolving
     `flex-wrap` sanely in every engine tested here -- both need "how much
     space is there to wrap into" to decide the other, and shrinking the
     box down to its own wrapped result collapsed every card in it to
     nothing. Rather than fight that, the fan-out bar isn't a single
     element spanning this box at all (which is exactly why that box
     being full-width used to matter): see .organogram-node::before below,
     where each node draws its own half-gap-reaching segment instead, so
     the connecting line only ever exists where real cards do, regardless
     of how wide this box itself is.

     Row gap is set to --og-drop specifically (not an independent value)
     so a second-row-and-beyond card's connector segment -- reaching
     --og-drop above itself, see .organogram-node::before below -- exactly
     fills the gap above it: every card's connector visibly touches the
     row before it, not just the first row's touching the tier's trunk.
     Column gap rides along with it since `gap` is a shorthand; a little
     tighter than the rest of the tree's spacing, but not enough to read
     as cramped -- and it's also exactly what each node's own segment
     reaches out to meet its neighbor's. */
  .organogram-nodes--grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--og-drop);
    width: 100%;
    margin-inline: auto;
  }

  .organogram-nodes--grid > .organogram-node {
    /* Grow and shrink between a 15rem floor and the card's own 22rem cap
       (matching .organogram-card's max-width) -- wide when the row has
       room for only a couple of nodes, compact once enough of them share
       it that 22rem apiece would no longer fit. Never grows past that cap
       even with lots of leftover space, so a short last row centers as a
       snug group (via .organogram-nodes--grid's justify-content) instead
       of stretching to fill it. */
    width: auto;
    flex: 1 1 15rem;
    max-width: 22rem;
  }

  /* Lets .organogram-card-main react to the CARD's own rendered width (see
     "Small-card layout" at the end of this file) rather than the
     viewport's -- what actually makes a card cramped is how narrow its own
     row ended up sharing it, not the screen size. Declared on the card,
     one level below the node whose flex-basis/max-width above (not
     content) determines its size: putting size containment on the NODE
     instead once collapsed every grid card to nothing, because
     .organogram-nodes--grid's width:fit-content (above) needs each node's
     size to correctly feed back into ITS fit-content calculation, and
     containment zeroes out exactly that -- an element's contribution to
     an ancestor's intrinsic-size calculation -- regardless of whether the
     element's own size happens to come from something other than content.
     The card, one level deeper, is far enough from that calculation that
     containment here doesn't touch it. */
  .organogram-nodes--grid > .organogram-node > .organogram-card {
    container-type: inline-size;
  }

  .organogram-node {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Cancel the mobile "one long stub" and replace it with the shorter,
     tier-appropriate connectors below. */
  .organogram-tier:not(:first-child) .organogram-node::before {
    content: none;
  }

  /* Trunk: a plain line from the tier above down to the point where this
     tier's connector starts branching (or straight through, for a tier
     that is a single node itself, e.g. the Secretary). */
  .organogram-tier:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--og-line-width);
    height: calc(var(--og-gap) - var(--og-drop));
    background: var(--og-line-color);
    transform: translateX(-50%);
  }

  /* Short drop stub from the trunk/branch-bar into every node of a tier
     that has a parent -- one node (Secretary) or several (Vice Deans,
     Departments) render identically here. Exactly --og-drop tall, matching
     .organogram-nodes--grid's row gap above, so it reaches all the way up
     to whatever's immediately above it -- the fan-out bar for a first-row
     card, or the row before it for a second-row-and-beyond one -- instead
     of floating short of it. */
  .organogram-tier:not(:first-child) .organogram-nodes > .organogram-node::before {
    content: "";
    position: absolute;
    top: calc(var(--og-drop) * -1);
    left: 50%;
    width: var(--og-line-width);
    height: var(--og-drop);
    background: var(--og-line-color);
    transform: translateX(-50%);
  }

  /* .organogram-nodes--grid replaces the plain stub above with one that
     also reaches half a gap toward each neighbor, using two background
     layers instead of a second element: one paints the vertical stub down
     the middle (same as the plain version), the other a horizontal sliver
     across the top. Placed edge to edge, two real neighbors' sliver halves
     meet exactly at the gap's midpoint, chaining into one continuous bar
     that runs only as far as real cards actually reach -- never past the
     first or last one in a row, and never across empty space a --grid
     tier's wrapping might otherwise leave where a card merely could have
     been (see .organogram-nodes--grid above). The tier's own trunk (below)
     still arrives at this chain's midpoint the same way it always met the
     old single bar. */
  .organogram-tier:not(:first-child) .organogram-nodes--grid > .organogram-node::before {
    width: calc(100% + var(--og-drop));
    height: var(--og-drop);
    left: 50%;
    background:
      linear-gradient(var(--og-line-color), var(--og-line-color)) 50% 0 / var(--og-line-width) 100% no-repeat,
      linear-gradient(var(--og-line-color), var(--og-line-color)) 0 0 / 100% var(--og-line-width) no-repeat;
  }

  /* .organogram-node's own ::after (above) already draws the connector dot
     at top: 0 -- the node's top edge, i.e. exactly where the card begins
     -- which is true whichever of the two ::before variants above is
     arriving there, so no extra dot rule is needed for --grid specifically. */

  /* Fan-out bar: gives every node in a --branch tier something to visibly
     hang its drop stub off of. Only --branch needs this as a single
     element spanning the row -- its .organogram-nodes stays fit-content
     (see the plain .organogram-nodes rule above), sized to its own
     content already, so a bar spanning edge to edge of THAT box already
     lands exactly on the real cards. (--grid draws its equivalent per
     node instead -- see .organogram-node::before above -- since its own
     box can't shrink to content the same way; see .organogram-nodes--grid
     above for why.) */
  .organogram-nodes--branch::before {
    content: "";
    position: absolute;
    top: calc(var(--og-drop) * -1);
    left: 0;
    right: 0;
    height: var(--og-line-width);
    background: var(--og-line-color);
  }

  /* Junction dot: the same accent-colored marker as each card's connector
     dot, at the one other place a line meets another line instead of a
     card -- where the tier's trunk arrives at the fan-out bar (--branch)
     or the chain of per-node segments (--grid). Positioned on the tier
     itself rather than on .organogram-nodes--branch/--grid, since --grid
     no longer has one bar element to hang a single dot off of either --
     this way both share one rule. Ties the two per-card dot types into
     one consistent "this is a deliberate connection" visual language,
     top to bottom. */
  .organogram-tier:not(:first-child):has(.organogram-nodes--branch, .organogram-nodes--grid)::after {
    content: "";
    position: absolute;
    top: calc(var(--og-gap) - var(--og-drop));
    left: 50%;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--og-accent);
    border: 2px solid var(--og-surface);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  /* A fan-out bar only makes good sense hanging off a real tier above it --
     exactly the same reasoning as the plain trunk/stub connectors above
     (:not(:first-child)), just applied to this explicit modifier bar too.
     Tiers render conditionally in faculty_team_page.html depending on
     which levels actually have members yet, so a --branch tier could in
     principle end up first in the DOM, and its bar would otherwise dangle
     toward empty space above instead of connecting to content that
     doesn't exist yet. (In practice only ever requested by the Secretary
     tier, whose own SINGLE_HOLDER_LEVEL constraint, see team/models.py,
     keeps it to 0-1 members, so its condition never actually fires today
     -- kept for whenever that constraint is relaxed. --grid's per-node
     segments need no equivalent guard: they're already scoped to
     :not(:first-child) same as every other connector piece here.) */
  .organogram-tier:first-child .organogram-nodes--branch::before {
    content: none;
  }

  .organogram-tier-heading {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 1.25rem;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    text-align: center;
  }
}

/*--------------------------------------------------------------
# Cards -- one identical shape for every tier (Dean down to Support Unit):
# same size, same layout, wide/horizontal (photo beside text, not stacked
# above it -- a side-by-side layout grows into real content room as the
# card widens, where a stacked one just grows empty side margins). Only the
# --dean/--vice/--secretary/--department/--support modifiers change here,
# and only to set --og-card-accent: hierarchy reads through that badge
# color + the role/department text, never through card size, matching the
# legend above (Dean / Vice+Secretary+Department / Support -- 3 color
# tiers, further split by icon within the middle group).
--------------------------------------------------------------*/
.organogram-card {
  --og-card-radius: 1.25rem;
  --og-card-accent: var(--og-accent);
  position: relative;
  /* Prominent diagonal half-gradient: vivid tint at the top, pure surface
     by the midpoint -- so the photo/name area reads on a coloured wash while
     the contact strip stays on clean white. */
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--og-card-accent), white 68%) 0%,
    color-mix(in srgb, var(--og-card-accent), white 84%) 32%,
    var(--og-surface) 62%
  );
  border: 1px solid color-mix(in srgb, var(--og-card-accent), transparent 75%);
  border-radius: var(--og-card-radius);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  width: 100%;
  max-width: 22rem;
  /* Two-layer shadow: crisp neutral edge + soft coloured glow */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.07),
    0 10px 32px color-mix(in srgb, var(--og-card-accent), transparent 80%);
}

.organogram-card--vice-dept { --og-card-accent: #0b6e8a; }  /* teal: one visual step below dept-head blue */
.organogram-card--support   { --og-card-accent: #6c757d; }

/* ── Dean card: large featured standard ──────────────────────────
   Wider than a regular card, a taller accent bar, a bigger avatar
   and a heavier name — so it reads unambiguously as the top node
   even before the eye follows the connector lines. Everything else
   (gradient, shadow, hover lift, contact strip) inherits the same
   rules as every other card; only size cues differ.
----------------------------------------------------------------- */
.organogram-card--dean {
  --og-card-accent: var(--og-heading);
  max-width: 38rem;           /* ~73 % wider than the 22rem default  */
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.09),
    0 16px 48px color-mix(in srgb, var(--og-card-accent), transparent 74%);
}

/* Accent bar — double height on the Dean card for extra visual weight */
.organogram-card--dean::before {
  height: 8px;
  background: linear-gradient(
    90deg,
    var(--og-card-accent) 0%,
    color-mix(in srgb, var(--og-card-accent), transparent 35%) 100%
  );
}

/* Wider gap between avatar and text in the side-by-side layout */
.organogram-card--dean .organogram-card-main {
  gap: 1.5rem;
}

/* Larger avatar with a stronger ring */
.organogram-card--dean .organogram-avatar {
  width: 6rem;
  height: 6rem;
  box-shadow:
    0 0 0 3px var(--og-surface),
    0 0 0 6px color-mix(in srgb, var(--og-card-accent), white 50%),
    0 6px 18px color-mix(in srgb, var(--og-heading), transparent 75%);
}

/* Larger role badge */
.organogram-card--dean .organogram-badge {
  width: 2.1rem;
  height: 2.1rem;
  font-size: 0.9rem;
  right: -0.3rem;
  bottom: -0.3rem;
}

/* Wider role pill */
.organogram-card--dean .organogram-role {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  padding: 0.22rem 0.85rem;
}

/* Bigger, bolder name */
.organogram-card--dean .organogram-name {
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

/* Slightly larger meta text */
.organogram-card--dean .organogram-meta {
  font-size: 0.9rem;
}

/* Deeper hover lift for the Dean card */
.organogram-card--dean:hover,
.organogram-card--dean:focus-within {
  transform: translateY(-8px);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.1),
    0 28px 60px color-mix(in srgb, var(--og-card-accent), transparent 68%);
}

/* Accent bar — 5 px with a fade-right so it reads as a deliberate stroke,
   not a hard tick. */
.organogram-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--og-card-accent) 0%,
    color-mix(in srgb, var(--og-card-accent), transparent 55%) 100%
  );
}

.organogram-card:hover,
.organogram-card:focus-within {
  transform: translateY(-6px);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.09),
    0 22px 52px color-mix(in srgb, var(--og-card-accent), transparent 72%);
  border-color: color-mix(in srgb, var(--og-card-accent), transparent 52%);
}

@media (prefers-reduced-motion: reduce) {
  .organogram-card {
    transition: none;
  }
  .organogram-card:hover,
  .organogram-card:focus-within {
    transform: none;
  }
}

/* Photo + name/role/department, side by side. */
.organogram-card-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}

.organogram-card-info {
  min-width: 0; /* let long names/emails ellipsis-wrap instead of forcing the card wider */
}

.organogram-avatar-wrap {
  position: relative;
}

.organogram-avatar {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  /* Triple ring: surface gap → accent tint → subtle drop shadow */
  box-shadow:
    0 0 0 3px var(--og-surface),
    0 0 0 5px color-mix(in srgb, var(--og-card-accent), white 55%),
    0 4px 14px color-mix(in srgb, var(--og-heading), transparent 80%);
}

/* Role-icon badge on the avatar corner */
.organogram-badge {
  position: absolute;
  right: -0.25rem;
  bottom: -0.25rem;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.75rem;
  color: #fff;
  background: var(--og-card-accent);
  border: 2.5px solid var(--og-surface);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--og-card-accent), transparent 60%);
}

/* Role pill: accent-tinted background with coloured text */
.organogram-role {
  display: block;
  width: fit-content;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--og-card-accent);
  background: color-mix(in srgb, var(--og-card-accent), transparent 87%);
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
  margin-bottom: 0.4rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organogram-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--og-heading);
}

.organogram-meta {
  margin-top: 0.2rem;
}

/* Contact strip: subtly tinted background, bleeds to the card edges */
.organogram-contact {
  font-size: 0.82rem;
  color: var(--og-text-muted);
  background: color-mix(in srgb, var(--og-card-accent), transparent 93%);
  border-top: 1px solid color-mix(in srgb, var(--og-card-accent), transparent 80%);
  border-radius: 0 0 calc(var(--og-card-radius) - 1px) calc(var(--og-card-radius) - 1px);
  /* Bleed past card-body padding to flush with card edges */
  margin: 0 -1rem -1rem;
  padding: 0.65rem 1rem;
}

/* At p-lg-4 the card body has 1.5rem padding, so bleed needs to match */
@media (min-width: 992px) {
  .organogram-contact {
    margin: 0 -1.5rem -1.5rem;
    padding: 0.75rem 1.5rem;
  }
}

.organogram-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.organogram-contact a:hover,
.organogram-contact a:focus-visible {
  color: var(--og-card-accent);
  text-decoration: underline;
}

/*--------------------------------------------------------------
# Small-card layout -- once a card's own column gets narrow (in practice:
# a --grid tier sharing its row between 5+ peers, e.g. Departments &
# Support Units at xxl), the side-by-side avatar+text layout above leaves
# too little room for the text column and starts truncating everything.
# Below that width, stack the photo above the text and center it instead --
# a plain @container query on the card's own rendered size (via
# .organogram-node's container-type above), so it reacts to whatever made
# THIS card small (peer count, viewport, both) rather than a guess about
# either alone.
--------------------------------------------------------------*/
@container (max-width: 16rem) {
  .organogram-card-main {
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
  }

  .organogram-card-info {
    align-self: stretch;
  }

  .organogram-role {
    margin-inline: auto;
  }

  .organogram-avatar {
    width: 4.75rem;
    height: 4.75rem;
  }

  .organogram-contact {
    justify-content: center;
    text-align: center;
  }
}