/* ==========================================================================
   Hotels & Villas

   Somewhere to sleep is chosen differently again. Not a directory of details
   like the restaurants, and not a wall of photographs like the activities:
   people want to see the room and then read a line about it, so this is a
   photograph with the writing beneath it, in a calmer, roomier grid.

   One thing leads the page, full width, and it says why it is there.
   ========================================================================== */

.stay {
  --stay-purple: #7f3f98;
  --stay-ink:    #2b2530;
  --stay-soft:   #6d6577;
  --stay-line:   #e7e2ec;
  --stay-sand:   #faf7f2;
  --stay-sea:    #1c6b7a;

  padding: 26px 16px 72px;
  background: var(--stay-sand);
  color: var(--stay-ink);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

.stay-inner { width: 100%; max-width: 1180px; margin: 0 auto; }

/* ---------------------------------------------------------------- head -- */

.stay-head { max-width: 62ch; margin-bottom: 22px; }
.stay-head h1 {
  margin: 0;
  font-family: "Amatic SC", cursive;
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 700;
  line-height: .9;
  color: var(--stay-purple);
}
.stay-head p { margin: 10px 0 0; font-size: 1rem; line-height: 1.65; color: var(--stay-soft); }

/* ---------------------------------------------------------------- hero -- */

/* The width of the page, and tall enough to be the whole first impression.
   Everything else on this page is a card; this deliberately is not one. */
.stay-hero {
  position: relative;
  display: block;
  margin-bottom: 26px;
  aspect-ratio: 21 / 9;
  min-height: 340px;
  max-height: 62vh;
  overflow: hidden;
  border-radius: 22px;
  background: #17121c;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 26px rgba(43, 37, 48, .2);
}
@supports not (aspect-ratio: 21 / 9) {
  .stay-hero { height: 460px; }
}

.stay-hero-media { position: absolute; inset: 0; }
.stay-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease;
}
.stay-hero:hover .stay-hero-media img { transform: scale(1.04); }

/* Weighted along the bottom and the left, where the words are, so the rest of
   the photograph stays a photograph. */
.stay-hero-veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 38px;
  background:
    linear-gradient(to top, rgba(12, 9, 15, .86) 0%, rgba(12, 9, 15, .5) 34%,
                    rgba(12, 9, 15, .12) 62%, transparent 84%),
    linear-gradient(to right, rgba(12, 9, 15, .5) 0%, transparent 55%);
}

.stay-hero-words { display: block; max-width: 34ch; }

.stay-hero-words h2 {
  margin: 0;
  font-family: "Amatic SC", cursive;
  font-size: clamp(3.2rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: .88;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .4);
}

.stay-hero-line {
  display: block;
  margin-top: 10px;
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, .93);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

.stay-hero-cta {
  display: inline-block;
  margin-top: 18px;
  padding: 11px 24px;
  border-radius: 999px;
  background: #fff;
  color: var(--stay-ink);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
  transition: transform .16s ease;
}
.stay-hero:hover .stay-hero-cta { transform: translateX(3px); }

@media (max-width: 640px) {
  .stay-hero { aspect-ratio: 4 / 5; max-height: none; }
  .stay-hero-veil { padding: 24px; }
}

/* -------------------------------------------------------------- filter -- */

.stay-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--stay-line);
}
.stay-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--stay-line);
  background: #fff;
  color: var(--stay-ink);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.stay-pill:hover { border-color: var(--stay-soft); }
.stay-pill.is-active { background: var(--stay-purple); border-color: var(--stay-purple); color: #fff; }
.stay-pill-n { font-size: .75rem; opacity: .62; }

/* ------------------------------------------------------------- section -- */

.stay-section {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 34px 0 16px;
}
.stay-section h2 {
  margin: 0;
  font-family: "Amatic SC", cursive;
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--stay-purple);
}
.stay-section-n {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--stay-soft);
}

/* --------------------------------------------------------------- cards -- */

