/* ==========================================================================
   Example property pages (pages/example/)

   The pages behind "See photos and details" in the example conversation on
   the homepage. Octopus Apartments and Octopus Hotel are made up, and every
   page says so in the notice at the top. Keep that notice.

   The rooms are drawn as labelled tiles rather than photos. There are no
   real photos of made-up buildings, and a stock photo would read as a claim
   that the place exists.

   🔴 No reviews, ratings or guest quotes on these pages. Invented reviews
   presented as real are the one thing a pretend property page must not have.

   The apartment facts come from docs/assets/octopus-apartments-knowledge.txt,
   except that Kings Court is in Chelsea here (2026-09-11) and still in
   Chiswick in that file and in the live demo assistant.
   ========================================================================== */

.prop-main {
  padding: 28px 0 20px;
}

/* The "this is an example" notice */
.prop-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 26px;
  padding: 14px 20px;
  background: var(--surface-testimonial);
  border: 1px solid rgba(127, 216, 190, 0.28);
  border-radius: 12px;
}
.prop-notice p {
  flex: 1 1 420px;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(250, 250, 248, 0.8);
}
.prop-notice strong {
  color: var(--color-accent);
}
.prop-notice a {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: rgba(127, 216, 190, 0.45);
  text-underline-offset: 3px;
}
.prop-notice a:hover {
  text-decoration-color: var(--color-accent);
}

/* The operator's name and mark, above the gallery */
.prop-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.prop-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border: 1px solid rgba(127, 216, 190, 0.35);
  border-radius: 50%;
  background: var(--color-bg);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
}
.prop-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Gallery: one large tile and four small ones */
.prop-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, 170px);
  gap: 10px;
  margin-bottom: 34px;
}
.prop-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 20%, rgba(127, 216, 190, 0.16), transparent 60%),
    linear-gradient(160deg, rgba(27, 38, 59, 0.98), rgba(13, 27, 42, 0.98));
}
.prop-tile:nth-child(2n) {
  background:
    radial-gradient(circle at 75% 25%, rgba(127, 216, 190, 0.13), transparent 60%),
    linear-gradient(200deg, rgba(31, 45, 70, 0.98), rgba(13, 27, 42, 0.98));
}
.prop-tile:first-child {
  grid-row: span 2;
}
.prop-tile svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: rgba(127, 216, 190, 0.7);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.prop-tile:first-child svg {
  width: 76px;
  height: 76px;
  stroke-width: 1.1;
}
.prop-tile-label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(250, 250, 248, 0.75);
}

/* Details on the left, the booking box on the right */
.prop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: start;
}
.prop-head h1 {
  margin-bottom: 8px;
  font-size: clamp(32px, 3.4vw, 46px);
  text-wrap: balance;
}
.prop-address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 22px;
  font-size: 15px;
  color: rgba(250, 250, 248, 0.7);
}
.prop-address svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prop-facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 0 30px;
  padding: 0;
}
.prop-facts li {
  padding: 14px 16px;
  background: var(--surface-testimonial);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.prop-fact-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 250, 248, 0.45);
}
.prop-fact-value {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.prop-section {
  padding: 26px 0;
  border-top: 1px solid var(--border-subtle);
}
.prop-section h2 {
  margin-bottom: 12px;
  font-size: 22px;
}
.prop-section p {
  margin: 0 0 10px;
  font-size: 15px;
  color: rgba(250, 250, 248, 0.72);
}

/* Apartment sizes and nightly rates */
.prop-rates {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.prop-rates td {
  padding: 11px 0;
  border-bottom: 1px solid var(--border-subtle);
  color: rgba(250, 250, 248, 0.8);
}
.prop-rates td:last-child {
  text-align: right;
  white-space: nowrap;
}
/* The size quoted in the homepage conversation */
.prop-rates tr.is-quoted td {
  font-weight: 600;
  color: var(--color-accent);
}
.prop-rates-note {
  margin-top: 12px !important;
  font-size: 13px !important;
  color: rgba(250, 250, 248, 0.55) !important;
}

/* Hotel rooms. The homepage links straight to each one (#classic-double,
   #superior-king), so the one linked to is outlined. */
.prop-room {
  scroll-margin-top: calc(var(--nav-height) + 20px);
  margin-bottom: 14px;
  padding: 22px;
  background: var(--surface-testimonial);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
}
.prop-room:target {
  border-color: rgba(127, 216, 190, 0.6);
  box-shadow: 0 0 0 1px rgba(127, 216, 190, 0.35);
}
.prop-room-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 8px;
}
.prop-room h3 {
  margin: 0;
  font-size: 19px;
}
.prop-room-price {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-accent);
}
.prop-room-price span {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: rgba(250, 250, 248, 0.55);
}
.prop-room .prop-list {
  margin-top: 12px;
}

/* Ticked lists */
.prop-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  margin: 0;
  padding: 0;
}
.prop-list-single {
  grid-template-columns: 1fr;
}
.prop-list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(250, 250, 248, 0.8);
}
.prop-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 6px;
  height: 11px;
  border: solid var(--color-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Booking box. The price lines are scoped under .prop-book so they outrank
   the `.prop-book p` rule below; on their own they lost to it and the price
   came out at body size. */
.prop-book {
  position: sticky;
  top: calc(var(--nav-height) + 20px);
  padding: 24px;
  background: var(--surface-card);
  border: 1px solid rgba(127, 216, 190, 0.22);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(4, 10, 18, 0.35);
}
.prop-book .prop-book-from {
  margin: 0;
  font-size: 13px;
  color: rgba(250, 250, 248, 0.55);
}
.prop-book .prop-book-price {
  margin: 2px 0 6px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text);
}
.prop-book .prop-book-price span {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: rgba(250, 250, 248, 0.6);
}
.prop-book .prop-book-note {
  margin: 0 0 18px;
  font-size: 13px;
  color: rgba(250, 250, 248, 0.6);
}
.prop-book h2 {
  margin: 0 0 8px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  font-size: 16px;
}
.prop-book p {
  font-size: 14px;
  color: rgba(250, 250, 248, 0.7);
}
.prop-book .btn {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
}

@media (max-width: 960px) {
  .prop-layout {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .prop-book {
    position: static;
  }
  .prop-facts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .prop-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 190px 120px 120px;
  }
  .prop-tile:first-child {
    grid-column: span 2;
    grid-row: auto;
  }
  .prop-list {
    grid-template-columns: 1fr;
  }
}