/* =============================================================
   Listing layouts: grid (default cards), search (Zillow/Redfin
   rows), directory (MLS table), showcase (homepage stack).
   ============================================================= */

.tx-layout-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 var(--s-5);
}

.tx-layout-switch__btn {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--charcoal-2);
  background: var(--surface-content);
}

.tx-layout-switch__btn:hover,
.tx-layout-switch__btn:focus-visible {
  border-color: var(--brand-primary);
  color: var(--charcoal);
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.tx-layout-switch__btn.is-current {
  background: var(--charcoal);
  color: var(--on-charcoal);
  border-color: var(--charcoal);
}

/* ---- Search / Redfin rows ---- */
.tx-properties-list--search {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: var(--s-4);
}

.tx-properties-list--search .tx-property-card {
  display: grid;
  grid-template-columns: minmax(140px, 280px) 1fr;
  gap: 0;
  overflow: hidden;
}

.tx-properties-list--search .tx-property-card__media {
  min-height: 180px;
}

.tx-properties-list--search .tx-property-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tx-properties-list--search .tx-property-card__body {
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tx-properties-list--search .tx-property-card__rent {
  font-size: 1.5rem;
}

@media (max-width: 640px) {
  .tx-properties-list--search .tx-property-card {
    grid-template-columns: 1fr;
  }
}

/* ---- MLS directory table ---- */
.tx-listings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.tx-listings-table th,
.tx-listings-table td {
  padding: 0.75rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}

.tx-listings-table th {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted, var(--text-muted));
}

.tx-listings-table tbody tr:hover { background: var(--bone); }

.tx-listings-table__thumb {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.tx-listings-table a {
  color: var(--plum);
  font-weight: 600;
  text-decoration: none;
}

.tx-listings-table a:hover,
.tx-listings-table a:focus-visible {
  color: var(--charcoal);
  text-decoration: underline;
}

.tx-listings-table__rent {
  font-weight: 700;
  white-space: nowrap;
}

.tx-listings-table-wrap {
  overflow-x: auto;
}

.tx-listings-table__thumb--empty {
  background: var(--bone);
}

/* ---- Homepage showcase (offset, not boxed) ---- */
.tx-home-listings--showcase {
  position: relative;
}

/* Both gutters match the site container so the photo stack never
   kisses the viewport edge; the stack is offset inside its column
   (see .tx-showcase__stage) rather than bleeding past it. */
.tx-showcase {
  display: grid;
  grid-template-columns: minmax(18rem, 0.95fr) minmax(20rem, 1.15fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: center;
  width: 100%;
  padding-left: max(var(--gutter), calc((100vw - 1180px) / 2));
  padding-right: max(var(--gutter), calc((100vw - 1180px) / 2));
}

.tx-showcase__copy {
  min-width: 0;
  padding-right: var(--gutter);
}

/* "Now leasing" is the headline; the cycling "City, ST" line reads as
   its sub-line. Tracking relaxes at display scale so the uppercase
   word doesn't spread across the column. */
.tx-showcase__eyebrow {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 6vw, 4.6rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-2);
}

.tx-home-ledger__showcase .tx-showcase__eyebrow {
  color: #E8C85A;
}

.tx-showcase__ticker {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  min-height: 3.2em;
}

.tx-showcase__ticker-item {
  display: none;
  margin: 0;
}

.tx-showcase__ticker-item.is-on { display: block; }

.tx-showcase__cta {
  color: var(--charcoal-2);
  text-decoration: none;
  display: block;
}

.tx-home-ledger__showcase .tx-showcase__cta {
  color: var(--on-charcoal);
}

.tx-showcase__cta:hover,
.tx-showcase__cta:focus-visible {
  color: var(--gold-2);
  outline: none;
}

.tx-home-ledger__showcase .tx-showcase__cta:hover,
.tx-home-ledger__showcase .tx-showcase__cta:focus-visible {
  color: #E8C85A;
}

.tx-showcase__meta {
  display: block;
  margin-top: 0.35rem;
  color: var(--ink-muted, #4A4A4E);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
  letter-spacing: 0;
}

.tx-home-ledger__showcase .tx-showcase__meta {
  color: var(--on-charcoal-muted);
}

.tx-showcase__stage {
  position: relative;
  min-height: clamp(280px, 42vw, 540px);
  overflow: visible;
  background: transparent;
}

/* One photo set per listing (cover + next two gallery photos, in the
   editor's order). Sets stack on top of each other and crossfade in
   lockstep with the ticker — showcase.js toggles `.is-on` on both. */
.tx-showcase__set {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-base, 320ms) var(--ease-out, ease-out),
    visibility 0s linear var(--dur-base, 320ms);
}

.tx-showcase__set.is-on {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Photos read as stacked prints: rounded corners, a hairline ring so
   dark photos separate from the charcoal band, and a two-tier shadow
   (tight contact + long ambient) instead of a flat drop.
   `--tx-parallax` is written by parallax.js on the stage; each layer
   multiplies it by its own depth so the stack shifts with a little
   depth as the page scrolls (0 when the script is off). */
.tx-showcase__photo {
  position: absolute;
  background-size: cover;
  background-position: center;
  opacity: 1;
  border-radius: var(--r-card, 12px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.30),
    0 22px 48px -10px rgba(0, 0, 0, 0.55),
    0 48px 96px -28px rgba(0, 0, 0, 0.50);
  transform: translate3d(0, calc(var(--tx-parallax, 0px) * var(--depth, 1)), 0);
  will-change: transform;
}

.tx-showcase__photo:nth-child(1) {
  --depth: 0.45;
  width: 72%;
  height: 78%;
  top: 12%;
  left: 0;
  z-index: 1;
}

.tx-showcase__photo:nth-child(2) {
  --depth: 1;
  width: 58%;
  height: 64%;
  top: 0;
  right: 0;
  z-index: 2;
}

.tx-showcase__photo:nth-child(3) {
  --depth: 1.6;
  width: 44%;
  height: 44%;
  bottom: -2%;
  left: 32%;
  z-index: 3;
}

@media (max-width: 899px) {
  .tx-showcase {
    grid-template-columns: 1fr;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    gap: var(--s-6);
  }

  .tx-showcase__copy {
    padding-right: 0;
  }

  .tx-showcase__stage {
    min-height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tx-showcase__photo {
    animation: none;
    transform: none;
    will-change: auto;
  }

  .tx-showcase__set {
    transition: none;
  }
}