/* ---------------------------------------------------------------------------
   Neighborhood guide header photograph (.ea-nbhd-hero).

   Rendered by single-nbhd.php, on the fifteen /neighborhoods/<slug>/ pages and
   nowhere else. Its own file for the same reason home-sections.css is:
   sitewide.css is the ported record of Squarespace's Custom CSS and stays that,
   so anything built after the migration is easier to reason about, and to
   revert, on its own.

   Type and colour come entirely from the tokens sitewide.css defines
   (--eabc-ink / --eabc-paper / --eabc-sand / --eabc-muted). No new colour,
   face or spacing scale is introduced here, and the crop, radius and hover-free
   restraint deliberately match .ea-hood__media on the homepage so the same
   photograph reads the same way on the card and on the page it links to.

   Every property the Squarespace bundle also sets globally (margin, padding,
   display, max-width) is stated explicitly. That bundle styles bare `figure`
   and `img` inside a blog item, so anything left to inherit here is a rule
   somebody else gets to win.
   --------------------------------------------------------------------------- */

/* Sibling of .blog-item-top-wrapper inside .blog-item-inner-wrapper, which is
   the element carrying the centred content measure. Width is therefore the text
   column at every breakpoint, on purpose and not for want of ambition: the
   source photographs run from 1403px down to 470px wide, so a plate that broke
   out past the measure would visibly upscale two of the fifteen. Staying on the
   measure also removes the whole class of horizontal-overflow bug that a
   negative-margin breakout invites at 390. */
.ea-nbhd-hero{display:block;margin:0 0 2.4rem;padding:0;max-width:100%;min-width:0}

/* Short hairline between the title and the photograph. The header was a bare
   h1 on an empty page; this is what turns the title, byline and image into one
   composed block rather than three stacked things. */
