/* ============================================================
   blocks-b.css — media + dynamic block partials (blocks-b slice)
   image · video · tile_grid · doc_list · card_grid · promo_card ·
   form · hero · community_grid · map_embed · html_embed
   Golden Hour vocabulary (tokens.css / components.css). Mobile-first;
   motion is 200–400ms ease-out and prefers-reduced-motion is respected
   globally via tokens.css.
   ============================================================ */

/* ---------- shared vertical rhythm for this slice ---------- */
.blk--image, .blk--video, .blk--tile_grid, .blk--doc_list,
.blk--card_grid, .blk--form, .blk--map_embed { padding-block: var(--space-8); }
.blk--promo_card, .blk--community_grid { padding-block: var(--space-12); }
@media (min-width: 1024px) {
  .blk--image, .blk--video, .blk--tile_grid, .blk--doc_list,
  .blk--card_grid, .blk--form, .blk--map_embed { padding-block: var(--space-12); }
  .blk--promo_card, .blk--community_grid { padding-block: var(--space-16); }
}

/* ---------- image ---------- */
.img-fig { margin: 0 auto; }
.img-fig--full { max-width: none; }
.img-fig--wide { max-width: var(--container-lg); }
.img-fig--medium { max-width: var(--container-md); }
.img-fig--small { max-width: var(--container-sm); }
.img-fig img { width: 100%; height: auto; border-radius: var(--radius-md);
  border: var(--border-soft); background: var(--sand); }
.img-fig__link { display: block; border-radius: var(--radius-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.img-fig__link:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.img-fig__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.img-fig__cap { margin-top: var(--space-3); font-size: var(--fs-caption);
  color: var(--ink-muted); text-align: center; }

/* ---------- video ---------- */
.blk--video .video-embed { background: var(--ground); }
.video-lb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-lb__blank { position: absolute; inset: 0;
  background: linear-gradient(135deg, #1E1433, var(--ground)); }
.video-lb__play { position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 76px; height: 76px;
  border: 0; border-radius: 50%; background: var(--brass); color: #1C1B19;
  cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-2);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.video-lb__play svg { width: 30px; height: 30px; margin-left: 3px; }
.video-lb__play::after { content: ""; position: absolute; inset: -10px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.35); }
.video-lb__play:hover { background: var(--brass-deep); color: #fff;
  transform: translate(-50%, -50%) scale(1.07); }
.video-lb__play:focus-visible { outline: none;
  box-shadow: var(--focus-ring), var(--shadow-2); }
.video-embed--file video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000; }

/* ---------- tile_grid (the resources signature) ---------- */
.tiles { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 820px) {
  .tiles--3 { grid-template-columns: repeat(3, 1fr); }
  .tiles--4 { grid-template-columns: repeat(4, 1fr); }
  .tiles--5 { grid-template-columns: repeat(5, 1fr); }
  .tiles--6 { grid-template-columns: repeat(6, 1fr); }
}
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); text-align: center; min-height: 120px; color: var(--ink);
  background: var(--surface); border: var(--border-hair); border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-4);
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.tile:hover { transform: translateY(-2px); border-color: var(--brass);
  box-shadow: var(--shadow-1); color: var(--ink); }
.tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tile__logo { height: 64px; display: flex; align-items: center; justify-content: center; }
.tile__logo img { max-height: 64px; max-width: 100%; width: auto; object-fit: contain; }
.tile__cap { font-family: var(--font-sans); font-size: .9rem; font-weight: 500;
  line-height: 1.35; color: var(--ink-soft); }
.tile:hover .tile__cap { color: var(--ink); }

/* ---------- doc_list ---------- */
.doclist { list-style: none; margin: 0; padding: 0; border-top: var(--border-hair); }
.doclist__item { border-bottom: var(--border-hair); }
.doclist__row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4);
  align-items: center; padding: var(--space-4) var(--space-2); color: var(--ink);
  transition: background-color .2s var(--ease), padding-left .2s var(--ease); }
.doclist__row:hover { background: var(--surface); padding-left: var(--space-3); color: var(--ink); }
.doclist__row:focus-visible { outline: none; box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm); }
.doclist__ic { width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: rgba(58,42,114,.14); color: var(--brass-deep);
  display: grid; place-items: center; }
