/* =====================================================================
   StayNomad — Property page & Our Stays
   ---------------------------------------------------------------------
   Loaded on the single property template and the Our Stays page only.
   Everything shared with the homepage already lives in components.css;
   this file adds nothing a second page would want to duplicate.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Property hero
   ---------------------------------------------------------------------
   The header sits over this section, so the hero carries the header
   height as extra top padding rather than the header carrying a spacer.
   --------------------------------------------------------------------- */

.sn-property-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(78vh, 720px);
  padding-block: calc(var(--sn-header-height) + var(--sn-space-8)) var(--sn-space-9);
  background-color: var(--sn-green-dark);
  color: var(--sn-text-inverse);
  overflow: hidden;
}

/*
 * With no photograph the hero is a plain deep-green surface rather than a
 * stand-in image. It is shorter too: the height exists to give a photograph
 * room, and without one it would just be empty colour.
 */
.sn-property-hero--plain {
  min-height: 0;
}

.sn-property-hero__media {
  position: absolute;
  inset: 0;
}

.sn-property-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Only enough scrim to keep the headline legible over a bright pool shot,
 * weighted to the bottom where the text actually sits.
 */
.sn-property-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(0 28 23 / 84%) 0%,
    rgb(0 28 23 / 62%) 40%,
    rgb(0 28 23 / 34%) 70%,
    rgb(0 28 23 / 12%) 100%
  );
}

.sn-property-hero__inner {
  position: relative;
  width: 100%;
}

.sn-property-hero__inner > * {
  max-width: 720px;
}

.sn-property-hero .sn-eyebrow {
  color: var(--sn-text-inverse);
  text-shadow: 0 1px 10px rgb(0 28 23 / 60%);
}

.sn-property-hero .sn-display--hero {
  text-shadow: 0 2px 28px rgb(0 28 23 / 55%);
}

.sn-property-hero__type {
  margin: var(--sn-space-2) 0 0;
  font-size: var(--sn-body);
  color: var(--sn-text-inverse);
  opacity: 0.88;
}

.sn-property-hero__lede {
  margin-top: var(--sn-space-4);
}

.sn-property-hero .sn-btn-group {
  margin-top: var(--sn-space-6);
}

/* ---------------------------------------------------------------------
   Overview
   --------------------------------------------------------------------- */

.sn-property-overview {
  display: grid;
  gap: var(--sn-space-8);
}

@media (min-width: 900px) {
  .sn-property-overview {
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
    align-items: start;
    gap: var(--sn-space-9);
  }
}

/*
 * No body copy yet: one column, and the facts card sized to its content rather
 * than stretched across the full measure.
 */
.sn-property-overview--brief {
  gap: var(--sn-space-6);
}

@media (min-width: 900px) {
  .sn-property-overview--brief {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sn-space-7);
  }
}

/* Without body copy the facts are the section: three ruled columns rather
 * than a card floating beside an empty column. */
.sn-property-overview--brief .sn-property-facts {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

@media (min-width: 720px) {
  .sn-property-overview--brief .sn-property-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sn-space-7);
  }
}

.sn-property-overview--brief .sn-property-fact {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: start;
  padding-top: var(--sn-space-5);
  border-top: 1px solid var(--sn-border);
}

.sn-property-overview--brief .sn-property-fact__icon {
  grid-row: auto;
  margin-bottom: var(--sn-space-3);
}

.sn-property-overview--brief .sn-property-fact__icon svg {
  width: 24px;
  height: 24px;
}

.sn-property-overview--brief .sn-property-fact__value {
  margin-top: var(--sn-space-2);
  font-family: var(--sn-font-display);
  font-size: var(--sn-heading-m);
  line-height: 1.25;
}

.sn-property-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sn-space-2);
  margin: 0 0 var(--sn-space-5);
  padding: 0;
  list-style: none;
}

.sn-property-tags > li {
  margin: 0;
  padding: 10px 18px;
  font-size: var(--sn-body);
  color: var(--sn-green);
  background-color: var(--sn-white);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius-pill);
}

.sn-property-overview__copy > p {
  margin: 0 0 var(--sn-space-4);
}

.sn-property-overview__copy > p:last-child {
  margin-bottom: 0;
}

/* Facts card: the three answers a guest looks for before reading anything. */
.sn-property-facts {
  display: grid;
  gap: var(--sn-space-5);
  margin: 0;
  padding: var(--sn-space-6);
  background-color: var(--sn-white);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius-lg);
}

