/*
  Property detail page (frontend/properties/detail.blade.php). All classes start with "pd-".

  Colours: the site's own black, red and greys.
  Type: the site font (Work Sans). Headings use the theme's own classes ("heading", "text-primary").
*/
.pd-stage,
.pd-facts,
.pd-body,
.pd-plans,
.pd-similar,
.pd-mobile-bar,
.pd-lightbox {
  --pd-black: #000;
  --pd-red: #C10607;
  --pd-red-dark: #9e0506;
  --pd-line: #e5e5e5;
  --pd-muted: #777;
  --pd-soft: #f5f5f5;
}

/*
  The theme sets "overflow-x: hidden" on html and body to stop sideways scrolling, but that also
  stops "position: sticky" from working (the enquiry card would scroll away with the page).
  "clip" hides sideways overflow in the same way without blocking sticky. This file is only
  loaded on the property page, so no other page is affected.
*/
html,
body {
  overflow-x: clip;
}

/* ---------- Photo stage ---------- */
.pd-stage {
  position: relative;
  display: flex;
  min-height: min(92vh, 900px); /* fills the screen, but never taller than 900px on very tall windows */
  background-color: var(--pd-black);
  background-size: cover;
  background-position: center;
  color: #fff;
  transition: background-image 0.4s ease;
}

/* darker at the top (menu) and bottom (text), clear in the middle so the photo shows */
.pd-stage:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 32%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0.88) 100%);
}

.pd-stage-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 160px;
  padding-bottom: 36px;
}

.pd-stage-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.pd-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 18px;
}

.pd-status {
  padding-left: 14px;
  border-left: 2px solid var(--pd-red);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.pd-featured {
  padding: 4px 12px;
  border-radius: 30px;
  background: var(--pd-red);
  font-size: 12px;
  font-weight: 600;
}

/* same size, weight and colour as the theme's banner heading (.hero .heading) */
.pd-title {
  max-width: 24ch;
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}

.pd-place {
  margin: 0;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.85);
}

.pd-place span {
  margin-right: 4px;
  color: var(--pd-red);
}

