/* ==========================================================================
   Place page (PlacePage_Desktop) — The Brando
   Builds on css/base.css tokens and components.
   ========================================================================== */

/* Hero_Frame ------------------------------------------------------------- */
.place-hero .hero__media img { object-position: 50% 22%; transition: opacity 0.45s var(--ease); }
.place-hero .hero__media img.is-fading { opacity: 0; }
.place-hero__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-30);
  padding: 189px var(--gutter) var(--s-20);
}
.place-hero__content { display: flex; flex-direction: column; align-items: center; gap: var(--s-15); text-align: center; }
.place-hero__content h1 { line-height: normal; }
.place-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-15) var(--s-30); font-size: var(--fs-small); }
.place-hero__meta li { display: flex; align-items: center; gap: var(--s-15); white-space: nowrap; }
.place-hero__meta img { flex-shrink: 0; }

/* Gallery_Strip */
.place-hero__strip { --strip-h: 119px; display: flex; align-items: stretch; gap: var(--s-15); width: 100%; height: var(--strip-h); flex-shrink: 0; }
/* thumbnails are pinned to exactly the height of the Save + Share column */
.place-hero__strip .place-thumbs,
.place-hero__strip .place-thumbs li,
.place-hero__strip .place-thumb { height: var(--strip-h); max-height: var(--strip-h); }
.place-hero__actions .btn { height: calc((var(--strip-h) - var(--s-15)) / 2); }
.place-thumbs { flex: 1; min-width: 0; height: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 100%; gap: var(--s-15); }
.place-thumbs li { min-width: 0; min-height: 0; height: 100%; }
.place-thumb {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--c-brown);
  border-radius: var(--r-5);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.place-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.place-thumb--top img { object-position: 50% 0; }
.place-thumb:hover { transform: translateY(-3px); }
.place-thumb[aria-pressed="true"] { border-color: var(--c-white); box-shadow: 0 0 0 1px var(--c-white); }
.place-hero__actions { flex: 0 0 136px; display: flex; flex-direction: column; gap: var(--s-15); }
.place-hero__actions .btn { flex: 1; min-height: 0; padding: 0 var(--s-20); }

/* Section_About ---------------------------------------------------------- */
.place-about {
  display: flex;
  flex-direction: column;
  gap: var(--s-30);
  padding: var(--s-30) var(--gutter) var(--s-30);
}
.place-about > .t-body { margin-bottom: var(--s-15); line-height: 1.5; }
.place-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-15); margin: 0; }
.place-details > div { display: flex; flex-direction: column; gap: var(--s-15); }
.place-details dt { color: var(--c-brown); }
.place-details dd { margin: 0; font-size: var(--fs-body); }

.place-highlights { display: flex; gap: var(--s-15); }
.place-highlights__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-15); }
.place-highlights__col li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-10);
  padding-left: 25px; /* 10px dot + 15px gap */
}
.place-highlights__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: url("../assets/icons/place/icon-dot.svg") center / contain no-repeat;
}
.place-highlights__col li + li { padding-top: var(--s-15); border-top: 0.75px solid var(--c-brown-60); }
.place-highlights__col li + li::before { margin-top: calc(-5px + var(--s-15) / 2); }
.place-highlights h3 { font-size: var(--fs-body); font-weight: 300; }
.place-highlights p { font-size: var(--fs-small); color: var(--c-brown-60); }

/* Section_Gallery — Gallery_Depth ---------------------------------------- */
.place-gallery { padding-top: var(--s-60); padding-bottom: var(--s-15); }
.depth { position: relative; width: 100%; aspect-ratio: 1240 / 620; max-height: 620px; }
.depth__card {
  --w: 38.65%;
  --h: 100%;
  --x: 50%;
  position: absolute;
  top: 50%;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: var(--r-5);
  box-shadow: var(--shadow-card);
  transition: left 1.2s var(--ease-zoom), width 1.2s var(--ease-zoom), height 1.2s var(--ease-zoom), filter 0.6s var(--ease), opacity 0.6s var(--ease);
}
.depth__card.is-wrapping { opacity: 0; transition: opacity 0.4s var(--ease); }
.depth__card img { width: 100%; height: 100%; object-fit: cover; }
.depth__card[data-pos="0"]  { z-index: 3; cursor: default; }
.depth__card[data-pos="-1"],
.depth__card[data-pos="1"]  { --w: 33.84%; --h: 87.42%; z-index: 2; }
.depth__card[data-pos="-1"] { --x: 29.25%; }
.depth__card[data-pos="1"]  { --x: 70.71%; }
.depth__card[data-pos="-2"],
.depth__card[data-pos="2"]  { --w: 32.21%; --h: 83.2%; z-index: 1; }
.depth__card[data-pos="-2"] { --x: 16.1%; }
.depth__card[data-pos="2"]  { --x: 83.9%; }
.depth__card:not([data-pos="0"]):hover { filter: brightness(1.08); }

