/* /stays hero: where / when / who on the left, the Guru on the right hauling a
   card in on a rope. Before a destination is picked that card is simply blank.
 *
 * The right-hand rig is the SAME technique as the homepage hero
 * (css/hero-film.css + js/hero-film.js): thirty discrete, colour-locked raster
 * drawings stacked on top of each other, exactly one carrying [data-on],
 * stepped by a 30 FPS pose clock in JS. Nothing here crossfades, blurs or
 * tweens between poses, and no silhouette is generated in the browser.
 *
 * Like the homepage, there is no panel around the rig. The Guru and the card
 * he hauls sit straight on the page, and the card is clipped by the section
 * (overflow:hidden on .stays-hero-guru) at the viewport edge, so it arrives
 * from off-screen rather than out of a box.
 *
 * There is no caption anywhere in this hero and nothing explains the rig. The
 * resting state is the explanation: he is already mid-pull with an empty card
 * out on the rope, and picking a place fills that same card and brings it home.
 *
 * Geometry contract with js/stays-hero-guru.js. The script owns the live
 * numbers because they are measured against the VIEWPORT, not the stage:
 *   card width     = 72% of the stage width (CSS, below)
 *   card home left = set in px so the card's right edge lands 24px short of
 *                    the viewport's right edge - home is the corner
 *   card park left = 96px short of the viewport's right edge
 *   card rest left = back down the rope until the blank card hangs PAST the
 *                    viewport's right edge, the way the homepage hero's card
 *                    rests. Target 38% of its width; the pull is quantised to
 *                    thirty discrete poses, so it lands on ~34%
 *   guru baseline  = 88% of the stage height (his feet)
 * The percentages in this file are the static, pre-JS fallback for the same
 * arrangement. Change one of them here and change it in measure() as well.
 */

