/*
  Bluestone — domain tiles and the open hero.
  ---------------------------------------------------------------------------
  Layered on top of site.css rather than replacing it. site.css is compiled
  Tailwind utilities and still owns type, spacing and the base palette; this
  file adds only what the utility set had no vocabulary for: the three domain
  hues, the icon treatment, and the Copilot-style hero composition.

  Removing the <link> to this file returns the site to its previous look.

  Icon treatment is "Direction B — layered translucent": a low-alpha rounded
  tile behind a solid mark. The depth in the reference comes from that
  stacking, not from gradients.
*/

:root {
  /* Three domain hues. Two are existing brand tokens; --dom-fin is the one
     addition, tuned to sit against navy without fighting the brass. */
  --dom-case: #1f62a8;   /* = --color-signal */
  --dom-fin:  #2f7d5e;   /* new */
  --dom-rep:  #a8763e;   /* = --color-patina */
}

/* ---------------------------------------------------------------------------
   Icon shapes live once in a hidden <defs> sprite and are drawn with <use>.
   Document CSS cannot reach inside a <use> shadow tree with class selectors,
   so every shape carries an inline style reading a custom property — those DO
   inherit through <use>. The properties must be declared on the same element
   that carries --hue, never on an ancestor, or var() resolves to invalid.
   --------------------------------------------------------------------------- */
.bs-icon { --hue: var(--dom-case); display: block; }
.bs-icon--case { --hue: var(--dom-case); }
.bs-icon--fin  { --hue: var(--dom-fin);  }
.bs-icon--rep  { --hue: var(--dom-rep);  }

.bs-icon {
  --c-tile:   color-mix(in srgb, var(--hue) 14%, transparent);
  --c-mark:   var(--hue);
  --c-ghost:  color-mix(in srgb, var(--hue) 22%, transparent);
  --c-ghost2: color-mix(in srgb, var(--hue) 38%, transparent);
  --c-line:   rgba(255, 255, 255, 0.92);
  --c-dot:    rgba(255, 255, 255, 0.86);
  --c-bar:    rgba(255, 255, 255, 0.92);
  --c-badge:  #ffffff;
  --c-badge2: var(--hue);
}

/* ---------------------------------------------------------------------------
   Hero — open composition. Copy left, icon cluster right.
   --------------------------------------------------------------------------- */
.bs-hero {
  background: var(--color-paper, #f7f8f8);
  border-bottom: 1px solid var(--color-rule, #dde3e7);
}
.bs-hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 40px;
  align-items: center;
}
.bs-hero-cluster { position: relative; min-height: 300px; }
.bs-hero-cluster .bs-icon { position: absolute; }

/* Three tiles at different scales and depths. One forward and solid, the
   others receding — the same stacking as the reference composition. */
.bs-hero-cluster .c1 { width: 30%; left: 1%;  top: 44%; transform: rotate(-7deg); }
.bs-hero-cluster .c2 { width: 22%; left: 37%; top: 4%;  transform: rotate(5deg); opacity: 0.66; }
.bs-hero-cluster .c3 { width: 36%; left: 49%; top: 40%; transform: rotate(-3deg); }

/* ---------------------------------------------------------------------------
   Domain tiles — the three-card row under the hero.
   --------------------------------------------------------------------------- */
.bs-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.bs-tile {
  background: #ffffff;
  border: 1px solid var(--color-rule, #dde3e7);
  border-radius: 14px;
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 200ms ease, transform 200ms ease;
}
.bs-tile:hover { border-color: var(--color-rule-strong, #c6d0d7); }
.bs-tile .bs-icon { width: 56px; height: 56px; }
.bs-tile h3 {
  font-family: var(--font-display, "Source Serif 4", Georgia, serif);
  font-size: 1.25rem; line-height: 1.2; color: var(--color-ink, #0e1f2e); margin: 0;
}
.bs-tile p {
  font-size: 0.9375rem; line-height: 1.65; color: var(--color-text-muted, #4c5f6d); margin: 0;
}
.bs-tile ul { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.bs-tile li {
  position: relative; padding-left: 16px;
  font-size: 0.875rem; line-height: 1.55; color: var(--color-text-subtle, #5a6d7e);
}
.bs-tile li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 1px; background: var(--hue, #a8763e);
}

@media (max-width: 900px) {
  .bs-tiles { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 760px) {
  .bs-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .bs-hero-cluster { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .bs-tile { transition: none; }
}

/* ---------------------------------------------------------------------------
   Shared card treatment
   ---------------------------------------------------------------------------
   The original design used a hairline rule above each item (`border-t
   border-rule pt-6`). The probate page introduced rounded tiles, which left
   the two looking like different sites. `.bs-grid` promotes any existing grid
   of items to the tile treatment without rewriting the markup inside it.

   The inner reset neutralises that old hairline: `.bs-grid > li > div` is
   specificity (0,1,2) and beats Tailwind's `.border-t` / `.pt-6` at (0,1,0),
   so no !important is needed.
   --------------------------------------------------------------------------- */
.bs-grid > li,
.bs-grid > div {
  background: #ffffff;
  border: 1px solid var(--color-rule, #dde3e7);
  border-radius: 14px;
  padding: 26px 24px 28px;
  transition: border-color 200ms ease;
}
.bs-grid > li:hover,
.bs-grid > div:hover { border-color: var(--color-rule-strong, #c6d0d7); }

/* Collapse whatever chrome the item already had.

   Some grids wrapped their content in a hairline rule (`border-t … pt-6`),
   others in a complete card of their own (`rounded-sm border … bg-white p-7`,
   often an <a> so the whole tile is clickable). Left alone, the second kind
   produced a visible border inside a border. Zero the chrome here and let the
   outer card own it, so every tile is exactly one rectangle.

   Layout properties (h-full, flex, gap) are deliberately untouched. */
.bs-grid > li > div,
.bs-grid > li > a,
.bs-grid > div > div,
.bs-grid > div > a {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

/* Items that lead with a number keep the marker, but it sits inside the card
   now rather than against a rule. */
.bs-grid > li > div > span:first-child { margin-top: 0; }

/* A card is always a light surface. Two of these grids live on `bg-ink`
   sections, where the markup sets `text-white` / `text-on-dark-*` — on a white
   card that is invisible or near-invisible. Flip those to the light-surface
   ramp. The values match what the light-section grids already use, so this is
   a no-op there rather than a special case. */
.bs-grid > li h3,
.bs-grid > li .text-white,
.bs-grid > div h3,
.bs-grid > div .text-white { color: var(--color-ink, #0e1f2e); }

.bs-grid > li p,
.bs-grid > li .text-on-dark-muted,
.bs-grid > li .text-on-dark-subtle,
.bs-grid > div p,
.bs-grid > div .text-on-dark-muted,
.bs-grid > div .text-on-dark-subtle { color: var(--color-text-muted, #4c5f6d); }

/* A denser variant for long lists — "Who we serve" runs to eight items. */
.bs-grid--compact > li { padding: 20px 20px 22px; }

/* Grids that carry an icon get the same tile chrome as the probate page. */
.bs-grid--icon > li { padding: 30px 28px 32px; display: flex; flex-direction: column; }
.bs-grid--icon > li > .bs-icon { width: 56px; height: 56px; margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  .bs-grid > li, .bs-grid > div { transition: none; }
}