/* Section_Info_Booking --------------------------------------------------- */
.place-booking {
  flex-direction: row;
  align-items: stretch;
  gap: var(--s-30);
  padding-top: var(--s-30);
  padding-bottom: var(--s-30);
}
.booking {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-30);
  padding: var(--s-20) var(--s-30);
  border-radius: var(--r-5);
  background: var(--c-brown);
  color: var(--c-white);
  align-self: center;
}
.booking__price { display: flex; flex-direction: column; gap: var(--s-15); width: 100%; text-align: center; }
.booking__amount { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: var(--s-10); }
.booking__amount .t-display { font-size: var(--fs-section); line-height: normal; text-align: right; }
.booking__amount .t-small { text-align: left; padding-bottom: 0.9em; }
.booking__meta { font-size: var(--fs-small); color: var(--c-white-75); }

.booking__fields { display: flex; flex-direction: column; gap: var(--s-15); width: 100%; }
.booking__field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-10);
  width: 100%;
  padding: var(--s-20);
  border: 1px solid var(--c-white);
  border-radius: var(--r-5);
  background: var(--c-white-15);
  font-size: var(--fs-small);
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* label (CHECK-IN / CHECK-OUT / DATE / GUESTS) pinned to the top-left corner, value stays centred */
.booking__field > span:first-child { align-self: flex-start; font-size: 12px; letter-spacing: 0.04em; color: var(--c-white-75); }
.booking__field { padding-top: var(--s-15); }
.booking__field:hover { background: rgba(255, 255, 255, 0.22); }
.booking__field.is-active { box-shadow: inset 0 0 0 1px var(--c-white); }

.booking__summary { display: flex; flex-direction: column; gap: var(--s-15); font-size: var(--fs-small); }
.booking__summary dl { display: flex; flex-direction: column; gap: var(--s-10); margin: 0; }
.booking__summary dl > div { display: flex; justify-content: space-between; gap: var(--s-15); color: var(--c-white-75); }
.booking__summary dd { margin: 0; }
.booking__summary .booking__total { padding-top: var(--s-10); border-top: 0.75px solid var(--c-white-75); color: var(--c-white); font-size: var(--fs-body); }
.booking__confirm.is-done { background: var(--c-white); color: var(--c-brown); }
.booking__status { text-align: center; color: var(--c-white-75); }
.booking__status:empty { display: none; }

.booking__curator { display: flex; align-items: center; justify-content: center; gap: var(--s-15); font-size: var(--fs-small); text-align: left; }
.booking__curator img { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-round); object-fit: cover; }
.booking__curator:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* Calendar_Container */
.calendar {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-30);
  padding: var(--s-30) 0;
}
.calendar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-15); }
.calendar__head h2 { line-height: normal; text-align: center; }
.calendar__arrow { flex-shrink: 0; border-radius: var(--r-5); transition: transform 0.2s var(--ease), opacity 0.2s; }
.calendar__arrow img { width: 26px; height: 26px; }
.calendar__arrow--prev img { transform: scaleX(-1); }
.calendar__arrow:hover { transform: scale(1.1); }
.calendar__arrow:disabled { opacity: 0.3; cursor: default; transform: none; }
.calendar__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: var(--s-10) 0;
  font-size: var(--fs-small);
  color: var(--c-brown-60);
  text-align: center;
}
.calendar__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(49px, 1fr);
}
.calendar__day {
  position: relative;
  display: grid;
  place-items: center;
  font-size: var(--fs-small);
  color: var(--c-brown-60);
  isolation: isolate;
}
.calendar__day:hover:not(:disabled) { color: var(--c-brown); }
.calendar__day:hover:not(:disabled)::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--c-brown);
}
.calendar__day:disabled { opacity: 0.35; cursor: default; }
.calendar__day.is-range { background: var(--c-brown-8); color: var(--c-brown); }
.calendar__day.is-start,
.calendar__day.is-end { background: var(--c-brown-8); color: var(--c-white); }
.calendar__day.is-start::before,
.calendar__day.is-end::before,
.calendar__day.is-start:hover::before,
.calendar__day.is-end:hover::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--c-brown);
}
.calendar__day.is-start.is-end { background: none; }
.calendar__day.is-start:hover,
.calendar__day.is-end:hover { color: var(--c-white); }
.calendar__note { transition: color 0.2s; }
.calendar__note.is-warning { color: var(--c-brown); }

