/* ============================================================
   LEASING COMMUNITY PAGES: media from the community's own website
   (floor plans, site plan, amenity lists, the source credit line).
   Markup: assets/leasing-page.js R.plans / R.amenities / R.credit,
   written into /leasing/<slug>/ by scripts/build-leasing-pages.mjs.
   Kit tokens only (--k-*, site.css): no raw colours. Every image has
   width/height attributes and sits in a fixed-ratio box: no layout shift.
   ============================================================ */

/* the credit line under each block */
.lm-credit { margin-top: 16px; font-size: 12px; line-height: 1.6; color: var(--k-dim); }
.lm-credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: 4px; margin-block: -4px; }   /* 24px target */
.lm-credit a:hover { color: var(--k-text); }

/* floor plan cards: the drawing on white, then name / beds / baths / sf */
.lm-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.lm-plan { margin: 0; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--k-line); border-radius: var(--radius); background: var(--k-surface-2); overflow: hidden; }
.lm-plan-img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: var(--k-surface-2); cursor: zoom-in; }
.lm-plan-img img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; }
.lm-plan-img:focus-visible { outline-offset: -3px; }
.lm-plan figcaption { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px 14px; border-top: 1px solid var(--k-line); font-size: 13px; line-height: 1.45; color: var(--k-dim); font-variant-numeric: tabular-nums; }
.lm-plan figcaption b { font: 700 var(--fs-title-s) / 1.3 'Sora', 'Sora Fallback', sans-serif; letter-spacing: -.01em; color: var(--k-text); overflow-wrap: anywhere; }
.lm-price { margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--k-text); }
.lm-pricenote { margin-top: 14px; font-size: 12px; line-height: 1.6; color: var(--k-dim); max-width: 46em; }

/* "Show all N floor plans" */
.lm-more { margin-top: 14px; }
.lm-more > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--k-line-2); border-radius: 999px; font: 700 13.5px 'Sora', 'Sora Fallback', sans-serif; color: var(--k-text); cursor: pointer; list-style: none; }
.lm-more > summary::-webkit-details-marker { display: none; }
.lm-more > summary::after { content: '+'; margin-left: 10px; font-weight: 800; }
.lm-more[open] > summary::after { content: '−'; }
.lm-more > summary:hover { border-color: var(--k-text); }
.lm-more > .lm-plans { margin-top: 14px; }

/* layouts the website lists without a drawing */
.lm-bare { margin-top: 18px; font-size: 13.5px; line-height: 1.55; color: var(--k-dim); }
.lm-bare ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 24px; }
.lm-bare b { color: var(--k-text); }

/* the site plan, full width, opens in the lightbox */
.lm-site { margin-top: var(--sec-head); }
.lm-site h3 { margin-bottom: 12px; }
.lm-site-img { display: block; width: 100%; padding: 12px; border: 1px solid var(--k-line); border-radius: var(--radius); background: var(--k-surface-2); cursor: zoom-in; }
.lm-site-img img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; }

/* amenities: one or two lists, each in balanced columns */
.lm-amen { display: grid; gap: 28px 48px; }
.lm-amen h3 { margin-bottom: 12px; }
.lm-amen ul { margin: 0; padding: 0; list-style: none; columns: 2 220px; column-gap: 32px; }
.lm-amen li { position: relative; break-inside: avoid; padding: 5px 0 5px 18px; font-size: 14.5px; line-height: 1.5; color: var(--k-text); }
.lm-amen li::before { content: ''; position: absolute; left: 2px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--k-mark); }
@media (min-width: 900px) {
  .lm-amen.is-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lm-amen.is-2 ul { columns: 1; }
}
@media (max-width: 760px) {
  .lm-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lm-plan-img img { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
  .lm-plan figcaption { padding: 8px 10px 10px; font-size: 12px; }
  .lm-plan figcaption b { font-size: 14.5px; }
  .lm-amen ul { columns: 1; }
  .lm-site-img { padding: 6px; }
}