/* ═══════════════════════════════════════════════════════════════════════════
   Page block styling
   ───────────────────────────────────────────────────────────────────────────
   Visual treatment for the recurring blocks in the Elementor pages. The rule
   is: Elementor holds structure and content, this file holds the look. That
   keeps the imported templates small, keeps every page consistent, and means
   editing text in Elementor cannot break the design.

   Add these as CSS Classes on a container or widget
   (Advanced → CSS Classes).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── .gm-hero ─────────────────────────────────────────────────────────────
   A full-bleed photo hero. Put the photograph on the container's own
   Background, then add this class; it supplies the scrim and the height so
   every hero on the site matches. */

.gm-hero {
  position: relative;
  min-height: min(94svh, 900px);
  isolation: isolate;
}

.gm-hero--short { min-height: min(70svh, 660px); }

.gm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(12, 20, 28, 0.66) 0%,
      rgba(12, 20, 28, 0.30) 44%,
      rgba(12, 20, 28, 0.00) 74%),
    linear-gradient(to bottom,
      rgba(12, 20, 28, 0.62) 0%,
      rgba(12, 20, 28, 0.18) 32%,
      rgba(12, 20, 28, 0.55) 68%,
      rgba(12, 20, 28, 0.94) 100%);
}

/* Everything inside a hero sits on the dark scrim. */
.gm-hero, .gm-hero h1, .gm-hero h2, .gm-hero h3, .gm-hero p { color: var(--gm-canvas); }
.gm-hero .gm-lede, .gm-hero .gm-lede p { color: rgba(233, 222, 203, 0.86); }

/* ── .gm-hero-strip ───────────────────────────────────────────────────────
   The mono fact line across the foot of the hero. Apply to a Text Editor
   widget holding one line with · separators. */

.gm-hero-strip {
  border-top: 1px solid rgba(233, 222, 203, 0.22);
  padding-top: 1.05rem;
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
}
.gm-hero-strip, .gm-hero-strip p {
  font-family: var(--gm-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(233, 222, 203, 0.78);
  margin: 0;
}

/* ── .gm-figures ──────────────────────────────────────────────────────────
   The stat tiles. Apply to a container holding one .gm-figure per tile. */

.gm-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--gm-rule-on-light);
  border: 1px solid var(--gm-rule-on-light);
}

.gm-figure {
  background: var(--gm-canvas);
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
}
.gm-figure--wide { grid-column: 1 / -1; }

/* The tile's number is the first line, its label the second. Written as a
   Text Editor with the number in <strong>. */
.gm-figure strong {
  display: block;
  font-family: var(--gm-font-display);
  font-weight: 700;
  font-size: clamp(1.85rem, 3.4vw, 2.9rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--gm-ink);
}
.gm-figure span,
.gm-figure em {
  display: block;
  font-family: var(--gm-font-mono);
  font-style: normal;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gm-muted-on-light);
  margin-top: 0.7rem;
}
.gm-figure--accent strong { color: var(--gm-clay); }

.gm-dark .gm-figures, .gm-dark-raised .gm-figures {
  background: var(--gm-rule-on-dark);
  border-color: var(--gm-rule-on-dark);
}
.gm-dark .gm-figure, .gm-dark-raised .gm-figure { background: var(--gm-ink); }
.gm-dark .gm-figure strong { color: var(--gm-canvas); }
.gm-dark .gm-figure--accent strong { color: var(--gm-clay-lit); }
.gm-dark .gm-figure span, .gm-dark .gm-figure em { color: var(--gm-muted-on-dark); }

/* ── .gm-shot ─────────────────────────────────────────────────────────────
   A photo with a caption laid over its foot. Apply to a container that holds
   an Image widget then a Text Editor with the .gm-shot-cap class. */

.gm-shot { position: relative; overflow: hidden; }
.gm-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Portrait crop, for the three-up strip on the grounds. */
.gm-shot--tall img { aspect-ratio: 4 / 5; }

