/* ---------------------------------------------------------------------------
   /neighborhoods, the guide index (.ea-nbhd).

   The fuller version of the homepage "Where Elevated Works" section, not a
   second design. Everything here is lifted from assets/css/home-sections.css
   (.ea-hood): the same 4:3 crop, the same Cormorant name over a Hanken
   small-caps count over a muted supporting line, the same stretched link, the
   same 3 / 2 / 1 column steps at the same breakpoints. Read that file beside
   this one and keep the two in step.

   Type and colour come entirely from the tokens sitewide.css defines
   (--eabc-ink / --eabc-paper / --eabc-sand / --eabc-muted, Cormorant Garamond
   for headings, Hanken Grotesk for labels), which is why this stylesheet is
   enqueued with elevated-sitewide as a dependency. No new colour, button or
   face is introduced here.

   Two things are deliberately NOT the same as the homepage card:

     - the supporting line is 1rem, not .95rem. It was 12.5px pure black in the
       ported grid card, roughly half the title, and it is the only prose on the
       page. 1rem against a 1.5rem title is a 1.5 ratio, which is the same
       relationship .eabc-heading has to .eabc-body sitewide.
     - the row gap is 3.2rem against the homepage's 2.4rem. The homepage shows
       two rows; this page shows five, and at 2.4rem the supporting line of one
       row sat closer to the photograph below it than to its own title.

   Every property that Squarespace's bundle also sets globally (font, margin,
   colour, text-align, letter-spacing) is stated explicitly. Anything left to
   inherit is a rule someone else gets to win.
   --------------------------------------------------------------------------- */

/* Ground. The hero band above resolves to the `white` theme, so paper here is
   a half-step down from it rather than a second colour: the grid reads as its
   own field without a visible seam. */
.ea-nbhd{padding:.5rem 6vw 5.5rem;background:var(--eabc-paper,#fafafa);color:var(--eabc-ink,#2e2e2f)}
.ea-nbhd__inner{max-width:1180px;margin:0 auto}

/* --- Card grid --------------------------------------------------------- */

/* Three up. Fifteen guides divide into five complete rows, so no row is left
   with an orphan card, and a 1180px field gives each card ~372px, the width
   the homepage cards were approved at. */
.ea-nbhd__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3.2rem 2rem;margin:0}

/* position: the card is the containing block for the stretched link below.
   min-width:0 stops a long unbroken name blowing a grid column past 100%,
   which is how horizontal overflow gets onto this site. */
.ea-nbhd__card{position:relative;margin:0;min-width:0}

/* A guide with no photograph keeps its place in the index rather than being
   dropped, and takes the hairline the Knowledge Center cards use in place of
   the crop. All fifteen carry an image today; this is here so that stops being
   load-bearing. */
/* NOT a list divider, so THE HAIRLINE RULE at the top of sitewide.css does not
   apply and the first row keeps its rule. This hairline stands in for a missing
   photograph on one card; it belongs to that card the way the crop belongs to
   the others, and suppressing it on the first row would take the substitute
   away from exactly the cards that need it. */
.ea-nbhd__card--flat{padding-top:1.1rem;border-top:1px solid rgba(0,0,0,.16)}

/* Fixed ratio so a portrait tower and a landscape streetscape sit on the same
   baseline. The <img> fills it and is cropped rather than letterboxed. */
.ea-nbhd__media{overflow:hidden;border-radius:6.4px;background:rgba(0,0,0,.06);aspect-ratio:4/3}
.ea-nbhd__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transition:transform .45s ease}

/* aspect-ratio is not honoured by every engine the ported bundle targets; the
   min-height keeps the crop from collapsing to zero where it is missing. */
@supports not (aspect-ratio:4/3){
  .ea-nbhd__media{height:0;padding-bottom:75%;position:relative}
  .ea-nbhd__media img{position:absolute;inset:0}
}

.ea-nbhd__body{padding:1.1rem .1rem 0;text-align:left}

.ea-nbhd__name{margin:0;
  font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif;
  font-weight:400;font-size:1.5rem;line-height:1.2;letter-spacing:-.005em;
  color:var(--eabc-ink,#2e2e2f);text-align:left;overflow-wrap:break-word}

.ea-nbhd__link{color:inherit;text-decoration:none}

/* Stretched link: one anchor per card, so the whole tile is clickable without
   nesting a second link inside the image or duplicating the destination for a
   screen reader. */
.ea-nbhd__link::after{content:"";position:absolute;inset:0}

.ea-nbhd__card:hover .ea-nbhd__media img{transform:scale(1.04)}
.ea-nbhd__card:hover .ea-nbhd__link{text-decoration:underline;text-underline-offset:3px}
.ea-nbhd__link:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px}

/* Small caps meta: how many buildings we cover there, the same line the
   homepage card carries. */
.ea-nbhd__meta{margin:.45rem 0 0;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.72rem;font-weight:400;text-transform:uppercase;letter-spacing:.16em;
  text-align:left;color:var(--eabc-muted,rgba(0,0,0,.58))}

.ea-nbhd__line{margin:.55rem 0 0;
  font-family:"EB Garamond",var(--body-font-font-family),Georgia,serif;
  font-size:1rem;line-height:1.55;font-weight:400;text-align:left;
  color:var(--eabc-muted,rgba(0,0,0,.58));overflow-wrap:break-word}

/* --- Narrow ------------------------------------------------------------ */

@media (max-width:1024px){
  .ea-nbhd__grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:767px){
  .ea-nbhd{padding:.5rem 6vw 3.5rem}
  /* One column, so the row gap is the ONLY separation between two cards and
     wants to stay near the desktop value rather than drop to the 2rem the
     homepage uses under its own, shorter, list. */
  .ea-nbhd__grid{grid-template-columns:1fr;gap:2.8rem}
  .ea-nbhd__name{font-size:1.4rem}
  .ea-nbhd__line{font-size:1rem}
}