/* Section_Listings ------------------------------------------------------- */
.place-listings { padding-top: var(--s-30); padding-bottom: var(--s-30); }
.place-listings > h2 { text-align: center; line-height: normal; }
.place-listings .listing-grid { min-height: 493px; }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1100px) {
  .place-details { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-30); }
  .place-booking { flex-direction: column; }
  .booking { align-self: stretch; }
  .calendar { padding-top: 0; }
}

@media (max-width: 900px) {
  .place-hero { height: auto; min-height: 632px; }
  .place-hero__inner { padding-top: 150px; gap: var(--s-60); }
  .place-hero__strip { --strip-h: 90px; flex-direction: column; height: auto; }
  .place-hero__actions .btn { height: auto; }
  .place-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); height: 90px; }
  .place-hero__actions { flex: none; flex-direction: row; }
  .place-hero__actions .btn { min-height: 48px; }
  .place-highlights { flex-direction: column; }
  .place-highlights > .divider-v { display: none; }
  .place-highlights__col + .divider-v + .place-highlights__col > li:first-child { padding-top: var(--s-15); border-top: 0.75px solid var(--c-brown-60); }
  .place-highlights__col + .divider-v + .place-highlights__col > li:first-child::before { margin-top: calc(-5px + var(--s-15) / 2); }
}

@media (max-width: 600px) {
  .place-hero__inner { padding-top: 120px; }
  .place-hero__strip { --strip-h: 80px; }
  .place-thumbs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; height: 80px; padding-bottom: 2px; }
  .place-thumbs li { flex: 0 0 31%; scroll-snap-align: start; }
  .place-details { grid-template-columns: 1fr; row-gap: var(--s-20); }
  .depth { aspect-ratio: 4 / 3; }
  .depth__card { --w: 62%; }
  .depth__card[data-pos="-1"],
  .depth__card[data-pos="1"]  { --w: 50%; }
  .depth__card[data-pos="-1"] { --x: 27%; }
  .depth__card[data-pos="1"]  { --x: 73%; }
  .depth__card[data-pos="-2"],
  .depth__card[data-pos="2"]  { --w: 40%; }
  .depth__card[data-pos="-2"] { --x: 20%; }
  .depth__card[data-pos="2"]  { --x: 80%; }
  .booking { padding: var(--s-20) var(--s-15); }
  .booking__curator { flex-direction: row; align-items: center; }
  .calendar__grid { grid-auto-rows: minmax(44px, 1fr); }
  .calendar__day:hover:not(:disabled)::before,
  .calendar__day.is-start::before,
  .calendar__day.is-end::before { width: 36px; height: 36px; }
  .place-listings .listing-grid { min-height: 0; }
}

/* State fixes */
.booking__summary[hidden] { display: none; }
.place-listings .listing-card__info > .meta-row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; }
@media (max-width: 600px) {
  .place-hero { min-height: 0; }
  .place-hero__inner { padding-bottom: var(--s-30); gap: var(--s-30); }
}

/* Guests stepper (restaurants, spas, experiences) */
.booking__guests { cursor: default; }
.guests-stepper { display: flex; align-items: center; justify-content: center; gap: var(--s-20); }
.guests-stepper button {
  width: 30px; height: 30px;
  border: 1px solid var(--c-white-75);
  border-radius: var(--r-round);
  color: var(--c-white);
  font-size: 16px;
  line-height: 1;
  transition: background-color 0.2s var(--ease);
}
.guests-stepper button:hover { background: var(--c-white-15); }
.calendar__arrow:disabled { opacity: 0.3; cursor: default; }