/*
 * The public parcel page.
 *
 * Its own file because Propshaft's `stylesheet_link_tag :app` includes every
 * stylesheet in this directory; application.css holds what every page shares.
 *
 * The layout is one column until there is room for two. The disclosure sits
 * below both columns at full width on purpose: PRD R39 says neither half of it
 * is fine print, and a sidebar is where fine print goes.
 */

.parcel__header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
}

.parcel__eyebrow {
  color: var(--ink-muted);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}

.parcel__title {
  margin-bottom: 0.75rem;
}

.parcel__status {
  display: inline-block;
  margin: 0;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.parcel__status--available {
  border-color: #4c7f52;
  color: #9ed6a4;
}

.parcel__status--held,
.parcel__status--company-held {
  border-color: var(--rust);
  color: var(--sand);
}

/* The price and a jump to the buy section, beside the status pill. */
.parcel__price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  margin: 0.75rem 0 0;
}

.parcel__price-figure {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.parcel__buy-jump {
  font-weight: 600;
}

#buying {
  scroll-margin-top: 1rem;
}

/* Who holds this ground, when the parcel says so. Quieter than the status
   pill: the status is the fact a visitor came for, and this is a note beside
   it. */
.parcel__holder {
  margin: 0.75rem 0 0;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.parcel__layout {
  display: grid;
  gap: 2rem;
}

@media (min-width: 60rem) {
  .parcel__layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
  }
}

/* --- Imagery --------------------------------------------------------------- */

.parcel-figure {
  margin: 0 0 1.5rem;
}

.parcel-figure__image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-raised);
}

.parcel-figure__caption {
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin-top: 0.6rem;
}

/* The native crop is 254 px across and nothing exists behind it, so it is
   shown at its own size instead of being stretched to fill the column — the
   caption says nothing is upscaled, and the page keeps that true. `max-width`
   keeps a phone from scrolling sideways to see the right-hand edge. */
.parcel-figure--native .parcel-figure__image {
  width: 254px;
  max-width: 100%;
  image-rendering: pixelated;
}

.parcel-figure--native .parcel-figure__caption {
  max-width: 30rem;
}

.parcel__locators {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 34rem) {
  .parcel__locators {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.parcel-figure--locator .parcel-figure__image {
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

/* The marker is positioned in percentages of the block image, which is exactly
   how the controller computes it, so the two cannot disagree. */
.block-context {
  position: relative;
  line-height: 0;
}

.block-context__marker {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--sand);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 12px rgba(216, 161, 92, 0.55);
  border-radius: 1px;
}

/* --- Facts ----------------------------------------------------------------- */

.facts {
  margin: 0 0 2rem;
  border-top: 1px solid var(--border);
}

.facts__row {
  border-bottom: 1px solid var(--border);
  padding: 0.9rem 0;
}

.facts__term {
  color: var(--ink-muted);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.facts__value {
  margin: 0.3rem 0 0;
}

.facts__figure {
  display: block;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.facts__note {
  display: block;
  color: var(--ink-muted);
  font-size: 0.88rem;
  margin-top: 0.2rem;
}

/* --- Price, history, and the thing that is not a buy button ---------------- */

.offer {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.25rem;
}

.offer__label {
  color: var(--ink-muted);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

.offer__price {
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
  margin: 0.2rem 0 0;
}

.offer__history {
  font-size: 1.15rem;
  margin: 0.2rem 0 0;
}

.offer__note,
.offer__contact-note {
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.offer__contact {
  border-top: 1px solid var(--border);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.offer__contact:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.offer__contact-lead {
  margin-top: 0;
}

.button {
  display: inline-block;
  background: var(--rust);
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  padding: 0.7rem 1.2rem;
  text-decoration: none;
}

.button:hover,
.button:focus {
  background: #d3653a;
}

/* A button_to renders a form around a button; the button has to read as the
   same control as the link the invite variant renders. */
.offer__tester-form {
  margin: 0;
}

.offer__tester-form button.button,
.offer__buy button.button {
  appearance: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.offer__heading {
  font-size: 1.05rem;
  margin-bottom: 0.9rem;
}

.offer__buy {
  margin: 1.25rem 0 0;
}

/* The buy button where checkout will be, before checkout exists. Visibly a
   button, visibly not live: the note under it says why. */
.offer__buy button.button:disabled {
  background: transparent;
  border: 1px dashed var(--ink-muted);
  color: var(--ink-muted);
  cursor: not-allowed;
}

.offer__buy + .offer__note {
  margin-top: 0.5rem;
}

/* Qualification's own way in, set apart from the production section above it
   so a tester can tell which of the two is the test. Dashed, and labelled in
   the banner's rust. */
.offer__test {
  border: 1px dashed var(--rust);
  border-radius: 6px;
  margin-top: 1.25rem;
  padding: 1rem;
}

.offer__test-label {
  color: #e27a4c;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

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

/* What a tester's claim came to, reported on the page it started from. The
   same shape the holder page uses, so a reader learns one place to look. */
.parcel__alert,
.parcel__notice {
  margin: 1.25rem 0 0;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised);
  font-size: 0.95rem;
}

.parcel__alert {
  border-color: var(--rust);
}

.parcel__notice {
  border-color: var(--sand);
}

/* --- The holder tier (R7, R14) --------------------------------------------- */

/* Marked off from the public page above it rather than blended into it: the
   reader has to be able to tell which part of this page only they can see. */
.holder-detail {
  border: 1px solid var(--rust);
  border-radius: 6px;
  margin-top: 2.5rem;
  padding: 1.5rem;
}

.holder-detail__header {
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
}

.holder-detail__heading {
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
}

.holder-detail__lede {
  color: var(--ink-muted);
  font-size: 0.95rem;
  margin: 0;
}

.holder-detail__columns {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 46rem) {
  .holder-detail__columns {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  }
}

.holder-record + .holder-record {
  border-top: 1px solid var(--border);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.holder-record__heading {
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.holder-record__note {
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin-bottom: 0;
}

.facts--compact {
  margin-bottom: 0;
}

/* --- The R39 disclosure ---------------------------------------------------- */

.disclosure {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 2.5rem;
  padding: 1.5rem;
}

.disclosure__heading {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

.disclosure__halves {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 46rem) {
  .disclosure__halves {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Both halves get the same box, the same type size and the same weight. The way
   R39 fails is not deletion, it is one half quietly becoming smaller than the
   other. */
.disclosure__half {
  border-left: 3px solid var(--rust);
  padding-left: 1rem;
}

.disclosure__half p {
  margin: 0;
}

.disclosure__half-heading {
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.disclosure__pairing {
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin: 1.25rem 0 0;
}