/* ═══════════════════════════════════════════════════════════════════════════
   division-row.css — the sibling-division row.  NAV1 §2a A4.
   Added 2026-08-14.

   WHAT PROBLEM THIS SOLVES
   Measured 2026-08-14: three of the four division pages linked to NO sibling
   division anywhere - not in the body, not in the footer. Reaching a second
   division meant going back to /divisions and starting again. That is most of
   why division pages were sitting at 1-6 views.

   🚩 IT IS NOT A COPY OF MYTHRILWORKS. The spec said "MythrilWorks already
   cross-links and is the pattern to copy". It does not have a row - it has two
   CONTEXTUAL links (to the Athenaeum's lore archive and news) placed because
   the lore genuinely lives there. That is a content relationship. This is a
   navigation component, and the two should not be confused: contextual prose
   still belongs on each page later, and it is Andrew's to write.

   ⚠️ DELIBERATELY PALETTE-NEUTRAL. Each division is getting its own ramp
   (NAV_AND_IDENTITY_SPEC §3a: Bastion sapphire, Foundry molten orange,
   MythrilWorks cyan, Athenaeum gilt). A row that shows the OTHER three cannot
   be tinted with the CURRENT page's accent without implying the wrong owner,
   and it cannot carry three accents at once without becoming a fruit salad.
   So it stays greyscale and lets the emblems carry the identity - which is
   also §3b's point that "colour is the last line of the identity, not the
   first".

   ⚠️ Every var() has a literal fallback: the three non-Athenaeum division pages
   define their tokens in an inline <style> block and load neither styles.css
   nor athenaeum.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.div-siblings {
  border-top: 1px solid var(--rws-border, rgba(255, 255, 255, .10));
  border-bottom: 1px solid var(--rws-border, rgba(255, 255, 255, .10));
  background: rgba(255, 255, 255, .015);
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
}

.div-siblings__inner {
  max-width: var(--container-max, 1200px);
  margin-inline: auto;
  padding-inline: var(--container-px, clamp(1.5rem, 5vw, 4rem));
}

.div-siblings__label {
  font-family: var(--font-heading, 'Cinzel', Georgia, serif);
  /* 0.72rem is the project type floor. Do not go below it. */
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  /* --rws-label is #FFFFFF sitewide and is ALSO the per-division override hook
     (styles.css). A division that sets it to its own accent re-themes this
     label for free, which is the one place the current page's colour is the
     correct colour - it is the page talking, not the siblings. */
  color: var(--rws-label, #fff);
  margin: 0 0 1.35rem;
}

.div-siblings__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.div-sibling {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  min-height: 44px;                    /* touch target */
  border: 1px solid var(--rws-border, rgba(255, 255, 255, .10));
  border-radius: 2px;
  background: rgba(0, 0, 0, .25);
  transition: border-color .2s, background .2s, transform .2s var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}
.div-sibling:hover {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .04);
  transform: translateY(-2px);
}
.div-sibling:focus-visible {
  outline: 2px solid var(--rws-label, #fff);
  outline-offset: 2px;
}

.div-sibling img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.div-sibling__name {
  display: block;
  font-family: var(--font-heading, 'Cinzel', Georgia, serif);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rws-white, #fff);
  line-height: 1.35;
}
.div-sibling__desc {
  display: block;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: .72rem;
  letter-spacing: .02em;
  /* 0.62 white on the near-black ground clears AA at this size. The site's
     0.30 alpha was a straight WCAG failure and was raised to 0.48 sitewide for
     exactly this reason - do not reintroduce a lower value here. */
  color: rgba(255, 255, 255, .62);
  line-height: 1.45;
  margin-top: .15rem;
}

/* ── Tablet / mobile ────────────────────────────────────────────────────────
   Three across stops working well before the nav breakpoint, so this steps
   down at 860px rather than waiting for 900. Project hard rule: tested at
   390px portrait. */
@media (max-width: 860px) {
  .div-siblings__list { grid-template-columns: 1fr; gap: .65rem; }
  .div-sibling { padding: .85rem 1rem; }
  .div-sibling img { width: 38px; height: 38px; }
  /* Tightened so "RED WARDEN MYTHRILWORKS" stays on one line at 390px.
     Measured before this: it wrapped, making that card 84px against 67px for
     the other two - a ragged stack that reads as a mistake rather than as a
     long word. Tracking comes down before size, because letter-spacing is what
     was actually costing the room. Still above the 0.72rem type floor. */
  .div-sibling__name { font-size: .78rem; letter-spacing: .05em; }
}

@media (prefers-reduced-motion: reduce) {
  .div-sibling { transition: none; }
  .div-sibling:hover { transform: none; }
}