.sn-property-fact {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--sn-space-3);
}

.sn-property-fact__icon {
  grid-row: 1 / span 2;
  align-self: start;
  color: var(--sn-orange-ink);
}

.sn-property-fact__icon svg {
  width: 20px;
  height: 20px;
}

.sn-property-fact__label {
  margin: 0;
  font-size: var(--sn-label);
  letter-spacing: var(--sn-tracking-label);
  text-transform: uppercase;
  color: var(--sn-text-muted);
}

.sn-property-fact__value {
  margin: 2px 0 0;
  font-size: var(--sn-body);
  color: var(--sn-text);
}

/* ---------------------------------------------------------------------
   Configurations
   --------------------------------------------------------------------- */

/*
 * Here the unit count is the headline and the note beneath it is quiet
 * supporting text — the reverse of the homepage module, where the guest
 * number is the thing being sold.
 */
.sn-config-grid {
  gap: 0 var(--sn-space-7);
}

.sn-config-grid .sn-config {
  display: flex;
  flex-direction: column;
  padding: var(--sn-space-6) 0 var(--sn-space-5);
  background: none;
  border: 0;
  border-top: 1px solid var(--sn-border);
  border-radius: 0;
  text-align: left;
}

.sn-config-grid .sn-config__count {
  order: -1;
  margin: 0 0 var(--sn-space-4);
  font-family: var(--sn-font-display);
  font-size: var(--sn-display-l);
  line-height: 1;
  color: var(--sn-orange);
}

.sn-config-grid .sn-config__who {
  margin: 0;
  font-family: var(--sn-font-display);
  font-size: var(--sn-heading-m);
  font-weight: 400;
  line-height: 1.2;
  color: var(--sn-text);
}

.sn-config-grid .sn-config__size {
  margin-top: var(--sn-space-2);
  font-family: var(--sn-font-body);
  font-size: var(--sn-body);
  line-height: var(--sn-leading-body);
  color: var(--sn-text-muted);
}

/* Inverse variant, used on the green "Stay Together" band of Our Stays. */
.sn-config--inverse {
  padding: var(--sn-space-6) var(--sn-space-5);
  background-color: transparent;
  border-color: var(--sn-border-inverse);
}

.sn-config--inverse .sn-config__who {
  margin: 0 0 var(--sn-space-3);
  font-family: var(--sn-font-display);
  font-size: var(--sn-heading-m);
  font-weight: 400;
  line-height: 1.2;
  color: var(--sn-text-inverse);
}

.sn-config--inverse .sn-config__size {
  font-family: var(--sn-font-body);
  font-size: var(--sn-body);
  line-height: var(--sn-leading-body);
  color: var(--sn-text-inverse-muted);
}

/* ---------------------------------------------------------------------
   Amenities
   --------------------------------------------------------------------- */

/*
 * The label carries the meaning; the icon is decoration. An amenity with no
 * icon still lines up, because the icon box keeps its width either way.
 */
.sn-amenity__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 24px;
  justify-content: center;
  color: var(--sn-orange-ink);
}

.sn-amenity__label {
  min-width: 0;
}

/* ---------------------------------------------------------------------
   Gallery
   --------------------------------------------------------------------- */

/*
 * Two columns on a phone. A twelve-image gallery at one tile per row is most of
 * the page's scroll depth, and the tiles are an index into the lightbox rather
 * than the place the photographs are actually viewed.
 */
@media (max-width: 719px) {
  .sn-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * Fixed column counts: with auto-fill the lead tile's square ratio set the
 * row height and left a void under every small tile. Here the small tiles
 * set the row and the lead simply spans two of them.
 */
@media (min-width: 720px) {
  .sn-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sn-space-4);
  }

  .sn-gallery__item:first-child {
    aspect-ratio: auto;
  }
}

@media (min-width: 1024px) {
  .sn-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.sn-gallery__link {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.sn-gallery__link img {
  transition: transform var(--sn-duration) var(--sn-ease);
}

@media (hover: hover) {
  .sn-gallery__link:hover img {
    transform: scale(1.03);
  }
}

/* ---------------------------------------------------------------------
   Gallery lightbox
   ---------------------------------------------------------------------
   Built by gallery.js and never present without JavaScript, so nothing
   here can affect the no-JS path.
   --------------------------------------------------------------------- */

.sn-lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  background-color: var(--sn-green-dark);
  border: 0;
}

.sn-lightbox::backdrop {
  background-color: rgb(0 28 23 / 92%);
}

.sn-lightbox__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: calc(var(--sn-tap-target) + var(--sn-space-4));
}