.ea-nbhd-hero__rule{display:block;width:3.25rem;height:1px;margin:0 0 1.9rem;
  background:var(--eabc-sand,#dbd7ce)}

/* Fixed 3:2 frame. The majority of the guide photographs are natively 3:2, and
   the rest (16:9, and one 2.5:1 streetscape) crop into it without losing their
   subject. A fixed ratio also means the page reserves the right box before the
   image decodes, so the body copy below never jumps. */
.ea-nbhd-hero__media{display:block;overflow:hidden;border-radius:6.4px;
  background:rgba(0,0,0,.06);aspect-ratio:3/2;max-width:100%}
.ea-nbhd-hero__media img{display:block;width:100%;height:100%;max-width:100%;
  object-fit:cover;object-position:50% 50%;margin:0;padding:0;border:0}

/* 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:3/2){
  .ea-nbhd-hero__media{height:0;padding-bottom:66.6667%;position:relative}
  .ea-nbhd-hero__media img{position:absolute;inset:0}
}

@media (max-width:767px){
  .ea-nbhd-hero{margin-bottom:1.8rem}
  .ea-nbhd-hero__rule{margin-bottom:1.4rem}
}

/* ---------------------------------------------------------------------------
   The trailing schema block.

   Eleven of the fifteen guides end their body with a Code Block whose whole
   payload is a FAQPage JSON-LD <script>. It paints nothing, but it is still a
   .sqs-block, so it reserves the 17px of top and bottom padding that spaces
   one body block from the next: 34px of measured white space with no pixel in
   it. With the lead form now sitting after the body (see single-nbhd.php),
   those 34px land between the last line of copy and the top of the card, and
   the four guides that carry no schema block sit 34px tighter than the other
   eleven.

   The building pages carry the identical block, but theirs falls after their
   form rather than before it, so on those pages it reads as room under the
   card instead. Collapsing it here is what puts the two page types on the same
   measurement above the card, 83px at both breakpoints, and makes all fifteen
   guides agree with each other.

   :has() guards the rule so it can only ever hit a block that is nothing but a
   JSON-LD script; a code block with something visible in it keeps its padding.
   Where :has() is unsupported the rule simply does not apply and the block
   keeps the 34px it has today.

   !important because the ported bundle sets padding-bottom on this exact
   element from
     .sqs-layout:not(.sqs-editing) > .sqs-row:first-child
       > [class*=sqs-col]:first-child > .sqs-block:not(:first-child):last-child
   which is nine classes deep and outweighs anything of a sane length here.
   --------------------------------------------------------------------------- */
.blog-item-content .sqs-block-code:last-child:has(
  > .sqs-block-content > .sqs-code-container > script[type="application/ld+json"]
){padding-top:0 !important;padding-bottom:0 !important}

/* ---------------------------------------------------------------------------
   "More neighborhood guides" (.ea-nbhd-related), rendered by
   template-parts/related-guides.php as a sibling of .blog-item-wrapper.

   ONLY the band is defined here. The cards inside it are .ea-nbhd__* from
   assets/css/nbhd-archive.css, unchanged and unextended: same 4:3 crop, same
   Cormorant name over a Hanken small-caps count over a muted supporting line,
   same stretched link, same 3 / 2 / 1 column steps at the same breakpoints.
   mu-plugins/elevated-nbhd-archive.php loads that stylesheet on single guides
   for exactly this reason, so the index card and this card cannot drift.

   Ground is --eabc-paper and NOT --eabc-sand, which is the obvious choice and
   the wrong one: the enquiry card 119px above this band is an .eabc-card, and
   .eabc-card is already sand. A sand band under it would read as one slab with
   a white stripe cut through it. Paper is the half-step the /neighborhoods
   index already uses under a white hero, and the hairline is what actually
   draws the edge.
   --------------------------------------------------------------------------- */

.ea-nbhd-related{padding:4.4rem 6vw 5rem;background:var(--eabc-paper,#fafafa);
  color:var(--eabc-ink,#2e2e2f);border-top:1px solid rgba(0,0,0,.12)}

/* Same measure as .ea-hood__inner and .ea-nbhd__inner, so three cards here are
   the same width as three cards on the homepage and on the index. */
.ea-nbhd-related__inner{max-width:1180px;margin:0 auto;min-width:0}

.ea-nbhd-related__eyebrow{margin:0 0 1.1rem;text-align:center;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.75rem;font-weight:400;text-transform:uppercase;letter-spacing:.16em;
  color:var(--eabc-muted,rgba(0,0,0,.58))}

/* 2.1rem rather than the homepage section's 2.4rem: this is a closing band on
   a reading page, not the heading of a section someone landed on, and 2.1rem
   is the size .eabc-heading already uses for the enquiry card above it. */
.ea-nbhd-related__title{margin:0 0 2.6rem;text-align:center;
  font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif;
  font-weight:400;font-size:2.1rem;line-height:1.15;letter-spacing:-.005em;
  color:var(--eabc-ink,#2e2e2f)}

/* The row gap in nbhd-archive.css is tuned for five rows of cards. This band
   is one row, so the only gap that matters is the column one. */
.ea-nbhd-related .ea-nbhd__grid{row-gap:2.8rem}

.ea-nbhd-related__cta{margin:3rem 0 0;text-align:center}

@media (max-width:767px){
  .ea-nbhd-related{padding:3.2rem 6vw 3.6rem}
  .ea-nbhd-related__title{margin-bottom:2.1rem;font-size:1.75rem}
  .ea-nbhd-related__cta{margin-top:2.4rem}
}

/* The button stays the site's inline pill at every width the audit checks. Its
   2.2rem side padding plus "All neighborhood guides" only runs out of room
   below roughly 360px, so trim the padding there rather than let a label push
   the page sideways. Same rule, same reason, as .ea-hood__cta on the homepage. */
@media (max-width:360px){
  .ea-nbhd-related__cta .eabc-btn{padding-left:1.1rem;padding-right:1.1rem}
}

/* ===========================================================================
   "Notable transactions in <neighborhood>" (.ea-nbhd-txs), rendered by
   template-parts/nbhd-transactions.php as a sibling of .blog-item-wrapper,
   directly above .ea-nbhd-related.

   ONLY THE BAND IS DEFINED HERE. The cards inside it are .ea-tx__* from
   assets/css/transactions-archive.css, unchanged and unextended, plus the
   .ea-tx__grid--band modifier that file defines for exactly this: same 4:3
   crop, same Cormorant lining-tabular figure over an EB Garamond address under
   a Hanken small caps kicker, same stretched link. That stylesheet's gate in
   functions.php was widened to single guides to load them; it was not copied.

   THE SHELL IS .ea-nbhd-related's, restated against this band's own class, and
   the two are meant to be read as one foot: same 6vw gutter, same 1180px
   measure, same centred Hanken eyebrow over a 2.1rem Cormorant heading, same
   767px step. Two values differ and both are because of where it sits.

   NO TOP RULE, where .ea-nbhd-related has one. THE HAIRLINE RULE at the top of
   sitewide.css: a rule separates items in a list of N, is removed from the
   first, and is never a border-bottom. These two bands are a list of two, so
   the rule belongs between them, which is the one .ea-nbhd-related already
   draws. Adding a second here would draw a line immediately under the enquiry
   card and box it.

   NO PAPER GROUND, where .ea-nbhd-related has one, and this is the reason the
   band reads as proof rather than as a footer: it sits on the page ground with
   the article it belongs to, and .ea-nbhd-related's paper field starts under
   it. One seam, in the same place it already was.
   ======================================================================== */

.ea-nbhd-txs{padding:3.6rem 6vw 4rem;color:var(--eabc-ink,#2e2e2f)}

.ea-nbhd-txs__inner{max-width:1180px;margin:0 auto;min-width:0}

.ea-nbhd-txs__eyebrow{margin:0 0 1.1rem;text-align:center;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.75rem;font-weight:400;text-transform:uppercase;letter-spacing:.16em;
  color:var(--eabc-muted,rgba(0,0,0,.58))}

.ea-nbhd-txs__title{margin:0 0 2.6rem;text-align:center;
  font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif;
  font-weight:400;font-size:2.1rem;line-height:1.15;letter-spacing:-.005em;
  color:var(--eabc-ink,#2e2e2f)}

/* The quiet way into the collection, centred under the cards. Set at the label
   step in the label face because it is navigation rather than a sentence, and
   NOT an .eabc-btn: "More neighborhood guides" below already closes on one, and
   two buttons at the foot of a guide is two primary actions where there is one.
   The link's own rest and hover states are .ea-tx__out's, in the card
   stylesheet this band already loads. */
.ea-nbhd-txs__links{margin:2.6rem 0 0;text-align:center;
  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;
  line-height:1.4}

@media (max-width:767px){
  .ea-nbhd-txs{padding:2.8rem 6vw 3rem}
  .ea-nbhd-txs__title{margin-bottom:2.1rem;font-size:1.75rem}
  .ea-nbhd-txs__links{margin-top:2.1rem}
}