/* ==========================================================================
   Workspace page: light hero with a wide photo rising from the bottom edge,
   then the vision, gallery and workspaces sections shared with the home page.
   ========================================================================== */

/* ------------------------------------------------------------------ hero */
.ws-hero__box { display: flex; flex-direction: column; min-height: calc(100vh - 32px); }
.ws-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding: 130px 0 56px;
  max-width: 40em;
  position: relative;
  z-index: 2;
}
.ws-hero__title {
  margin: 0;
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  letter-spacing: var(--h1-ls);
  font-weight: var(--fw-medium);
}
.ws-hero__lead { margin: 0; max-width: 34em; color: var(--text-secondary); }
.ws-hero__buttons { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
/* ghost button on the light box */
.button--ghost-dark { color: var(--foreground); border-color: var(--foreground); }
.button--ghost-dark:hover { background-color: var(--foreground); color: var(--background); }

/* the photo: pinned to the bottom of the box, only the top corners rounded,
   so it reads as a window into the space rather than another card */
.ws-hero__media {
  position: relative;
  margin-top: auto;
  height: clamp(280px, 46vh, 520px);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
  box-shadow: 0 -24px 60px rgba(9, 138, 203, 0.12);
}
.ws-hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
/* single price pill on the photo */
.ws-hero__pill {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--foreground);
  font-size: var(--text-small);
  line-height: 1.2;
}
.ws-hero__pill strong { font-size: var(--text-large); font-weight: var(--fw-medium); letter-spacing: -0.01em; }

@media (max-width: 767px) {
  .ws-hero__content { padding-top: 120px; }
  .ws-hero__title { font-size: 2.5rem; }
  .ws-hero__media { height: 240px; }
  .ws-hero__pill { left: var(--space-sm); bottom: var(--space-sm); padding: 10px 16px; }
}