.sn-lightbox__figure img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sn-lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sn-tap-target);
  min-height: var(--sn-tap-target);
  padding: 0;
  font-family: var(--sn-font-body);
  font-size: 22px;
  line-height: 1;
  color: var(--sn-text-inverse);
  background-color: rgb(255 255 255 / 12%);
  border: 1px solid var(--sn-border-inverse);
  border-radius: var(--sn-radius-pill);
  cursor: pointer;
}

.sn-lightbox__btn:hover {
  background-color: rgb(255 255 255 / 22%);
}

.sn-lightbox__btn:focus-visible {
  outline: var(--sn-focus-ring);
  outline-offset: var(--sn-focus-offset);
}

.sn-lightbox__close { top: var(--sn-space-4); right: var(--sn-space-4); }
.sn-lightbox__prev  { top: 50%; left: var(--sn-space-4); transform: translateY(-50%); }
.sn-lightbox__next  { top: 50%; right: var(--sn-space-4); transform: translateY(-50%); }

.sn-lightbox__count {
  position: absolute;
  bottom: var(--sn-space-4);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--sn-label);
  letter-spacing: var(--sn-tracking-label);
  color: var(--sn-text-inverse-muted);
}

/* ---------------------------------------------------------------------
   Booking
   --------------------------------------------------------------------- */

.sn-btn-group--center {
  justify-content: center;
}

.sn-booking-links {
  margin-top: var(--sn-space-8);
  padding-top: var(--sn-space-6);
  border-top: 1px solid var(--sn-border);
}

.sn-booking-links__title {
  margin: 0 0 var(--sn-space-3);
  font-family: var(--sn-font-body);
  font-size: var(--sn-label);
  font-weight: var(--sn-weight-medium);
  letter-spacing: var(--sn-tracking-label);
  text-transform: uppercase;
  color: var(--sn-text-muted);
}

.sn-booking-links__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sn-space-3) var(--sn-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sn-booking-links__list > li {
  margin: 0;
}

/* ---------------------------------------------------------------------
   Location
   --------------------------------------------------------------------- */

.sn-property-location {
  display: grid;
  gap: var(--sn-space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .sn-property-location {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--sn-space-9);
  }
}

.sn-property-location--no-map {
  grid-template-columns: minmax(0, 1fr);
}

.sn-property-location--no-map .sn-property-location__copy {
  max-width: 60ch;
}

.sn-property-location__map {
  aspect-ratio: var(--sn-ratio-property);
  overflow: hidden;
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius-lg);
}

.sn-property-location__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------------------------------------------------------------------
   Our Stays — property cards
   --------------------------------------------------------------------- */

/*
 * The visible "Explore …" affordance is aria-hidden decoration; the card
 * title already carries the real link. Stretching that link across the card
 * makes the whole tile clickable without announcing the same destination
 * to a screen reader twice.
 */
.sn-card--property {
  position: relative;
}

.sn-card--property .sn-card__media {
  aspect-ratio: var(--sn-ratio-property);
}

.sn-card--property .sn-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sn-card__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sn-space-2) var(--sn-space-4);
  margin: var(--sn-space-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--sn-small);
  color: var(--sn-text-muted);
}

.sn-card__highlights > li {
  margin: 0;
}

/* ---------------------------------------------------------------------
   Our Stays — planner
   --------------------------------------------------------------------- */

.sn-stays-planner {
  position: relative;
  padding-block: calc(var(--sn-header-height) + var(--sn-space-8)) var(--sn-section-y);
  overflow: hidden;
  isolation: isolate;
}

/* The planner opens the page, so it gets the pool behind it — darkened
 * evenly, since a form needs a calm ground rather than a vignette. */
.sn-stays-planner__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.sn-stays-planner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sn-stays-planner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 28 23 / 86%) 0%, rgb(0 28 23 / 78%) 100%);
}

/* ---------------------------------------------------------------------
   Our Stays — property listing
   Ruled editorial rows rather than boxed cards: photograph on the left,
   the words on the right. A property without photography (El Sereno)
   simply has no left column, so nothing sits empty beside its copy.
   --------------------------------------------------------------------- */

