/* ==========================================================================
   DIA BONITO · stay.css
   The Houses: overview, alternating house sections, galleries, includes,
   how the island runs, exclusivity.
   Hero, breaks, and closing CTA come from style.css.
   ========================================================================== */

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

.overview {
  padding: clamp(96px, 14vw, 170px) 0 clamp(70px, 10vw, 120px);
}

.overview-body {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(21px, 3vw, 28px);
  line-height: 1.6;
  color: var(--bone);
  margin-bottom: 32px;
}

.overview-body:last-child {
  margin-bottom: 0;
  font-size: clamp(18px, 2.4vw, 22px);
  color: var(--bone-2);
}

/* --- House sections -------------------------------------------------------
   Text now sits inside a full-bleed .panel (see style.css); this class
   just keeps the copy a narrow readable column over the wide media. */

.house-section-text { max-width: 480px; }

.house-title {
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(34px, 5.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--bone);
}

.house-rule { margin: 32px 0; }

.house-body {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.75;
  color: var(--bone-2);
  margin-bottom: 22px;
}

.house-body:last-child { margin-bottom: 0; }

/* --- Galleries: .gallery / .gallery-grid / .gallery-item live in style.css
   (shared with Dining) ---------------------------------------------------- */

/* --- Includes ------------------------------------------------------------ */

.includes {
  padding: clamp(90px, 13vw, 160px) 0;
}

.includes-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  gap: 64px;
}

@media (min-width: 860px) {
  .includes-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(64px, 8vw, 120px);
  }
}

.includes-col {
  border-top: 1px solid var(--line);
  padding-top: 36px;
}

.includes-title {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(23px, 3vw, 29px);
  line-height: 1.25;
  color: var(--bone);
}

.includes-rule { margin: 26px 0 10px; }

.includes-list { list-style: none; }

.includes-list li {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--bone-2);
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}

.includes-list li:last-child { border-bottom: none; }

/* --- How the island runs ------------------------------------------------- */

.running {
  padding: clamp(90px, 13vw, 160px) 0;
  text-align: center;
}

.running-title {
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(28px, 4.6vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bone);
  text-shadow:
    0 1px 3px rgba(10, 19, 16, 0.9),
    0 2px 20px rgba(10, 19, 16, 0.7),
    0 4px 40px rgba(10, 19, 16, 0.5);
}

.running-rule { margin-top: 34px; margin-bottom: 40px; }

.running-body {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.8;
  color: var(--bone-2);
  max-width: 660px;
  margin: 0 auto;
  text-align: left;
}

/* --- One group at a time -------------------------------------------------- */

.exclusivity {
  padding: clamp(110px, 16vw, 190px) 0;
  text-align: center;
}

.exclusivity-title {
  font-family: var(--serif);
  font-weight: 320;
  font-size: clamp(38px, 7vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--bone);
  text-shadow:
    0 1px 3px rgba(10, 19, 16, 0.9),
    0 2px 20px rgba(10, 19, 16, 0.7),
    0 4px 40px rgba(10, 19, 16, 0.5);
}

.exclusivity-rule { margin-top: 38px; margin-bottom: 38px; }

.exclusivity-body {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(19px, 2.6vw, 24px);
  line-height: 1.6;
  color: var(--bone-2);
  max-width: 620px;
  margin: 0 auto;
}

/* --- The lay of the land (labelled aerial map) ---------------------------
   Pin positions live on each <li> in stay.html as --x / --y percentages of
   the photo; retune them there when the drone shot is replaced. The number
   circle is centered on the feature and the label hangs to its right. Below
   700px the labels hide and the numbered legend carries the names. */

.island-map {
  padding: clamp(72px, 10vw, 120px) 0;
}

.map-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lagoon);
  text-align: center;
  margin-bottom: 18px;
}

.map-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.1;
  color: var(--bone);
  text-align: center;
}

.map-lede {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--bone-2);
  text-align: center;
  max-width: 640px;
  margin: 18px auto 40px;
}

.map-figure {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid var(--line);
}

.map-image {
  display: block;
  width: 100%;
  height: auto;
}

.map-pins {
  list-style: none;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
}

.map-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-pin-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lagoon);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 26px;
  box-shadow: 0 0 0 3px rgba(10, 19, 16, 0.55);
}

.map-pin-label {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--bone);
  background: rgba(10, 19, 16, 0.72);
  padding: 5px 9px;
  white-space: nowrap;
}

/* Pins near the right edge carry their label on the left so it stays
   inside the figure. */
.map-pin-flip .map-pin-label {
  left: auto;
  right: calc(100% + 8px);
}

.map-legend {
  max-width: 1100px;
  margin: 22px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 28px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--bone-2);
  text-align: left;
}

.map-legend-num {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lagoon);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  line-height: 22px;
  margin-right: 10px;
}

@media (max-width: 700px) {
  .map-pin-label { display: none; }
  .map-pin-num {
    width: 22px;
    height: 22px;
    line-height: 22px;
  }
}