/* Home page (`/`) layout: the statement, the litigation practice in prose, and
   the four practice boxes. The brand layer (`brand-firm.css`) owns the palette,
   the serif, the card, and the motion; this file only places them.

   The page publishes no services catalog and no price. It leads with the
   litigation practice in the statement, then shows the whole firm as four
   equal doors so counsel, technology, and one-time filings are not a leftover
   row. */

/* ---- The hero ---------------------------------------------------------- */

/* The shell centres a 72rem column and pads it by 1rem; the hero cancels that
   padding and the column's top padding so the photograph meets the header and
   both side edges. It deliberately does not bleed to `100vw`: that overflows
   the page by the scrollbar's width on every desktop browser that reserves
   one, and the header nav is already measured to the same 72rem. */
.home-hero {
  /* The scrim's channels. Deliberately a literal rather than a `--nav-*`
     token: it darkens a photograph so white type stays legible on it, which
     has to hold in the light theme too. A theme colour here would invert with
     the page and put white type on a light wash. */
  --home-hero-shade: 6 12 24;

  position: relative;
  display: grid;
  place-items: end start;
  /* The band's own opaque floor, in the scrim's channels. The photograph and
     the scrim both paint above it (a negative `z-index` child paints over its
     parent's background), so a loaded hero looks exactly the same — but the
     white wordmark now sits on this shade rather than on whatever the page
     background happens to be. Without it the light theme puts white type on a
     near-white page for as long as the photograph is missing or still
     loading, which is the WCAG contrast failure `server/tests/
     accessibility_e2e.rs` reports at `h1` on the firm's `/`. */
  background-color: rgb(var(--home-hero-shade));
  margin: -2rem -1rem 0;
  /* The photograph is 3:2. A phone-width box taller than about 17rem stops
     being a crop of the horizon and becomes a crop of the *sides* — which is
     where the Golden Gate is. Keep the small band close to the photo's own
     ratio; the wide band below is where the letterbox is affordable. */
  min-height: clamp(15rem, 62vw, 20rem);
  overflow: hidden;
  border-radius: 0 0 1rem 1rem;
  isolation: isolate;
}

/* A deployment that has not published the hero to its assets bucket renders
   the wordmark alone. Without this the page would open on a tall empty band. */
.home-hero:not(:has(.home-hero__picture)) {
  min-height: 0;
  margin-top: 0;
}

/* `<picture>` is an inline wrapper with no box of its own; the `<img>` inside
   it is what fills the hero, so the wrapper only has to stop generating a
   line box of its own. */
.home-hero__picture {
  display: contents;
}

.home-hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  /* The subject — the bay, the bridge, the campanile — sits below the middle
     of the frame, so a cover crop holds the lower two thirds. */
  object-fit: cover;
  object-position: 50% 62%;
}

@media (min-width: 56rem) {
  .home-hero {
    place-items: center;
    /* Tall enough to read as a horizon rather than a strip, and capped so the
       picture does not push the statement below the fold on a laptop. */
    min-height: clamp(20rem, 52vh, 34rem);
  }
}

.home-statement {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  max-width: 44rem;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3rem);
}

.home-statement__heading,
.home-statement__lead,
.home-statement__cta {
  position: relative;
  z-index: 1;
}

.home-statement__heading {
  margin: 0;
  font-family: var(--firm-serif);
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}

.home-statement__lead {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--nav-color-text-muted);
}

.home-statement__cta {
  margin-top: 0.5rem;
}

/* The shared button is themed Navigator cyan; on the firm's own surface it
   carries the firm's colour instead, so the one call to action on the page is
   not the one element that is off-brand. `theme.css` sets the primary button
   through `.nav-theme a.nav-btn--primary`, so this has to match that
   specificity to win. */
.nav-theme a.nav-btn--primary.home-statement__cta,
.nav-theme a.nav-btn--primary.home-statement__cta:hover,
.nav-theme a.nav-btn--primary.home-statement__cta:focus-visible {
  border-color: var(--firm-brand);
  background: var(--firm-brand);
  color: var(--firm-on-brand);
}

.nav-theme a.nav-btn--primary.home-statement__cta:hover,
.nav-theme a.nav-btn--primary.home-statement__cta:focus-visible {
  border-color: var(--firm-brand-strong);
  background: var(--firm-brand-strong);
}