/* asking price, bottom right of the photo */
.pd-ask {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.pd-ask-price {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
}

.pd-ask-rate {
  margin-top: 4px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

.pd-ask-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* outline button on the photo (the theme's .btn removes borders, so the line is an inset shadow) */
.pd-btn-line {
  padding: 14px 26px;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.pd-btn-line span {
  margin-right: 4px;
}

.pd-btn-line:hover,
.pd-btn-line:focus {
  background: #fff;
  box-shadow: inset 0 0 0 1px #fff;
  color: var(--pd-black);
}

/* the one button colour on the page */
.pd-btn-red {
  padding: 14px 30px;
  background: var(--pd-red);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.pd-btn-red:hover,
.pd-btn-red:focus {
  background: var(--pd-red-dark);
  color: #fff;
}

/* filmstrip of photos */
.pd-film {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.pd-film-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.pd-film-strip::-webkit-scrollbar {
  display: none;
}

.pd-film-thumb {
  flex: 0 0 auto;
  width: 96px;
  height: 64px;
  padding: 0;
  border: 0;
  background: none;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.pd-film-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-film-thumb:hover,
.pd-film-thumb.active {
  opacity: 1;
}

.pd-film-thumb.active {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.pd-film-nav {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.pd-film-nav:hover {
  background: #fff;
  color: var(--pd-black);
}

.pd-film-all {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid #fff;
  background: none;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.pd-film-all:hover {
  border-bottom-color: var(--pd-red);
}

/* ---------- Key facts ribbon ---------- */
.pd-facts {
  background: var(--pd-black);
  color: #fff;
}

.pd-facts-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.pd-fact {
  flex: 1 1 0;
  min-width: 140px;
  padding: 30px 24px 30px 0;
}

.pd-fact + .pd-fact {
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.pd-fact dt {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}

.pd-fact dd {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

/* ---------- Main content ---------- */
.pd-body {
  padding: 80px 0 90px;
  background: #fff;
}

.pd-part {
  margin-bottom: 64px;
}

.pd-part:last-child {
  margin-bottom: 0;
}

/* used together with the theme classes "font-weight-bold text-primary heading":
   size and colour come from the theme, the weight is the theme's ".section .heading" */
.pd-heading {
  margin: 0 0 24px;
  font-weight: 500;
}

.pd-lead {
  max-width: 68ch;
  margin: 0;
  font-size: 18px;
  line-height: 1.75;
  color: #333;
}

/* label / value list, two columns with hairlines */
.pd-spec {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 48px;
  margin: 0;
  border-top: 1px solid var(--pd-line);
}

.pd-spec-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--pd-line);
  font-size: 15px;
}

.pd-spec-row dt {
  font-weight: 400;
  color: var(--pd-muted);
}

.pd-spec-row dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
  color: var(--pd-black);
}

/* amenities table: black header, three amenities per row, hairlines between the cells */
.pd-amenity-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid var(--pd-line);
  font-size: 15px;
}

.pd-amenity-table th {
  padding: 16px 22px;
  background: var(--pd-black);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
}

.pd-amenity-table th.pd-amenity-count {
  font-weight: 400;
  text-align: right;
  color: rgba(255, 255, 255, 0.7);
}

.pd-amenity-table td {
  position: relative;
  padding: 18px 22px 18px 52px;
  border: 1px solid var(--pd-line);
  font-weight: 500;
  color: var(--pd-black);
  transition: background 0.2s ease;
}

.pd-amenity-table tbody tr:nth-child(even) td {
  background: #fafafa;
}

.pd-amenity-table td:not(.pd-amenity-empty):hover {
  background: var(--pd-soft);
}

/* red tick in front of every amenity */
.pd-amenity-table td:not(.pd-amenity-empty):before {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  width: 13px;
  height: 7px;
  margin-top: -6px;
  border-left: 2px solid var(--pd-red);
  border-bottom: 2px solid var(--pd-red);
  transform: rotate(-45deg);
}

/* photos: one large and up to four small */
.pd-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: 190px;
  gap: 8px;
}

.pd-gallery-item {
  position: relative;
  padding: 0;
  border: 0;
  background: var(--pd-soft);
  overflow: hidden;
  cursor: zoom-in;
}

.pd-gallery-item:first-child {
  grid-row: span 2;
}

/* fewer than 5 photos: the grid is rearranged so no empty space is left */
.pd-gallery-1 {
  grid-template-columns: 1fr;
  grid-auto-rows: 420px;
}

.pd-gallery-2 {
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 320px;
}

.pd-gallery-3 {
  grid-template-columns: 2fr 1fr;
}

.pd-gallery-1 .pd-gallery-item:first-child,
.pd-gallery-2 .pd-gallery-item:first-child {
  grid-row: auto;
}

.pd-gallery-4 .pd-gallery-item:last-child {
  grid-column: span 2;
}

.pd-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.pd-gallery-item:hover img {
  transform: scale(1.04);
}

.pd-gallery-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.pd-video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 16px;
  background: var(--pd-black);
}

.pd-video:last-child {
  margin-bottom: 0;
}

.pd-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* small title inside a block, e.g. "Site tours" / "Property videos" */
.pd-subheading {
  margin: 28px 0 14px;
  font-size: 18px;
  font-weight: 600;
  color: var(--pd-black);
}

.pd-heading + .pd-subheading {
  margin-top: 0;
}

.pd-locality {
  max-width: 68ch;
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

.pd-locality strong {
  font-weight: 600;
  color: var(--pd-black);
}

.pd-map {
  display: block;
  width: 100%;
  height: 380px;
  margin-bottom: 24px;
  border: 0;
  filter: grayscale(1) contrast(1.05);
}

/* ---------- Enquiry card ---------- */
.pd-enquiry {
  padding: 28px 28px 24px;
  border: 1px solid var(--pd-line);
  border-top: 3px solid var(--pd-red);
  background: #fff;
  scroll-margin-top: 110px;
}

/* the card follows the page only on wide windows that are tall enough to show all of it;
   on shorter screens it scrolls normally so its last links are never cut off */
@media (min-width: 992px) and (min-height: 750px) {
  .pd-enquiry {
    position: sticky;
    top: 100px;
  }
}

.pd-enquiry-price {
  display: block;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--pd-black);
}

.pd-enquiry-rate {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--pd-muted);
}

.pd-enquiry-title {
  margin: 20px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--pd-line);
  font-size: 18px;
  font-weight: 600;
  color: var(--pd-black);
}

.pd-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pd-black);
}

.pd-form input,
.pd-form textarea {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 9px 14px;
  border: 1px solid #cfcfcf;
  border-radius: 0;
  background: #fff;
  font-size: 15px;
  color: var(--pd-black);
}

.pd-form textarea {
  resize: vertical;
}

.pd-form input:focus,
.pd-form textarea:focus {
  outline: none;
  border-color: var(--pd-black);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

/* phone and email side by side, so the card stays short enough to follow the page */
.pd-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

.pd-form-error {
  display: block;
  margin: -8px 0 12px;
  font-size: 13px;
  color: var(--pd-red);
}

.pd-form-success {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 3px solid #198754;
  background: var(--pd-soft);
  font-size: 14px;
  color: var(--pd-black);
}

.pd-enquiry-links {
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--pd-line);
  list-style: none;
  font-size: 15px;
}

.pd-enquiry-links li + li {
  margin-top: 10px;
}

.pd-enquiry-links a {
  color: var(--pd-black);
  font-weight: 500;
}

.pd-enquiry-links a:hover {
  color: var(--pd-red);
}

.pd-enquiry-links span {
  display: inline-block;
  width: 22px;
  color: var(--pd-red);
}

/* ---------- Floor plan section ---------- */
.pd-plans {
  padding: 90px 0;
  background: var(--pd-black);
  color: #fff;
}

.pd-plan-facts {
  margin: 0 0 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.pd-plan-fact {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 15px;
}

.pd-plan-fact dt {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}

.pd-plan-fact dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
}

.pd-plan-note {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

/* the plan sits on a white sheet, like a printed drawing */
.pd-plan {
  display: block;
  width: 100%;
  padding: 28px;
  border: 0;
  background: #fff;
  cursor: zoom-in;
}

.pd-plan img {
  display: block;
  max-width: 100%;
  max-height: 520px;
  margin: 0 auto;
}

.pd-plan-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.pd-plan-thumb {
  width: 92px;
  height: 68px;
  padding: 6px;
  border: 0;
  background: #fff;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.pd-plan-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pd-plan-thumb:hover,
.pd-plan-thumb.active {
  opacity: 1;
}

.pd-plan-thumb.active {
  outline: 2px solid var(--pd-red);
  outline-offset: 2px;
}

/* ---------- Similar properties ---------- */
.pd-similar .pd-heading {
  margin-bottom: 40px;
}

/* ---------- Phone: fixed bar with price and button ---------- */
.pd-mobile-bar {
  display: none;
}

/* ---------- Full screen photo viewer ---------- */
.pd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.95);
}

.pd-lightbox[hidden] {
  display: none;
}

.pd-lightbox img {
  max-width: 88vw;
  max-height: 84vh;
  object-fit: contain;
}

.pd-lightbox-close,
.pd-lightbox-nav {
  position: absolute;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.pd-lightbox-close:hover,
.pd-lightbox-nav:hover {
  background: #fff;
  color: var(--pd-black);
}

.pd-lightbox-close {
  top: 20px;
  right: 20px;
}

.pd-lightbox-prev {
  left: 20px;
}

.pd-lightbox-next {
  right: 20px;
}

.pd-lightbox-count {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

/* keyboard focus is always visible */
.pd-stage button:focus-visible,
.pd-stage a:focus-visible,
.pd-plans button:focus-visible,
.pd-lightbox button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.pd-body button:focus-visible,
.pd-body a:focus-visible {
  outline: 2px solid var(--pd-black);
  outline-offset: 3px;
}

/* ---------- Tablet and below ---------- */
@media (max-width: 991.98px) {
  .pd-stage {
    min-height: min(80vh, 720px);
  }

  .pd-stage-inner {
    padding-top: 130px;
  }

  .pd-stage-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .pd-ask {
    align-items: flex-start;
    text-align: left;
  }

  .pd-ask-actions {
    justify-content: flex-start;
  }

  .pd-ask-actions .pd-btn-red {
    display: none; /* the fixed bar below has this button */
  }

  .pd-btn-line {
    padding: 11px 20px;
    font-size: 14px;
  }

  .pd-plans {
    padding: 56px 0;
  }

  .pd-plans .pd-plan {
    margin-top: 28px;
  }

  .pd-fact {
    flex: 1 1 33%;
    padding: 22px 16px 22px 0;
  }

  .pd-fact + .pd-fact {
    padding-left: 16px;
  }

  .pd-body {
    padding: 56px 0;
  }

  /* room at the very bottom of the page for the fixed bar, so it never covers the footer */
  body:has(.pd-mobile-bar) {
    padding-bottom: 68px;
  }

  .pd-part {
    margin-bottom: 48px;
  }

  .pd-enquiry {
    margin-top: 56px;
  }

  .pd-mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--pd-line);
    background: #fff;
  }

  .pd-mobile-bar-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--pd-black);
  }

  .pd-mobile-bar .btn {
    padding: 12px 22px;
  }

}

