/* ==========================================================================
   The five suburb pages, and House prices' masthead and section layout
   (shepparton-house-prices.html loads this file too, until it gets its own
   rules). Extends the shared layer in styles.css (pinned header, footer,
   type scale, tiles, appraisal band). Loaded after styles.css. Suburbs
   compared has its own css/compare.css, which copies the masthead, section
   grid and table rules shared with these pages.
   ========================================================================== */

/* Clearance under the pinned header (styles.css "Header"). */
.area-page { padding-top: var(--header-h); }

/* ---- Masthead ---------------------------------------------------------- */

.area-head { padding: var(--masthead-pad) 0 0; }

/* A suburb name is the one title set larger than --text-display. */
.area-head h1 {
  font-size: clamp(56px, 9vw, 140px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
}

.area-statement {
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--text-lede);
  line-height: 1.3;
  max-width: 26ch;
  color: var(--grey);
}

/* The second stat row (rent + yield) continues the first one's rule grid. */

/* ---- For sale: a count-aware grid ---------------------------------------
   Six tracks; a card takes two, so three sit across. A count that leaves
   one over leads with a wide feature card (photo left, details right); one
   that leaves two over opens on a row of two. No row ends on an empty gap.
   Counted with :nth-last-child on the first card, so it needs no :has() and
   still holds when js/listings.js swaps the cards. Tablets pair the cards
   (an odd count leads with the feature); phones stack them. -------------- */

.card-grid-area { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.card-grid-area > .prop-card { grid-column: span 2; min-width: 0; }

@media (min-width: 1081px) {
  .card-grid-area > .prop-card:first-child:nth-last-child(3n + 2),
  .card-grid-area > .prop-card:first-child:nth-last-child(3n + 2) + .prop-card { grid-column: span 3; }
  .card-grid-area > .prop-card:first-child:nth-last-child(3n + 1) { grid-column: 1 / -1; }
  .card-grid-area > .prop-card:first-child:nth-last-child(3n + 1) .prop-link {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
  }
  .card-grid-area > .prop-card:first-child:nth-last-child(3n + 1) .prop-media { grid-column: 1 / span 7; aspect-ratio: 3 / 2; }
  .card-grid-area > .prop-card:first-child:nth-last-child(3n + 1) .prop-meta { grid-column: 9 / -1; padding: 0 0 6px; }
  .card-grid-area > .prop-card:first-child:nth-last-child(3n + 1) .prop-meta h3 {
    font-size: clamp(28px, 2.6vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
  }
  .card-grid-area > .prop-card:first-child:nth-last-child(3n + 1) .prop-price { font-size: 22px; }
  .card-grid-area > .prop-card:first-child:nth-last-child(3n + 1) .prop-facts {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--hairline);
  }
}

@media (min-width: 821px) and (max-width: 1080px) {
  .card-grid-area > .prop-card { grid-column: span 3; }
  .card-grid-area > .prop-card:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .card-grid-area > .prop-card:first-child:nth-last-child(odd) .prop-link {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
  }
  .card-grid-area > .prop-card:first-child:nth-last-child(odd) .prop-media { grid-column: 1 / span 7; aspect-ratio: 3 / 2; }
  .card-grid-area > .prop-card:first-child:nth-last-child(odd) .prop-meta { grid-column: 8 / -1; padding: 0 0 6px; }
  .card-grid-area > .prop-card:first-child:nth-last-child(odd) .prop-meta h3 { font-size: 26px; line-height: 1.15; }
}

@media (max-width: 820px) {
  .card-grid-area { grid-template-columns: minmax(0, 1fr); }
  .card-grid-area > .prop-card { grid-column: auto; }
}

/* ---- Living in {suburb} ------------------------------------------------ */

.area-living {
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.7;
}
.area-living p + p { margin-top: 24px; }

/* ---- Empty state (no current listings) --------------------------------- */

.area-empty {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 24px;
  max-width: 30ch;
  margin-bottom: 28px;
}

/* ---- Guide band -------------------------------------------------------- */

.area-guide-lede {
  max-width: 54ch;
  color: var(--grey);
  margin-bottom: 36px;
}

/* ---- Other suburbs ----------------------------------------------------- */

.area-others {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 72px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
}

@media (max-width: 820px) {
  .area-statement { max-width: none; }
  .area-others { margin-top: 56px; }
}

/* Six suburb figures sit as an even 3 x 2 grid of tiles (4 + 2 left an
   orphan row); two across on phones (styles.css "Stats"). */
.area-head .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .area-head .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Flagship layout (Sep 2026): the same 12-column rhythm as the homepage.
   Title on the left, supporting copy on the right, content full width. ---- */

.area-head .container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: end;
}
.area-head .container > * { grid-column: 1 / -1; }
.area-head .container > h1 { grid-column: 1 / span 7; margin-bottom: 0; }
.area-head .container > .area-statement {
  grid-column: 8 / -1;
  max-width: 30ch;
  padding-bottom: 0.4em;
}