.doclist__ic svg { width: 22px; height: 22px; }
.doclist__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doclist__label { font-weight: 700; font-size: var(--fs-sm); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink); }
.doclist__sub { font-size: var(--fs-caption); color: var(--ink-muted); }
.doclist__arr { font-family: var(--font-serif); color: var(--brass);
  transition: transform .2s var(--ease); }
.doclist__row:hover .doclist__arr { transform: translateX(4px); }

/* ---------- card_grid ---------- */
.cgrid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .cgrid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
@media (min-width: 1024px) { .cgrid--3 { grid-template-columns: repeat(3, 1fr); } }
.cgrid__card { display: flex; flex-direction: column; background: var(--surface);
  border-radius: var(--radius-md); box-shadow: var(--shadow-1);
  padding: var(--space-8) var(--space-6);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.cgrid__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.cgrid__title { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 500;
  letter-spacing: -.01em; margin-bottom: var(--space-3); }
.cgrid__body { font-size: var(--fs-sm); color: var(--ink-soft); flex: 1;
  margin-bottom: var(--space-6); }
.cgrid__cta { align-self: flex-start; margin-top: auto; }

/* ---------- promo_card ---------- */
.promo { background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2); overflow: hidden; display: grid; }
@media (min-width: 900px) {
  .promo--has-img { grid-template-columns: 1.05fr .95fr; align-items: stretch; }
}
.promo__body { padding: clamp(var(--space-8), 5vw, var(--space-16)); }
.promo__body .eyebrow { margin-bottom: var(--space-4); }
.promo__title { font-size: var(--fs-h2); margin-bottom: var(--space-4); }
.promo__copy { color: var(--ink-soft); max-width: 58ch; }
.promo__copy :last-child { margin-bottom: 0; }
.promo__bullets { list-style: none; margin: var(--space-6) 0 0; padding: 0;
  display: grid; gap: var(--space-3); }
.promo__bullets li { display: flex; gap: var(--space-3); align-items: flex-start;
  font-size: var(--fs-sm); color: var(--ink-soft); }
.promo__tick { width: 22px; height: 22px; flex: none; margin-top: 1px;
  border-radius: 50%; border: 1px solid var(--brass); color: var(--brass-deep);
  display: grid; place-items: center; }
.promo__tick svg { width: 12px; height: 12px; }
.promo__actions { margin-top: var(--space-8); }
.promo__media { min-height: 260px; background: var(--sand); }
.promo__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 899px) {
  .promo--has-img .promo__media { order: -1; aspect-ratio: 16/9; min-height: 0; }
}

/* ---------- form ---------- */
.formblk__heading { margin-bottom: var(--space-6); }
.formblk__ok { margin-bottom: var(--space-6); }
.formblk__err { background: var(--danger-bg); color: var(--danger);
  font-size: var(--fs-sm); font-weight: 500; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); margin-bottom: var(--space-6); }