/* ---------- Phone ---------- */
@media (max-width: 575.98px) {
  .pd-film-nav {
    display: none;
  }

  .pd-film {
    flex-wrap: wrap;
  }

  .pd-film-thumb {
    width: 76px;
    height: 52px;
  }

  .pd-film-all {
    margin-left: 0;
  }

  .pd-fact {
    flex: 1 1 50%;
  }

  .pd-fact + .pd-fact {
    border-left: 0;
    padding-left: 0;
  }

  .pd-fact dd {
    font-size: 18px;
  }

  .pd-lead {
    font-size: 17px;
  }

  .pd-spec {
    grid-template-columns: 1fr;
  }

  /* two amenities per row: the cells flow as a grid and the filler cells are dropped */
  .pd-amenity-table thead tr {
    display: flex;
    justify-content: space-between;
    background: var(--pd-black); /* one unbroken black bar behind both header cells */
  }

  /* the grid has no shared borders, so each cell draws only its right and bottom line */
  .pd-amenity-table {
    border-width: 1px 0 0 1px;
  }

  .pd-amenity-table tbody td {
    border-width: 0 1px 1px 0;
  }

  .pd-amenity-table tbody {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .pd-amenity-table tbody tr {
    display: contents;
  }

  .pd-amenity-table .pd-amenity-empty {
    display: none;
  }

  .pd-amenity-table td {
    padding: 15px 12px 15px 38px;
    font-size: 14px;
  }

  .pd-amenity-table tbody tr:nth-child(even) td {
    background: none;
  }

  .pd-amenity-table td:not(.pd-amenity-empty):before {
    left: 14px;
  }

  .pd-amenity-table th {
    padding: 14px 12px;
  }

  .pd-gallery {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 130px;
  }

  .pd-gallery-item:first-child {
    grid-column: span 2;
    grid-row: auto;
    height: 220px;
  }

  .pd-gallery {
    grid-auto-rows: auto;
  }

  .pd-gallery-item {
    height: 130px;
  }

  .pd-gallery-1 .pd-gallery-item:first-child {
    height: 260px;
  }

  .pd-gallery-2,
  .pd-gallery-3 {
    grid-template-columns: 1fr 1fr;
  }

  .pd-gallery-2 .pd-gallery-item:first-child {
    grid-column: auto;
    height: 130px;
  }

  .pd-map {
    height: 280px;
  }

  .pd-enquiry {
    padding: 24px 20px;
  }

  .pd-lightbox-nav {
    top: auto;
    bottom: 14px;
  }
}

/* less movement for people who ask for it */
@media (prefers-reduced-motion: reduce) {
  .pd-stage,
  .pd-gallery-item img,
  .pd-film-thumb,
  .pd-plan-thumb {
    transition: none;
  }
}