/* ---- The one service --------------------------------------------------- */

/* One card, holding one section of prose. There is no grid here on purpose:
   the page states one offering, and a column of cards is how a reader is told
   there are several to choose between. */
.home-service {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.home-service__heading {
  margin: 0;
  font-family: var(--firm-serif);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

.home-service__paragraph {
  margin: 0;
  max-width: 68ch;
  line-height: 1.65;
  color: var(--nav-color-text);
  text-wrap: pretty;
}

.home-service__paragraph strong {
  font-weight: 600;
}

/* A run that links, inside a paragraph. The brand layer owns the link colour;
   this only keeps the underline from crowding the serif's descenders. */
.home-service__link {
  color: var(--firm-brand-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* ---- The other practices ------------------------------------------------ */

/* Three boxes at the foot of the page. The page leads with one offering; these
   say the firm practices law too, and hand the reader to the page for each. */
.home-practices {
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.home-practices__heading {
  margin: 0 0 1.5rem;
  font-family: var(--firm-serif);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

/* Two by two on any screen with room for them, stacked on a phone. Two
   explicit columns rather than `auto-fit` or four abreast: four tracks crowd
   the sentence in each box, and a 3-and-1 split reads as though the last
   practice were an afterthought. */
.home-practices__grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 48rem) {
  .home-practices__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Each box is a link. `.neon-card` spaces itself from the block above; inside
   the grid the gap does that instead.

   `isolation` and `overflow` are what keep the hover wash inside the rounded
   corner: the wave is a pseudo-element scaled well past the box, and without a
   clip it would paint over the boxes beside it. */
.home-practices__grid > .home-practice {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 240ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* `.nav-theme a:hover` underlines every link and recolours it, which on a card
   whose whole surface is the anchor underlined the heading and both lines of
   prose — the box read as a wall of link text. The selector matches that rule's
   specificity to keep the box a box; the heading alone takes the brand colour,
   which is the affordance that says it is clickable. */
.nav-theme a.home-practice:hover,
.nav-theme a.home-practice:focus-visible {
  border-color: var(--firm-brand);
  color: inherit;
  text-decoration: none;
  transform: translateY(-2px);
}

.home-practice:hover .home-practice__heading,
.home-practice:focus-visible .home-practice__heading {
  color: var(--firm-brand-strong);
}

/* The wave. A circle anchored off the box's bottom-left corner, scaled from
   nothing to well past the top-right on hover, so the wash reads as a swell
   crossing the card on the diagonal rather than a panel fading in.

   `transform-origin` at the bottom-left corner is what sets the direction; the
   long, decelerating curve is what makes it read as a wave rather than a flash.
   It sits at `z-index: -1` under the card's own text, which is why the card
   isolates a stacking context. */
.home-practice::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-start: -25%;
  inset-block-end: -55%;
  inline-size: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 70%,
    var(--firm-brand) 0%,
    color-mix(in srgb, var(--firm-brand) 45%, transparent) 45%,
    transparent 72%
  );
  opacity: 0;
  transform: scale(0.2);
  transform-origin: 0% 100%;
  transition:
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 320ms ease;
}

.home-practice:hover::after,
.home-practice:focus-visible::after {
  opacity: 0.22;
  transform: scale(1.5);
}

/* The wave is decoration. Suppressed, the border and the lift still answer the
   pointer, so the box never stops responding — it just stops swelling. */
@media (prefers-reduced-motion: reduce) {
  .home-practices__grid > .home-practice,
  .home-practice::after {
    transition-duration: 1ms;
  }

  .home-practice:hover,
  .home-practice:focus-visible {
    transform: none;
  }

  .home-practice:hover::after,
  .home-practice:focus-visible::after {
    transform: scale(1.5);
  }
}

/* The mark the box opens on, centred over the heading.

   Stroked in `currentColor`, so it is white wherever the card's text is white
   and dark wherever the text is dark — one rule serving both themes. That is
   the thing a colour emoji could not do: `color` does not reach a colour glyph,
   and flattening one with a filter turns a handshake into a blot. */
.home-practice__mark {
  align-self: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  color: var(--nav-color-text);
}

.home-practice__heading {
  margin: 0;
  font-family: var(--firm-serif);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

.home-practice__body {
  margin: 0;
  line-height: 1.6;
  color: var(--nav-color-text-muted);
  text-wrap: pretty;
}