.gm-shot-cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 4.5rem 1.1rem 1.2rem;
  /* these sit over sunlit grass and sand, so the scrim has to carry */
  background: linear-gradient(to top,
    rgba(12, 20, 28, 0.95) 0%,
    rgba(12, 20, 28, 0.80) 38%,
    rgba(12, 20, 28, 0.00) 100%);
}
.gm-shot-cap strong {
  display: block;
  font-family: var(--gm-font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gm-firefly);
  margin-bottom: 0.3rem;
}
.gm-shot-cap, .gm-shot-cap p {
  color: var(--gm-canvas);
  font-size: 0.95rem;
  margin: 0;
}

/* ── .gm-card ─────────────────────────────────────────────────────────────
   The bordered card used for area highlights and the managed properties. */

.gm-card {
  border: 1px solid var(--gm-rule-on-light);
  background: #FFFFFF;
  overflow: hidden;
}
.gm-dark .gm-card { background: var(--gm-ink-2); border-color: var(--gm-rule-on-dark); }
.gm-dark-raised .gm-card { background: var(--gm-ink-3); border-color: var(--gm-rule-on-dark); }

/* ── .gm-ph ───────────────────────────────────────────────────────────────
   Placeholder for a photograph that does not exist yet. Apply to a Text
   Editor; it draws the hatched box so nobody mistakes it for a broken image. */

.gm-ph {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg,
      rgba(138, 165, 177, 0.07) 0 12px,
      transparent 12px 24px),
    var(--gm-ink-3);
  border-bottom: 1px solid var(--gm-rule-on-dark);
}
.gm-ph, .gm-ph p {
  font-family: var(--gm-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gm-water);
  margin: 0;
}

/* Dashed underline marking text that is still a placeholder. */
.gm-ph-text {
  border-bottom: 1px dashed rgba(138, 165, 177, 0.55);
  color: var(--gm-water);
}

/* ── .gm-spec ─────────────────────────────────────────────────────────────
   The key/value spec rows on the property blocks. Apply to a Text Editor
   holding a <dl>, or a table. */

.gm-spec { border-top: 1px solid var(--gm-rule-on-light); margin: 0; }
.gm-dark .gm-spec, .gm-dark-raised .gm-spec { border-top-color: var(--gm-rule-on-dark); }

.gm-spec table { width: 100%; border-collapse: collapse; }
.gm-spec td {
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--gm-rule-on-light);
  vertical-align: baseline;
}
.gm-dark .gm-spec td, .gm-dark-raised .gm-spec td { border-bottom-color: var(--gm-rule-on-dark); }

.gm-spec td:first-child {
  width: 40%;
  font-family: var(--gm-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gm-muted-on-light);
}
.gm-dark .gm-spec td:first-child { color: var(--gm-muted-on-dark); }

/* ── .gm-amenities ────────────────────────────────────────────────────────
   Two-column bulleted list with clay dots. Apply to a Text Editor holding
   a <ul>. */

.gm-amenities ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.55rem 1.75rem;
}
.gm-amenities li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.98rem;
  line-height: 1.5;
}
.gm-amenities li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gm-clay);
}

/* ── .gm-badge ────────────────────────────────────────────────────────────
   The small pill laid over the corner of a property photo. */

.gm-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  background: rgba(12, 20, 28, 0.82);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
}
.gm-badge, .gm-badge p {
  font-family: var(--gm-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gm-canvas);
  margin: 0;
}

/* ── .gm-gallery ──────────────────────────────────────────────────────────
   The photo mosaic on the property and grounds pages. Put this on a container
   holding .gm-shot children; the grid replaces Elementor's flex layout.

   Rows are a fixed track rather than content-sized. Content-sized rows let a
   span-2 tile stretch its neighbors taller than their images, which drops the
   overlaid captions below the photograph instead of onto it. */

.gm-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: clamp(7.5rem, 12vw, 12rem);
  gap: clamp(0.4rem, 0.9vw, 0.85rem);
}

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

.gm-gallery .gm-shot { grid-row: span 2; height: 100%; }
.gm-gallery .gm-shot--hero { grid-column: span 2; grid-row: span 4; }
.gm-gallery .gm-shot--wide { grid-column: span 2; }
.gm-gallery .gm-shot--tall { grid-row: span 3; }