.hp-field { position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.formblk__inline { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.formblk__inline input[type=email] { flex: 1 1 240px; font: inherit;
  font-size: var(--fs-body); color: var(--ink); background: var(--surface);
  border: var(--border-soft); border-radius: var(--radius-pill);
  padding: 13px var(--space-6);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.formblk__inline input[type=email]::placeholder { color: var(--ink-muted); }
.formblk__inline input[type=email]:hover { border-color: var(--ink-muted); }
.formblk__inline input[type=email]:focus { outline: none; border-color: var(--brass);
  box-shadow: var(--focus-ring); }
.formblk--contact .field textarea { min-height: 140px; }
.formblk__submit { margin-top: var(--space-2); }

/* ---------- hero (block-scoped heights on the .hero vocabulary) ---------- */
.blk--hero { background: var(--ground); }
.blk--hero.hero { min-height: 560px; min-height: max(72vh, 560px); min-height: max(72svh, 560px); }
.blk--hero.hero--blk-short { min-height: 380px; min-height: max(44vh, 380px); min-height: max(44svh, 380px); }
.blk--hero .hero__inner { padding-block: var(--space-24) var(--space-12); }
.hero--blk-short .hero__inner { padding-block: var(--space-16) var(--space-8); }
.hero--blk-short .hero__title { font-size: var(--fs-display); }

/* ---------- community_grid (portal launcher cards) ---------- */
.pcard { height: 100%; display: flex; flex-direction: column;
  background: var(--surface); border: var(--border-hair);
  border-radius: var(--radius-md); box-shadow: var(--shadow-1);
  padding: var(--space-6);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.pcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-2);
  border-color: var(--brass); }
.pcard__name { font-family: var(--font-serif); font-size: var(--fs-h3);
  font-weight: 500; letter-spacing: -.01em; margin-bottom: 2px; }
.pcard__loc { font-size: var(--fs-sm); color: var(--ink-muted);
  margin-bottom: var(--space-6); }
.pcard__act { margin-top: auto; display: grid; gap: var(--space-2); }
.pcard__note { font-size: var(--fs-caption); color: var(--ink-muted); margin: 0; }

/* ---------- map_embed ---------- */
.map-frame { background: var(--sand); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- html_embed ---------- */
.blk--html_embed { overflow-x: auto; }

/* tile monogram fallback (integration patch): brass initial when a tile has no logo image */
.tile__monogram {
  width: 52px; height: 52px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent-line, #5C4E96) 14%, transparent);
  color: var(--brass-deep, #12003A);
  display: grid; place-items: center;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.4rem; font-weight: 600;
}

/* ---------- Two-column rows ----------------------------------------------
   render_blocks() wraps a run of `col`-marked blocks in .blk-row. The blocks
   inside keep their own vertical rhythm, so the row only sets the tracks and
   pulls the section padding in — otherwise two stacked sections inside a
   column would double the gap against the one beside it. */
.blk-row { display: grid; gap: var(--space-8); align-items: start; }
.blk-row__col { min-width: 0; }                 /* let a wide table or image shrink */
.blk-row__col > .blk { padding-block: 0; }
.blk-row__col > .blk + .blk { margin-top: var(--space-6); }
/* Inside a column the container is already inset by the row — a second inset
   would leave the two columns oddly narrow. */
.blk-row__col .container { width: 100%; max-width: none; padding-inline: 0; }
.blk-row { padding-block: var(--space-16); }
.blk-row > .blk-row__col:first-child { }
@media (min-width: 860px) {
  .blk-row--50-50 { grid-template-columns: 1fr 1fr; }
  .blk-row--66-33 { grid-template-columns: 2fr 1fr; }
  .blk-row--33-66 { grid-template-columns: 1fr 2fr; }
  .blk-row { gap: var(--space-12); }
}
/* The row itself needs the page gutter, since its columns dropped theirs. */
.blk-row { padding-inline: var(--gutter); max-width: var(--container-xl); margin-inline: auto; }

/* ---------- Section jump bar ("ghosted") ---------------------------------
   Low contrast by intent: present for anyone looking for it, quiet for
   everyone else. Contrast climbs to full ink on hover/focus and for the
   section you are in, so it never fails the 4.5:1 floor at the moment it is
   actually being read. */
/* .blk gives every block generous section padding; a jump bar is chrome, not a
   section, so it opts out and sets its own tight rhythm. */
/* Minimal footprint: no rules above or below. The bottom border in particular was
   drawing a line between the bar and the first graphic, which made a piece of chrome
   look like a section divider. It keeps a translucent background only because it is
   sticky and content has to pass cleanly underneath it. */
.secnav { border: 0; background: color-mix(in srgb, var(--bg) 82%, transparent); }
/* !important because .blk's section padding and .container's own block padding both
   apply here at equal specificity, and a jump bar is chrome — it should be one tight
   strip regardless of what the generic block rhythm wants. */
/* The bar has no internal padding of its own — but it must NOT lose the clearance that
   `main > .blk:first-child` grants for the fixed header, or it renders behind it. Padding
   is zeroed on the inner container only; the outer keeps whatever top offset it is given. */
.secnav > .container { padding-block: 0; }
.secnav:not(:first-child) { padding-block: 0; }
/* Sticks BELOW the fixed header rather than at the very top, so the two never overlap. */
.secnav--sticky { position: sticky; top: var(--fpg-nav-h); z-index: 40; backdrop-filter: blur(10px) saturate(140%); }
/* As the page's first block it must clear the fixed header — but it takes that as MARGIN,
   so the bar itself stays a thin strip instead of a 128px padded band. The `:not()` matches
   the specificity of the generic first-block rule in blocks-a.css, which would otherwise
   win and put the padding straight back. */
main > .secnav:first-child:not(.blk--cta_band) {
  padding-block: 0;
  margin-top: calc(var(--fpg-nav-h) + 8px);
}
.secnav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--space-8); flex-wrap: nowrap;
  /* `safe center` centres the row but falls back to flex-start the moment it overflows,
     so a narrow screen never hides the first item off the left edge. Older engines that
     do not know `safe` fall through to the plain `center` above. */
  justify-content: center;
  justify-content: safe center;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;                         /* the row scrolls on small screens */
}
.secnav__list::-webkit-scrollbar { display: none; }
.secnav__link {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 0; font-size: var(--fs-caption);
  letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-muted); opacity: .62;
  border-bottom: 2px solid transparent;
  transition: opacity .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.secnav__link:hover,
.secnav__link:focus-visible { opacity: 1; color: var(--ink); border-bottom-color: var(--accent); }
@media (max-width: 640px) { .secnav__list { gap: var(--space-4); } }

/* A sticky bar must not park itself on top of the heading it just jumped to. */
.blk--heading[id] { scroll-margin-top: 84px; }

/* Icons are ghosted a step further than the label — they are a wayfinding cue, not the
   content, and at 15px a full-contrast glyph next to small caps reads as clutter. They
   come up to full strength with their link. */
.secnav__ic { display: inline-flex; flex: none; }
.secnav__ic svg { width: 15px; height: 15px; stroke-width: 1.6; opacity: .8; }
.secnav__link:hover .secnav__ic svg,
.secnav__link:focus-visible .secnav__ic svg { opacity: 1; }
@media (max-width: 640px) { .secnav__ic { display: none; } }   /* label alone at narrow widths */

/* With the bar's rules gone, the following block's usual section padding reads as a gap
   rather than as spacing. A small, deliberate one instead of the full block rhythm. */
.secnav + .blk { padding-top: var(--space-4); }

/* ---------- Per-page width -----------------------------------------------
   /resources is a working dashboard — 19 login tiles, document lists, two-column
   rows — and it earns more of the screen than an editorial page does. 28% wider
   than the standard 1280 container. Scoped to <main> so the nav and footer keep
   the same measure they have on every other page; widening those too would make
   the shell jump around as you moved between pages. */
[data-page="resources"] main .container,
[data-page="resources"] .blk-row { max-width: 1638px; }

/* ---------- "View full screen" + image lightbox --------------------------
   The affordance is deliberately the quietest thing on the page: same ghosted
   treatment as the jump bar, sitting tight under the figure with no padding of
   its own, so it reads as a footnote to the graphic rather than a control. */
.img-full {
  /* inline-block, not block: as a block the focus ring drew a box the full width of the
     figure. The wrapper below does the right-alignment instead. */
  display: inline-block; margin-top: 4px;
  font-size: var(--fs-caption); letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-muted); opacity: .55;
  transition: opacity .14s var(--ease), color .14s var(--ease);
}
.img-full:hover, .img-full:focus-visible { opacity: 1; color: var(--ink); }
.img-fig--full, .img-fig--wide { text-align: left; }
.img-fig--full .img-full, .img-fig--wide .img-full { float: right; }
.img-fig::after { content: ""; display: table; clear: both; }

/* The overlay itself. `width:100%` of the viewport with nothing around it — the
   graphic is the content, so the chrome gets out of the way entirely. */
dialog.imglb {
  padding: 0; border: 0; margin: 0;
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  background: var(--ground); color: #fff;
  overflow: auto; overscroll-behavior: contain;
}
dialog.imglb::backdrop { background: rgb(10 4 26 / .92); }
.imglb__img { display: block; width: 100%; height: auto; margin: 0; }
/* Close sits over the graphic rather than in a bar, so nothing steals height. */
.imglb__close {
  position: fixed; top: 12px; right: 12px; z-index: 2;
  appearance: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: rgb(10 4 26 / .72); color: #fff; font-size: 22px; line-height: 1;
  backdrop-filter: blur(6px);
  transition: background .14s var(--ease);
}
.imglb__close:hover, .imglb__close:focus-visible { background: rgb(10 4 26 / .95); }
.imglb__hint {
  position: fixed; left: 12px; bottom: 12px; z-index: 2;
  font-size: var(--fs-caption); color: rgb(255 255 255 / .55);
  background: rgb(10 4 26 / .6); padding: 4px 10px; border-radius: var(--radius-pill);
  backdrop-filter: blur(6px); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  dialog.imglb[open] { animation: imglb-in 160ms var(--ease); }
  @keyframes imglb-in { from { opacity: 0 } to { opacity: 1 } }
}

/* ============================================================
   Property contact sheet — community_grid mode="contact"
   Staff reference behind /property-contact, not marketing.

   The three figures somebody opens this page for are unit count,
   mailing address and phone, so those are the only things set
   large; the property name is a headline but a quiet one, and the
   manager sits last because you read it after you have found the
   property. No photography, no accent colour per community: this
   is a page you scan under time pressure, and twelve competing
   hues would slow that down. Ink on white with one indigo rule.
   ============================================================ */
.pcontact{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--space-4);
}
.pc-card{
  display:flex; flex-direction:column;
  background:var(--surface);
  border:var(--border-hair);
  border-top:3px solid var(--indigo);
  border-radius:var(--radius-md);
  padding:var(--space-6);
}
.pc-card__head{ margin-bottom:var(--space-4) }
.pc-card__name{
  font-family:var(--font-serif);
  font-size:1.35rem; line-height:1.15; margin:0; color:var(--ink);
}
.pc-card__place{
  margin:2px 0 0; font-size:var(--fs-caption);
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted);
}