.sn-listing {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sn-listing__item {
  position: relative;
  display: grid;
  gap: var(--sn-space-6);
  padding-block: var(--sn-space-7);
  border-top: 1px solid var(--sn-border);
}

.sn-listing__item:last-child {
  border-bottom: 1px solid var(--sn-border);
}

.sn-listing__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--sn-radius-lg);
  background-color: var(--sn-sand);
}

.sn-listing__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sn-duration) var(--sn-ease);
}

.sn-listing__item:hover .sn-listing__media img {
  transform: scale(1.03);
}

.sn-listing__body {
  display: flex;
  flex-direction: column;
  gap: var(--sn-space-4);
  max-width: 40rem;
}

.sn-listing__meta {
  order: -1;
  margin: 0;
  font-size: var(--sn-small);
  color: var(--sn-text-muted);
}

.sn-listing__title {
  margin: 0;
  font-family: var(--sn-font-display);
  font-size: var(--sn-heading-l);
  font-weight: 400;
  line-height: 1.15;
}

.sn-listing__title a {
  color: var(--sn-text);
  text-decoration: none;
}

/* Whole row is the target. */
.sn-listing__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sn-listing__item:hover .sn-listing__title a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.sn-listing__text {
  margin: 0;
  font-size: var(--sn-body);
  line-height: var(--sn-leading-body);
  color: var(--sn-text-muted);
}

.sn-listing__body .sn-card__highlights {
  margin-top: 0;
}

.sn-listing__footer {
  margin: var(--sn-space-2) 0 0;
}

.sn-listing__item:focus-within {
  outline: 3px solid var(--sn-orange);
  outline-offset: 6px;
  border-radius: var(--sn-radius-sm);
}

@media (min-width: 900px) {
  .sn-listing__item {
    grid-template-columns: 7fr 5fr;
    gap: var(--sn-space-8);
    align-items: center;
    padding-block: var(--sn-space-8);
  }

  .sn-listing__item--no-media {
    grid-template-columns: 1fr;
  }

  .sn-listing__item--no-media .sn-listing__body {
    max-width: 60ch;
  }
}

.sn-planner {
  margin-top: var(--sn-space-7);
  text-align: center;
}

.sn-planner .sn-form__row {
  display: grid;
  grid-template-columns: 1fr; /* two selects side by side squeeze the guest labels on phones */
  gap: var(--sn-space-5);
  text-align: start;
}

@media (min-width: 640px) {
  .sn-planner .sn-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sn-planner .sn-field__label {
  color: var(--sn-text-inverse);
}

.sn-planner .sn-btn {
  margin-top: var(--sn-space-6);
}

.sn-field__hint--inverse {
  color: var(--sn-text-inverse-muted);
}

/* ---------------------------------------------------------------------
   Our Stays — add-on chips
   --------------------------------------------------------------------- */

.sn-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sn-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sn-chip {
  margin: 0;
  padding: 12px 20px;
  font-size: var(--sn-body);
  color: var(--sn-text);
  background-color: var(--sn-white);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius-pill);
}

/* ---------------------------------------------------------------------
   Our Stays — attractions
   --------------------------------------------------------------------- */

/*
 * No destination photography has been supplied for these six categories, so
 * the cards are typographic and need their own padding — the shared card
 * rules assume a media block sitting above the body.
 */
.sn-card--attraction .sn-card__body {
  padding: var(--sn-space-6);
}

.sn-card--attraction .sn-plain-list {
  margin-top: var(--sn-space-3);
  font-size: var(--sn-body);
  line-height: var(--sn-leading-body);
  color: var(--sn-text-muted);
}

.sn-card--attraction .sn-plain-list > li + li {
  margin-top: var(--sn-space-2);
}

/* ---------------------------------------------------------------------
   Stay Your Way — configuration cards (moved from home.css)
   --------------------------------------------------------------------- */

.sn-config {
  padding: var(--sn-space-7) var(--sn-space-6);
  background-color: var(--sn-white);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius-lg);
  text-align: center;
}

.sn-config__size {
  margin: 0;
  font-family: var(--sn-font-display);
  font-size: var(--sn-display-l);
  line-height: 1;
  color: var(--sn-orange-ink);
}

.sn-config__who {
  margin: var(--sn-space-4) 0 0;
  font-size: var(--sn-body);
  color: var(--sn-text);
}

.sn-config__count {
  margin: var(--sn-space-1) 0 0;
  font-size: var(--sn-body);
  color: var(--sn-text-muted);
}