/* The appraisal band is left out: it carries its own split grid. :where()
   keeps the exclusion from adding an id's weight, so the #living and #guide
   placements below still win. */
.area-page .section:where(:not(#appraisal)) > .container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.area-page .section:where(:not(#appraisal)) > .container > * { grid-column: 1 / -1; }

/* Local knowledge: the heading holds the left, the copy reads on the right. */
#living .container { grid-template-rows: auto 1fr auto; }
#living .container > .eyebrow { grid-column: 1 / span 5; grid-row: 1; }
#living .container > .section-title { grid-column: 1 / span 5; grid-row: 2; align-self: start; }
#living .container > .area-living { grid-column: 7 / -1; grid-row: 1 / span 2; }
#living .container > .area-others { grid-row: 3; }

/* Quick answers: the same split, questions and answers on the right. */
#answers .container { grid-template-rows: auto 1fr auto; }
#answers .container > .eyebrow { grid-column: 1 / span 5; grid-row: 1; }
#answers .container > .section-title { grid-column: 1 / span 5; grid-row: 2; align-self: start; }
#answers .container > .area-answers { grid-column: 7 / -1; grid-row: 1 / span 2; }
#answers .container > .area-others { grid-row: 3; }
.area-answers h3 {
  font-weight: 400;
  font-size: clamp(21px, 1.8vw, 24px);
  line-height: 1.3;
  margin: 0 0 8px;
}
.area-answers p + h3 { margin-top: 32px; }

/* Guide download: heading left, the pitch and the button right. */
#guide .container > .eyebrow { grid-row: 1; }
#guide .container > .section-title { grid-column: 1 / span 7; grid-row: 2; margin-bottom: 0; }
#guide .container > .area-guide-lede { grid-column: 9 / -1; grid-row: 2; align-self: end; margin-bottom: 28px; }
#guide .container > .area-guide-cta { grid-column: 9 / -1; grid-row: 3; }
#guide .container > .area-others { grid-row: 4; }

@media (max-width: 900px) {
  .area-head .container > h1,
  .area-head .container > .area-statement,
  #living .container > *,
  #living .container > .eyebrow,
  #living .container > .section-title,
  #living .container > .area-living,
  #living .container > .area-others,
  #answers .container > *,
  #answers .container > .eyebrow,
  #answers .container > .section-title,
  #answers .container > .area-answers,
  #answers .container > .area-others,
  #guide .container > *,
  #guide .container > .eyebrow,
  #guide .container > .section-title,
  #guide .container > .area-guide-lede,
  #guide .container > .area-guide-cta,
  #guide .container > .area-others { grid-column: 1 / -1; grid-row: auto; }
  #living .container,
  #answers .container { grid-template-rows: none; }
  .area-head .container > .area-statement { margin-top: 20px; padding-bottom: 0; }
  #living .container > .section-title,
  #answers .container > .section-title { margin-bottom: 32px; }
  #guide .container > .section-title { margin-bottom: 24px; }
}

/* Phones: the suburb sold list shows the newest 12; "See all recent sales"
   links to the full list. Desktop shows every sale. */
@media (max-width: 820px) {
  .area-page #sold .ledger-list li:nth-child(n + 13) { display: none; }
}

.compare-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-top: 1px solid var(--ink);
}
.compare-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.compare-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-feature-settings: "lnum" 1, "pnum" 1;
}
/* The caption names the table for screen readers; the lede above says the
   same thing visibly, and a visible caption would scroll with the table. */
