/* ==========================================================================
   Listing page (public buyer page). Loaded after components.css on
   /listings/* and /es/listings/* only. Spec: Iris, 2026-10-22.
   Every rule is scoped to .page-listing so no other page can change.
   ========================================================================== */

/* Page-scoped tokens. Candidates to promote into tokens.css later. */
.page-listing {
  --color-gold-cta-ink: var(--color-bg-dark);      /* text on gold fills, about 7:1 */
  --color-scrim: rgba(15, 20, 25, 0.94);           /* --color-bg-dark at 94%, viewer backdrop */
  --tap-min: 44px;
  --tap-control: 48px;
}

/* Gold CTA, page-scoped retoken (the global .btn--gold is untouched). */
.page-listing .btn--gold {
  background: var(--color-gold);
  color: var(--color-gold-cta-ink);
  border: 1px solid var(--color-accent-hover);
}

.page-listing .btn--gold:hover {
  background: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-bg);
}

.page-listing .section--dark .btn--gold:hover {
  background: var(--color-text-on-dark);
  border-color: var(--color-text-on-dark);
  color: var(--color-bg-dark);
}

.page-listing .btn__icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-right: var(--space-3);
  flex-shrink: 0;
}

.section--flush-top {
  padding-top: 0;
}

/* Anchor jumps and keyboard focus scroll clear of the 73px sticky nav
   (72px bar + 1px border) and, under 768px, of the sticky action bar.
   html is the scrolling element, so the padding goes there, scoped by :has. */
html:has(body.page-listing) {
  scroll-padding-top: calc(73px + var(--space-5));
}

@media (max-width: 767px) {
  html:has(body.page-listing) {
    scroll-padding-bottom: 80px;
  }
}

/* The site skip link is about 46px tall but parked at top: -40px, so 6px of it
   shows at the top of every page. Hide it fully here; it slides in on focus. */
.page-listing .skip-link {
  top: 0;
  transform: translateY(-100%);
}

.page-listing .skip-link:focus {
  transform: none;
}

/* --------------------------------------------------------------------------
   Nav additions: language switch next to the hamburger / CTA
   -------------------------------------------------------------------------- */
.page-listing .nav__menu {
  margin-left: auto;
}

.nav__end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.page-listing .nav__link,
.page-listing .nav__menu .btn {
  white-space: nowrap;
}

/* With the language switch added, the full menu only fits from 1200px
   (measured: 900 to 1199px squeezes the links against the logo). Keep the
   hamburger plus EN / ES until then. */
@media (min-width: 900px) and (max-width: 1199px) {
  .page-listing .nav__menu {
    display: none;
  }
  .page-listing .nav__toggle {
    display: inline-flex;
  }
}

@media (min-width: 1200px) {
  .nav__end {
    margin-left: var(--space-5);
  }
}

@media (max-width: 379px) {
  .page-listing .nav__logo-img {
    height: 34px;
  }
}

.lang-switch {
  display: flex;
  align-items: center;
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
}

.lang-switch a:hover {
  color: var(--color-charcoal);
}

.lang-switch a[aria-current="page"] {
  color: var(--color-charcoal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-gold-on-light);
  text-underline-offset: 6px;
}

.lang-switch__sep {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Hero photo
   -------------------------------------------------------------------------- */
.listing-hero {
  display: block;
  background: var(--color-bg-dark);
}

.listing-hero img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 900px) {
  .listing-hero img {
    aspect-ratio: auto;
    height: min(72vh, 720px);
    object-position: center 62%;
  }
}

.listing-hero {
  position: relative;
}

/* Double ring (dark outer, white inner) so focus reads on any part of the photo.
   The transparent outline keeps a visible ring in forced-colors mode. */
.listing-hero:focus-visible {
  outline: 2px solid transparent;
  outline-offset: -4px;
}

.listing-hero:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--color-bg-dark),
    inset 0 0 0 6px var(--color-text-on-dark);
}

/* --------------------------------------------------------------------------
   Title block
   -------------------------------------------------------------------------- */
.listing-head {
  padding-top: var(--space-7);
  padding-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .listing-head {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
}

.listing-head__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .listing-head__grid {
    grid-template-columns: 1.4fr 1fr;
    column-gap: var(--space-8);
    row-gap: var(--space-7);
    align-items: end;
  }
  .listing-head__actions {
    grid-column: 1 / -1;
  }
}

.listing-head .eyebrow {
  margin-bottom: var(--space-4);
}

.listing-head h1 {
  max-width: 20ch;
  text-wrap: balance;
  margin-bottom: var(--space-5);
}

.page-listing .listing-head__summary {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-on-dark-muted);
  max-width: 48ch;
  margin: 0;
}

.listing-price {
  font-variant-numeric: lining-nums tabular-nums;
  margin-bottom: var(--space-4);
}

.page-listing .listing-mandate,
.page-listing .listing-partner {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--color-text-on-dark-muted);
  margin: 0;
}

.page-listing .listing-partner {
  margin-top: var(--space-2);
}

.listing-head__cta {
  margin-bottom: var(--space-5);
}

.page-listing .listing-ref {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text-on-dark-muted);
  margin: 0;
}

@media (max-width: 767px) {
  .listing-head__cta .btn--gold {
    display: flex;
    width: 100%;
  }
}

/* Section headings below the hero */
.listing-section h2 {
  margin-bottom: var(--space-6);
}

/* --------------------------------------------------------------------------
   Fact list (key facts, contact details)
   -------------------------------------------------------------------------- */
.fact-list {
  margin: 0;
  border-top: 1px solid var(--color-border-subtle);
}