/* The image has to fill the tile for the caption to sit on the photograph. */
.gm-gallery .gm-shot .elementor-widget-image,
.gm-gallery .gm-shot .elementor-widget-image .elementor-widget-container { height: 100%; }
.gm-gallery .gm-shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }

/* Gallery captions are quieter than the grounds strip: they only need to name
   the room, so they sit on a shorter scrim. */
.gm-shot-cap--sm {
  padding: 2.6rem 0.9rem 0.75rem;
}
.gm-shot-cap--sm, .gm-shot-cap--sm p {
  font-family: var(--gm-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ── .gm-trip ─────────────────────────────────────────────────────────────
   A row on the area guide: drive time, the entry, and an optional photograph.
   Applied to the row container; its columns are plain. */

.gm-trip { border-bottom: 1px solid var(--gm-rule-on-light); }
.gm-trip:first-of-type { border-top: 1px solid var(--gm-rule-on-light); }
.gm-dark .gm-trip, .gm-dark-raised .gm-trip { border-color: var(--gm-rule-on-dark); }

.gm-trip-drive, .gm-trip-drive p {
  font-family: var(--gm-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gm-clay);
  margin: 0;
}
.gm-trip-tag, .gm-trip-tag p {
  font-family: var(--gm-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gm-muted-on-light);
  margin: 0;
}

/* Credit line under a licensed photograph. */
.gm-credit, .gm-credit p {
  font-family: var(--gm-font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gm-muted-on-light);
  line-height: 1.6;
  margin: 0;
}
.gm-dark .gm-credit, .gm-dark .gm-credit p { color: var(--gm-muted-on-dark); }

/* Credits list at the foot of the area guide. */
.gm-credits ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.gm-credits li {
  font-family: var(--gm-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--gm-muted-on-light);
}
.gm-credits a { color: var(--gm-clay); text-decoration: underline; text-underline-offset: 2px; }

/* ── .gm-embed-note ───────────────────────────────────────────────────────
   Stands in for a third-party embed that has not been pointed at a real
   endpoint yet, so an unconfigured page reads as unfinished rather than
   broken. Delete the markup once the embed is live. */

.gm-embed-note {
  min-height: 22rem;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.6rem;
  padding: 2.5rem;
  border: 1px dashed rgba(138, 165, 177, 0.45);
  background:
    repeating-linear-gradient(135deg,
      rgba(138, 165, 177, 0.06) 0 12px,
      transparent 12px 24px);
}
.gm-embed-note strong {
  font-family: var(--gm-font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gm-firefly);
}
.gm-embed-note p {
  font-size: 0.95rem;
  color: var(--gm-muted-on-dark);
  margin: 0;
  max-width: 26em;
}

/* ── .gm-quote ────────────────────────────────────────────────────────────
   A guest review. Clay rule above, the words in the body face, the
   attribution in mono — the same grammar as .gm-callout so it reads as part
   of the same family rather than a bolted-on widget. */

.gm-quote { border-top: 2px solid var(--gm-clay); padding-top: 1.4rem; }

.gm-quote-text, .gm-quote-text p {
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.55;
  margin: 0;
}

.gm-quote-by, .gm-quote-by p {
  font-family: var(--gm-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gm-muted-on-light);
  margin: 0;
}
.gm-dark .gm-quote-by, .gm-dark .gm-quote-by p,
.gm-dark-raised .gm-quote-by, .gm-dark-raised .gm-quote-by p { color: var(--gm-muted-on-dark); }

/* Card photographs come from different sources with different aspect ratios,
   so pin them to one shape or the cards in a row will not line up. */
.gm-card .gm-shot img { aspect-ratio: 16 / 10; object-fit: cover; }

/* ── .gm-stay ─────────────────────────────────────────────────────────────
   Minimum stay across the year, as a twelve-month strip.

   A four-row table of date ranges makes a guest do the work: find their month
   inside a range, then read across. A month-per-cell strip answers the only
   question they actually have — "I want to come in June, how many nights?" —
   without reading anything. It also makes the shape of the season visible at a
   glance, which a list of ranges hides.

   Apply to a Text Editor holding a <ul>, one <li> per month:
     <li><span>Jan</span><b>2</b><i>nights</i></li>
   Months that split weekday/weekend carry two b+i pairs and .is-split.
   Peak months carry .is-peak for the tint. */

.gm-stay ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  background: var(--gm-rule-on-light);
  border: 1px solid var(--gm-rule-on-light);
}

.gm-stay li {
  background: var(--gm-canvas);
  padding: 0.9rem 0.5rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

/* The busy season, tinted so its shape reads without counting. */
.gm-stay li.is-peak { background: color-mix(in srgb, var(--gm-clay) 9%, var(--gm-canvas)); }

.gm-stay li span {
  font-family: var(--gm-font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gm-muted-on-light);
  margin-bottom: 0.45rem;
}

.gm-stay li b {
  font-family: var(--gm-font-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gm-ink);
}
.gm-stay li.is-peak b { color: var(--gm-clay); }

.gm-stay li i {
  font-family: var(--gm-font-mono);
  font-style: normal;
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gm-muted-on-light);
  margin-bottom: 0.35rem;
}
.gm-stay li i:last-child { margin-bottom: 0; }

/* Split months stack two values, so they need a little more room. */
.gm-stay li.is-split b { font-size: 1.25rem; }

/* Twelve across is unreadable on a phone; six, then four. */
@media (max-width: 900px) {
  .gm-stay ul { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .gm-stay ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.gm-dark .gm-stay ul, .gm-dark-raised .gm-stay ul {
  background: var(--gm-rule-on-dark);
  border-color: var(--gm-rule-on-dark);
}
.gm-dark .gm-stay li { background: var(--gm-ink); }
.gm-dark .gm-stay li.is-peak { background: color-mix(in srgb, var(--gm-clay) 16%, var(--gm-ink)); }
.gm-dark .gm-stay li b { color: var(--gm-canvas); }
.gm-dark .gm-stay li.is-peak b { color: var(--gm-clay-lit); }
.gm-dark .gm-stay li span, .gm-dark .gm-stay li i { color: var(--gm-muted-on-dark); }

/* ── Dome tour videos ─────────────────────────────────────────────────────
   The source files are 568x320. Capping the player at that width keeps them
   sharp; letting them fill the column would upscale by more than double and
   the softness would be the first thing anyone noticed. */
.gm-video {
  margin: 0;
  max-width: 568px;
}

.gm-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: var(--gm-ink, #0C141C);
}

.gm-video figcaption {
  font-family: var(--gm-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gm-muted-on-light);
  margin-top: 0.7rem;
}

.gm-dark .gm-video figcaption,
.gm-dark-raised .gm-video figcaption { color: var(--gm-muted-on-dark); }

/* ── Legibility floor on phones ───────────────────────────────────────────
   The mono micro-type is a deliberate device at desktop sizes, where it sits
   beside 60ch of body copy and reads as a caption rather than as text. On a
   390px screen the same sizes land between 8px and 10px, which is below what
   is comfortably readable, so the smallest tiers are raised to an 11px floor.

   Only the sub-11px tiers move. Everything already at 0.6875rem is left
   alone, which keeps the size relationships between the tiers intact instead
   of flattening them all to one size. */
@media (max-width: 560px) {
  .gm-figure span,
  .gm-figure em,
  .gm-ph, .gm-ph p,
  .gm-spec td:first-child,
  .gm-badge, .gm-badge p,
  .gm-shot-cap--sm, .gm-shot-cap--sm p,
  .gm-trip-tag, .gm-trip-tag p,
  .gm-credit, .gm-credit p,
  .gm-video figcaption,
  .gm-label, .gm-label p {
    font-size: 0.6875rem;
  }

  /* The nights-per-month strip: four cells across at this width, so there is
     room for both tiers to come up without the grid reflowing. */
  .gm-stay li span { font-size: 0.625rem; }
  .gm-stay li i    { font-size: 0.625rem; }
}