/* ==========================================================================
   Page hero

   The same opening as the homepage: the film running behind a dark scrim, the
   navigation over it, a gold rule, the title in the display face and the
   page's own standfirst. Astra's header is stood down here because this hero
   carries the navigation itself.
   ========================================================================== */

body.w2e-page-hero .site-header,
body.w2e-page-hero .ast-main-header-wrap,
body.w2e-page-hero #masthead {
  display: none !important;
}

body.w2e-page-hero .site-content .ast-container,
body.w2e-page-hero .entry-content > .w2e-hero {
  margin-top: 0;
}

/* The hero sits inside the content column, so it steps out to the full width
   of the window. The column is a block, so this is safe. */
body.w2e-page-hero .w2e-hero--page {
  position: relative;
  /* The exact offset is set from the measured position of the column; these
     margins are only the starting point before that runs. */
  margin-left: 0;
  margin-right: 0;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  min-height: clamp(420px, 62vh, 620px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--w2e-ink);
  isolation: isolate;
}

body.w2e-page-hero .w2e-hero--page > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

body.w2e-page-hero .w2e-hero--page .w2e-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(6, 14, 22, .84) 0%, rgba(6, 14, 22, .58) 40%, rgba(6, 14, 22, .18) 72%, rgba(6, 14, 22, .34) 100%),
    linear-gradient(to bottom, rgba(6, 14, 22, .62) 0%, rgba(6, 14, 22, .12) 34%, rgba(6, 14, 22, .48) 100%);
}

/* Navigation */
body.w2e-page-hero .w2e-hero--page .w2e-nav {
  position: relative;
  /* Above the hero content, not level with it: the hero isolates its own
     stacking context, so the open language panel - however high its own
     z-index - was painted underneath .w2e-hero-content and swallowed every
     click meant for a language. */
  z-index: 30;
  /* Over the film, not on a band: the same as the homepage. */
  background: transparent !important;
  border: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  max-width: 1460px;
  margin-inline: auto;
  padding: clamp(1rem, 2.4vw, 1.75rem) clamp(1.15rem, 4vw, 3.5rem);
}

body.w2e-page-hero .w2e-hero--page .w2e-brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  flex: none;
}

body.w2e-page-hero .w2e-hero--page .w2e-brand img {
  height: clamp(56px, 6.2vw, 88px);
  max-height: none;
  max-width: 40vw;
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45));
}

body.w2e-page-hero .w2e-hero--page .w2e-brand__word {
  font-family: var(--w2e-serif);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 600;
}

body.w2e-page-hero .w2e-hero--page .w2e-brand__sub {
  font-family: var(--w2e-sans);
  font-size: .625rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-top: .35em;
}

body.w2e-page-hero .w2e-hero--page .w2e-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
}

body.w2e-page-hero .w2e-hero--page .w2e-menu a {
  position: relative;
  font-family: var(--w2e-sans);
  font-size: .9375rem;
  color: rgba(255, 255, 255, .92);
  text-decoration: none !important;
  padding-bottom: .35em;
}

body.w2e-page-hero .w2e-hero--page .w2e-menu a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--w2e-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--w2e-ease);
}

body.w2e-page-hero .w2e-hero--page .w2e-menu a:hover::after,
body.w2e-page-hero .w2e-hero--page .w2e-menu a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Headline */
body.w2e-page-hero .w2e-hero--page .w2e-hero-content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1460px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.15rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
}

body.w2e-page-hero .w2e-hero--page .w2e-hero-inner {
  max-width: 46rem;
  width: 100%;
}

/* On the listing page the search moves into the hero, and it needs the full
   measure rather than the width of a paragraph. */
body.w2e-page-hero .w2e-hero--page .w2e-hero-content:has(.w2e-hero-search) {
  align-items: flex-end;
}

body.w2e-page-hero .w2e-hero--page .w2e-hero-inner:has(.w2e-hero-search) {
  max-width: min(1320px, 100%);
}

