/* Inner pages (results, a home, about): the kit's system and tokens, with the few layouts it has no
   recipe for. Spacing from the --s-* scale, sizes from the --t-* tokens. */

.results__title, .home__title { font-size: var(--t-h2); }
.results__form { max-width: 760px; }
.results__read { display: grid; gap: var(--s-2); max-width: 760px; }
.results__read:empty { display: none; }
.results__head { margin-bottom: var(--s-6); max-width: 760px; }
.results__count { font-size: var(--t-h3, 28px); }
.results__choices { max-width: 560px; }
.results__choices .rows__name { display: block; padding-block: 12px; margin-block: -12px; }
.results__grid { row-gap: var(--s-7); }
.tile__price-line { display: flex; gap: var(--s-2); align-items: baseline; font-weight: 500; }
.tile__note { font-size: var(--t-small); }

/* a home */
.gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--s-3); height: min(64svh, 600px); }
.gallery > :first-child { grid-row: 1 / 3; }
.gallery figure, .photos figure { margin: 0; overflow: clip; border-radius: var(--r-lg); background: var(--surface); }
.gallery img, .photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4) var(--s-6); align-items: end; }
.home__price { font: var(--display-weight) var(--t-h3, 28px)/1.2 var(--font-display); white-space: nowrap; text-align: right; }
.home__price small { display: block; font: 400 var(--t-small)/1.4 var(--font-text); color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-4) var(--s-5); margin: 0; padding: var(--s-5) 0; border-block: 1px solid var(--line); }
.facts dt { font-size: var(--t-label); color: var(--muted); font-weight: 500; }
.facts dd { margin: 0; font-weight: 500; }
.home__body > * + * { margin-top: var(--s-8); }
.home__body h2 { font-size: var(--t-h3, 28px); margin-bottom: var(--s-5); }
.home__body p + p { margin-top: var(--s-4); }
.notes { display: grid; gap: var(--s-3); padding-left: 1.2em; }
.photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.photos figure { aspect-ratio: 3 / 2; }
.viewing[open] > p { margin-top: var(--s-4); max-width: 46ch; }
.viewing > summary { list-style: none; cursor: pointer; }
.viewing > summary::-webkit-details-marker { display: none; }
.aside { position: sticky; top: calc(var(--nav) + var(--s-5)); display: grid; gap: var(--s-4); align-content: start; }

@media (max-width: 1023px) {
  .gallery { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
  .gallery > :first-child { grid-row: auto; aspect-ratio: 3 / 2; }
  .gallery > :not(:first-child) { display: none; }
  .aside { position: static; }
}
@media (max-width: 639px) {
  .home__head { grid-template-columns: 1fr; }
  .home__price { text-align: left; }
  .photos { grid-template-columns: 1fr; }
}

/* inner pages: sections run as long as what they hold (a list of homes, one home's details); the
   one-section-per-screen rhythm is the home page's. Specific enough to beat system.css's section box. */
main.flow > section.section:not(.hero), body:has(main.flow) > footer.closing:not(.hero) { height: auto; min-height: 0; }
main.flow > section.section:not(.hero) > .wrap, body:has(main.flow) > footer.closing > .wrap { height: auto; }
main.flow > section.section + section.section { padding-top: 0; }