.fact-list__row {
  display: grid;
  grid-template-columns: minmax(8rem, 40%) 1fr;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.fact-list dt {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: 0.2em;
}

.fact-list dd {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  margin: 0;
  font-variant-numeric: lining-nums;
  min-width: 0;
  overflow-wrap: anywhere;
}

.fact-list dd a {
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 3px;
}

.fact-list dd a:hover {
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   Photo grid
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

@media (min-width: 900px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
  }
}

.gallery__item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}

.gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--focus, center);
  border-radius: var(--radius-md);
  transition: transform var(--duration-base) var(--ease-out);
}

.gallery__item:hover img {
  transform: scale(1.03);
}

.gallery__cell--feature {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .gallery__cell--feature {
    grid-column: span 2;
    grid-row: span 2;
  }
  .gallery__cell--feature .gallery__item {
    height: 100%;
  }
  /* Out of flow, so the 2 x 2 tile takes its height from the grid rows
     and never stretches them. */
  .gallery__cell--feature img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    height: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__item:hover img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Photo viewer (native dialog)
   -------------------------------------------------------------------------- */
html:has(.viewer[open]) {
  overflow: hidden;
}

.viewer {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-on-dark);
  overflow: hidden;
}

.viewer::backdrop {
  background: var(--color-scrim);
}

.viewer[open] {
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

@starting-style {
  .viewer[open] {
    opacity: 0;
    transform: scale(0.98);
  }
}

.viewer__inner {
  display: grid;
  height: 100%;
  padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));
  grid-template-columns: var(--tap-control) 1fr var(--tap-control);
  grid-template-rows: 64px minmax(0, 1fr) 64px;
  grid-template-areas:
    ".    .     close"
    "img  img   img"
    "prev count next";
  align-items: center;
}

@media (min-width: 768px) {
  .viewer__inner {
    grid-template-areas:
      "count .   close"
      "prev  img next"
      ".     .   .";
    column-gap: var(--space-4);
  }
}

.viewer__count {
  grid-area: count;
  justify-self: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--color-text-on-dark-muted);
  white-space: nowrap;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .viewer__count {
    justify-self: start;
  }
}

.viewer__stage {
  grid-area: img;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}

.viewer__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%; /* the stage row is 100dvh minus the two 64px control rows */
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.viewer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-control);
  height: var(--tap-control);
  border-radius: var(--radius-sm);
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  border: 1px solid var(--color-border-on-dark);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.viewer__btn:hover {
  border-color: var(--color-text-on-dark-muted);
}

.viewer__btn svg {
  width: 20px;
  height: 20px;
}

.viewer__btn--close { grid-area: close; justify-self: end; }
.viewer__btn--prev  { grid-area: prev; }
.viewer__btn--next  { grid-area: next; justify-self: end; }

.viewer *:focus-visible {
  outline-color: var(--color-gold);
}

@media (prefers-reduced-motion: reduce) {
  .viewer[open] {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.listing-prose p {
  font-size: 1.0625rem;
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Energy certificate
   -------------------------------------------------------------------------- */
.energy {
  margin: 0 0 var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}

.energy__row {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.energy dt {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.energy dt sub {
  font-size: 0.8em;
  line-height: 0;
  vertical-align: -0.2em;
  letter-spacing: 0;
}

.energy dd {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .energy dd {
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
  }
}

.energy__scale {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  width: 100%;
  max-width: 22rem;
  flex-shrink: 0;
}

.energy__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.energy__cell--rated {
  background: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-bg);
}

.energy__text {
  font-variant-numeric: lining-nums;
}

.energy-note {
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Cost tables
   -------------------------------------------------------------------------- */
.cost-block + .cost-block {
  margin-top: var(--space-7);
}

.cost-block h3 {
  margin-bottom: var(--space-4);
}

.cost-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
}

.cost-table th,
.cost-table td {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: top;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text);
}

.cost-table th {
  text-align: left;
  padding-right: var(--space-5);
}

.cost-table td {
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}

.page-listing .nowrap {
  white-space: nowrap;
}

.cost-table__total th,
.cost-table__total td {
  border-top: 1px solid var(--color-charcoal);
  border-bottom: 0;
}

.cost-table__total th {
  font-family: var(--font-sans);
  font-weight: 600;
}

.cost-note {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  max-width: 70ch;
}

.cost-note a,
.agent-line a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-gold-on-light);
  text-underline-offset: 3px;
}

.cost-note a:hover,
.agent-line a:hover {
  color: var(--color-gold-on-light);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.listing-contact .lead {
  margin-bottom: var(--space-6);
}

.listing-contact .hero__cta {
  margin-bottom: var(--space-7);
}

@media (max-width: 767px) {
  .listing-contact .hero__cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .listing-contact .hero__cta .btn {
    display: flex;
    width: 100%;
  }
}

.agent-line {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   Legal
   -------------------------------------------------------------------------- */
.fine-print p {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   Sticky mobile action bar
   -------------------------------------------------------------------------- */
.action-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: grid;
  grid-template-columns: auto 1fr; /* WhatsApp sized to its label, the viewing button takes the rest */
  gap: var(--space-3);
  padding: var(--space-3) 1.75rem calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--duration-fast) var(--ease-out),
    visibility 0s linear var(--duration-fast);
}

.action-bar[data-visible="true"] {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--duration-base) var(--ease-out),
    visibility 0s linear 0s;
}

.action-bar .btn {
  min-height: var(--tap-control);
  padding: 0 var(--space-4);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Never shows through the photo viewer backdrop. */
html:has(.viewer[open]) .action-bar {
  visibility: hidden;
  transition: none;
}

@media (min-width: 768px) {
  .action-bar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .action-bar,
  .action-bar[data-visible="true"] {
    transition: none;
  }
}