/* props.css — vendita / affitto plates, galleries, request form, contact. Owner piece: "vendita / affitto"

   A property is a plate in the same monograph as a project, with one difference:
   it carries facts a buyer has to find in a second. So the language is the one the
   lavori page won with — hairline rules carrying small tracked labels, photography
   with nothing laid over it, no boxes, no pills — but the facts are not whispered:
   the price is the largest thing after the name, and the ledger under it stands on
   its own rules so the numbers read as a set, not as prose.

   One object per spread: plate on the left seven columns, the dossier hung on the
   right five, the description under the plate, the unit table across the measure. */

/* ── The spread ───────────────────────────────────────────────────────────── */

.prop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(64px, 8vw, 136px);
  counter-reset: prop;
}

.prop-card {
  position: relative;
  counter-increment: prop;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule-strong);
  padding-top: 13px;
  transition: border-color .6s var(--ease);
}
/* The gallery is the only focusable thing in the card; the rule answers it. */
.prop-card:focus-within { border-top-color: var(--ink); }

/* Plate number, on the rule at the far right of the measure — the works stamp,
   kept for objects. Absolute, so it survives the grid switch below. */
.prop-card::after {
  content: counter(prop, decimal-leading-zero);
  position: absolute; right: 0; top: 13px;
  font-size: 10px; letter-spacing: .2em; line-height: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ── The plate ────────────────────────────────────────────────────────────── */

.prop-gallery { position: relative; background: var(--paper-2); aspect-ratio: 3 / 2; overflow: hidden; }
.prop-gallery img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Same grade as the lavori plates, so the two pages read as one commission. */
  filter: saturate(.93) contrast(1.03);
  opacity: 0; transition: opacity .55s var(--ease);
}
.prop-gallery img.on { opacity: 1; }

/* Under 901 the gallery keeps its on-image controls — that sizing is the mobile
   piece's, and it is built for thumbs, not cursors. Desktop moves them off the
   photograph entirely (see the min-width block). */
.prop-gallery .nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(20,20,15,.42); color: var(--paper);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.prop-gallery:hover .nav-btn, .prop-gallery .nav-btn:focus-visible { opacity: 1; }
.prop-gallery .nav-btn:hover { background: rgba(20,20,15,.72); }
.prop-gallery .nav-btn.prev { left: 12px; }
.prop-gallery .nav-btn.next { right: 12px; }
.prop-gallery .counter {
  position: absolute; right: 12px; bottom: 10px; z-index: 3;
  font-size: 11px; letter-spacing: .12em; color: var(--paper);
  background: rgba(20,20,15,.42); padding: 4px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* Thumb rail: small plates, not chips. The current one is marked by a rule
   beneath it as well as by contrast — one signal is never enough. */
.prop-thumbs { display: flex; gap: 7px; margin-top: 10px; overflow-x: auto; scrollbar-width: thin; }
.prop-thumbs button {
  flex: 0 0 auto; width: 62px;
  padding-bottom: 7px; border-bottom: 1px solid transparent;
  opacity: .4;
  transition: opacity .3s var(--ease), border-color .3s var(--ease);
}
.prop-thumbs button:hover { opacity: .75; }
.prop-thumbs button[aria-current="true"] { opacity: 1; border-bottom-color: var(--ink); }
.prop-thumbs img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  filter: saturate(.93) contrast(1.03);
}

/* ── Caption and standing ─────────────────────────────────────────────────── */

.prop-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 18px;
}
.prop-name { font-size: clamp(19px, 1.8vw, 27px); letter-spacing: -0.026em; line-height: 1.08; }

/* Not a pill. A tracked label with a mark in front of it: filled while the object
   is on the market, hollow once it is gone. */
.prop-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
  padding: 0; border-radius: 0; background: none;
  color: var(--muted);
}
.prop-badge::before {
  content: ""; flex: 0 0 auto;
  width: 5px; height: 5px; border-radius: 50%;
  border: 1px solid currentColor;
}
.prop-badge.new { color: var(--ink); }
.prop-badge.new::before { background: currentColor; }
.prop-badge.sold { color: var(--muted); }

/* The address as a dateline. */
.prop-loc {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-top: 8px;
}
.prop-desc { color: var(--ink-2); font-size: 14px; line-height: 1.65; margin-top: 13px; max-width: 56ch; }
.prop-cta { font-size: 14px; margin-top: clamp(18px, 1.8vw, 26px); }

/* ── The ledger ───────────────────────────────────────────────────────────── */
/* No table, no cells, no borders around anything: each fact stands on its own
   hairline, so four facts read as one broken rule with the numbers hung under it. */

.prop-details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  column-gap: var(--gutter, 22px); row-gap: clamp(16px, 2vw, 26px);
  background: none; border: 0;
  margin-top: 18px;
}
/* Two-class selector so the boxed padding the mobile piece wrote for the old
   table can't re-indent a cell that no longer has a box. */