/* Not the restaurant card again.
 *
 * Where to Eat is a photograph with the details underneath, and it is right for
 * comparing fifty-eight places on their particulars. Nineteen places to sleep
 * is a different problem: there are few enough to give each one room, and the
 * room is the thing being sold, so the pictures are tall and the writing sits
 * on a panel that overlaps them -- the way a printed guide would set it.
 *
 * The second column is dropped down the page, which weaves the two together and
 * takes the grid-ruled look off it. That is the whole trick, and it costs one
 * rule. */
.stay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px 26px;
  align-items: start;
}

.stay-card {
  position: relative;
  display: block;
  color: var(--stay-ink);
  text-decoration: none;
  transition: transform .2s ease;
}
.stay-card:hover { transform: translateY(-5px); color: var(--stay-ink); }

/* Every other one sits lower, so the rows do not read as rows. Only where
   there is more than one column to weave. */
@media (min-width: 660px) {
  .stay-card:nth-child(even) { margin-top: 44px; }
}

.stay-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 18px;
  background: var(--stay-sand);
  box-shadow: 0 4px 18px rgba(43, 37, 48, .14);
}
@supports not (aspect-ratio: 4 / 5) {
  .stay-media { height: 0; padding-bottom: 125%; }
}
.stay-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s ease;
}
.stay-card:hover .stay-media img { transform: scale(1.05); }

.stay-media-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, #f2eef6 0 12px, #ece7f2 12px 24px);
  color: var(--stay-soft);
  font-size: .8125rem;
}

/* The panel. Pulled up over the foot of the photograph and inset from its
   edges, so the two overlap rather than sit in a stack. */
.stay-body {
  position: relative;
  display: block;
  width: calc(100% - 32px);
  margin: -46px auto 0;
  padding: 16px 18px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--stay-line);
  box-shadow: 0 6px 20px rgba(43, 37, 48, .10);
  transition: box-shadow .2s ease;
}
.stay-card:hover .stay-body { box-shadow: 0 12px 30px rgba(43, 37, 48, .18); }

.stay-name {
  margin: 0;
  font-family: "Amatic SC", cursive;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--stay-ink);
}

.stay-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 7px;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--stay-soft);
}

/* ------------------------------------------------------------- editing -- */

.stay-del {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(192, 85, 74, .95);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}
.stay-card:hover .stay-del,
body.cms-editing .stay-del { opacity: 1; }

.stay-size {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: none;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(23, 18, 28, .82);
}
body.cms-editing .stay-size { display: flex; }
.stay-size button {
  min-width: 26px;
  height: 24px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .75);
  font-size: .6875rem;
  font-weight: 700;
  cursor: pointer;
}
.stay-size button[aria-pressed="true"] { background: #fff; color: #2b2530; }

.stay-img-del {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 3;
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(23, 18, 28, .8);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  cursor: pointer;
  display: none;
}
body.cms-editing .stay-img-del { display: block; }

.stay-add {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border: 2px dashed var(--stay-line);
  border-radius: 16px;
  background: #fff;
  color: var(--stay-soft);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
}
.stay-add:hover { border-color: var(--stay-purple); color: var(--stay-purple); }

.stay-addsection { margin: 18px 0 0; }
.stay-addsection button {
  padding: 9px 18px;
  border: 2px dashed #cfc6d8;
  border-radius: 999px;
  background: #fff;
  color: var(--stay-soft);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
}
.stay-addsection button:hover { border-color: var(--stay-purple); color: var(--stay-purple); }
body:not(.cms-editing) .stay-addsection { display: none; }

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 560px) {
  .stay { padding: 18px 12px 52px; }
  .stay-grid { grid-template-columns: 1fr; gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .stay-hero-media img, .stay-hero-cta, .stay-card, .stay-media img, .stay-body { transition: none; }
  .stay-card:hover { transform: none; }
  .stay-hero:hover .stay-hero-media img,
  .stay-hero:hover .stay-hero-cta { transform: none; }
  .stay-card:hover .stay-media img { transform: none; }
}