.compare-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.compare-table th,
.compare-table td {
  padding: 22px 18px;
  border-bottom: 1px solid var(--hairline);
  text-align: right;
  vertical-align: baseline;
  white-space: nowrap;
}
.compare-table thead th {
  padding-top: 18px;
  padding-bottom: 18px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.6px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--grey);
  white-space: normal;
  vertical-align: bottom;
}
.compare-table th:first-child { text-align: left; padding-left: 0; }
.compare-table td {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 1.7vw, 24px);
}
.compare-table td.compare-missing { font-family: var(--sans); font-size: 13px; color: var(--grey); }
.compare-table tbody th {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 1.8vw, 26px);
  background: var(--paper);
}
.compare-table tbody th a { color: inherit; text-decoration: none; }
/* Touch: 44px to tap each suburb name, with nothing moving. */
@media (pointer: coarse) {
  .compare-table tbody th a,
  .compare-suburb h3 a { display: inline-block; padding: 10px 0; margin: -10px 0; }
}
.compare-table tbody th a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.compare-period {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--grey);
}

.compare-hint { display: none; }

@media (max-width: 900px) {
  .compare-hint {
    display: block;
    margin-top: 12px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--grey);
  }
  /* The suburb column stays put while the figures scroll. */
  .compare-table tbody th,
  .compare-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--paper);
    box-shadow: 1px 0 0 var(--hairline);
    padding-right: 16px;
    white-space: normal;
    width: 132px;
    min-width: 132px;
  }
  .compare-table tbody th { font-size: 20px; line-height: 1.2; }
  .compare-period { font-size: 11px; line-height: 1.35; }
  .compare-table th, .compare-table td { padding: 18px 14px; }
  .compare-table { min-width: 700px; }
}

/* ---- Market this month (suburb pages) ----------------------------------
   The read sits on the right like Local knowledge; the history table uses
   the comparison table's type and its own scroll frame on phones. ---------- */

#market .container { grid-template-rows: auto 1fr; }
#market .container > .eyebrow { grid-column: 1 / span 5; grid-row: 1; }
#market .container > .section-title { grid-column: 1 / span 5; grid-row: 2; align-self: start; }
#market .container > .market-read { grid-column: 7 / -1; grid-row: 1 / span 2; }
#market .container > .market-spark,
#market .container > .market-scroll { margin-top: clamp(40px, 4vw, 64px); min-width: 0; }

.market-read { max-width: 62ch; font-size: 18px; line-height: 1.7; }
.market-read p + p { margin-top: 16px; }
.market-read .market-note { font-size: 16px; color: var(--grey); }

.market-table { min-width: 1120px; }
.market-table td.market-source {
  min-width: 300px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  color: var(--grey);
}
.market-table thead th:last-child { text-align: left; }
.market-table td.market-source a { color: inherit; text-underline-offset: 3px; }
/* A tap target of at least 44px around the source link on touch screens. */
.market-table td.market-source a { display: inline-block; padding: 12px 0; margin: -12px 0; }

.market-spark { margin: 0; color: var(--ink); }
.market-spark svg { display: block; width: 100%; max-width: 320px; height: auto; }
.market-spark figcaption { margin-top: 10px; font-size: 13px; color: var(--grey); }