.prop-details .prop-detail {
  background: none;
  padding: 11px 0 0;
  border-top: 1px solid var(--rule-strong);
}
.prop-detail .lbl {
  display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.prop-detail .val {
  display: block; margin-top: 7px;
  font-size: clamp(15px, 1.25vw, 18px); letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
}

/* ── The price ────────────────────────────────────────────────────────────── */
/* Elegance is not an excuse to hide the number. After the name it is the largest
   thing on the spread, and it is the only place tabular figures are set big. */

.prop-price {
  font-size: clamp(26px, 2.9vw, 44px); letter-spacing: -0.034em; line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: 18px;
}
.prop-price .cur {
  font-size: .34em; color: var(--muted); margin-right: 9px;
  letter-spacing: .18em; text-transform: uppercase; vertical-align: .28em;
}
.prop-price .suffix { font-size: 13px; color: var(--muted); margin-left: 7px; letter-spacing: .04em; }

/* ── Unit table ───────────────────────────────────────────────────────────── */

.prop-sub-head {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  margin: clamp(30px, 3.6vw, 56px) 0 13px; padding-top: 0; border-top: 0;
}
.prop-units { display: block; background: none; border: 0; border-top: 1px solid var(--rule-strong); }
.prop-unit {
  background: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 16px;
  border-bottom: 1px solid var(--rule);
  transition: none;
}
.prop-units .prop-unit { padding: 17px 0; }
.prop-unit .u-name { font-size: clamp(15px, 1.2vw, 18px); letter-spacing: -0.015em; }
.prop-unit .u-price {
  text-align: right; font-variant-numeric: tabular-nums;
  font-size: clamp(15px, 1.35vw, 20px); letter-spacing: -0.02em;
}
.prop-unit .u-detail { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* ─────────────────────────────────────────────────────────────────────────────
   THE SPREAD, 901 UP
   One object per row of the page. The plate takes the left seven columns, the
   dossier — name, address, price, ledger — is hung on the right five and shares
   the plate's top edge, so a buyer's eye lands on the number without leaving the
   photograph. Description under the plate, unit table across the full measure.
   ──────────────────────────────────────────────────────────────────────────── */

@media (min-width: 901px) {

  .prop-card {
    display: grid;
    grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr));
    /* Rows 1–5 (standing, name, address, price, ledger) take exactly their
       content. Row 6 is the flexible one and it is where the prose goes, so the
       plate's overhang lands UNDER the writing rather than above it: set the
       other way round, the floor-by-floor breakdown was pushed to the bottom of
       a 560px photograph and read as a stray paragraph that had come loose from
       the object. */
    grid-template-rows: auto auto auto auto auto 1fr;
    column-gap: var(--gutter, 22px);
    row-gap: 0;
    align-items: start;
  }
  /* The head is only a wrapper — its two children belong to the card's grid:
     the standing goes up onto the rule, the name to the top of the dossier. */
  .prop-head { display: contents; }

  .prop-badge { grid-row: 1; grid-column: 1 / 8; justify-self: start; align-self: start; }

  .prop-card > [data-gallery] { grid-row: 2 / span 5; grid-column: 1 / 8; margin-top: 20px; }

  .prop-name {
    grid-row: 2; grid-column: 8 / -1; margin-top: 20px;
    font-size: clamp(24px, 2.35vw, 38px); letter-spacing: -0.032em; line-height: 1.06;
  }
  .prop-loc   { grid-row: 3; grid-column: 8 / -1; margin-top: 11px; }
  .prop-price { grid-row: 4; grid-column: 8 / -1; margin-top: clamp(24px, 2.6vw, 40px); }
  .prop-details {
    grid-row: 5; grid-column: 8 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(26px, 2.8vw, 42px);
  }

  .prop-desc { font-size: clamp(14px, 1.05vw, 15.5px); max-width: 58ch; }
  /* The description is the plate's caption: it hangs off the bottom of the
     photograph, close enough to belong to it. */
  .prop-desc:nth-of-type(1) { grid-row: 7; grid-column: 1 / 8; margin-top: clamp(18px, 1.8vw, 26px); }
  /* The floor-by-floor breakdown, where an object has one, closes the dossier
     directly under the ledger instead of trailing off the foot of the plate. */
  .prop-desc:nth-of-type(2) { grid-row: 6; grid-column: 8 / -1; margin-top: clamp(22px, 2.4vw, 34px); }

  /* An object that carries only ONE paragraph has nothing to stand in the dossier
     under its ledger, and left there it was a third of a screen of blank paper
     beside a photograph. That paragraph moves over to close the column; the plate
     then stands on its own, which is what a plate wants anyway. Objects with two
     paragraphs keep the split above: description under the photograph, breakdown
     under the numbers. */
  .prop-card:not(:has(.prop-desc ~ .prop-desc)) .prop-desc {
    grid-row: 6; grid-column: 8 / -1; margin-top: clamp(22px, 2.4vw, 34px);
  }

  .prop-sub-head { grid-row: 8; grid-column: 1 / -1; }
  .prop-units    { grid-row: 9; grid-column: 1 / -1; }
  /* Request link closes the dossier column, after everything the object says. */
  .prop-cta      { grid-row: 10; grid-column: 8 / -1; }

  /* Unit rows get the full measure, so name / detail / price is one long line. */
  .prop-unit {
    grid-template-columns: minmax(0, 3fr) minmax(0, 6.5fr) minmax(0, 2.5fr);
    column-gap: var(--gutter, 22px); row-gap: 0;
    align-items: baseline;
  }
  .prop-unit .u-name   { grid-area: 1 / 1; }
  .prop-unit .u-detail { grid-area: 1 / 2; }
  .prop-unit .u-price  { grid-area: 1 / 3; }
  .prop-units .prop-unit { padding: clamp(17px, 1.7vw, 24px) 0; }

  /* Gallery controls come off the photograph and stand on the strip below it,
     next to the thumbs: arrows, then the count. Nothing is laid over a plate. */
  .prop-gallery { overflow: visible; }
  .prop-thumbs {
    margin-top: 14px;
    max-width: calc(100% - 148px);   /* the controls' lane, never overlapped */
  }
  .prop-thumbs button { width: clamp(52px, 4.4vw, 68px); }

  .prop-gallery .nav-btn {
    top: calc(100% + 14px); bottom: auto; transform: none; opacity: 1;
    width: 34px; height: 40px; border-radius: 0; background: none;
    color: var(--muted); font-size: 15px; line-height: 1;
  }
  .prop-gallery .nav-btn:hover { background: none; color: var(--ink); }
  .prop-gallery .nav-btn.prev { left: auto; right: 92px; }
  .prop-gallery .nav-btn.next { left: auto; right: 58px; }
  .prop-gallery .counter {
    top: calc(100% + 14px); bottom: auto; right: 0; left: auto;
    height: 40px; display: grid; place-items: center;
    background: none; border-radius: 0; padding: 0;
    color: var(--muted); font-size: 11px; letter-spacing: .14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prop-gallery img { transition: none; }
  .prop-card { transition: none; }
}

/* ── Form ────────────────────────────────────────────────────────────────── */

.form-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 88px); align-items: start; }
/* A field is a 10px tracked label over a rule with nothing around it, so the only
   thing separating one from the next is this gap. At 14–24px the eight of them
   read as one crowded block; the label needs to belong to the rule under it, not
   to the rule above it. */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 2.6vw, 34px); }