body.w2e-page-hero .w2e-hero-search {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

body.w2e-page-hero .w2e-hero--page .w2e-hero-rule {
  display: block;
  width: 116px;
  height: 2px;
  background: var(--w2e-gold);
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

body.w2e-page-hero .w2e-hero--page h1,
body.w2e-page-hero .w2e-hero--page .w2e-hero-inner > h2 {
  font-family: var(--w2e-serif) !important;
  font-size: clamp(2.5rem, 6vw, 4.25rem) !important;
  line-height: 1.04 !important;
  font-weight: 600 !important;
  letter-spacing: -.02em;
  color: #FFFFFF !important;
  margin: 0 0 clamp(.75rem, 1.6vw, 1.15rem) !important;
}

body.w2e-page-hero .w2e-hero--page .subhead {
  font-family: var(--w2e-sans);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, .9);
  max-width: 38rem;
}

/* The theme's own page title, printed above the hero, says the same thing the
   hero says one line lower - and, being the first h1 in the document, it made
   the hero's own headline demote itself to an h2 and lose its styling. */
body.w2e-page-hero .entry-header,
body.w2e-page-hero .ast-single-post .entry-header,
body.w2e-page-hero .entry-header .entry-title {
  display: none !important;
}

/* The page's own title band and its in-page navigation are now saying the
   same thing the hero says, one screen apart. */
body.w2e-page-hero .rp-title-band,
body.w2e-page-hero .rp-header,
body.w2e-page-hero .entry-content > .w2e-page > .w2e-nav,
body.w2e-page-hero .entry-content .w2e-page > .w2e-nav {
  display: none !important;
}

/* The burger belongs to the narrow widths only. */
body.w2e-page-hero .w2e-hero--page .w2e-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
}

body.w2e-page-hero .w2e-drawer {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(6, 14, 22, .96);
  padding: clamp(4rem, 12vh, 7rem) clamp(1.5rem, 6vw, 3rem);
}

body.w2e-page-hero .w2e-drawer nav a {
  font-family: var(--w2e-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

@media (max-width: 1024px) {
  body.w2e-page-hero .w2e-hero--page .w2e-menu { display: none; }
  body.w2e-page-hero .w2e-hero--page .w2e-burger { display: inline-flex; }
  body.w2e-page-hero .w2e-hero--page .w2e-nav { gap: .75rem; }
}

@media (max-width: 600px) {
  body.w2e-page-hero .w2e-hero--page { min-height: 380px; }
  body.w2e-page-hero .w2e-hero--page .w2e-hero-inner { max-width: 100%; }
}

/* A device that asks for less motion gets the poster frame, not the film. */
@media (prefers-reduced-motion: reduce) {
  body.w2e-page-hero .w2e-hero--page > video { display: none; }
  body.w2e-page-hero .w2e-hero--page {
    background-size: cover;
    background-position: center;
  }
}

/* The theme's 60px gap above the content column. On a page that opens on a
   full-width hero it is 60px of white above the photograph. */
body.w2e-page-hero .site-content .content-area,
body.w2e-page-hero .site-content > .ast-container > .content-area {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   The hero, on a phone

   685px measured at 390 wide, which is four fifths of the screen before a
   visitor has seen anything. It is not the picture that makes it: the nav is
   101px, the two calls to action stack to 111px, and Estatik's search form -
   moved into the hero - is 219px on its own.

   The search stays untouched. It is the primary action on a property page and
   it is worth its height. What gives way is everything arranged around it: the
   two buttons sit side by side instead of one above the other, and the gaps
   between the rule, the headline, the standfirst and the buttons come down to
   phone spacing rather than desktop spacing scaled.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  body.w2e-page-hero .w2e-hero--page .w2e-hero__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: .5rem;
    margin-top: 1.05rem;
  }

  body.w2e-page-hero .w2e-hero--page .w2e-hero__actions > * {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: .6rem;
    font-size: .8rem;
    letter-spacing: .02em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.w2e-page-hero .w2e-hero--page .w2e-hero-rule { margin-bottom: .7rem; }
  body.w2e-page-hero .w2e-hero--page .w2e-hero-inner > h1,
  body.w2e-page-hero .w2e-hero--page .w2e-hero-inner > h2 { margin-bottom: .5rem; }

  body.w2e-page-hero .w2e-hero--page .subhead {
    font-size: .9rem;
    line-height: 1.5;
  }

  body.w2e-page-hero .w2e-hero--page .w2e-hero-search { margin-top: .95rem; }
}