/* ── Glass ─────────────────────────────────────────────────────────────────
   The frosted-panel material. Three uses only — the hero frame, the booking
   bar and the proof strip — because a material used everywhere stops being a
   material and starts being a filter.

   `backdrop-filter` is not universal. Every glass surface therefore begins as
   a solid tinted panel and is *upgraded* to a blurred translucent one only
   where support is confirmed, so nothing ever renders as unreadable text on a
   bare photograph.
   ------------------------------------------------------------------------ */

.glass {
  background: var(--glass-solid);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-card);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }
}

/* ── The hero frame ────────────────────────────────────────────────────────
   A rounded hairline inset from the viewport edge, holding the nav and the
   headline over the photograph. Outline only — no fill, or it fogs the image.
   -------------------------------------------------------------------------- */
.frame {
  position: absolute;
  inset: var(--frame);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--r-frame);
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 40rem) {
  .frame { border-radius: 18px; }
}

/* ── Scrim ────────────────────────────────────────────────────────────────
   Sits between photograph and type.

   Two layers. The horizontal one is the important one: all the type on these
   screens is set left, and a photograph is free to be bright exactly there —
   the aerial of the spit puts sunlit water and sand right behind the
   coordinates. So the left third always gets a dark bed, and the copy stays
   legible no matter which picture is dropped in behind it. The vertical layer
   then anchors the top for the nav bar and the bottom for the booking bar.
   -------------------------------------------------------------------------- */
.scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(6, 33, 46, 0.82) 0%,
      rgba(6, 33, 46, 0.62) 26%,
      rgba(6, 33, 46, 0.26) 52%,
      rgba(6, 33, 46, 0.00) 76%),
    linear-gradient(to bottom,
      rgba(6, 33, 46, 0.52) 0%,
      rgba(6, 33, 46, 0.10) 22%,
      rgba(6, 33, 46, 0.10) 45%,
      rgba(6, 33, 46, 0.58) 78%,
      rgba(6, 33, 46, 0.86) 100%);
}

/* Nothing is set left on a phone in the same way — the copy spans the column,
   so the side wash would just mute the picture. Flatten it there. */
@media (max-width: 40rem) {
  .scrim {
    background:
      linear-gradient(to bottom,
        rgba(6, 33, 46, 0.62) 0%,
        rgba(6, 33, 46, 0.34) 30%,
        rgba(6, 33, 46, 0.42) 55%,
        rgba(6, 33, 46, 0.74) 80%,
        rgba(6, 33, 46, 0.9) 100%);
  }
}