.form-group { display: flex; flex-direction: column; gap: 9px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.form-group input, .form-group textarea, .form-group select {
  font: inherit; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--rule-strong);
  padding: 10px 0; border-radius: 0;
  transition: border-color .3s var(--ease);
}
.form-group textarea { resize: vertical; min-height: 92px; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none; border-bottom-color: var(--ink);
}
.form-privacy { font-size: 12px; color: var(--muted); margin-top: 20px; max-width: 52ch; }
.form-submit { margin-top: 26px; }
.form-oggetto { font-size: 14px; color: var(--ink-2); margin-bottom: clamp(22px, 2.6vw, 34px); }
.form-error { font-size: 14px; color: #8a2a1c; margin-top: 20px; max-width: 52ch; }
.hp { display: none; }

/* The form is ~1300px tall and the note beside it is ~200px, so the right column
   used to end a quarter of the way down and leave the rest of the spread as blank
   paper. Sticky rather than padded out: the reason to fill the form travels with
   the fields instead of scrolling away at the first question. */
.form-intro {
  border-top: 1px solid var(--rule-strong); padding-top: clamp(18px, 2.4vw, 28px);
  position: sticky; top: calc(var(--nav-h) + clamp(18px, 2.4vw, 34px));
}
.form-intro h3 {
  font-size: clamp(19px, 1.9vw, 28px); letter-spacing: -0.026em; margin-bottom: 14px;
  line-height: 1.14; text-wrap: balance;      /* never a one-word last line */
}
.form-intro p { color: var(--ink-2); font-size: 14px; line-height: 1.7; }
.form-intro .promise {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--muted);
}

.form-sent { border-top: 1px solid var(--rule-strong); padding-top: clamp(20px, 3vw, 34px); }
.form-sent h2 { font-size: clamp(24px, 3.2vw, 46px); letter-spacing: -0.03em; max-width: 20ch; }
.form-sent p { color: var(--ink-2); margin-top: 16px; max-width: 52ch; }

/* ── Contact ─────────────────────────────────────────────────────────────── */

.contact-layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(28px, 4vw, 72px); align-items: start; }
.contact-blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.6vw, 34px); }
.contact-block { border-top: 1px solid var(--rule-strong); padding-top: 14px; }
.contact-block .lbl { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.contact-block .val { font-size: clamp(15px, 1.3vw, 19px); margin-top: 8px; letter-spacing: -0.015em; }
.contact-caps { list-style: none; display: grid; gap: 8px; margin-top: 10px; }
.contact-caps li { font-size: 14px; color: var(--ink-2); padding-left: 16px; position: relative; }
.contact-caps li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }
.map { aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(1.05); }

/* 2026-09-23: unit status next to the unit name. */
.u-status { margin-left: 12px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.u-status.venduto { color: var(--muted); }
.u-status.riservato { color: var(--ink-2); font-style: italic; }
.form-intro .promise:first-child { margin-top: 0; padding-top: 0; border-top: 0; font-size: 14px; }