/* ---------------------------------------------------------------------------
   /buildings, the fifty building pages (.ea-bidx).

   THIS IS NOT A NEW CARD. It is assets/css/home-sections.css's .ea-bldg card,
   the "Buildings to Know" rail on the homepage, in the same fuller index form
   that assets/css/nbhd-archive.css already gave the .ea-hood row. Read those
   two files beside this one and keep all three in step.

   WHY IT EXISTS. /buildings was still rendering the ported Squarespace
   `blog-basic-grid` card, and every number Zeve reacted to came out of that
   component's untouched defaults:

     - the name measured 28.1px Cormorant and the preview line under it 12.54px,
       a ratio of 2.24 to 1. .eabc-heading to .eabc-body sitewide is 1.5 to 1,
       and .ea-nbhd was moved onto that same 1.5 a day earlier for exactly this
       reason. 12.54px is also below every other run of prose on the site: the
       archive intro on the same page is 21.18px.
     - `.blog-title{margin-bottom:46px}` was drawn for a "Read More" link that
       body-classes.php hides (tweak-blog-basic-grid-read-more-style-hide), so
       the 46px landed between the name and the preview instead. Against a
       69px card-to-card gap that made the largest space inside a card 67% of
       the space between two cards, and the preview line read as belonging to
       neither.
     - `.blog-meta-section{margin-bottom:15px}` survived on an element whose
       every child is display:none (tweak-...-primary-meta-none), so each card
       opened with a 15px void of nothing between the photograph and the name.
     - the excerpt was the last box in the card with no padding after it, so
       the rhythm ran 15 / 46 / 0 down a card that then had 69 to the next one.

   Both of Zeve's symptoms are that one cause: a component being used with a
   tweak combination it was never drawn for. The fix is not to re-tune those
   three numbers, it is to stop using the component, which is the decision
   archive-nbhd.php already took for /neighborhoods.

   Type and colour come entirely from the tokens sitewide.css defines
   (--eabc-ink / --eabc-paper / --eabc-sand / --eabc-muted, Cormorant Garamond
   for names, Hanken Grotesk for labels, EB Garamond for prose), which is why
   this stylesheet is enqueued with elevated-sitewide as a dependency. No new
   colour, button, face or spacing step is introduced here: every value below
   already appears in home-sections.css or nbhd-archive.css.

   TWO THINGS ARE TAKEN FROM .ea-bldg AND NOT FROM .ea-nbhd, on purpose:

     - the small caps line sits ABOVE the name, not below it. On .ea-nbhd that
       line is a count, which is a figure and reads as a footnote; here it is
       the neighborhood, which is a category and reads as a kicker. .ea-bldg
       carries the neighborhood in exactly this position.
     - the name is 1.5rem rather than the rail's 1.35rem, because these cards
       are 372px wide in a 1180px field and the rail's are 27% of a scrollport.
       1.5rem over a 1rem line is the 1.5 ratio .ea-nbhd settled on.

   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 and the filter row above resolve to the `white` theme,
   so paper here is a half-step down from them rather than a second colour: the
   grid reads as its own field, with the controls belonging to the header above
   it, and there is no visible seam.

   The top padding is the grid's own row gap, so the distance from the filter
   row to the first row of cards is the same distance one row of cards keeps
   from the next. It is restated at 767px because the row gap changes there. */
.ea-bidx{padding:3.2rem 6vw 5.5rem;background:var(--eabc-paper,#fafafa);color:var(--eabc-ink,#2e2e2f)}
.ea-bidx__inner{max-width:1180px;margin:0 auto}

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

/* Three up, the same field width and the same gaps as /neighborhoods, which
   gives each card ~372px. Fifty buildings do not divide evenly into any column
   count, and the filter means the rendered count is anywhere from 2 to 50, so
   there is no track count that avoids a short last row. Consistency with the
   sibling index is worth more than one row of two. */
.ea-bidx__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 address blowing a grid column past 100%,
   which is how horizontal overflow gets onto this site. */
.ea-bidx__card{position:relative;margin:0;min-width:0}

/* A building with no photograph keeps its place in the index rather than being
   dropped, and takes the hairline in place of the crop. All fifty 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. It is a border-top either way. */
.ea-bidx__card--flat{padding-top:1.1rem;border-top:1px solid rgba(0,0,0,.16)}

/* Fixed ratio so a slab tower and a wide prewar facade sit on the same
   baseline. The <img> fills it and is cropped rather than letterboxed. The
   ported card sized its crop from runtime.js instead, which is why the listing
   painted nothing with scripts off. */
.ea-bidx__media{overflow:hidden;border-radius:6.4px;background:rgba(0,0,0,.06);aspect-ratio:4/3}
.ea-bidx__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
   padding box keeps the crop from collapsing to zero where it is missing. */
@supports not (aspect-ratio:4/3){
  .ea-bidx__media{height:0;padding-bottom:75%;position:relative}
  .ea-bidx__media img{position:absolute;inset:0}
}

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

/* Small caps kicker: the neighborhood, the same step and the same position the
   homepage rail gives it. Every one of the fifty resolves to a neighborhood
   that also earned a filter button, so this line is never absent and never
   disagrees with the control above it. Where a future building resolves to
   none, archive-building.php prints "Building guide" rather than dropping the
   element, because a conditional line is what makes one card in a row sit
   20px higher than its neighbours. */
.ea-bidx__meta{margin:0 0 .5rem;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.68rem;font-weight:400;text-transform:uppercase;letter-spacing:.16em;
  text-align:left;color:var(--eabc-muted,rgba(0,0,0,.58))}

.ea-bidx__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-bidx__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. The ported card had two anchors per card to the same page. */
.ea-bidx__link::after{content:"";position:absolute;inset:0}

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

/* The supporting line: the building's own excerpt, unchanged. 1rem against a
   1.5rem name, which is .eabc-body against .eabc-heading. */
.ea-bidx__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}

/* --- The enquiry card at the foot --------------------------------------- */

/* template-parts/cta.php, the site's one enquiry card, sits below the paper
   field on the page ground. The distance between the two is this field's own
   padding-bottom above and nothing else; sitewide.css zeroes .ea-autocta's own
   3rem for this page and for /neighborhoods, and says why. Nothing about it is
   set here, so there is one number to change and it is the one above.

   The CTA button in the hero is also NOT here any more. It is
   .ea-archive-intro .ea-archive-cta in sitewide.css, shared with
   /neighborhoods, which carries the same button. */

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

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

@media (max-width:767px){
  /* Top padding tracks the row gap, as above. */
  .ea-bidx{padding:2.8rem 6vw 3.5rem}
  /* One column, so the row gap is the ONLY separation between two cards and
     wants to stay near the desktop value, exactly as /neighborhoods reasoned. */
  .ea-bidx__grid{grid-template-columns:1fr;gap:2.8rem}
  .ea-bidx__name{font-size:1.4rem}
  .ea-bidx__line{font-size:1rem}
}