@media (max-width: 900px) {
  #market .container { grid-template-rows: none; }
  #market .container > *,
  #market .container > .eyebrow,
  #market .container > .section-title,
  #market .container > .market-read { grid-column: 1 / -1; grid-row: auto; }
  #market .container > .section-title { margin-bottom: 32px; }
  /* Phones and tablets: each reading stacks as a ruled block of label and
     value lines (the labels come from each cell's data-label), so nothing
     scrolls sideways. */
  .market-scroll { overflow-x: visible; }
  .market-scroll + .compare-hint { display: none; }
  .market-table { min-width: 0; }
  .market-table thead { display: none; }
  .market-table,
  .market-table tbody,
  .market-table tr,
  .market-table tbody th,
  .market-table td { display: block; width: auto; }
  .market-table tr { padding: 24px 0; border-bottom: 1px solid var(--hairline); }
  .market-table tbody th,
  .market-table td {
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    text-align: left;
    white-space: normal;
  }
  .market-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-top: 10px;
  }
  .market-table td::before {
    content: attr(data-label);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--grey);
  }
  /* min-width 0: the desktop 300px would push a 320px phone sideways. */
  .market-table td.market-source { display: block; margin-top: 16px; min-width: 0; }
  .market-table td.market-source::before { display: block; margin-bottom: 4px; }
}

/* ---- Inner pages wave 3 (October 2026) ----------------------------------
   The aerial head (Shepparton and Kialla) and "since last reading" on every
   suburb page. Suburbs compared's bars live in css/compare.css. ---------- */

/* The aerial head: title, statement and contents list on the left, the
   suburb from the air on the right, the six figures full width below.
   Phones and tablets stack them, the picture under the statement. */
.area-aerial { margin: clamp(28px, 4vw, 40px) 0 0; min-width: 0; }
.area-aerial picture,
.area-aerial img {
  display: block;
  width: 100%;
}
.area-aerial img {
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--sand);
}
.area-aerial-credit {
  margin-top: 10px;
  font-size: 13px;
  color: var(--grey);
}
/* Phones and tablets: the same title and statement spacing as the
   text-only heads (their direct-child rules don't reach inside the copy). */
@media (max-width: 1080px) {
  .area-head-copy h1 { margin-bottom: 0; }
  .area-head-copy .area-statement { margin-top: 20px; max-width: 30ch; }
}
@media (min-width: 1081px) {
  .area-head-aerial .container { align-items: start; }
  .area-head-aerial .container > .area-head-copy { grid-column: 1 / span 6; grid-row: 2; }
  .area-head-aerial .container > .area-aerial { grid-column: 7 / -1; grid-row: 2 / span 2; margin-top: 0; }
  .area-head-aerial .container > .page-toc { grid-column: 1 / span 6; grid-row: 3; align-self: end; }
  /* Half the width for the title: the suburb name still fits on one line. */
  .area-head-aerial h1 { font-size: clamp(56px, 6.6vw, 104px); }
  .area-head-aerial .area-statement { max-width: 30ch; }
}
/* A short arrival: the picture settles as the page opens. Pure CSS, no
   JavaScript, never for reduced motion or the ?noanim capture mode. */
@media (prefers-reduced-motion: no-preference) {
  :root:not(.noanim) .area-aerial img { animation: area-aerial-settle 1.6s var(--ease) both; }
}
@keyframes area-aerial-settle {
  from { transform: scale(1.035); }
  to { transform: none; }
}
.area-aerial picture { overflow: hidden; border-radius: var(--radius-lg); }

/* "Also selling in": the label sits on the links' line. */
.area-others-label { margin: 0; }
/* The suburb's recent sales sit right under their title. */
.area-ledger { margin-top: 0; }

/* Since last reading: the figures the sentence above compares, new value
   large, the earlier one under it. js/motion-lite.js counts each from the
   earlier figure to the new one when it comes on screen. */
#market .container > .market-since { margin-top: clamp(40px, 4vw, 64px); }
.market-since {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--col-gap);
}
.since-item {
  padding: 26px 28px 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: #fff;
}
.since-label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--grey);
}
.since-value {
  margin-top: 14px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.since-was {
  margin-top: 12px;
  font-size: 14px;
  color: var(--grey);
}

/* ---- Printing and high contrast ------------------------------------------ */

/* The house prices page also loads this file, so the print rule names the
   suburb pages only and leaves that page's printing exactly as it was. */
@media print {
  .js body.area-page:not(.prices-page) .reveal { opacity: 1; transform: none; transition: none; }
  .area-aerial img { animation: none; }
}
@media (forced-colors: active) {
  .since-item { border-color: CanvasText; }
}