/* The front door. Same palette as everything else. The hero shows one
   featured parcel as one object (combination plan R26): one picture per
   half, side by side on a wide screen and land-first on a narrow one, with
   the parcel's button above them both. */

/* The hero fits a 1280x720 screen down to the bottom of both pictures,
   "Walk this parcel" included, as production shows it: with no instance
   banner (Lisa, 2026-10-18: "let's optimize for prod"; plan U5's check). A
   development or qualification copy's banner adds 46px above it. The
   spacing runs tighter than the other pages'. */
.home.page {
  padding-top: 1.5rem;
}

.home__hero {
  padding: 0 0 2rem;
}

.home__eyebrow {
  color: var(--sand);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  margin: 0 0 0.5rem;
}

.home__title {
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  margin-bottom: 0.2em;
}

/* Wide enough for the lede to take two lines on a computer screen, and the
   qualifier under it one, at the same measure (Lisa, 2026-10-18). At the
   deed picture's right edge (about 54rem) the lede still ran to a third
   line, holding only "planning.". */
.home__hero .lede {
  max-width: 60rem;
  margin: 0 0 0.75rem;
}

.home__qualifier {
  border-left: 2px solid var(--sand);
  color: var(--ink);
  margin: 0;
  max-width: 60rem;
  padding-left: 0.9rem;
}

/* The featured parcel by name and price, and the way to it. */
.home__featured {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.75rem;
  margin-top: 1rem;
}

/* On a computer screen the button sits at the right end of the name's line,
   on the lede's and the qualifier's right edge (Lisa, 2026-10-18). On a
   phone it stays under the name and price (R26). */
@media (min-width: 48rem) {
  .home__featured {
    max-width: 60rem;
  }

  .home__featured .home__cta {
    margin-left: auto;
  }
}

/* Headed like the halves (Lisa, 2026-10-18), on a line of its own above the
   name, price and button. */
.home__featured-heading {
  flex-basis: 100%;
  color: var(--sand);
  font-size: 1.05rem;
  margin: 0;
}

.home__featured-name {
  margin: 0;
  font-size: 1.15rem;
}

.home__featured-price {
  color: var(--sand);
  margin-left: 0.4rem;
}

.home__cta {
  display: inline-block;
  background: var(--rust);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.6rem 1.3rem;
  border-radius: 0.375rem;
}

/* What the two pictures are, said once over both. */
.home__halves-intro {
  margin: 0.75rem 0 0;
}

.home__halves-intro + .home__halves {
  margin-top: 0.5rem;
}

/* One picture per half, not at the same size (Lisa, 2026-10-18): the
   featured parcel's ground is as large as the hero's 1280x720 fit allows,
   and the deed stays small. Below 1280 the land column gives way first, so
   the deed half keeps room for its words. */
.home__halves {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.25rem;
}

/* The halves' two columns, shared with the pick below them so that "Browse"
   starts under the deed half. */
.home {
  --home-columns: minmax(0, 32rem) minmax(16rem, 1fr);
}

@media (min-width: 48rem) {
  .home__halves {
    grid-template-columns: var(--home-columns);
    gap: 2rem;
  }
}

.home__half-heading,
.home__pick-heading {
  color: var(--sand);
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

/* 32rem is the widest the still can be and still end above 720px: at
   1280x720 it starts 428px down, and 16:9 at 32rem is 288px tall with its
   border, so it ends at 717px. */
.home__half .tap-walk {
  margin-top: 0;
  max-width: 32rem;
}

.home__sample-deed {
  margin: 0;
  max-width: 20rem;
}

/* The sample is a tall document; at this size it shows its top: the SAMPLE
   stamp, the title and the opening of the grant. */
.home__sample-deed-image,
.home__half-image {
  display: block;
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.home__half p {
  max-width: 26rem;
}

.home__half .deed-limit {
  margin-top: 0;
}

.home__more {
  margin: 0.75rem 0 0;
}

.home__availability {
  color: var(--ink-muted);
  margin-top: 0.5rem;
  font-size: 0.95rem;
}

.home__availability [data-role="home-price"] {
  display: block;
}

/* The headed sections after the pick. */
.home__quit-claim,
.home__claims,
.home__trust,
.home__since {
  margin-top: 3rem;
}

/* Prose sections keep the hero's measure rather than running the full width. */
.home__quit-claim p,
.home__claims p,
.home__trust p,
.home__since p {
  max-width: 46rem;
}

/* The 10% and since 2007 side by side on a computer screen, in the halves'
   columns, so since 2007 starts under the deed half (Lisa, 2026-10-18). On a
   phone they stack. */
@media (min-width: 48rem) {
  .home__supporting {
    display: grid;
    grid-template-columns: var(--home-columns);
    column-gap: 2rem;
    align-items: start;
  }
}

/* The way to the available parcels again, after the supporting sections. */
.home__browse-available {
  margin: 2rem 0 0;
}

/* Picking another square starts from the block from orbit, right under the
   featured parcel and headed like the halves, so it reads as part of the
   hero. */
/* 3rem from the halves above, the headed sections' own spacing (Lisa,
   2026-10-18): the hero's 2rem bottom padding and 1rem of its own. */
.home__pick {
  margin-top: 1rem;
  padding-bottom: 0.5rem;
}

/* On a computer screen the pick takes the halves' two columns, and the way to
   the list sits in the right one, centered on the block's picture (Lisa,
   2026-10-18). The rows are the heading, the picture and its caption, and
   subgrids carry them down through the link and the figure, so the centering
   counts the picture alone, not its caption. On a phone it stays under the
   block. */
@media (min-width: 48rem) {
  .home__pick {
    display: grid;
    grid-template-columns: var(--home-columns);
    grid-template-rows: repeat(3, auto);
    column-gap: 2rem;
  }

  .home__pick-block,
  .home__pick-block .block-figure {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
  }

  .home__pick-block .home__block {
    grid-row: 2 / -1;
    display: grid;
    grid-template-rows: subgrid;
  }

  .home__pick-browse {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }

  /* The column's own margins would count toward its height and pull the text
     off center. */
  .home__pick .home__more {
    margin-top: 0;
  }

  .home__pick-browse > :last-child {
    margin-bottom: 0;
  }
}

/* The two locators side by side at one height, each over its own caption
   (Lisa, 2026-10-18): the columns are the images' aspect ratios (470x340 and
   406x720), so equal heights fall out of the widths. The borders throw that
   off by a pixel or two, which the stretch takes up. Subgrid rows keep the
   two images on one row and the two captions on the next. */
.home__locators {
  display: grid;
  grid-template-columns: 1.382fr 0.564fr;
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  margin: 1.25rem 0 0;
  max-width: 24rem;
}

.home__locator {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  margin: 0;
}

.home__locator-image {
  display: block;
  width: 100%;
  height: auto;
  align-self: stretch;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-raised);
}

.home__locators figcaption {
  color: var(--ink-muted);
  font-size: 0.85rem;
  margin-top: 0.4rem;
}

/* The block from orbit; each square is a link to its parcel, lit on hover by
   the catalog's own tile rules. */
.home__block {
  display: block;
  max-width: 32rem;
}