/* Home page (`/`) layout: the photographic hero, then the statement, then the
   one service in prose. 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 practice grid — one statement, one
   contact CTA, and one section saying what the firm does. */

/* ---- 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;
}

/* Three abreast on any screen with room for them, stacked on a phone. Three
   explicit columns rather than `auto-fit`: with three boxes `auto-fit` will drop
   one to a second row as soon as the track minimum stops fitting, and a 2-and-1
   split reads as though the third practice were an afterthought. */
.home-practices__grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 48rem) {
  .home-practices__grid {
    grid-template-columns: repeat(3, 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;
}