/* Holiday homes page. Everything else comes from /assets/site.css.
   The only thing this page needs that the shell doesn't have is the
   drawn tap marker on the Home Hub section. */

.hub-tap {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  margin-top: 2.5rem;
  padding: 1rem 1.4rem 1rem 1.1rem;
  border: 1px solid var(--hairline-on-ink);
  border-radius: var(--radius-card);
}

.hub-mark { width: 34px; height: 34px; color: var(--paper); }
.hub-mark .tap-dot { fill: var(--accent-on-ink); }

/* the rings leave the card the way they do on the hardware */
.hub-tap::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-on-ink);
  margin-left: .2rem;
}

@media (prefers-reduced-motion: no-preference) {
  .hub-mark { animation: hub-pulse 3.2s var(--ease-out) infinite; }
  @keyframes hub-pulse {
    0%, 70%, 100% { transform: scale(1); }
    12% { transform: scale(1.08); }
  }
}

/* A portrait photograph beside a short paragraph would otherwise run 750px tall
   at 1440 and leave the copy floating in the middle of an empty column, so the
   frame is capped and crops instead. */
@media (min-width: 980px) {
  .duo img { max-height: 26rem; }
}

/* The frames tucked into a sticky column (the website and Home Hub sections)
   need clear air above them, or they read as part of the paragraph. */
.split .frames { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem) !important; }