/* The two figures that carry the page. Tabular numerals so the unit
   counts line up down the column and can be compared at a glance. */
.pc-figs{
  display:flex; gap:var(--space-6); flex-wrap:wrap;
  padding:var(--space-4) 0; border-top:var(--border-hair); border-bottom:var(--border-hair);
}
.pc-fig{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.pc-fig--tel{ margin-left:auto; text-align:right }
.pc-fig__n{
  font-family:var(--font-serif);
  font-size:clamp(1.9rem,3.4vw,2.5rem); line-height:1;
  color:var(--indigo); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.pc-fig__n--tel{
  font-size:clamp(1.15rem,2vw,1.4rem);
  text-decoration:none; border-bottom:1px solid var(--indigo-line);
}
.pc-fig__n--tel:hover{ color:var(--accent-deep); border-bottom-color:currentColor }
.pc-fig__l{
  font-size:var(--fs-overline); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-muted);
}

/* Mailing address: the thing most often copied off this page, so it is
   set as a block of readable lines rather than one run-on string. */
.pc-mail{ padding:var(--space-4) 0 0 }
.pc-mail__l{
  display:block; font-size:var(--fs-overline); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-muted); margin-bottom:var(--space-2);
}
.pc-mail__a{ font-style:normal; display:grid; gap:1px }
.pc-mail__a span{
  font-size:1.0625rem; line-height:1.45; color:var(--ink); font-weight:500;
}
.pc-mail__warn{
  margin:var(--space-3) 0 0; padding:var(--space-2) var(--space-3);
  background:var(--warning-bg); color:var(--warning);
  border-radius:var(--radius-sm);
  font-size:var(--fs-caption); line-height:1.4; font-weight:600;
}

.pc-card__mgr{
  margin-top:auto; padding-top:var(--space-4);
  display:flex; align-items:baseline; gap:var(--space-2); flex-wrap:wrap;
}
.pc-card__mgrl{
  font-size:var(--fs-overline); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-muted);
}
.pc-card__mgrn{ font-size:var(--fs-body); font-weight:600; color:var(--ink) }
.pc-card__mgrt{ font-size:var(--fs-caption); color:var(--ink-muted) }

@media print{
  .pcontact{ grid-template-columns:repeat(2,1fr); gap:10px }
  .pc-card{ break-inside:avoid; border:1px solid #999; border-top-width:2px; padding:10px }
  .pc-fig__n{ font-size:1.6rem }
  .pc-fig__n--tel{ border-bottom:0 }
}