.stays-hero-guru{
  position:relative;
  display:flex;
  align-items:center;
  min-height:100svh;
  padding:clamp(148px,17vh,206px) 0 clamp(46px,7vh,84px);
  overflow:hidden;
  background:
    radial-gradient(118% 88% at 16% 24%,rgba(255,255,255,.98),rgba(255,255,255,.52) 44%,transparent 74%),
    var(--stay-paper,#f6f2ff);
  isolation:isolate;
}

.stays-hero-guru-grid{
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  align-items:center;
  gap:clamp(30px,4vw,64px);
  /* No width here: the element also carries .stays-shell, which owns the
     1180px measure this stylesheet loads after and would otherwise beat. */
}

/* --- Left: the where / when / who search ---------------------------------- */

.stays-hero-guru-search{
  position:relative;
  z-index:2;
  max-width:36rem;
}

.stays-hero-guru-search h1{
  margin:0;
  font-size:clamp(2.85rem,4.4vw,4.5rem);
  line-height:.94;
  letter-spacing:-.04em;
  text-wrap:balance;
}

.stays-hero-guru-form{
  --stays-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.2 5.1C4.4 6.35 5.65 7.5 7 8.6c1.3-1.15 2.5-2.35 3.7-3.6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  margin-top:clamp(26px,3.6vh,38px);
  padding:14px;
  display:grid;
  gap:2px;
  border:1px solid rgba(25,23,28,.1);
  border-radius:22px;
  background:rgba(255,255,255,.97);
  box-shadow:0 22px 62px rgba(35,18,63,.12);
}

/* The three fields are the proven .stays-search-field control from
   css/stays.css, restacked into one column. Only the divider needs re-drawing:
   the shared rule paints it as a vertical rule between side-by-side fields. */
.stays-hero-guru-form .stays-search-field{
  padding:22px 24px;
  grid-template-columns:30px minmax(0,1fr);
  gap:16px;
  border-radius:15px;
}

.stays-hero-guru-form .stays-search-field>svg{width:27px}

.stays-hero-guru-form .stays-search-field+.stays-search-field::before{
  inset:0 14px auto;
  width:auto;
  height:1px;
}

.stays-hero-guru-form .stays-search-field b{
  color:var(--stay-purple-dark,#3b147d);
  font-size:13.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.stays-hero-guru-form .stays-search-field>span{gap:4px}

.stays-hero-guru-form .stays-search-field select,
.stays-hero-guru-form .stays-search-field i{font-size:19px}

.stays-hero-guru-form .stays-search-field select{min-height:34px}

/* Drawn chevron, never a glyph: a masked SVG path so it inherits currentColor.
   Only the two select fields get one; the date field opens a native picker. */
.stays-hero-guru-field--select>span::after{
  content:"";
  position:absolute;
  right:0;
  bottom:9px;
  width:14px;
  height:14px;
  background:currentColor;
  -webkit-mask:var(--stays-chevron) center/contain no-repeat;
  mask:var(--stays-chevron) center/contain no-repeat;
  opacity:.48;
  pointer-events:none;
}

.stays-hero-guru-form .stays-search-submit{
  min-height:74px;
  margin-top:12px;
  border-radius:16px;
  font-size:17.5px;
}

.stays-hero-guru-form .stays-search-submit:focus-visible,
.stays-hero-guru-form .stays-search-field:focus-within{
  outline:3px solid var(--stay-purple,#5b21b6);
  outline-offset:2px;
}

.stays-hero-guru-status{
  min-height:1.2em;
  margin:14px 0 0;
  color:var(--stay-purple-dark,#3b147d);
  font-size:13.5px;
  line-height:1.5;
}

.stays-hero-guru-status:empty{margin-top:0}

.stays-hero-guru-live{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* --- Right: the haul stage ------------------------------------------------ */

/* Not a panel: an invisible measuring box the script positions against. No
   border, no fill, no clipping of its own - the section does the clipping. */
.stays-hero-guru-stage{
  --stays-guru-h:210px;
  --stays-guru-ratio:1.142857; /* 512 / 448, the frame canvas */
  position:relative;
  z-index:1;
  height:clamp(420px,56vh,600px);
}

/* Card home geometry. The percentages here are the no-JS resting state; the
   script replaces left with a px value measured off the viewport's right edge
   and holds the card partway along the rope until a destination is picked.

   One card, two states. Empty it is the site's own card surface and nothing
   else: white, the shared hairline, the shared shadow, no image, no text, no
   button, no shimmer. Picking a place fills this element rather than replacing
   it, so the thing he is already dragging is the thing that gets the photo. */
.stays-hero-guru-card{
  position:absolute;
  z-index:2;
  left:28%;
  top:14%;
  width:72%;
  height:66%;
  margin:0;
  overflow:hidden;
  border:1px solid var(--stay-line,rgba(76,29,149,.16));
  border-radius:16px;
  background:#fff;
  box-shadow:var(--stay-shadow,0 24px 80px rgba(50,24,89,.12));
  transform:none;
  will-change:transform;
}

.stays-hero-guru-card>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* display:grid below would otherwise beat the UA's [hidden]{display:none},
   and the empty state relies on the hidden attribute to keep the guide link
   out of the tab order before a destination is picked. */
.stays-hero-guru-card>img[hidden],
.stays-hero-guru-card-body[hidden]{display:none}

.stays-hero-guru-card-body{
  position:absolute;
  z-index:2;
  inset:auto 0 0;
  display:grid;
  justify-items:start;
  gap:5px;
  padding:clamp(18px,2.5vw,28px);
  color:#fff;
  background:linear-gradient(to top,rgba(14,9,24,.92),rgba(14,9,24,.58) 62%,transparent);
}

.stays-hero-guru-card-body small{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
}

.stays-hero-guru-card-body strong{
  font-size:clamp(1.5rem,2.3vw,2.1rem);
  line-height:1.04;
  letter-spacing:-.03em;
}

.stays-hero-guru-card-status{
  color:rgba(255,255,255,.86);
  font-size:13px;
  line-height:1.45;
}

.stays-hero-guru-card-link{
  min-height:48px;
  margin-top:9px;
  padding:.6rem 1.1rem;
  font-size:.86rem;
  gap:.45rem;
}

.stays-hero-guru-card-link .ds-arrow{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .3s var(--ease,cubic-bezier(.22,1,.36,1));
}

.stays-hero-guru-card-link:hover .ds-arrow{transform:translate(2px,-2px)}

.stays-hero-guru-card-link:focus-visible{
  outline:3px solid var(--signal-yellow,#f5ff63);
  outline-offset:3px;
}

/* The rig: thirty stacked frames, exactly one lit by [data-on]. Same contract
   as .hero-film-guru-rig on the homepage, kept as its own rules so nothing
   the homepage depends on has to move. */
.stays-hero-guru-rig{
  position:absolute;
  z-index:3;
  left:0;
  top:0;
  width:calc(var(--stays-guru-h) * var(--stays-guru-ratio));
  height:var(--stays-guru-h);
  opacity:0;
  pointer-events:none;
  transform-origin:center bottom;
  will-change:transform;
  contain:layout style;
  overflow:visible;
}

/* Positioned entirely by JS, so it stays hidden until the script has measured.
   Without the script the hero degrades to the working form on its own. */
.stays-hero-guru-stage[data-ready] .stays-hero-guru-rig{opacity:1}

.stays-hero-guru-rig img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  image-rendering:auto;
  backface-visibility:hidden;
  opacity:0;
}

.stays-hero-guru-rig img[data-on]{opacity:1}

/* Re-picking a destination sends the card back down the rope to the resting
   pull. The snap is covered by one short opacity dip on both the card and the
   rig - the poses themselves never crossfade. */
.stays-hero-guru-stage.is-swapping .stays-hero-guru-card,
.stays-hero-guru-stage.is-swapping .stays-hero-guru-rig{opacity:0}

.stays-hero-guru-stage[data-ready] .stays-hero-guru-card,
.stays-hero-guru-stage[data-ready] .stays-hero-guru-rig{transition:opacity .16s linear}

/* --- Responsive ----------------------------------------------------------- */

/* He has to get smaller before the card does. Below this width there is no
   longer room for his full width plus the whole card between the search column
   and the right edge, and the card is the half that must stay uncut. */
@media (max-width:1200px){
  .stays-hero-guru-stage{--stays-guru-h:164px;height:clamp(380px,48vh,520px)}
}

/* Still two columns here but barely, and at his 164px he leaves the card no
   rope to travel along. One more step down buys the haul back. */
@media (max-width:1080px){
  .stays-hero-guru-stage{--stays-guru-h:132px}
}

/* One column. The search comes first: it is the reason the page exists, and
   the stage is a consequence of using it. */
@media (max-width:900px){
  .stays-hero-guru{
    align-items:flex-start;
    min-height:0;
    padding-top:clamp(126px,15vh,168px);
  }

  .stays-hero-guru-grid{grid-template-columns:1fr;gap:30px}
  .stays-hero-guru-search{order:1;max-width:none}
  .stays-hero-guru-stage{order:2;--stays-guru-h:140px;height:min(64vw,420px)}
  .stays-hero-guru-search h1{font-size:clamp(2.6rem,9vw,3.6rem)}
}

/* Below this width the rig has no room to travel without the Guru shrinking to
   a smudge, so it is dropped entirely - it is decorative (aria-hidden) and
   carries no information. The card keeps everything that means anything: the
   photo, the name, the honest status line and the guide link. The script
   lands the card immediately at this width instead of hauling it. */
@media (max-width:620px){
  .stays-hero-guru-rig{display:none}

  /* He is not drawn at this width, so nothing hauls: the card simply sits at
     home, blank until a destination fills it. The stage keeps its height in
     both states so picking a place does not shove the page around. */
  .stays-hero-guru-stage{height:min(74vw,380px)}

  .stays-hero-guru-card{left:0;top:8%;width:100%;height:84%}

  /* Without the Guru at this width there is nobody holding the card, so an
     empty white panel reads as a broken image rather than a waiting state.
     Keep the reserved height (picking a place must not shove the page), but
     say what the card is for until a destination fills it. */
  .stays-hero-guru-card:not(.has-place){
    background:transparent;
    border-style:dashed;
    box-shadow:none;
  }
  .stays-hero-guru-card:not(.has-place)::after{
    content:"Pick a place to see its guide.";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    padding:0 24px;
    text-align:center;
    font-size:15px;
    line-height:1.5;
    color:rgba(16,37,60,.5);
  }
  .stays-hero-guru-form{padding:9px}
  .stays-hero-guru-form .stays-search-field{padding:13px 16px}
  .stays-hero-guru-form .stays-search-submit{min-height:60px}
}

@media (prefers-reduced-motion:reduce){
  .stays-hero-guru-card,
  .stays-hero-guru-rig{will-change:auto}

  .stays-hero-guru-card-link .ds-arrow,
  .stays-hero-guru-stage[data-ready] .stays-hero-guru-card,
  .stays-hero-guru-stage[data-ready] .stays-hero-guru-rig{transition:none}
}